make the Simple blur over ui example more efficient & more profile

Examples/Simple/src/Blur1D.js

@@ -11,23 +11,20 @@ uniform vec2 direction;
 uniform vec2 resolution;
 
 // from https://github.com/Jam3/glsl-fast-gaussian-blur
-vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+vec4 blur9(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;
+  vec2 off1 = vec2(1.3846153846) * direction;
+  vec2 off2 = vec2(3.2307692308) * direction;
+  color += texture2D(image, uv) * 0.2270270270;
+  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
+  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
+  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
+  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
   return color;
 }
 
 void main () {
-  gl_FragColor = blur13(t, uv, resolution, direction);
+  gl_FragColor = blur9(t, uv, resolution, direction);
 }
     `
   }

Examples/Simple/src/index.js

@@ -256,25 +256,20 @@ class Simple extends Component {
                 width={256}
                 height={160}
                 factor={factor}>
-                <Blur
-                  width={256}
-                  height={160}
-                  factor={factor/2}>
-                  <View style={{ width: 256, height: 160, padding: 10, backgroundColor: "#f9f9f9" }}>
-                    <Slider
-                      style={{ height: 80 }}
-                      max={2}
-                      onChange={factor => this.setState({ factor })}
-                    />
-                  <View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
-                    <Switch style={{flex:1}} checked={switch1} onCheckedChange={({checked:switch1}) => this.setState({ switch1 })} />
-                    <Switch style={{flex:1}} checked={switch2} onCheckedChange={({checked:switch2}) => this.setState({ switch2 })} />
-                    <Switch style={{flex:1}} checked={switch3} onCheckedChange={({checked:switch3}) => this.setState({ switch3 })} />
-                  </View>
-                  <Progress progress={factor} style={{height: 10, marginTop: 8, flex:1}} />
+                <View style={{ width: 256, height: 160, padding: 10, backgroundColor: "#f9f9f9" }}>
+                  <Slider
+                    style={{ height: 80 }}
+                    max={1}
+                    onChange={factor => this.setState({ factor })}
+                  />
+                <View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
+                  <Switch style={{flex:1}} checked={switch1} onCheckedChange={({checked:switch1}) => this.setState({ switch1 })} />
+                  <Switch style={{flex:1}} checked={switch2} onCheckedChange={({checked:switch2}) => this.setState({ switch2 })} />
+                  <Switch style={{flex:1}} checked={switch3} onCheckedChange={({checked:switch3}) => this.setState({ switch3 })} />
+                </View>
+                <Progress progress={factor} style={{height: 10, marginTop: 8, flex:1}} />
 
-                  </View>
-                </Blur>
+                </View>
               </Blur>
             </HueRotate>
           </Surface>

ios/GLCanvas.m

-
 #import "RCTBridge.h"
 #import "RCTUtils.h"
 #import "RCTConvert.h"
@@ -492,6 +491,9 @@ RCT_NOT_IMPLEMENTED(-init)
       for (GLRenderData *child in renderData.children)
         weak_recDraw(child);
 
+      RCT_PROFILE_BEGIN_EVENT(0, @"node", nil);
+
+      RCT_PROFILE_BEGIN_EVENT(0, @"bind fbo", nil);
       if (renderData.fboId == -1) {
         glBindFramebuffer(GL_FRAMEBUFFER, defaultFBO);
         glViewport(0, 0, w, h);
@@ -501,23 +503,34 @@ RCT_NOT_IMPLEMENTED(-init)
         [fbo setShapeWithWidth:w withHeight:h];
         [fbo bind];
       }
+      RCT_PROFILE_END_EVENT(0, @"gl", nil);
 
+      RCT_PROFILE_BEGIN_EVENT(0, @"bind shader", nil);
       [renderData.shader bind];
+      RCT_PROFILE_END_EVENT(0, @"gl", nil);
 
+      RCT_PROFILE_BEGIN_EVENT(0, @"bind textures", nil);
       for (NSString *uniformName in renderData.textures) {
         GLTexture *texture = renderData.textures[uniformName];
         int unit = [((NSNumber *)renderData.uniforms[uniformName]) intValue];
         [texture bind:unit];
       }
+      RCT_PROFILE_END_EVENT(0, @"gl", nil);
 
+      RCT_PROFILE_BEGIN_EVENT(0, @"bind set uniforms", nil);
       for (NSString *uniformName in renderData.uniforms) {
         [renderData.shader setUniform:uniformName withValue:renderData.uniforms[uniformName]];
       }
+      RCT_PROFILE_END_EVENT(0, @"gl", nil);
 
+      RCT_PROFILE_BEGIN_EVENT(0, @"draw", nil);
       glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
       glClearColor(0.0, 0.0, 0.0, 0.0);
       glClear(GL_COLOR_BUFFER_BIT);
       glDrawArrays(GL_TRIANGLES, 0, 6);
+      RCT_PROFILE_END_EVENT(0, @"gl", nil);
+
+      RCT_PROFILE_END_EVENT(0, @"gl", nil);
     };
 
     // DRAWING THE SCENE