add a new example for the 1.0.0

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

Examples/VideoBlur/Field.js

@@ -0,0 +1,39 @@
+const React = require("react");
+
+const styles = {
+  field: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    padding: "10px 0"
+  },
+  title: {
+    width: "200px",
+    textAlign: "right",
+    padding: "20px 40px",
+    fontSize: "2em",
+    fontFamily: "Helvetica"
+  },
+  range: {
+    flex: 1,
+    height: "50px"
+  }
+};
+
+class Field extends React.Component {
+  render () {
+    const { min, max, step, value, onChange, name, width } = this.props;
+    return <label style={{...styles.field, width: width+"px" }}>
+      <span style={styles.title}>{name}</span>
+      <input type="range"
+        style={styles.range}
+        min={min}
+        max={max}
+        step={step || 0.01}
+        value={value}
+        onChange={e => onChange(parseFloat(e.target.value))}
+      />
+    </label>;
+  }
+}
+module.exports = Field;

Examples/VideoBlur/HueRotate.js

@@ -0,0 +1,23 @@
+const React = require("react");
+const GL = require("gl-react");
+const glslify = require("glslify");
+
+const shaders = GL.Shaders.create({
+  hueRotate: {
+    frag: glslify(`${__dirname}/hueRotate.frag`)
+  }
+});
+
+class HueRotate extends GL.Component {
+  render () {
+    const { width, height, hue, children: tex } = this.props;
+    return <GL.View
+      shader={shaders.hueRotate}
+      width={width}
+      height={height}
+      uniforms={{ hue, tex }}
+    />;
+  }
+}
+
+module.exports = HueRotate;

Examples/VideoBlur/README.md

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

Examples/VideoBlur/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/VideoBlur/hueRotate.frag

@@ -0,0 +1,16 @@
+precision highp float;
+varying vec2 uv;
+uniform sampler2D tex;
+uniform float hue;
+
+const mat3 rgb2yiq = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);
+const mat3 yiq2rgb = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.1070, 1.7046);
+
+void main() {
+  vec3 yColor = rgb2yiq * texture2D(tex, uv).rgb;
+  float originalHue = atan(yColor.b, yColor.g);
+  float finalHue = originalHue + hue;
+  float chroma = sqrt(yColor.b*yColor.b+yColor.g*yColor.g);
+  vec3 yFinalColor = vec3(yColor.r, chroma * cos(finalHue), chroma * sin(finalHue));
+  gl_FragColor = vec4(yiq2rgb*yFinalColor, 1.0);
+}

Examples/VideoBlur/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>gl-react: Video</title>
+  <style>
+  body {
+    margin: 0;
+    background: #000;
+    color: #fff;
+    overflow: hidden;
+  }
+  #container > * {
+    margin: 10px auto;
+  }
+  </style>
+</head>
+<body>
+  <a href="https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/Video"><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/VideoBlur/index.js

@@ -0,0 +1,41 @@
+const React = require("react");
+const HueRotate = require("./HueRotate");
+const Blur = require("./Blur");
+const Field = require("./Field");
+
+class Demo extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      time: 0,
+      blur: 0,
+      blurPasses: 2,
+      hue: 0
+    };
+  }
+  componentDidMount () {
+    const loop = time => {
+      requestAnimationFrame(loop);
+      this.setState({ time: time / 1000 });
+    };
+    requestAnimationFrame(loop);
+  }
+  render () {
+    const { width, height } = this.props;
+    const { time, blur, hue, blurPasses } = this.state;
+    return <div style={{ width: width+"px" }}>
+        <Blur debug width={width} height={height} passes={blurPasses} factor={blur}>
+        <HueRotate hue={hue}>
+          <video autoPlay loop>
+            <source type="video/mp4" src="video.mp4" />
+          </video>
+        </HueRotate>
+      </Blur>
+      <Field min={0} max={2*Math.PI} value={hue} onChange={hue => this.setState({ hue })} name="Hue" width={width} />
+      <Field min={0} max={16} value={blur} onChange={blur => this.setState({ blur })} name="Blur" width={width} />
+      <Field min={2} max={8} step={1} value={blurPasses} onChange={blurPasses => this.setState({ blurPasses })} name="Blur Passes" width={width} />
+    </div>;
+  }
+}
+
+React.render(<Demo width={640} height={480} />, document.getElementById("container"));

Examples/VideoBlur/package.json

@@ -0,0 +1,30 @@
+{
+  "private": true,
+  "name": "gl-react-example-video",
+  "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",
+    "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",
+    "glslify": "^2.3.1",
+    "react": "^0.13.3"
+  }
+}