Add a complex example useful to debug the #5 feature

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 <GL.View
+      shader={shaders.add}
+      width={width}
+      height={height}
+      uniforms={{ t1, t2 }}
+    />;
+  }
+}
+
+module.exports = Add;

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:
+ <Blur factor={0.5} passes={2} width={w} height={h}>{url}</Blur>
+ - Medium blur:
+ <Blur factor={2} passes={4} width={w} height={h}>{url}</Blur>
+ - Powerful blur:
+ <Blur factor={20} passes={6} width={w} height={h}>{url}</Blur>
+ */
+class Blur extends GL.Component {
+  render () {
+    const { width, height, factor, children, passes } = this.props;
+
+    const rec = p => p <= 0 ? children :
+      <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
+        {rec(p-1)}
+      </Blur1D>;
+
+    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;

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 <GL.View
+      shader={shaders.blur1D}
+      width={width}
+      height={height}
+      uniforms={{
+        direction,
+        resolution: [ width, height ]
+      }}>
+      <GL.Uniform name="t">{children}</GL.Uniform>
+    </GL.View>;
+  }
+}
+
+Blur1D.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  direction: PropTypes.array.isRequired,
+  children: PropTypes.any.isRequired
+};
+
+module.exports = Blur1D;

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 <GL.View
+      shader={shaders.display2}
+      width={width}
+      height={height}
+      uniforms={{ t1, t2, vertical }}
+      debug={true}
+    />;
+  }
+}
+
+module.exports = Display2;

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 <GL.View
+      shader={shaders.helloGL}
+      width={width}
+      height={height}
+    />;
+  }
+}
+
+module.exports = HelloGL;

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 <GL.View
+      shader={shaders.layer}
+      width={width}
+      height={height}
+      uniforms={{ t1, t2 }}
+    />;
+  }
+}
+
+module.exports = Layer;

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 <GL.View
+      shader={shaders.multiply}
+      width={width}
+      height={height}
+      uniforms={{ t1, t2 }}
+    />;
+  }
+}
+
+module.exports = Multiply;

Examples/Tests/README.md

@@ -0,0 +1,2 @@
+
+- [Web demo](http://projectseptemberinc.github.io/gl-react/Examples/Blur/)

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

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

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

Examples/Tests/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>gl-react: Blur</title>
+  <style>
+  body {
+    margin: 0;
+    background: #000;
+    color: #fff;
+  }
+  #container > * {
+    margin: 10px auto;
+    text-align: center;
+  }
+  </style>
+</head>
+<body>
+  <a href="https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/Blur"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
+  <div id="container"></div>
+  <script src="bundle.js"></script>
+</body>
+</html>

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 =
+      <HelloGL width={64} height={64} />;
+
+    const txt =
+      <Surface width={800} height={800} top={0} left={0}>
+        {[0,1,2,3].map(i => <Text style={{
+          top: 40+200*i,
+          left: 0,
+          width: 800,
+          height: 200,
+          textAlign: "center",
+          color: ["#f00", "#0f0", "#00f", "#fff"][i],
+          fontSize: 80
+        }}>
+          Hello World {i}
+        </Text>)}
+      </Surface>;
+
+    const img =
+      "http://i.imgur.com/zJIxPEo.jpg";
+
+    const blurredImage =
+      <Blur factor={4} passes={6} width={200} height={200}>
+        {img}
+      </Blur>;
+
+    const blurredImageOverText =
+      <Layer>
+        {blurredImage}
+        {txt}
+      </Layer>;
+
+    return <Display2 width={600} height={600} vertical>
+        <Display2 width={600} height={300}>
+        <Add width={300} height={300}>
+          {txt}
+          {helloGL}
+        </Add>
+        <Display2 width={300} height={300} vertical>
+          <Blur factor={1} passes={4} width={300} height={150}>
+            <Multiply>
+              {blurredImageOverText}
+              {helloGL}
+            </Multiply>
+          </Blur>
+          {blurredImage}
+        </Display2>
+      </Display2>
+      {txt}
+    </Display2>;
+
+
+  }
+}
+
+React.render(<Demo />, document.getElementById("container"));

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

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

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"
+  }
+}