diff --git a/Examples/Tests/Add.js b/Examples/Tests/Add.js
new file mode 100644
index 0000000..1c882ee
--- /dev/null
+++ b/Examples/Tests/Add.js
@@ -0,0 +1,25 @@
+const React = require("react");
+const GL = require("gl-react");
+const glslify = require("glslify");
+
+const shaders = GL.Shaders.create({
+ add: {
+ frag: glslify(`${__dirname}/add.frag`)
+ }
+});
+
+class Add extends GL.Component {
+ render () {
+ const { width, height, children } = this.props;
+ if (!children || children.length !== 2) throw new Error("You must provide 2 children to Add");
+ const [t1, t2] = children;
+ return ;
+ }
+}
+
+module.exports = Add;
diff --git a/Examples/Tests/Blur.js b/Examples/Tests/Blur.js
new file mode 100644
index 0000000..818593d
--- /dev/null
+++ b/Examples/Tests/Blur.js
@@ -0,0 +1,54 @@
+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];
+}
+
+/** Usages:
+ - Small blur:
+ {url}
+ - Medium blur:
+ {url}
+ - Powerful blur:
+ {url}
+ */
+class Blur extends GL.Component {
+ render () {
+ const { width, height, factor, children, passes } = this.props;
+
+ const rec = p => p <= 0 ? children :
+
+ {rec(p-1)}
+ ;
+
+ return rec(passes);
+ }
+}
+
+Blur.defaultProps = {
+ passes: 2
+};
+
+Blur.propTypes = {
+ width: PropTypes.number,
+ height: PropTypes.number,
+ factor: PropTypes.number.isRequired,
+ children: PropTypes.any.isRequired,
+ passes: PropTypes.number
+};
+
+module.exports = Blur;
diff --git a/Examples/Tests/Blur1D.js b/Examples/Tests/Blur1D.js
new file mode 100644
index 0000000..820f7b7
--- /dev/null
+++ b/Examples/Tests/Blur1D.js
@@ -0,0 +1,38 @@
+const React = require("react");
+const GL = require("gl-react");
+const glslify = require("glslify");
+
+const {
+ PropTypes
+} = React;
+
+const shaders = GL.Shaders.create({
+ blur1D: {
+ frag: glslify(`${__dirname}/blur1D.frag`)
+ }
+});
+
+class Blur1D extends GL.Component {
+ render () {
+ const { width, height, direction, children } = this.props;
+ return
+ {children}
+ ;
+ }
+}
+
+Blur1D.propTypes = {
+ width: PropTypes.number,
+ height: PropTypes.number,
+ direction: PropTypes.array.isRequired,
+ children: PropTypes.any.isRequired
+};
+
+module.exports = Blur1D;
diff --git a/Examples/Tests/Display2.js b/Examples/Tests/Display2.js
new file mode 100644
index 0000000..5e2aa0b
--- /dev/null
+++ b/Examples/Tests/Display2.js
@@ -0,0 +1,27 @@
+const React = require("react");
+const GL = require("gl-react");
+const glslify = require("glslify");
+
+const shaders = GL.Shaders.create({
+ display2: {
+ frag: glslify(`${__dirname}/display2.frag`)
+ }
+});
+
+class Display2 extends GL.Component {
+ render () {
+ const { width, height, children, vertical } = this.props;
+ if (!children || children.length !== 2) throw new Error("You must provide 2 children to Display2");
+ let [t1, t2] = children;
+ if (vertical) [t1,t2]=[t2,t1]; // just because webgl y's is reversed
+ return ;
+ }
+}
+
+module.exports = Display2;
diff --git a/Examples/Tests/HelloGL.js b/Examples/Tests/HelloGL.js
new file mode 100644
index 0000000..9008dae
--- /dev/null
+++ b/Examples/Tests/HelloGL.js
@@ -0,0 +1,28 @@
+const React = require("react");
+const GL = require("gl-react");
+
+const shaders = GL.Shaders.create({
+ helloGL: {
+ frag: `
+precision highp float;
+varying vec2 uv; // This variable vary in all pixel position (normalized from vec2(0.0,0.0) to vec2(1.0,1.0))
+
+void main () { // This function is called FOR EACH PIXEL
+ gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0); // red vary over X, green vary over Y, blue is 50%, alpha is 100%.
+}
+ `
+ }
+});
+
+class HelloGL extends GL.Component {
+ render () {
+ const { width, height } = this.props;
+ return ;
+ }
+}
+
+module.exports = HelloGL;
diff --git a/Examples/Tests/Layer.js b/Examples/Tests/Layer.js
new file mode 100644
index 0000000..22d445c
--- /dev/null
+++ b/Examples/Tests/Layer.js
@@ -0,0 +1,25 @@
+const React = require("react");
+const GL = require("gl-react");
+const glslify = require("glslify");
+
+const shaders = GL.Shaders.create({
+ layer: {
+ frag: glslify(`${__dirname}/layer.frag`)
+ }
+});
+
+class Layer extends GL.Component {
+ render () {
+ const { width, height, children } = this.props;
+ if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
+ const [t1, t2] = children;
+ return ;
+ }
+}
+
+module.exports = Layer;
diff --git a/Examples/Tests/Multiply.js b/Examples/Tests/Multiply.js
new file mode 100644
index 0000000..c05872e
--- /dev/null
+++ b/Examples/Tests/Multiply.js
@@ -0,0 +1,25 @@
+const React = require("react");
+const GL = require("gl-react");
+const glslify = require("glslify");
+
+const shaders = GL.Shaders.create({
+ multiply: {
+ frag: glslify(`${__dirname}/multiply.frag`)
+ }
+});
+
+class Multiply extends GL.Component {
+ render () {
+ const { width, height, children } = this.props;
+ if (!children || children.length !== 2) throw new Error("You must provide 2 children to Multiply");
+ const [t1, t2] = children;
+ return ;
+ }
+}
+
+module.exports = Multiply;
diff --git a/Examples/Tests/README.md b/Examples/Tests/README.md
new file mode 100644
index 0000000..a844d30
--- /dev/null
+++ b/Examples/Tests/README.md
@@ -0,0 +1,2 @@
+
+- [Web demo](http://projectseptemberinc.github.io/gl-react/Examples/Blur/)
diff --git a/Examples/Tests/add.frag b/Examples/Tests/add.frag
new file mode 100644
index 0000000..82362dd
--- /dev/null
+++ b/Examples/Tests/add.frag
@@ -0,0 +1,11 @@
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t1;
+uniform sampler2D t2;
+
+void main () {
+ vec4 c1 = texture2D(t1, uv);
+ vec4 c2 = texture2D(t2, uv);
+ gl_FragColor = c1 + c2;
+}
diff --git a/Examples/Tests/blur1D.frag b/Examples/Tests/blur1D.frag
new file mode 100644
index 0000000..676c449
--- /dev/null
+++ b/Examples/Tests/blur1D.frag
@@ -0,0 +1,11 @@
+precision highp float;
+varying vec2 uv;
+uniform sampler2D t;
+uniform vec2 resolution;
+uniform vec2 direction;
+
+#pragma glslify: blur = require('glsl-fast-gaussian-blur/13')
+
+void main () {
+ gl_FragColor = blur(t, uv, resolution, direction);
+}
diff --git a/Examples/Tests/display2.frag b/Examples/Tests/display2.frag
new file mode 100644
index 0000000..16950ec
--- /dev/null
+++ b/Examples/Tests/display2.frag
@@ -0,0 +1,14 @@
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t1;
+uniform sampler2D t2;
+uniform bool vertical;
+
+void main () {
+ float v = vertical ? 1.0 : 0.0;
+ vec2 p = uv * mix(vec2(2.0, 1.0), vec2(1.0, 2.0), v);
+ vec4 c1 = step(mix(p.x, p.y, v), 1.0) * texture2D(t1, p);
+ vec4 c2 = step(1.0, mix(p.x, p.y, v)) * texture2D(t2, p - vec2(1.0-v, v));
+ gl_FragColor = c1 + c2;
+}
diff --git a/Examples/Tests/index.html b/Examples/Tests/index.html
new file mode 100644
index 0000000..bbaa270
--- /dev/null
+++ b/Examples/Tests/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+ gl-react: Blur
+
+
+
+
+
+
+
+
diff --git a/Examples/Tests/index.js b/Examples/Tests/index.js
new file mode 100644
index 0000000..ef278da
--- /dev/null
+++ b/Examples/Tests/index.js
@@ -0,0 +1,80 @@
+const React = require("react");
+const Blur = require("./Blur");
+const Add = require("./Add");
+const Multiply = require("./Multiply");
+const Layer = require("./Layer");
+const HelloGL = require("./HelloGL");
+const Display2 = require("./Display2");
+const { Surface, Text } = require("react-canvas");
+const GL = require("gl-react");
+
+GL.Shaders.list().map(id => {
+ console.log(`Shader '${GL.Shaders.getName(id)}' -> ${id}`);
+});
+
+class Demo extends React.Component {
+ constructor (props) {
+ super(props);
+ window.addEventListener("click", e => {
+ e.preventDefault();
+ this.forceUpdate();
+ console.log("update");
+ });
+ }
+ render() {
+ const helloGL =
+ ;
+
+ const txt =
+
+ {[0,1,2,3].map(i =>
+ Hello World {i}
+ )}
+ ;
+
+ const img =
+ "http://i.imgur.com/zJIxPEo.jpg";
+
+ const blurredImage =
+
+ {img}
+ ;
+
+ const blurredImageOverText =
+
+ {blurredImage}
+ {txt}
+ ;
+
+ return
+
+
+ {txt}
+ {helloGL}
+
+
+
+
+ {blurredImageOverText}
+ {helloGL}
+
+
+ {blurredImage}
+
+
+ {txt}
+ ;
+
+
+ }
+}
+
+React.render(, document.getElementById("container"));
diff --git a/Examples/Tests/layer.frag b/Examples/Tests/layer.frag
new file mode 100644
index 0000000..559520c
--- /dev/null
+++ b/Examples/Tests/layer.frag
@@ -0,0 +1,11 @@
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t1;
+uniform sampler2D t2;
+
+void main () {
+ vec4 c1 = texture2D(t1, uv);
+ vec4 c2 = texture2D(t2, uv);
+ gl_FragColor = mix(c1, c2, c2.a);
+}
diff --git a/Examples/Tests/multiply.frag b/Examples/Tests/multiply.frag
new file mode 100644
index 0000000..f2aaf11
--- /dev/null
+++ b/Examples/Tests/multiply.frag
@@ -0,0 +1,11 @@
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t1;
+uniform sampler2D t2;
+
+void main () {
+ vec4 c1 = texture2D(t1, uv);
+ vec4 c2 = texture2D(t2, uv);
+ gl_FragColor = c1 * c2;
+}
diff --git a/Examples/Tests/package.json b/Examples/Tests/package.json
new file mode 100644
index 0000000..956ea06
--- /dev/null
+++ b/Examples/Tests/package.json
@@ -0,0 +1,31 @@
+{
+ "private": true,
+ "name": "gl-react-example-tests",
+ "version": "1.0.0",
+ "main": "index.js",
+ "license": "MIT",
+ "browserify": {
+ "transform": [
+ "babelify",
+ "glslify"
+ ]
+ },
+ "scripts": {
+ "start": "budo index.js:bundle.js | garnish",
+ "build": "NODE_ENV=production browserify index.js | uglifyjs -cm > bundle.js"
+ },
+ "devDependencies": {
+ "babelify": "^6.1.3",
+ "glslify": "^2.2.1",
+ "browserify": "^11.0.1",
+ "budo": "^4.1.0",
+ "garnish": "^2.2.2",
+ "uglify-js": "^2.4.24"
+ },
+ "dependencies": {
+ "gl-react": "file:../..",
+ "glsl-fast-gaussian-blur": "^1.0.2",
+ "react": "^0.13.3",
+ "react-canvas": "0.0.1"
+ }
+}