From 2f69f2c3e532b01eaed959e2d76cdce0a739e635 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= Date: Tue, 8 Sep 2015 15:12:10 +0200 Subject: [PATCH] Add a complex example useful to debug the #5 feature --- Examples/Tests/Add.js | 25 +++++++++++ Examples/Tests/Blur.js | 54 ++++++++++++++++++++++++ Examples/Tests/Blur1D.js | 38 +++++++++++++++++ Examples/Tests/Display2.js | 27 ++++++++++++ Examples/Tests/HelloGL.js | 28 +++++++++++++ Examples/Tests/Layer.js | 25 +++++++++++ Examples/Tests/Multiply.js | 25 +++++++++++ Examples/Tests/README.md | 2 + Examples/Tests/add.frag | 11 +++++ Examples/Tests/blur1D.frag | 11 +++++ Examples/Tests/display2.frag | 14 +++++++ Examples/Tests/index.html | 23 +++++++++++ Examples/Tests/index.js | 80 ++++++++++++++++++++++++++++++++++++ Examples/Tests/layer.frag | 11 +++++ Examples/Tests/multiply.frag | 11 +++++ Examples/Tests/package.json | 31 ++++++++++++++ 16 files changed, 416 insertions(+) create mode 100644 Examples/Tests/Add.js create mode 100644 Examples/Tests/Blur.js create mode 100644 Examples/Tests/Blur1D.js create mode 100644 Examples/Tests/Display2.js create mode 100644 Examples/Tests/HelloGL.js create mode 100644 Examples/Tests/Layer.js create mode 100644 Examples/Tests/Multiply.js create mode 100644 Examples/Tests/README.md create mode 100644 Examples/Tests/add.frag create mode 100644 Examples/Tests/blur1D.frag create mode 100644 Examples/Tests/display2.frag create mode 100644 Examples/Tests/index.html create mode 100644 Examples/Tests/index.js create mode 100644 Examples/Tests/layer.frag create mode 100644 Examples/Tests/multiply.frag create mode 100644 Examples/Tests/package.json 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 + + + + Fork me on GitHub +
+ + + 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" + } +}