Commit 02ce67ac authored by Gaëtan Renaudeau's avatar Gaëtan Renaudeau

adapt code to depeds on gl-react not anymore gl-react-core

parent b652c7a1
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
}, },
"dependencies": { "dependencies": {
"gl-react-native": "file:../..", "gl-react-native": "file:../..",
"gl-react-core": "file:../../../gl-react-core", "gl-react": "file:../../../gl-react",
"glsl-transitions": "^2015.11.8", "glsl-transitions": "^2015.11.8",
"react-native": "^0.14.2" "react-native": "^0.14.2"
} }
......
const React = require("react-native"); const React = require("react-native");
const GL = require("gl-react-core"); const GL = require("gl-react");
const {Surface} = require("gl-react-native"); const {Surface} = require("gl-react-native");
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
banner: { banner: {
......
...@@ -3,7 +3,7 @@ const { ...@@ -3,7 +3,7 @@ const {
View, View,
Text, Text,
} = React; } = React;
const GL = require("gl-react-core"); const GL = require("gl-react");
const {Surface} = require("gl-react-native"); const {Surface} = require("gl-react-native");
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
......
const React = require("react-native"); const React = require("react-native");
const { View, Text, StyleSheet } = React; const { View, Text, StyleSheet } = React;
const GL = require("gl-react-core"); const GL = require("gl-react");
const {Surface} = require("gl-react-native"); const {Surface} = require("gl-react-native");
const TransitionGenerator = require("./TransitionGenerator"); const TransitionGenerator = require("./TransitionGenerator");
const Transition = require("./Transition"); const Transition = require("./Transition");
......
const React = require("react-native"); const React = require("react-native");
const GL = require("gl-react-core"); const GL = require("gl-react");
module.exports = GL.createComponent( module.exports = GL.createComponent(
({ width, height, shader, progress, from, to, uniforms }) => { ({ width, height, shader, progress, from, to, uniforms }) => {
......
const React = require("react-native"); const React = require("react-native");
const GL = require("gl-react-core"); const GL = require("gl-react");
const {Surface} = require("gl-react-native"); const {Surface} = require("gl-react-native");
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
......
require("gl-react-core/react-native"); require("gl-react/react-native");
const React = require("react-native"); const React = require("react-native");
const { const {
StyleSheet, StyleSheet,
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
}, },
"dependencies": { "dependencies": {
"gl-react-native": "file:../..", "gl-react-native": "file:../..",
"gl-react-core": "file:../../../gl-react-core", "gl-react": "file:../../../gl-react",
"react-native": "^0.14.2", "react-native": "^0.14.2",
"react-native-material-kit": "^0.2.2" "react-native-material-kit": "^0.2.2"
} }
......
const React = require("react-native"); const React = require("react-native");
const GL = require("gl-react-core"); const GL = require("gl-react");
const {Surface} = require("gl-react-native"); const {Surface} = require("gl-react-native");
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const Blur1D = require("./Blur1D"); const Blur1D = require("./Blur1D");
module.exports = GL.createComponent(({ width, height, factor, children }) => module.exports = GL.createComponent(({ width, height, factor, children }) =>
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
blur1D: { blur1D: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
helloGL: { helloGL: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
hueRotate: { hueRotate: {
......
const React = require("react-native"); const React = require("react-native");
const GL = require("gl-react-core"); const GL = require("gl-react");
const {Surface} = require("gl-react-native"); const {Surface} = require("gl-react-native");
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
pieProgress: { pieProgress: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
saturation: { saturation: {
......
require("gl-react-core/react-native"); require("gl-react/react-native");
const React = require("react-native"); const React = require("react-native");
const { const {
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
}, },
"dependencies": { "dependencies": {
"gl-react-native": "file:../..", "gl-react-native": "file:../..",
"gl-react-core": "file:../../../gl-react-core", "gl-react": "file:../../../gl-react",
"react-native": "^0.14.2" "react-native": "^0.14.2"
}, },
"devDependencies": { "devDependencies": {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
add: { add: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const { const {
PropTypes PropTypes
} = React; } = React;
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const { const {
PropTypes PropTypes
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
Copy: { Copy: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
display2: { display2: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
helloGL: { helloGL: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
layer: { layer: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
multiply: { multiply: {
......
const React = require("react-native"); const GL = require("gl-react");
const GL = require("gl-react-core"); const React = GL.React;
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
TransparentNonPremultiplied: { TransparentNonPremultiplied: {
......
require("gl-react-core/react-native"); require("gl-react/react-native");
const React = require("react-native"); const React = require("react-native");
const { const {
Text, Text,
......
for ex in */; do for ex in */; do
cd $ex; cd $ex;
#rm -rf node_modules; rm -rf node_modules;
#npm i; npm i;
npm i gl-react-native;
react-native bundle --minify;
cd ..; cd ..;
done; done;
...@@ -4,42 +4,13 @@ ...@@ -4,42 +4,13 @@
OpenGL bindings for react-native to implement complex effects over images and components, in the descriptive VDOM paradigm. 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 an implementation of `gl-react` for React Native. Please [read the main gl-react README](https://github.com/ProjectSeptemberInc/gl-react/) for more information.**
**`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).**
[![](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) [![](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 ## Documentation
```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 <GL.View
shader={shaders.helloGL}
width={width}
height={height}
/>;
}
}
```
![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/hellogl.jpg) [**Gitbook**](http://projectseptemberinc.gitbooks.io/gl-react/content/)
## Installation ## Installation
...@@ -54,14 +25,3 @@ npm i --save gl-react-native ...@@ -54,14 +25,3 @@ npm i --save gl-react-native
**Configure your React Native Application:** **Configure your React Native Application:**
![](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/docs/install-steps.png) ![](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/)
#import <Foundation/Foundation.h> #import <Foundation/Foundation.h>
// Data format of gl-react-core // Data format of gl-react
@interface GLData: NSObject @interface GLData: NSObject
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
"react-native": ">=0.13.0 <0.16.0", "react-native": ">=0.13.0 <0.16.0",
"gl-react-core": "*" "gl-react": "*"
}, },
"dependencies": { "dependencies": {
"invariant": "2.2.0" "invariant": "2.2.0"
......
const {createShaders} = require("gl-react-core"); const {createShaders} = require("gl-react");
const { NativeModules: { RNGLContext } } = require("react-native"); const { NativeModules: { RNGLContext } } = require("react-native");
module.exports = createShaders(function (id, shader) { module.exports = createShaders(function (id, shader) {
......
const {createSurface} = require("gl-react-core"); const {createSurface} = require("gl-react");
const React = require("react-native"); const React = require("react-native");
const GLCanvas = require("./GLCanvas"); const GLCanvas = require("./GLCanvas");
......
const { Shaders } = require("gl-react-core"); const { Shaders } = require("gl-react");
const Surface = require("./Surface"); const Surface = require("./Surface");
const { NativeModules: { RNGLContext } } = require("react-native"); const { NativeModules: { RNGLContext } } = require("react-native");
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment