├── .npmignore
├── .gitignore
├── src
    ├── index.js
    ├── directionForPassDefault.js
    ├── Blur.js
    ├── BlurV.js
    ├── Blur1D.js
    └── BlurV1D.js
├── package.json
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | lib/
2 | node_modules/
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Blur from "./Blur";
2 | import Blur1D from "./Blur1D";
3 | import BlurV from "./BlurV";
4 | import BlurV1D from "./BlurV1D";
5 | export { Blur, Blur1D, BlurV, BlurV1D };
6 | 


--------------------------------------------------------------------------------
/src/directionForPassDefault.js:
--------------------------------------------------------------------------------
 1 | const NORM = Math.sqrt(2) / 2;
 2 | 
 3 | export default (p, factor, total) => {
 4 |   const f = factor * 2 * Math.ceil(p / 2) / total;
 5 |   switch ((p - 1) % 4) { // alternate horizontal, vertical and 2 diagonals
 6 |     case 0:
 7 |       return [f, 0];
 8 |     case 1:
 9 |       return [0, f];
10 |     case 2:
11 |       return [f * NORM, f * NORM];
12 |     case 3:
13 |       return [f * NORM, -f * NORM];
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/src/Blur.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import Blur1D from "./Blur1D";
 4 | import directionForPassDefault from "./directionForPassDefault";
 5 | 
 6 | const Blur = ({
 7 |   width,
 8 |   height,
 9 |   pixelRatio,
10 |   factor,
11 |   children,
12 |   passes,
13 |   directionForPass
14 | }) => {
15 |   const rec = pass =>
16 |     pass <= 0 ? (
17 |       children
18 |     ) : (
19 |       <Blur1D
20 |         width={width}
21 |         height={height}
22 |         pixelRatio={pixelRatio}
23 |         direction={directionForPass(pass, factor, passes)}
24 |       >
25 |         {rec(pass - 1)}
26 |       </Blur1D>
27 |     );
28 |   return rec(passes);
29 | };
30 | 
31 | Blur.defaultProps = {
32 |   passes: 2,
33 |   directionForPass: directionForPassDefault
34 | };
35 | 
36 | Blur.propTypes = {
37 |   factor: PropTypes.number.isRequired,
38 |   children: PropTypes.any.isRequired,
39 |   passes: PropTypes.number,
40 |   directionForPass: PropTypes.func,
41 |   width: PropTypes.any,
42 |   height: PropTypes.any,
43 |   pixelRatio: PropTypes.number
44 | };
45 | 
46 | export default Blur;
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gl-react-blur",
 3 |   "version": "2.0.1",
 4 |   "description": "Universal gl-react multi-pass gaussian Blur effect with configurable intensity",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "compile": "rm -rf lib/ && babel --presets es2015,stage-1,react --source-maps -d lib src",
 8 |     "prepublish": "npm run compile"
 9 |   },
10 |   "dependencies": {
11 |     "prop-types": "^15.6.0"
12 |   },
13 |   "peerDependencies": {
14 |     "gl-react": "~2.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "babel-cli": "^6.4.5",
18 |     "babel-preset-es2015": "^6.3.13",
19 |     "babel-preset-react": "^6.3.13",
20 |     "babel-preset-stage-1": "^6.3.13"
21 |   },
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "git+ssh://git@github.com/gre/gl-react-blur.git"
25 |   },
26 |   "keywords": [
27 |     "gl-react",
28 |     "blur",
29 |     "gl",
30 |     "react",
31 |     "gauss",
32 |     "gaussian"
33 |   ],
34 |   "author": "Gaëtan Renaudeau",
35 |   "license": "MIT",
36 |   "bugs": {
37 |     "url": "https://github.com/gre/gl-react-blur/issues"
38 |   },
39 |   "homepage": "https://github.com/gre/gl-react-blur#readme"
40 | }
41 | 


--------------------------------------------------------------------------------
/src/BlurV.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import BlurV1D from "./BlurV1D";
 4 | import directionForPassDefault from "./directionForPassDefault";
 5 | 
 6 | const BlurV = ({
 7 |   width,
 8 |   height,
 9 |   map,
10 |   pixelRatio,
11 |   factor,
12 |   children,
13 |   passes,
14 |   directionForPass
15 | }) => {
16 |   const rec = pass =>
17 |     pass <= 0 ? (
18 |       children
19 |     ) : (
20 |       <BlurV1D
21 |         width={width}
22 |         height={height}
23 |         map={map}
24 |         pixelRatio={pixelRatio}
25 |         direction={directionForPass(pass, factor, passes)}
26 |       >
27 |         {rec(pass - 1)}
28 |       </BlurV1D>
29 |     );
30 |   return rec(passes);
31 | };
32 | 
33 | BlurV.defaultProps = {
34 |   passes: 2,
35 |   directionForPass: directionForPassDefault
36 | };
37 | 
38 | BlurV.propTypes = {
39 |   factor: PropTypes.number.isRequired,
40 |   children: PropTypes.any.isRequired,
41 |   passes: PropTypes.number,
42 |   directionForPass: PropTypes.func,
43 |   map: PropTypes.any.isRequired,
44 |   width: PropTypes.any,
45 |   height: PropTypes.any,
46 |   pixelRatio: PropTypes.number
47 | };
48 | 
49 | export default BlurV;
50 | 


