From f189a0aebdbdf1ad3e7609c2df5de87b759c3d9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= Date: Mon, 15 May 2017 11:08:24 +0200 Subject: [PATCH] add a standalone camera expo example --- packages/cookbook-expo/exp.json | 4 +- packages/cookbook/API.json | 120 +++++++++--------- .../example-gl-react-camera-effects/.babelrc | 8 ++ .../.flowconfig | 7 + .../.gitignore | 3 + .../example-gl-react-camera-effects/exp.json | 27 ++++ .../example-gl-react-camera-effects/main.js | 4 + .../package.json | 15 +++ .../src/App.js | 116 +++++++++++++++++ .../src/Camera.js | 48 +++++++ .../src/Effects/Blur.js | 97 ++++++++++++++ .../src/Effects/ColorMatrix.js | 26 ++++ .../Effects/ContrastSaturationBrightness.js | 46 +++++++ .../src/Effects/FlyEye.js | 32 +++++ .../src/Effects/HueRotate.js | 37 ++++++ .../src/Effects/Negative.js | 30 +++++ .../src/Effects/index.js | 61 +++++++++ .../src/Field.js | 63 +++++++++ packages/gl-react-expo/src/GLViewNative.js | 2 +- packages/gl-react-native/src/EXGLView.js | 2 - packages/gl-react-native/src/GLViewNative.js | 2 +- packages/undo-unsupported-symlinks.sh | 5 + 22 files changed, 689 insertions(+), 66 deletions(-) create mode 100755 packages/example-gl-react-camera-effects/.babelrc create mode 100644 packages/example-gl-react-camera-effects/.flowconfig create mode 100755 packages/example-gl-react-camera-effects/.gitignore create mode 100755 packages/example-gl-react-camera-effects/exp.json create mode 100755 packages/example-gl-react-camera-effects/main.js create mode 100644 packages/example-gl-react-camera-effects/package.json create mode 100644 packages/example-gl-react-camera-effects/src/App.js create mode 100644 packages/example-gl-react-camera-effects/src/Camera.js create mode 100644 packages/example-gl-react-camera-effects/src/Effects/Blur.js create mode 100644 packages/example-gl-react-camera-effects/src/Effects/ColorMatrix.js create mode 100644 packages/example-gl-react-camera-effects/src/Effects/ContrastSaturationBrightness.js create mode 100644 packages/example-gl-react-camera-effects/src/Effects/FlyEye.js create mode 100644 packages/example-gl-react-camera-effects/src/Effects/HueRotate.js create mode 100644 packages/example-gl-react-camera-effects/src/Effects/Negative.js create mode 100644 packages/example-gl-react-camera-effects/src/Effects/index.js create mode 100644 packages/example-gl-react-camera-effects/src/Field.js diff --git a/packages/cookbook-expo/exp.json b/packages/cookbook-expo/exp.json index abf3cdf..5722b25 100755 --- a/packages/cookbook-expo/exp.json +++ b/packages/cookbook-expo/exp.json @@ -6,13 +6,13 @@ "version": "1.0.0", "orientation": "portrait", "primaryColor": "#cccccc", - "icon": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", + "icon": "https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png", "notification": { "icon": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png", "color": "#000000" }, "loading": { - "icon": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", + "icon": "https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png", "hideExponentText": false }, "packagerOpts": { diff --git a/packages/cookbook/API.json b/packages/cookbook/API.json index 0344e72..d0255ea 100755 --- a/packages/cookbook/API.json +++ b/packages/cookbook/API.json @@ -859,7 +859,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js", "path": "packages/gl-react/src/createSurface.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/createSurface.js#L161-L592" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/createSurface.js#L161-L592" }, "kind": "class", "name": "Surface", @@ -2207,7 +2207,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js", "path": "packages/gl-react/src/createSurface.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/createSurface.js#L281-L288" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/createSurface.js#L281-L288" }, "params": [ { @@ -2517,7 +2517,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js", "path": "packages/gl-react/src/createSurface.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/createSurface.js#L297-L304" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/createSurface.js#L297-L304" }, "params": [ { @@ -2847,7 +2847,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js", "path": "packages/gl-react/src/createSurface.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/createSurface.js#L311-L317" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/createSurface.js#L311-L317" }, "memberof": "Surface", "scope": "instance", @@ -3011,7 +3011,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js", "path": "packages/gl-react/src/createSurface.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/createSurface.js#L325-L327" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/createSurface.js#L325-L327" }, "memberof": "Surface", "scope": "instance", @@ -3129,7 +3129,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js", "path": "packages/gl-react/src/createSurface.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/createSurface.js#L335-L337" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/createSurface.js#L335-L337" }, "memberof": "Surface", "scope": "instance", @@ -3443,7 +3443,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L379-L1050" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L379-L1050" }, "properties": [ { @@ -4286,7 +4286,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L547-L570" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L547-L570" }, "name": "capture", "kind": "function", @@ -4440,7 +4440,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L577-L582" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L577-L582" }, "kind": "function", "name": "redraw", @@ -4548,7 +4548,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L589-L591" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L589-L591" }, "kind": "function", "name": "flush", @@ -4668,7 +4668,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js", "path": "packages/gl-react/src/Shaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Shaders.js#L113-L161" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Shaders.js#L113-L161" }, "kind": "namespace", "name": "Shaders", @@ -4731,7 +4731,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js", "path": "packages/gl-react/src/Shaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Shaders.js#L127-L143" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Shaders.js#L127-L143" }, "memberof": "Shaders", "params": [ @@ -4979,7 +4979,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/LinearCopy.js", "path": "packages/gl-react/src/LinearCopy.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/LinearCopy.js#L14-L26" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/LinearCopy.js#L14-L26" }, "properties": [ { @@ -5152,7 +5152,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/NearestCopy.js", "path": "packages/gl-react/src/NearestCopy.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/NearestCopy.js#L14-L27" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/NearestCopy.js#L14-L27" }, "properties": [ { @@ -5668,7 +5668,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Bus.js", "path": "packages/gl-react/src/Bus.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Bus.js#L45-L212" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Bus.js#L45-L212" }, "properties": [ { @@ -6041,7 +6041,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Bus.js", "path": "packages/gl-react/src/Bus.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Bus.js#L168-L171" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Bus.js#L168-L171" }, "name": "capture", "kind": "function", @@ -6195,7 +6195,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Bus.js", "path": "packages/gl-react/src/Bus.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Bus.js#L183-L185" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Bus.js#L183-L185" }, "kind": "function", "name": "redraw", @@ -6419,7 +6419,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/connectSize.js", "path": "packages/gl-react/src/connectSize.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/connectSize.js#L19-L56" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/connectSize.js#L19-L56" }, "kind": "function", "name": "connectSize", @@ -6795,7 +6795,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/GLSL.js", "path": "packages/gl-react/src/GLSL.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/GLSL.js#L26-L35" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/GLSL.js#L26-L35" }, "returns": [ { @@ -7132,7 +7132,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/GLSL.js", "path": "packages/gl-react/src/GLSL.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/GLSL.js#L7-L7" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/GLSL.js#L7-L7" }, "name": "GLSLCode", "kind": "typedef", @@ -7288,7 +7288,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js", "path": "packages/gl-react/src/Shaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Shaders.js#L44-L46" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Shaders.js#L44-L46" }, "examples": [ { @@ -7431,7 +7431,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js", "path": "packages/gl-react/src/Shaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Shaders.js#L15-L17" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Shaders.js#L15-L17" }, "examples": [ { @@ -7623,7 +7623,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js", "path": "packages/gl-react/src/Shaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Shaders.js#L51-L53" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Shaders.js#L51-L53" }, "name": "ShadersSheet", "kind": "typedef", @@ -7670,7 +7670,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js", "path": "packages/gl-react/src/Shaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Shaders.js#L24-L27" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Shaders.js#L24-L27" }, "name": "ShaderIdentifier", "kind": "typedef", @@ -8549,7 +8549,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L151-L153" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L151-L153" }, "name": "Uniforms", "kind": "typedef", @@ -8834,7 +8834,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L64-L67" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L64-L67" }, "name": "TextureOptions", "kind": "typedef", @@ -9173,7 +9173,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L47-L47" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L47-L47" }, "name": "Interpolation", "kind": "typedef", @@ -9504,7 +9504,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L57-L57" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L57-L57" }, "name": "WrapMode", "kind": "typedef", @@ -9564,7 +9564,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L94-L97" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L94-L97" }, "name": "BlendFuncSrcDst", "kind": "typedef", @@ -10595,7 +10595,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L89-L89" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L89-L89" }, "name": "BlendFunc", "kind": "typedef", @@ -10699,7 +10699,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L107-L109" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L107-L109" }, "name": "Clear", "kind": "typedef", @@ -10872,7 +10872,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js", "path": "packages/gl-react/src/Node.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Node.js#L102-L102" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Node.js#L102-L102" }, "name": "Vec4", "kind": "typedef", @@ -11028,7 +11028,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/flow/ndarray.js", "path": "packages/gl-react/flow/ndarray.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/flow/ndarray.js#L7-L13" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/flow/ndarray.js#L7-L13" }, "name": "NDArray", "kind": "typedef", @@ -11302,7 +11302,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js", "path": "packages/gl-react/src/TextureLoader.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoader.js#L9-L49" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoader.js#L9-L49" }, "name": "TextureLoader", "kind": "class", @@ -11345,7 +11345,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js", "path": "packages/gl-react/src/TextureLoader.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoader.js#L13-L13" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoader.js#L13-L13" }, "properties": [ { @@ -11461,7 +11461,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js", "path": "packages/gl-react/src/TextureLoader.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoader.js#L18-L20" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoader.js#L18-L20" }, "name": "constructor", "kind": "function", @@ -11573,7 +11573,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js", "path": "packages/gl-react/src/TextureLoader.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoader.js#L25-L25" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoader.js#L25-L25" }, "name": "dispose", "kind": "member", @@ -11681,7 +11681,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js", "path": "packages/gl-react/src/TextureLoader.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoader.js#L30-L30" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoader.js#L30-L30" }, "name": "canLoad", "kind": "member", @@ -11798,7 +11798,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js", "path": "packages/gl-react/src/TextureLoader.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoader.js#L35-L35" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoader.js#L35-L35" }, "name": "get", "kind": "member", @@ -11925,7 +11925,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js", "path": "packages/gl-react/src/TextureLoader.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoader.js#L42-L48" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoader.js#L42-L48" }, "name": "load", "kind": "function", @@ -12073,7 +12073,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitors.js", "path": "packages/gl-react/src/Visitors.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitors.js#L10-L28" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitors.js#L10-L28" }, "kind": "namespace", "name": "Visitors", @@ -12112,7 +12112,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitors.js", "path": "packages/gl-react/src/Visitors.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitors.js#L14-L16" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitors.js#L14-L16" }, "memberof": "Visitors", "name": "add", @@ -12177,7 +12177,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitors.js", "path": "packages/gl-react/src/Visitors.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitors.js#L20-L23" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitors.js#L20-L23" }, "memberof": "Visitors", "name": "remove", @@ -12343,7 +12343,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoaders.js", "path": "packages/gl-react/src/TextureLoaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoaders.js#L12-L31" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoaders.js#L12-L31" }, "kind": "namespace", "name": "TextureLoaders", @@ -12433,7 +12433,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoaders.js", "path": "packages/gl-react/src/TextureLoaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoaders.js#L17-L19" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoaders.js#L17-L19" }, "memberof": "TextureLoaders", "name": "add", @@ -12566,7 +12566,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoaders.js", "path": "packages/gl-react/src/TextureLoaders.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/TextureLoaders.js#L24-L27" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/TextureLoaders.js#L24-L27" }, "memberof": "TextureLoaders", "name": "remove", @@ -12653,7 +12653,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/VisitorLogger.js", "path": "packages/gl-react/src/VisitorLogger.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/VisitorLogger.js#L21-L122" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/VisitorLogger.js#L21-L122" }, "name": "VisitorLogger", "augments": [ @@ -12702,7 +12702,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L31-L78" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L31-L78" }, "name": "Visitor", "kind": "class", @@ -12734,7 +12734,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L35-L35" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L35-L35" }, "name": "onSurfaceMount", "kind": "function", @@ -12795,7 +12795,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L39-L39" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L39-L39" }, "name": "onSurfaceUnmount", "kind": "function", @@ -12856,7 +12856,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L43-L43" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L43-L43" }, "name": "onSurfaceGLContextChange", "kind": "function", @@ -12929,7 +12929,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L46-L46" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L46-L46" }, "name": "onSurfaceDrawSkipped", "kind": "function", @@ -12990,7 +12990,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L49-L49" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L49-L49" }, "name": "onSurfaceDrawStart", "kind": "function", @@ -13102,7 +13102,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L53-L55" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L53-L55" }, "name": "onSurfaceDrawError", "kind": "function", @@ -13163,7 +13163,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L58-L58" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L58-L58" }, "name": "onSurfaceDrawEnd", "kind": "function", @@ -13224,7 +13224,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L61-L61" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L61-L61" }, "name": "onNodeDrawSkipped", "kind": "function", @@ -13285,7 +13285,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L64-L64" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L64-L64" }, "name": "onNodeDrawStart", "kind": "function", @@ -13346,7 +13346,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L67-L71" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L67-L71" }, "name": "onNodeSyncDeps", "kind": "function", @@ -13461,7 +13461,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L74-L74" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L74-L74" }, "name": "onNodeDraw", "kind": "function", @@ -13537,7 +13537,7 @@ }, "file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js", "path": "packages/gl-react/src/Visitor.js", - "github": "https://github.com/gre/gl-react/blob/ff4157f90c4fd0f0aaf5b92abb9c373c2919132e/packages/gl-react/src/Visitor.js#L77-L77" + "github": "https://github.com/gre/gl-react/blob/1676e852ddf241e66c19935a4b7bd052325ccadb/packages/gl-react/src/Visitor.js#L77-L77" }, "name": "onNodeDrawEnd", "kind": "function", diff --git a/packages/example-gl-react-camera-effects/.babelrc b/packages/example-gl-react-camera-effects/.babelrc new file mode 100755 index 0000000..2e76127 --- /dev/null +++ b/packages/example-gl-react-camera-effects/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": ["react-native-stage-0/decorator-support"], + "env": { + "development": { + "plugins": ["transform-react-jsx-source"] + } + } +} diff --git a/packages/example-gl-react-camera-effects/.flowconfig b/packages/example-gl-react-camera-effects/.flowconfig new file mode 100644 index 0000000..4a58bdc --- /dev/null +++ b/packages/example-gl-react-camera-effects/.flowconfig @@ -0,0 +1,7 @@ +[ignore] + +[include] + +[libs] + +[options] diff --git a/packages/example-gl-react-camera-effects/.gitignore b/packages/example-gl-react-camera-effects/.gitignore new file mode 100755 index 0000000..9f9e17e --- /dev/null +++ b/packages/example-gl-react-camera-effects/.gitignore @@ -0,0 +1,3 @@ +node_modules/**/* +.expo/* +npm-debug.* diff --git a/packages/example-gl-react-camera-effects/exp.json b/packages/example-gl-react-camera-effects/exp.json new file mode 100755 index 0000000..1a8b817 --- /dev/null +++ b/packages/example-gl-react-camera-effects/exp.json @@ -0,0 +1,27 @@ +{ + "name": "gl-react-camera-effects", + "description": "GL React Camera Effects", + "slug": "gl-react-camera-effects", + "sdkVersion": "UNVERSIONED", + "version": "1.0.0", + "orientation": "portrait", + "primaryColor": "#cccccc", + "icon": "https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png", + "notification": { + "icon": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png", + "color": "#000000" + }, + "loading": { + "icon": "https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png", + "hideExponentText": false + }, + "packagerOpts": { + "assetExts": ["ttf", "mp4"] + }, + "android": { + "package": "fr.greweb.glreactcameraffects" + }, + "ios": { + "bundleIdentifier": "fr.greweb.glreactcameraffects" + } +} diff --git a/packages/example-gl-react-camera-effects/main.js b/packages/example-gl-react-camera-effects/main.js new file mode 100755 index 0000000..ccbe9b9 --- /dev/null +++ b/packages/example-gl-react-camera-effects/main.js @@ -0,0 +1,4 @@ +import "expo"; +import Expo from "expo"; +import App from "./src/App"; +Expo.registerRootComponent(App); diff --git a/packages/example-gl-react-camera-effects/package.json b/packages/example-gl-react-camera-effects/package.json new file mode 100644 index 0000000..8769645 --- /dev/null +++ b/packages/example-gl-react-camera-effects/package.json @@ -0,0 +1,15 @@ +{ + "name": "cookbook-expo", + "version": "3.3.0", + "description": "GL React Native cookbook", + "author": "Gaëtan Renaudeau", + "private": true, + "main": "main.js", + "dependencies": { + "expo": "expo/expo-sdk", + "gl-react": "^3.3.0", + "gl-react-expo": "^3.3.0", + "react": "16.0.0-alpha.6", + "react-native": "github:exponentjs/react-native#exp-latest" + } +} diff --git a/packages/example-gl-react-camera-effects/src/App.js b/packages/example-gl-react-camera-effects/src/App.js new file mode 100644 index 0000000..79419d2 --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/App.js @@ -0,0 +1,116 @@ +//@flow +import React, { Component } from "react"; +import { + TouchableOpacity, + StyleSheet, + ScrollView, + View, + Dimensions, +} from "react-native"; +import { Surface } from "gl-react-expo"; +import Camera from "./Camera"; +import Effects from "./Effects"; +import Field from "./Field"; + +const { width: windowWidth, height: windowHeight } = Dimensions.get("window"); + +const percentagePrint = v => (v * 100).toFixed(0) + "%"; +const radiantPrint = r => (180 * r / Math.PI).toFixed(0) + "°"; + +// prettier-ignore +const fields = [ + { id: "blur", name: "Blur", min: 0, max: 6, step: 0.1, prettyPrint: blur => blur.toFixed(1) }, + { id: "contrast", name: "Contrast", min: 0, max: 4, step: 0.1, prettyPrint: percentagePrint }, + { id: "brightness", name: "Brightness", min: 0, max: 4, step: 0.1, prettyPrint: percentagePrint }, + { id: "saturation", name: "Saturation", min: 0, max: 10, step: 0.1, prettyPrint: percentagePrint }, + { id: "hue", name: "HueRotate", min: 0, max: 2 * Math.PI, step: 0.1, prettyPrint: radiantPrint }, + { id: "negative", name: "Negative", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint }, + { id: "sepia", name: "Sepia", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint }, + { id: "flyeye", name: "FlyEye", min: 0, max: 1, step: 0.05, prettyPrint: percentagePrint } +]; + +const initialEffectsState = { + blur: 0, + saturation: 1, + contrast: 1, + brightness: 1, + negative: 0, + hue: 0, + sepia: 0, + flyeye: 0, +}; + +const styles = StyleSheet.create({ + root: { + flex: 1, + backgroundColor: "#EEE", + }, + surface: { + width: windowWidth * 0.75, + height: windowWidth, + alignSelf: "center", + }, + fields: { + flexDirection: "column", + flex: 1, + paddingTop: 10, + paddingBottom: 40, + backgroundColor: "#EEE", + }, +}); + +export default class App extends Component { + state = { + position: "front", + effects: initialEffectsState, + }; + + onSurfacePress = () => { + this.setState(({ position }) => ({ + position: position === "front" ? "back" : "front", + })); + }; + + onEffectChange = (value, id) => { + this.setState(({ effects }) => ({ + effects: { ...effects, [id]: value }, + })); + }; + + onEffectReset = id => { + this.setState(({ effects }) => ({ + effects: { ...effects, [id]: initialEffectsState[id] }, + })); + }; + + render() { + const { position, effects } = this.state; + + return ( + + + + + + + + + + + + {fields.map(({ id, ...props }) => ( + + ))} + + + + ); + } +} diff --git a/packages/example-gl-react-camera-effects/src/Camera.js b/packages/example-gl-react-camera-effects/src/Camera.js new file mode 100644 index 0000000..e5e7664 --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Camera.js @@ -0,0 +1,48 @@ +//@flow +import React, { Component } from "react"; +import { GLSL, Node, Shaders } from "gl-react"; + +const shaders = Shaders.create({ + YFlip: { + // NB we need to YFlip the stream + frag: GLSL` +precision highp float; +varying vec2 uv; +uniform sampler2D t; +void main(){ + gl_FragColor=texture2D(t, vec2(uv.x, 1.0 - uv.y)); +}`, + }, +}); + +export default class Camera extends Component { + props: { + position: string, + }; + static defaultProps = { + position: "front", + }; + _raf: *; + componentDidMount() { + const loop = () => { + this._raf = requestAnimationFrame(loop); + this.forceUpdate(); + }; + this._raf = requestAnimationFrame(loop); + } + componentWillUnmount() { + cancelAnimationFrame(this._raf); + } + render() { + const { position } = this.props; + return ( + + ); + } +} diff --git a/packages/example-gl-react-camera-effects/src/Effects/Blur.js b/packages/example-gl-react-camera-effects/src/Effects/Blur.js new file mode 100644 index 0000000..811242b --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Effects/Blur.js @@ -0,0 +1,97 @@ +//@flow +import React, { Component } from "react"; +import { GLSL, Node, Shaders, connectSize } from "gl-react"; + +const shaders = Shaders.create({ + blur1D: { + // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur + frag: GLSL`precision highp float; +varying vec2 uv; +uniform sampler2D t; +uniform vec2 direction, resolution; +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); +}`, + }, +}); + +const Blur1D = ({ width, height, pixelRatio, direction, children: t }) => ( + +); + +const NORM = Math.sqrt(2) / 2; + +function directionForPass(p, factor, total) { + const f = factor * 2 * Math.ceil(p / 2) / total; + switch ((p - 1) % 4) { // alternate horizontal, vertical and 2 diagonals + case 0: + return [f, 0]; + case 1: + return [0, f]; + case 2: + return [f * NORM, f * NORM]; + case 3: + return [f * NORM, -f * NORM]; + } +} + +export default connectSize( + class Blur extends Component { + props: { + factor: number, + children?: any, + passes: number, + width: any, + height: any, + pixelRatio: number, + }; + + static defaultProps = { + passes: 2, + }; + + render() { + const { + width, + height, + pixelRatio, + factor, + children, + passes, + } = this.props; + const rec = pass => + (pass <= 0 + ? children + : + {rec(pass - 1)} + ); + return rec(passes); + } + } +); diff --git a/packages/example-gl-react-camera-effects/src/Effects/ColorMatrix.js b/packages/example-gl-react-camera-effects/src/Effects/ColorMatrix.js new file mode 100644 index 0000000..81b9a3a --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Effects/ColorMatrix.js @@ -0,0 +1,26 @@ +//@flow +import React, { Component } from "react"; +import { GLSL, Node, Shaders } from "gl-react"; + +const shaders = Shaders.create({ + ColorMatrix: { + frag: GLSL`precision highp float; +varying vec2 uv; +uniform sampler2D t; +uniform mat4 m; +void main () { + gl_FragColor = m * texture2D(t, uv); +}`, + }, +}); + +export default class ColorMatrix extends Component { + props: { + matrix: Array, + children?: *, + }; + render() { + const { children: t, matrix } = this.props; + return ; + } +} diff --git a/packages/example-gl-react-camera-effects/src/Effects/ContrastSaturationBrightness.js b/packages/example-gl-react-camera-effects/src/Effects/ContrastSaturationBrightness.js new file mode 100644 index 0000000..c257e97 --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Effects/ContrastSaturationBrightness.js @@ -0,0 +1,46 @@ +//@flow +import React, { Component } from "react"; +import { GLSL, Node, Shaders } from "gl-react"; + +const shaders = Shaders.create({ + ContrastSaturationBrightness: { + frag: GLSL`precision highp float; +varying vec2 uv; +uniform sampler2D t; +uniform float contrast; +uniform float saturation; +uniform float brightness; +const vec3 L = vec3(0.2125, 0.7154, 0.0721); +void main () { + vec4 c = texture2D(t, uv); + vec3 brt = c.rgb * brightness; + gl_FragColor = vec4(mix( + vec3(0.5), + mix(vec3(dot(brt, L)), brt, saturation), + contrast), c.a); +}`, + }, +}); + +export default class ContrastSaturationBrightness extends Component { + props: { + contrast: number, + saturation: number, + brightness: number, + children?: *, + }; + static defaultProps = { + contrast: 1, + saturation: 1, + brightness: 1, + }; + render() { + const { children: t, contrast, saturation, brightness } = this.props; + return ( + + ); + } +} diff --git a/packages/example-gl-react-camera-effects/src/Effects/FlyEye.js b/packages/example-gl-react-camera-effects/src/Effects/FlyEye.js new file mode 100644 index 0000000..bf835c5 --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Effects/FlyEye.js @@ -0,0 +1,32 @@ +//@flow +import React, { Component } from "react"; +import { GLSL, Node, Shaders } from "gl-react"; + +const shaders = Shaders.create({ + FlyEye: { + frag: GLSL`precision highp float; +varying vec2 uv; +uniform sampler2D t; +uniform float value; +void main () { + gl_FragColor = texture2D( + t, + uv + vec2( + 0.01 * sin(uv.x * value * 200.0), + 0.01 * sin(uv.y * value * 200.0) + ) + ); +}`, + }, +}); + +export default class FlyEye extends Component { + props: { + value: number, + children?: *, + }; + render() { + const { children: t, value } = this.props; + return ; + } +} diff --git a/packages/example-gl-react-camera-effects/src/Effects/HueRotate.js b/packages/example-gl-react-camera-effects/src/Effects/HueRotate.js new file mode 100644 index 0000000..b6cf3ce --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Effects/HueRotate.js @@ -0,0 +1,37 @@ +//@flow +import React, { Component } from "react"; +import { GLSL, Node, Shaders } from "gl-react"; + +const shaders = Shaders.create({ + HueRotate: { + frag: GLSL`precision highp float; +varying vec2 uv; +uniform sampler2D t; +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() { + vec4 c = texture2D(t, uv); + vec3 yColor = rgb2yiq * c.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, c.a); +}`, + }, +}); + +export default class HueRotate extends Component { + props: { + hue: number, + children?: *, + }; + static defaultProps = { + hue: 0, + }; + render() { + const { children: t, hue } = this.props; + return ; + } +} diff --git a/packages/example-gl-react-camera-effects/src/Effects/Negative.js b/packages/example-gl-react-camera-effects/src/Effects/Negative.js new file mode 100644 index 0000000..bb6dd01 --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Effects/Negative.js @@ -0,0 +1,30 @@ +//@flow +import React, { Component } from "react"; +import { GLSL, Node, Shaders } from "gl-react"; + +const shaders = Shaders.create({ + Negative: { + frag: GLSL`precision highp float; + varying vec2 uv; + uniform sampler2D t; + uniform float factor; + void main () { + vec4 c = texture2D(t, uv); + gl_FragColor = vec4(mix(c.rgb, 1.0 - c.rgb, factor), c.a); + }`, + }, +}); + +export default class Negative extends Component { + props: { + factor: number, + children?: *, + }; + static defaultProps = { + factor: 1, + }; + render() { + const { children: t, factor } = this.props; + return ; + } +} diff --git a/packages/example-gl-react-camera-effects/src/Effects/index.js b/packages/example-gl-react-camera-effects/src/Effects/index.js new file mode 100644 index 0000000..f356194 --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Effects/index.js @@ -0,0 +1,61 @@ +//@flow +import React, { PropTypes } from "react"; +import Blur from "./Blur"; +import ContrastSaturationBrightness from "./ContrastSaturationBrightness"; +import Negative from "./Negative"; +import HueRotate from "./HueRotate"; +import ColorMatrix from "./ColorMatrix"; +import Flyeye from "./FlyEye"; + +const mixArrays = (arr1, arr2, m) => + arr1.map((v, i) => (1 - m) * v + m * arr2[i]); + +// prettier-ignore +const matrixForSepia = sepia => + mixArrays([ + // Identity + 1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1 + ], [ + // one way to do Sepia: grayscale & use alpha channel to add red & remove blue + .3, .3, .3, 0, + .6, .6, .6, 0, + .1, .1, .1, 0, + 0.2, 0, -0.2, 1 + ], sepia); + +const Effects = ({ + children, + width, + height, + blur, + contrast, + saturation, + brightness, + negative, + hue, + sepia, + flyeye, +}) => ( + + + + + + + {children} + + + + + + +); + +export default Effects; diff --git a/packages/example-gl-react-camera-effects/src/Field.js b/packages/example-gl-react-camera-effects/src/Field.js new file mode 100644 index 0000000..5a3f136 --- /dev/null +++ b/packages/example-gl-react-camera-effects/src/Field.js @@ -0,0 +1,63 @@ +//@flow +import React, { Component } from "react"; +import { TouchableOpacity, View, Text, Slider, StyleSheet } from "react-native"; + +const styles = StyleSheet.create({ + field: { + flexDirection: "row", + alignItems: "center", + }, + title: { + width: 120, + textAlign: "right", + fontSize: 14, + fontFamily: "Helvetica", + }, + value: { + width: 80, + }, + range: { + flex: 1, + height: 20, + margin: 6, + }, +}); + +export default class Field extends Component { + props: { + value: number, + id: string, + name: string, + min?: number, + max?: number, + step?: number, + prettyPrint: (value: number) => string, + onChange: (value: number, id: string) => void, + onReset: (id: string) => void, + }; + onChange = (value: number) => { + this.props.onChange(value, this.props.id); + }; + onReset = () => { + this.props.onReset(this.props.id); + }; + render() { + const { min, max, step, value, name, prettyPrint } = this.props; + return ( + + + {name} + + + {prettyPrint(value)} + + ); + } +} diff --git a/packages/gl-react-expo/src/GLViewNative.js b/packages/gl-react-expo/src/GLViewNative.js index 6842500..ed3a43b 100755 --- a/packages/gl-react-expo/src/GLViewNative.js +++ b/packages/gl-react-expo/src/GLViewNative.js @@ -6,7 +6,7 @@ import { GLView as EXGLView } from "expo"; const propTypes = { onContextCreate: PropTypes.func.isRequired, - style: PropTypes.object, + style: PropTypes.any, }; export default class GLViewNative extends Component { diff --git a/packages/gl-react-native/src/EXGLView.js b/packages/gl-react-native/src/EXGLView.js index ec18131..cde388e 100644 --- a/packages/gl-react-native/src/EXGLView.js +++ b/packages/gl-react-native/src/EXGLView.js @@ -15,8 +15,6 @@ export default class EXGLView extends React.Component { // [iOS only] Number of samples for Apple"s built-in multisampling. msaaSamples: PropTypes.number, - - ...View.propTypes, }; static defaultProps = { diff --git a/packages/gl-react-native/src/GLViewNative.js b/packages/gl-react-native/src/GLViewNative.js index f29370d..a485737 100755 --- a/packages/gl-react-native/src/GLViewNative.js +++ b/packages/gl-react-native/src/GLViewNative.js @@ -6,7 +6,7 @@ import EXGLView from "./EXGLView"; const propTypes = { onContextCreate: PropTypes.func.isRequired, - style: PropTypes.object, + style: PropTypes.any, }; export default class GLViewNative extends Component { diff --git a/packages/undo-unsupported-symlinks.sh b/packages/undo-unsupported-symlinks.sh index bf63506..d22359d 100755 --- a/packages/undo-unsupported-symlinks.sh +++ b/packages/undo-unsupported-symlinks.sh @@ -14,3 +14,8 @@ cd cookbook-expo rm -f node_modules/gl-react node_modules/gl-react-expo node_modules/cookbook-rn-shared npm i ../gl-react ../gl-react-expo ../cookbook-rn-shared cd - + +cd example-gl-react-camera-effects +rm -f node_modules/gl-react node_modules/gl-react-expo +npm i ../gl-react ../gl-react-expo +cd -