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
-[](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 ;
+ }
+}
+```
+
+
+
+## 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 `` or a ``.
+
+
+## Advanced Effects demo
+
+[](http://projectseptemberinc.github.io/gl-react)