diff --git a/Examples/AdvancedEffects/package.json b/Examples/AdvancedEffects/package.json index bb1bfcdbce742dcb14c1d952f6605c53142c333b..1e6931874f6204b094a36baffa432afb67207e4a 100644 --- a/Examples/AdvancedEffects/package.json +++ b/Examples/AdvancedEffects/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "gl-react-native": "file:../..", - "gl-react-core": "file:../../../gl-react-core", + "gl-react": "file:../../../gl-react", "glsl-transitions": "^2015.11.8", "react-native": "^0.14.2" } diff --git a/Examples/AdvancedEffects/src/Banner.js b/Examples/AdvancedEffects/src/Banner.js index 7e8edc7341c66b1602e65ca97c2cf5b3ba9e5941..e8bbe7f1ded31705072d32b459f567ed9af0d0fa 100644 --- a/Examples/AdvancedEffects/src/Banner.js +++ b/Examples/AdvancedEffects/src/Banner.js @@ -1,5 +1,5 @@ const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); const {Surface} = require("gl-react-native"); const shaders = GL.Shaders.create({ banner: { diff --git a/Examples/AdvancedEffects/src/Intro.js b/Examples/AdvancedEffects/src/Intro.js index e5d69912ac6a657309bddef53de821ac478859a8..662829851bf5a0c7421249dcb69c6aef568bf9c7 100644 --- a/Examples/AdvancedEffects/src/Intro.js +++ b/Examples/AdvancedEffects/src/Intro.js @@ -3,7 +3,7 @@ const { View, Text, } = React; -const GL = require("gl-react-core"); +const GL = require("gl-react"); const {Surface} = require("gl-react-native"); const shaders = GL.Shaders.create({ diff --git a/Examples/AdvancedEffects/src/Slideshow.js b/Examples/AdvancedEffects/src/Slideshow.js index 22ee0d094edef232fddc409d336969388334d332..5ed9223530b67d3ce1baa49a460e6683af7bbe77 100644 --- a/Examples/AdvancedEffects/src/Slideshow.js +++ b/Examples/AdvancedEffects/src/Slideshow.js @@ -1,6 +1,6 @@ const React = require("react-native"); const { View, Text, StyleSheet } = React; -const GL = require("gl-react-core"); +const GL = require("gl-react"); const {Surface} = require("gl-react-native"); const TransitionGenerator = require("./TransitionGenerator"); const Transition = require("./Transition"); diff --git a/Examples/AdvancedEffects/src/Transition.js b/Examples/AdvancedEffects/src/Transition.js index 29f1dab6ef8a45ae706e00dd9392f88d0cfee804..dd89ad57eb2642ae1ff165f6966f19ed1301caed 100644 --- a/Examples/AdvancedEffects/src/Transition.js +++ b/Examples/AdvancedEffects/src/Transition.js @@ -1,5 +1,5 @@ const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); module.exports = GL.createComponent( ({ width, height, shader, progress, from, to, uniforms }) => { diff --git a/Examples/AdvancedEffects/src/Vignette.js b/Examples/AdvancedEffects/src/Vignette.js index d8bebf07637d39ca48b809134595138108c9abfb..fd9c669372dce396ce406566f2703c098320d9ea 100644 --- a/Examples/AdvancedEffects/src/Vignette.js +++ b/Examples/AdvancedEffects/src/Vignette.js @@ -1,5 +1,5 @@ const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); const {Surface} = require("gl-react-native"); const shaders = GL.Shaders.create({ diff --git a/Examples/AdvancedEffects/src/index.js b/Examples/AdvancedEffects/src/index.js index d9bae7f9be52d83fc91631eb678fc7905a088355..9b8b63ec9cc37be61bc7a3f5eef472720b2d94d8 100644 --- a/Examples/AdvancedEffects/src/index.js +++ b/Examples/AdvancedEffects/src/index.js @@ -1,4 +1,4 @@ -require("gl-react-core/react-native"); +require("gl-react/react-native"); const React = require("react-native"); const { StyleSheet, diff --git a/Examples/Simple/package.json b/Examples/Simple/package.json index 0131ad8d4bc834effc7d019f9cfbe5fb3c9acbdc..a1b10431d7b6c0f1c1b8850697c8f5810aed396e 100644 --- a/Examples/Simple/package.json +++ b/Examples/Simple/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "gl-react-native": "file:../..", - "gl-react-core": "file:../../../gl-react-core", + "gl-react": "file:../../../gl-react", "react-native": "^0.14.2", "react-native-material-kit": "^0.2.2" } diff --git a/Examples/Simple/src/AnimatedHelloGL.js b/Examples/Simple/src/AnimatedHelloGL.js index bbb4425c29899be68c5483161ac63cdd50ed8bed..c87b0d783e0ba21323893f3cfbfbf41eba817a71 100644 --- a/Examples/Simple/src/AnimatedHelloGL.js +++ b/Examples/Simple/src/AnimatedHelloGL.js @@ -1,5 +1,5 @@ const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); const {Surface} = require("gl-react-native"); const shaders = GL.Shaders.create({ diff --git a/Examples/Simple/src/Blur.js b/Examples/Simple/src/Blur.js index aa0d88fa3a91e0bc8b09062b64b3a003fcfdd159..26a5d3c05e58c356964d1cb26abcd53e86ab49e8 100644 --- a/Examples/Simple/src/Blur.js +++ b/Examples/Simple/src/Blur.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const Blur1D = require("./Blur1D"); module.exports = GL.createComponent(({ width, height, factor, children }) => diff --git a/Examples/Simple/src/Blur1D.js b/Examples/Simple/src/Blur1D.js index fe2514efe16f1e3bea9138fd29800ce4192c1e8b..feb2f21e30eb11b6e0bbab6e1a8b6aa3ccad25f8 100644 --- a/Examples/Simple/src/Blur1D.js +++ b/Examples/Simple/src/Blur1D.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ blur1D: { diff --git a/Examples/Simple/src/HelloGL.js b/Examples/Simple/src/HelloGL.js index 66bb819f7ac01b13643b6f1a1681c35f71cc4ea1..fc08b5140f88fd6d5943794bd5e61d0c62774754 100644 --- a/Examples/Simple/src/HelloGL.js +++ b/Examples/Simple/src/HelloGL.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ helloGL: { diff --git a/Examples/Simple/src/HueRotate.js b/Examples/Simple/src/HueRotate.js index 7a799fa19fa798fdb09676e588ce5932c4dd161b..d520d5f8f287d7ef4230ab14b836bb94d85d691a 100644 --- a/Examples/Simple/src/HueRotate.js +++ b/Examples/Simple/src/HueRotate.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ hueRotate: { diff --git a/Examples/Simple/src/OneFingerResponse.js b/Examples/Simple/src/OneFingerResponse.js index b1f3e6dac8aef9671749b8fdce0561cda80a81b5..0841cec26ef8d4429821b0531dc23667fada6f3e 100644 --- a/Examples/Simple/src/OneFingerResponse.js +++ b/Examples/Simple/src/OneFingerResponse.js @@ -1,5 +1,5 @@ const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); const {Surface} = require("gl-react-native"); const shaders = GL.Shaders.create({ diff --git a/Examples/Simple/src/PieProgress.js b/Examples/Simple/src/PieProgress.js index f8037e6cdba51a116c578f98243eeb33a013a440..012c4593a49d0b2c130da08a405996a070f90068 100644 --- a/Examples/Simple/src/PieProgress.js +++ b/Examples/Simple/src/PieProgress.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ pieProgress: { diff --git a/Examples/Simple/src/Saturation.js b/Examples/Simple/src/Saturation.js index 086b8ffc20acf10992b6d8b1bd56fe7ad30cab8f..c8088ab9b9745af097a7cfefca9e85415f1497f1 100644 --- a/Examples/Simple/src/Saturation.js +++ b/Examples/Simple/src/Saturation.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ saturation: { diff --git a/Examples/Simple/src/index.js b/Examples/Simple/src/index.js index 8a0c360a79084ec705e7c3a409d2cd71c15375b5..7e80680a3b1b8b37c66d948be8a5593d7cebe213 100644 --- a/Examples/Simple/src/index.js +++ b/Examples/Simple/src/index.js @@ -1,4 +1,4 @@ -require("gl-react-core/react-native"); +require("gl-react/react-native"); const React = require("react-native"); const { diff --git a/Examples/Tests/package.json b/Examples/Tests/package.json index dc88e9e23da6d6a190dc431d1af4ee87f1fcff50..7cd494b3b84d6a9e24c74b60d3ae2b5188e17be3 100644 --- a/Examples/Tests/package.json +++ b/Examples/Tests/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "gl-react-native": "file:../..", - "gl-react-core": "file:../../../gl-react-core", + "gl-react": "file:../../../gl-react", "react-native": "^0.14.2" }, "devDependencies": { diff --git a/Examples/Tests/src/Add.js b/Examples/Tests/src/Add.js index 2bc17581c4717595cfab9e5d3e83d8aae280c81f..cbb560c36d33a2b9e0ec573d0cde53a5303c3a3f 100644 --- a/Examples/Tests/src/Add.js +++ b/Examples/Tests/src/Add.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ add: { diff --git a/Examples/Tests/src/Blur.js b/Examples/Tests/src/Blur.js index acf495b2078fbe8a0e20e52a522033b9999bb4ac..d10b83b7983ae1ab0d0ef9e16a986a3449aa818c 100644 --- a/Examples/Tests/src/Blur.js +++ b/Examples/Tests/src/Blur.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const { PropTypes } = React; diff --git a/Examples/Tests/src/Blur1D.js b/Examples/Tests/src/Blur1D.js index f200e07ccc3a0e50b80111917bb73fd95df09206..df5067fd33f18ec473a2677841d7147363802093 100644 --- a/Examples/Tests/src/Blur1D.js +++ b/Examples/Tests/src/Blur1D.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const { PropTypes diff --git a/Examples/Tests/src/Copy.js b/Examples/Tests/src/Copy.js index e6d7cedb853cbc844a8e4b6b503abc5ec53675af..c49efeb28ed845b8003919d01aa489039c8b0383 100644 --- a/Examples/Tests/src/Copy.js +++ b/Examples/Tests/src/Copy.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ Copy: { diff --git a/Examples/Tests/src/Display2.js b/Examples/Tests/src/Display2.js index 724a5d4e83d24b8efcb09f78fa1678456bdcf23d..6aac82fd4c8381033ca411d434f58891994f582f 100644 --- a/Examples/Tests/src/Display2.js +++ b/Examples/Tests/src/Display2.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ display2: { diff --git a/Examples/Tests/src/HelloGL.js b/Examples/Tests/src/HelloGL.js index 339ab4bf78b9510f69c59d22e8ac26e209ddb810..e72df0e66b87297423133ab6b8ad5bd53ba1c859 100644 --- a/Examples/Tests/src/HelloGL.js +++ b/Examples/Tests/src/HelloGL.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ helloGL: { diff --git a/Examples/Tests/src/Layer.js b/Examples/Tests/src/Layer.js index d6134f7113aec3b8d6d4a4837d781caeae720980..30752f5b0e717e00f249fbf0b103eee4d4fab8b3 100644 --- a/Examples/Tests/src/Layer.js +++ b/Examples/Tests/src/Layer.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ layer: { diff --git a/Examples/Tests/src/Multiply.js b/Examples/Tests/src/Multiply.js index 712019526431d7414e576dcc73de3305ea143bb0..e4cef5510f1f1c4b8c84a83ec77887ca977b0b2e 100644 --- a/Examples/Tests/src/Multiply.js +++ b/Examples/Tests/src/Multiply.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ multiply: { diff --git a/Examples/Tests/src/TransparentNonPremultiplied.js b/Examples/Tests/src/TransparentNonPremultiplied.js index c20d997a0c13b3b0d28ebe89b94728aaa7860b1e..df8d7c322a8af669859daea65c49f8cf1286e3fb 100644 --- a/Examples/Tests/src/TransparentNonPremultiplied.js +++ b/Examples/Tests/src/TransparentNonPremultiplied.js @@ -1,5 +1,5 @@ -const React = require("react-native"); -const GL = require("gl-react-core"); +const GL = require("gl-react"); +const React = GL.React; const shaders = GL.Shaders.create({ TransparentNonPremultiplied: { diff --git a/Examples/Tests/src/index.js b/Examples/Tests/src/index.js index a7063eccf404562717acb6078cd4f80850cc528d..ff197d05d344e5feaafc0071ac68b1506524bc35 100644 --- a/Examples/Tests/src/index.js +++ b/Examples/Tests/src/index.js @@ -1,4 +1,4 @@ -require("gl-react-core/react-native"); +require("gl-react/react-native"); const React = require("react-native"); const { Text, diff --git a/Examples/build.sh b/Examples/build.sh index 3746580f110cf3ec3819f7470918a52570081d08..4d63d31a6c644ae7300aec3221633b8b5f404ce0 100755 --- a/Examples/build.sh +++ b/Examples/build.sh @@ -1,9 +1,7 @@ for ex in */; do cd $ex; - #rm -rf node_modules; - #npm i; - npm i gl-react-native; - react-native bundle --minify; + rm -rf node_modules; + npm i; cd ..; done; diff --git a/README.md b/README.md index 6b51637b75d25d4e5ed2802d0c15655d931cd092..118ee6834568114e8d8e1de2fd3c74e44f9f65c3 100644 --- a/README.md +++ b/README.md @@ -4,42 +4,13 @@ OpenGL bindings for react-native to implement complex effects over images and components, in the descriptive VDOM paradigm. -More technically, `gl-react-native` allows you to write a [fragment shader](https://www.opengl.org/wiki/Fragment_Shader) that covers a View. The shader can render: generated graphics/demos, effects on top of images, effects over any UI content... anything you can imagine! - -**`gl-react-native` is directly inspired from our other project, [`gl-react`](http://github.com/ProjectSeptemberInc/gl-react) and implements the same API (so you can write "universal" code).** +**`gl-react-native` is an implementation of `gl-react` for React Native. Please [read the main gl-react README](https://github.com/ProjectSeptemberInc/gl-react/) for more information.** [![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/simple.gif)](./Examples/Simple)[![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/advancedeffects.gif)](./Examples/AdvancedEffects) -### HelloGL Gist - -```js -const React = require("react-native"); -const GL = require("gl-react-native"); - -const shaders = GL.Shaders.create({ - helloGL: { - frag: ` -precision highp float; -varying vec2 uv; -void main () { - gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0); -}` - } -}); - -class HelloGL extends GL.Component { - render () { - const { width, height } = this.props; - return ; - } -} -``` +## Documentation -![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/hellogl.jpg) +[**Gitbook**](http://projectseptemberinc.gitbooks.io/gl-react/content/) ## Installation @@ -54,14 +25,3 @@ npm i --save gl-react-native **Configure your React Native Application:** ![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/install-steps.png) - - -## Influence / Credits - -- [stack.gl](http://stack.gl/) approach -- [GLSL.io](http://glsl.io/) and [Diaporama](https://github.com/gre/diaporama) -- Source code of [React Native](https://github.com/facebook/react-native) - -## Documentation - -[**Gitbook**](http://projectseptemberinc.gitbooks.io/gl-react/content/) diff --git a/ios/GLData.h b/ios/GLData.h index 610261f101d699a562ee315a5f0e20cf19050280..4523918aff428a0fe32dfc80ffc7fc1a20184429 100644 --- a/ios/GLData.h +++ b/ios/GLData.h @@ -1,6 +1,6 @@ #import -// Data format of gl-react-core +// Data format of gl-react @interface GLData: NSObject diff --git a/package.json b/package.json index b3c8227cbcef4b44f6cd317929b8017dfb5ec9b9..faf52792ff5bb31ba58b4113f39d92bf149c1d00 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "license": "MIT", "peerDependencies": { "react-native": ">=0.13.0 <0.16.0", - "gl-react-core": "*" + "gl-react": "*" }, "dependencies": { "invariant": "2.2.0" diff --git a/src/Shaders.js b/src/Shaders.js index 62c46d83d43f544ea61d9b1382a079843fe51376..6b30f8a288938a7ed17c2242fd1c1fc7b77555ea 100644 --- a/src/Shaders.js +++ b/src/Shaders.js @@ -1,4 +1,4 @@ -const {createShaders} = require("gl-react-core"); +const {createShaders} = require("gl-react"); const { NativeModules: { RNGLContext } } = require("react-native"); module.exports = createShaders(function (id, shader) { diff --git a/src/Surface.js b/src/Surface.js index 0fa17f63fd6942c6707203b0d2dc20f1f46fecc8..2141b2c1822d98ae6fc934a4fa9ac45e18515721 100644 --- a/src/Surface.js +++ b/src/Surface.js @@ -1,4 +1,4 @@ -const {createSurface} = require("gl-react-core"); +const {createSurface} = require("gl-react"); const React = require("react-native"); const GLCanvas = require("./GLCanvas"); diff --git a/src/index.js b/src/index.js index 5f622112c1cfaf4b1eecd78e2932430a28e1b5d1..b4aa06d8073a6dfd65772d7b3a8031a956ffeba7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -const { Shaders } = require("gl-react-core"); +const { Shaders } = require("gl-react"); const Surface = require("./Surface"); const { NativeModules: { RNGLContext } } = require("react-native");