diff --git a/example/src/Simple/Blur.js b/example/src/Simple/Blur.js deleted file mode 100644 index 0f3ae20055e5043277f6520383534f8860ec2000..0000000000000000000000000000000000000000 --- a/example/src/Simple/Blur.js +++ /dev/null @@ -1,13 +0,0 @@ -const GL = require("gl-react"); -const React = require("react"); -const Blur1D = require("./Blur1D"); - -module.exports = GL.createComponent(({ width, height, factor, children }) => - - - {children} - - -, { - displayName: "Blur" -}); diff --git a/example/src/Simple/Blur1D.js b/example/src/Simple/Blur1D.js deleted file mode 100644 index 85e85b099b3605f50a824edf0434f48251cc8e62..0000000000000000000000000000000000000000 --- a/example/src/Simple/Blur1D.js +++ /dev/null @@ -1,47 +0,0 @@ -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 }) => - - {children} - -, { - displayName: "Blur1D" -}); diff --git a/example/src/Simple/index.js b/example/src/Simple/index.js index c7fc7aa1a90988f39729ab53b139b469f70d923c..29f9d22ed52594de4e30bb2aec773cc7c2342699 100644 --- a/example/src/Simple/index.js +++ b/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 { - + @@ -230,9 +230,9 @@ class Simple extends Component { /> - + - + http://i.imgur.com/3On9QEu.jpg @@ -249,10 +249,7 @@ class Simple extends Component { eventsThrough visibleContent> - + {url} - - Medium blur: - {url} - - Powerful blur: - {url} - */ - -module.exports = GL.createComponent( - ({ width, height, factor, children, passes }) => { - const rec = p => p <= 0 ? children : - - {rec(p-1)} - ; - 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 - } - }); diff --git a/example/src/Tests/Blur1D.js b/example/src/Tests/Blur1D.js deleted file mode 100644 index b9adbfed2dfc20c64e09e0944d90db514382881e..0000000000000000000000000000000000000000 --- a/example/src/Tests/Blur1D.js +++ /dev/null @@ -1,48 +0,0 @@ -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 }) => - - {children} - -, { - displayName: "Blur1D" -}); diff --git a/example/src/Tests/index.js b/example/src/Tests/index.js index c2a44f4bd6a12eb7cb5f8f5e593d72eda1e1409d..35321df2ec5454863de8fd7b2ea4b48cb8884540 100644 --- a/example/src/Tests/index.js +++ b/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");