add a third example that shows a cache issue

Examples/Simple/BlurX.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  blurX: {
+    frag: `
+precision highp float;
+varying vec2 uv;
+uniform sampler2D image;
+uniform float factor;
+uniform vec2 resolution;
+
+// from https://github.com/Jam3/glsl-fast-gaussian-blur
+vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+  vec4 color = vec4(0.0);
+  vec2 off1 = vec2(1.411764705882353) * direction;
+  vec2 off2 = vec2(3.2941176470588234) * direction;
+  vec2 off3 = vec2(5.176470588235294) * direction;
+  color += texture2D(image, uv) * 0.1964825501511404;
+  color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344;
+  color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344;
+  color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732;
+  color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732;
+  color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057;
+  color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057;
+  return color;
+}
+
+void main () {
+  gl_FragColor = blur13(image, uv, resolution, vec2(factor, 0.0));
+}
+    `
+  }
+});
+
+class BlurX extends React.Component {
+  render () {
+    const { width, height, factor, children } = this.props;
+    return <GL.View
+      shader={shaders.blurX}
+      width={width}
+      height={height}
+      uniforms={{
+        factor,
+        resolution: [ width, height ]
+      }}>
+      <GL.Target uniform="image">{children}</GL.Target>
+    </GL.View>;
+  }
+}
+
+module.exports = BlurX;

Examples/Simple/HueRotate.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  hueRotate: {
+    frag: `
+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);
+}
+    `
+  }
+});
+
+class HueRotate extends React.Component {
+  render () {
+    const { width, height, hue, children } = this.props;
+    return <GL.View
+      shader={shaders.hueRotate}
+      width={width}
+      height={height}
+      uniforms={{
+        hue
+      }}>
+      <GL.Target uniform="tex">{children}</GL.Target>
+    </GL.View>;
+  }
+}
+
+module.exports = HueRotate;

Examples/Simple/Sepia.js → Examples/Simple/Saturation.js

@@ -2,28 +2,28 @@ const React = require("react-native");
 const GL = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
-  sepia: {
+  saturation: {
     frag: `
 precision highp float;
 varying vec2 uv;
 uniform sampler2D image;
 uniform float factor;
 
-const vec3 sepia = vec3(0.44, 0.26, 0.08);
-
 void main () {
   vec4 c = texture2D(image, uv);
-  gl_FragColor = vec4(mix(c.rgb, sepia, factor), c.a);
+  // Algorithm from Chapter 16 of OpenGL Shading Language
+  const vec3 W = vec3(0.2125, 0.7154, 0.0721);
+  gl_FragColor = vec4(mix(vec3(dot(c.rgb, W)), c.rgb, factor), c.a);
 }
     `
   }
 });
 
-class Sepia extends React.Component {
+class Saturation extends React.Component {
   render () {
     const { width, height, factor, image } = this.props;
     return <GL.View
-      shader={shaders.sepia}
+      shader={shaders.saturation}
       width={width}
       height={height}
       uniforms={{ factor, image }}
@@ -31,4 +31,4 @@ class Sepia extends React.Component {
   }
 }
 
-module.exports = Sepia;
+module.exports = Saturation;

Examples/Simple/index.ios.js

@@ -4,41 +4,91 @@ const {
   StyleSheet,
   Text,
   View,
+  Image,
+  TextInput,
   ScrollView,
+  SliderIOS,
 } = React;
 
 const HelloGL = require("./HelloGL");
-const Sepia = require("./Sepia");
+const Saturation = require("./Saturation");
+const HueRotate = require("./HueRotate");
+
+class Simple extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      saturationFactor: 1,
+      hue: 0,
+      text: "and I will return leading the pack"
+    };
+  }
+
+  render () {
+
+    const {
+      saturationFactor,
+      hue,
+      text
+    } = this.state;
 
-const Simple = React.createClass({
-  render: function() {
     return <ScrollView style={styles.container}>
       <Text style={styles.title}>
         Welcome to GL React Native!
       </Text>
       <View style={styles.demos}>
+
         <Text style={styles.demoTitle}>1. Hello GL</Text>
         <View style={styles.demo}>
-          <HelloGL width={256} height={144} />
+          <HelloGL width={256} height={171} />
         </View>
 
-        <Text style={styles.demoTitle}>2. Sepia on an Image</Text>
+        <Text style={styles.demoTitle}>2. Saturation on an Image</Text>
         <View style={styles.demo}>
-          <Sepia
+          <Saturation
             width={256}
-            height={144}
-            factor={0.6}
-            image={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }} />
+            height={171}
+            factor={saturationFactor}
+            image={{ uri: "http://i.imgur.com/iPKTONG.jpg" }}
+          />
+        <SliderIOS
+          value={saturationFactor}
+          maximumValue={8}
+          onValueChange={saturationFactor => this.setState({ saturationFactor })}
+        />
         </View>
+
+        <Text style={styles.demoTitle}>3. Hue Rotation on Text + Image</Text>
+        <View style={styles.demo}>
+          <HueRotate
+            width={256}
+            height={180}
+            hue={hue}>
+            <Image style={{ width: 256, height: 244 }} source={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }}/>
+            <Text style={styles.demoText1}>Throw me to the wolves</Text>
+            <Text style={styles.demoText2}>{text}</Text>
+          </HueRotate>
+          <SliderIOS
+            value={hue}
+            maximumValue={2 * Math.PI}
+            onValueChange={hue => this.setState({ hue })}
+          />
+          <TextInput
+            style={{ height: 30, borderColor: "#aaa", borderWidth: 1 }}
+            onChangeText={text => this.setState({ text })}
+            value={text}
+          />
+        </View>
+
       </View>
     </ScrollView>;
   }
-});
+}
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
+    backgroundColor: "#F9F9F9",
   },
   title: {
     fontSize: 20,
@@ -57,6 +107,30 @@ const styles = StyleSheet.create({
     margin: 5,
     fontStyle: "italic"
   },
+  demoText1: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: 256,
+    textAlign: "center",
+    color: "#f16",
+    backgroundColor: "transparent",
+    fontWeight: "400",
+    fontSize: 24,
+    letterSpacing: 0
+  },
+  demoText2: {
+    position: "absolute",
+    bottom: 4,
+    left: 0,
+    width: 256,
+    textAlign: "center",
+    color: "#7bf",
+    backgroundColor: "transparent",
+    fontWeight: "300",
+    fontSize: 32,
+    letterSpacing: -1
+  },
 });
 
 AppRegistry.registerComponent("Simple", () => Simple);