examples use gl-react-blur

example/src/Simple/Blur.js

-const GL = require("gl-react");
-const React = require("react");
-const Blur1D = require("./Blur1D");
-
-module.exports = GL.createComponent(({ width, height, factor, children }) =>
-    <Blur1D width={width} height={height} direction={[ factor, 0 ]}>
-      <Blur1D width={width} height={height} direction={[ 0, factor ]}>
-        {children}
-      </Blur1D>
-    </Blur1D>
-, {
-  displayName: "Blur"
-});

example/src/Simple/Blur1D.js

-const GL = require("gl-react");
-const React = require("react");
-
-const shaders = GL.Shaders.create({
-  blur1D: {
-    frag: `
-precision highp float;
-varying vec2 uv;
-uniform sampler2D t;
-uniform vec2 direction;
-uniform vec2 resolution;
-
-// from https://github.com/Jam3/glsl-fast-gaussian-blur
-vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
-  vec4 color = vec4(0.0);
-  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 = blur9(t, uv, resolution, direction);
-}
-    `
-  }
-});
-
-module.exports = GL.createComponent(
-  ({ width, height, direction, children }) =>
-    <GL.Node
-      shader={shaders.blur1D}
-      width={width}
-      height={height}
-      uniforms={{
-        direction,
-        resolution: [ width, height ]
-      }}>
-      <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.Node>
-, {
-  displayName: "Blur1D"
-});

example/src/Simple/index.js

@@ -28,7 +28,7 @@ const HueRotate = require("./HueRotate");
 const PieProgress = require("./PieProgress");
 const OneFingerResponse = require("./OneFingerResponse");
 const AnimatedHelloGL = require("./AnimatedHelloGL");
-const Blur = require("./Blur");
+const {Blur} = require("gl-react-blur");
 const Button = require("./Button");
 
 class Demo extends Component {
@@ -206,7 +206,7 @@ class Simple extends Component {
             </TouchableOpacity>
             <View pointerEvents="box-none" style={{ position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}>
               <Surface width={256} height={180} opaque={false} eventsThrough>
-                <PieProgress progress={progress} width={256} height={180} />
+                <PieProgress progress={progress} />
               </Surface>
             </View>
           </View>
@@ -230,9 +230,9 @@ class Simple extends Component {
           />
         </Demo>
 
-        <Demo id={7} current={current} title="7. Blur (2-pass)">
+        <Demo id={7} current={current} title="7. Blur">
           <Surface preload width={256} height={180}>
-            <Blur width={256} height={180} factor={factor + 1}>
+            <Blur factor={factor * 2} passes={4}>
               http://i.imgur.com/3On9QEu.jpg
             </Blur>
           </Surface>
@@ -249,10 +249,7 @@ class Simple extends Component {
             eventsThrough
             visibleContent>
             <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
-              <Blur
-                width={256}
-                height={160}
-                factor={factor}>
+              <Blur factor={factor}>
                 <View style={{ width: 256, height: 160, padding: 10, backgroundColor: "#f9f9f9" }}>
                   <Slider
                     style={{ height: 80 }}

example/src/Tests/Blur.js

-const GL = require("gl-react");
-const React = require("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:
- <Blur factor={0.5} passes={2} width={w} height={h}>{url}</Blur>
- - Medium blur:
- <Blur factor={2} passes={4} width={w} height={h}>{url}</Blur>
- - Powerful blur:
- <Blur factor={20} passes={6} width={w} height={h}>{url}</Blur>
- */
-
-module.exports = GL.createComponent(
-  ({ width, height, factor, children, passes }) => {
-    const rec = p => p <= 0 ? children :
-    <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
-      {rec(p-1)}
-    </Blur1D>;
-    return rec(passes);
-  },
-  {
-    displayName: "Blur",
-    defaultProps: {
-      passes: 2
-    },
-    propTypes: {
-      width: PropTypes.number,
-      height: PropTypes.number,
-      factor: PropTypes.number.isRequired,
-      children: PropTypes.any.isRequired,
-      passes: PropTypes.number
-    }
-  });

example/src/Tests/Blur1D.js

-const GL = require("gl-react");
-const React = require("react");
-const {
-  PropTypes
-} = React;
-
-const shaders = GL.Shaders.create({
-  blur1D: {
-    frag: `
-precision highp float;
-varying vec2 uv;
-uniform sampler2D t;
-uniform vec2 resolution;
-uniform vec2 direction;
-// Credits: https://github.com/Jam3/glsl-fast-gaussian-blur
-vec4 blur9 (sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
-  vec4 color = vec4(0.0);
-  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 = blur9(t, uv, resolution, direction);
-}
-    `
-  }
-});
-
-module.exports = GL.createComponent(
-  ({ width, height, direction, children }) =>
-    <GL.Node
-      shader={shaders.blur1D}
-      width={width}
-      height={height}
-      uniforms={{
-        direction,
-        resolution: [ width, height ]
-      }}>
-      <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.Node>
-, {
-  displayName: "Blur1D"
-});

example/src/Tests/index.js

@@ -6,7 +6,7 @@ const {
   Image,
 } = React;
 const { Surface } = require("gl-react-native");
-const Blur = require("./Blur");
+const {Blur} = require("gl-react-blur");
 const Add = require("./Add");
 const Multiply = require("./Multiply");
 const Layer = require("./Layer");