gl-react/docs/examples/7.md

Blur (2-Pass)

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

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.

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:

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.

Extract:

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>
    );
  }
}