diff --git a/Examples/AdvancedEffects/index.js b/Examples/AdvancedEffects/index.js index be19cf2..6823282 100644 --- a/Examples/AdvancedEffects/index.js +++ b/Examples/AdvancedEffects/index.js @@ -5,4 +5,4 @@ document.body.style.margin = "0"; document.body.style.color = "#fff"; document.body.style.backgroundColor = "#000"; -React.render(, document.body); +React.render(, document.body); diff --git a/Examples/AdvancedEffects/src/Banner.js b/Examples/AdvancedEffects/src/Banner.js index deda387..5890155 100644 --- a/Examples/AdvancedEffects/src/Banner.js +++ b/Examples/AdvancedEffects/src/Banner.js @@ -12,13 +12,13 @@ void main( void ) { color += sin( uv.x * cos( time / 15.0 ) * 80.0 ) + cos( uv.y * cos( time / 15.0 ) * 10.0 ); color += sin( uv.y * sin( time / 10.0 ) * 40.0 ) + cos( uv.x * sin( time / 25.0 ) * 40.0 ); color += sin( uv.x * sin( time / 5.0 ) * 10.0 ) + sin( uv.y * sin( time / 35.0 ) * 80.0 ); - color *= sin( time / 10.0 ) * 0.5; + color *= sin( time / 10.0 ); gl_FragColor = vec4( - smoothstep(0.0, 1.5, color), - smoothstep(0.0, 0.5, color), - smoothstep(1.0, 0.6, color) - smoothstep(0.1, 0.0, color), + smoothstep(0.8, 1.6, color), + smoothstep(0.1, 0.3, color), + smoothstep(1.0, 0.2, color) - smoothstep(0.1, 0.0, color), color - ) * (pow(uv.y, 2.0)); + ) * (pow(uv.y, 0.8)); } ` } diff --git a/Examples/AdvancedEffects/src/index.js b/Examples/AdvancedEffects/src/index.js index 1ed46e1..9a2628c 100644 --- a/Examples/AdvancedEffects/src/index.js +++ b/Examples/AdvancedEffects/src/index.js @@ -8,7 +8,7 @@ const styles = { root: { position: "relative", display: "block", - margin: "20px auto", + margin: "0px auto", backgroundColor: "#111" } }; diff --git a/README.md b/README.md index 0af4746..5d8ef1c 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,43 @@ # gl-react -WebGL bindings for react to implement complex effects over images in VDOM descriptive paradigm. +WebGL bindings for react to implement complex effects over images, in VDOM descriptive paradigm. -## Demo +### HelloGL Gist -[![](https://cloud.githubusercontent.com/assets/211411/9384480/0ccb45a4-4751-11e5-845c-de00bfe30b6a.png)](http://projectseptemberinc.github.io/gl-react) +```js +const React = require("react-native"); +const GL = require("gl-react-native"); + +const shaders = GL.Shaders.create({ + helloGL: { + frag: ` +precision highp float; +varying vec2 uv; +void main () { + gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0); +}` + } +}); + +class HelloGL extends React.Component { + render () { + const { width, height } = this.props; + return ; + } +} +``` + +![](https://cloud.githubusercontent.com/assets/211411/9386550/432492c6-475c-11e5-9328-f3d5187298c1.jpg) + +## Installation + +``` +npm i --save gl-react +``` ## Docs and difference with `gl-react-native` @@ -22,3 +55,8 @@ Instead of adopting React Native `{uri: "http://..."}` format, you can simply se `GL.Target` have a more limited support because the web does not allow to draw DOM element in Canvas. Only one child is supported per `GL.Target` and it MUST be either: an ``, a `