gl-react/docs/examples/7.md

# Blur (2-Pass)

```html
<Blur width={256} height={180} factor={factor}>
  http://i.imgur.com/3On9QEu.jpg
</Blur>
```

![](7.gif)

## Implementation

The classical example where you need multiple pass is **Blur**.
Implementing an efficient and realist Blur is tricky,
one simple and fast way is to implement it with 2-Pass (on X and on Y).
To do that, we first define a one dimensional Blur (`Blur1D`)
and stack it into these 2 passes.

```js
class Blur1D extends GL.Component {
  render () {
    const { width, height, direction, children } = this.props;
    return <GL.View
      shader={shaders.blur1D}
      width={width}
      height={height}
      uniforms={{
        direction,
        resolution: [ width, height ]
      }}>
      <GL.Target uniform="t">{children}</GL.Target>
    </GL.View>;
  }
}
```

And then, we create a Blur that composes Blur1D two times:

```js
class Blur extends GL.Component {
  render () {
    const { width, height, factor, children } = this.props;
    const sharedProps = { width, height };
    return <Blur1D direction={[ factor, 0 ]} {...sharedProps}>
      <Blur1D direction={[ 0, factor ]} {...sharedProps}>
        {children}
      </Blur1D>
    </Blur1D>;
  }
}
```

In this simple example, `Blur` has 2 passes: one on X dimension, then one on Y dimension.

For a more advanced (4-Pass) example, see [Examples/Blur](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/Blur).

**Extract:**

```js
class Blur4Pass extends GL.Component {
  render () {
    const { width, height, children, factor } = this.props;
    const sharedProps = { width, height };
    return (
      <Blur1D {...sharedProps} direction={[ factor, 0 ]}>
        <Blur1D {...sharedProps} direction={[ 0, factor ]}>
          <Blur1D {...sharedProps} direction={[ -factor/Math.sqrt(2), factor/Math.sqrt(2) ]}>
            <Blur1D {...sharedProps} direction={[ factor/Math.sqrt(2), factor/Math.sqrt(2) ]}>
              {children}
            </Blur1D>
          </Blur1D>
        </Blur1D>
      </Blur1D>
    );
  }
}
```