--------------------------------------------------------------------------------
/src/Blur1D.js:
--------------------------------------------------------------------------------
 1 | import { Shaders, Uniform, Node } from "gl-react";
 2 | import React from "react";
 3 | import PropTypes from "prop-types";
 4 | 
 5 | const shaders = Shaders.create({
 6 |   blur1D: {
 7 |     // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur
 8 |     frag: `precision highp float;
 9 | varying vec2 uv;
10 | uniform sampler2D t;
11 | uniform vec2 direction, resolution;
12 | 
13 | vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
14 |   vec4 color = vec4(0.0);
15 |   vec2 off1 = vec2(1.3846153846) * direction;
16 |   vec2 off2 = vec2(3.2307692308) * direction;
17 |   color += texture2D(image, uv) * 0.2270270270;
18 |   color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
19 |   color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
20 |   color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
21 |   color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
22 |   return color;
23 | }
24 | 
25 | void main () {
26 |   gl_FragColor = blur9(t, uv, resolution, direction);
27 | }`
28 |   }
29 | });
30 | 
31 | const Blur1D = ({ width, height, pixelRatio, direction, children: t }) => (
32 |   <Node
33 |     shader={shaders.blur1D}
34 |     width={width}
35 |     height={height}
36 |     pixelRatio={pixelRatio}
37 |     uniforms={{
38 |       direction,
39 |       resolution: Uniform.Resolution,
40 |       t
41 |     }}
42 |   />
43 | );
44 | 
45 | Blur1D.propTypes = {
46 |   direction: PropTypes.array.isRequired,
47 |   children: PropTypes.any.isRequired
48 | };
49 | 
50 | export default Blur1D;
51 | 


--------------------------------------------------------------------------------
/src/BlurV1D.js:
--------------------------------------------------------------------------------
 1 | import { Shaders, Uniform, Node } from "gl-react";
 2 | import React from "react";
 3 | import PropTypes from "prop-types";
 4 | 
 5 | const shaders = Shaders.create({
 6 |   blur1D: {
 7 |     // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur
 8 |     frag: `precision highp float;
 9 | varying vec2 uv;
10 | uniform sampler2D t, map;
11 | uniform vec2 direction, resolution;
12 | 
13 | vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
14 |   vec4 color = vec4(0.0);
15 |   vec2 off1 = vec2(1.3846153846) * direction;
16 |   vec2 off2 = vec2(3.2307692308) * direction;
17 |   color += texture2D(image, uv) * 0.2270270270;
18 |   color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
19 |   color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
20 |   color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
21 |   color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
22 |   return color;
23 | }
24 | 
25 | void main () {
26 |   gl_FragColor = blur9(t, uv, resolution, direction * texture2D(map, uv).rg);
27 | }`
28 |   }
29 | });
30 | 
31 | const BlurV1D = ({
32 |   width,
33 |   height,
34 |   map,
35 |   pixelRatio,
36 |   direction,
37 |   children: t
38 | }) => (
39 |   <Node
40 |     shader={shaders.blur1D}
41 |     width={width}
42 |     height={height}
43 |     pixelRatio={pixelRatio}
44 |     uniforms={{
45 |       direction,
46 |       resolution: Uniform.Resolution,
47 |       t,
48 |       map
49 |     }}
50 |   />
51 | );
52 | 
53 | BlurV1D.propTypes = {
54 |   direction: PropTypes.array.isRequired,
55 |   children: PropTypes.any.isRequired,
56 |   map: PropTypes.any.isRequired
57 | };
58 | 
59 | export default BlurV1D;
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # gl-react-blur ![](https://img.shields.io/npm/v/gl-react-blur.svg) ![](https://img.shields.io/badge/gl--react-3-05F561.svg) ![](https://img.shields.io/badge/gl--react-dom%20%7C%20native-f90.svg)
 2 | 
 3 | [Universal](https://projectseptemberinc.gitbooks.io/gl-react/content/docs/universal.html) gl-react **multi-pass gaussian Blur effect** with configurable intensity.
 4 | 
 5 | ## `{Blur}` Props
 6 | 
 7 | * `children` **(required)**: the content to blur.
 8 | * `factor` **(required)**: positive number that control the blur intensity (independently from the viewport size).
 9 | * `passes`: integer that controls the number of linear Blur passes. Default to 2. You better you an even number.
10 | 
11 | More advanced...
12 | 
13 | * `directionForPass`: function that gives the linear blur direction for a given pass. `(p, factor, total) => [ dx, dy ]`. Default to a function that do a _{ horizontal, vertical, diagonal 1, diagonal 2 }_ rotation with varying intensity.
14 | 
15 | ## `{BlurV}` Props
16 | 
17 | **BlurV** is a variant of **Blur** that allows to make **Variable** blur effect.
18 | 
19 | It accepts one more prop:
20 | 
21 | * `map` **(required)**: a texture that localize the blur intensity.
22 | 
23 | ## Usage Examples
24 | 
25 | ```js
26 | var Blur = require("gl-react-blur").Blur;
27 | // or
28 | import { Blur } from "gl-react-blur";
29 | ```
30 | 
31 | ### Small blur on an image
32 | 
33 | ```html
34 | <Blur factor={0.5} passes={2}>
35 |   http://i.imgur.com/zJIxPEo.jpg
36 | </Blur>
37 | ```
38 | 
39 | ### Medium blur on a video
40 | 
41 | ```html
42 | <Blur factor={2} passes={4}>
43 |   <video ... />
44 | </Blur>
45 | ```
46 | 
47 | ### Powerful blur on another stack of effects
48 | 
49 | ```html
50 | <Blur factor={20} passes={6}>
51 |   <EffectA>
52 |     <EffectB>
53 |       ...
54 |     </EffectB>
55 |   </EffectA>
56 | </Blur>
57 | ```
58 | 
59 | ### Variable Blur
60 | 
61 | ```html
62 | <BlurV factor={3} passes={6} map="http://i.imgur.com/SzbbUvX.png">
63 |   ...
64 | </BlurV>
65 | ```
66 | 


--------------------------------------------------------------------------------