# 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
const Blur1D = GL.createComponent(
  ({ width, height, direction, children }) =>
    <GL.View
      shader={shaders.blur1D}
      width={width}
      height={height}
      uniforms={{
        direction,
        resolution: [ width, height ]
      }}>
      <GL.Uniform name="t">{children}</GL.Uniform>
    </GL.View>
, {
  displayName: "Blur1D"
});
```

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

```js
const Blur = GL.createComponent(({ width, height, factor, children }) =>
    <Blur1D width={width} height={height} direction={[ factor, 0 ]}>
      <Blur1D width={width} height={height} direction={[ 0, factor ]}>
        {children}
      </Blur1D>
    </Blur1D>
, {
  displayName: "Blur"
});
```

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

### 4-pass

(Used in [Examples/Blur](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/Blur))

```js
const Blur = GL.createComponent(({ width, height, factor, children }) => {
  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>
  );
});
```

### N-pass

(Used in [Examples/VideoBlur](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/VideoBlur))

```js
const React = require("react");
const GL = require("gl-react");
const {
  PropTypes
} = React;
const Blur1D = require("./Blur1D");

const NORM = Math.sqrt(2)/2;

function directionForPass (p, factor, total) {
  const f = factor * p / total;
  switch (p%4) {
  case 0: return [f,0];
  case 1: return [0,f];
  case 2: return [f*NORM,f*NORM];
  case 3: return [f*NORM,-f*NORM];
  }
  return p%2 ? [f,0] : [0,f];
}

module.exports = GL.createComponent(
  ({ width, height, factor, children, passes, ...rest }) => {
    const rec = p => p <= 0 ? children :
    <Blur1D {...rest} width={width} height={height} direction={directionForPass(p, factor, passes)}>
      {rec(p-1)}
    </Blur1D>;
    return rec(passes);
  },
  {
    displayName: "Blur",
    defaultProps: {
      passes: 2
    },
    propTypes: {
      width: PropTypes.number,
      height: PropTypes.number,
      factor: PropTypes.number.isRequired,
      children: PropTypes.any.isRequired,
      passes: PropTypes.number
    }
  });
```


**Usages:**

- Small blur:

```html
<Blur factor={0.5} passes={2} width={w} height={h}>{any}</Blur>
```

- Medium blur:

```html
<Blur factor={2} passes={4} width={w} height={h}>{any}</Blur>
```

- Powerful blur:

```html
<Blur factor={20} passes={6} width={w} height={h}>{any}</Blur>
```