diff --git a/README.md b/README.md index 09a6d12f16c95df2a7d0fb14c3aff2f4faeef86b..78fc9d3f4b574dbd4af46735c33289378de21bec 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,46 @@ # gl-react-native -`gl-react-native` implements OpenGL bindings for react-native. +OpenGL bindings for react-native to implement complex effects over images and components, in VDOM descriptive paradigm. It lets you implement complex effects over images and components, in the Virtual DOM descriptive 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! -There's also a React version [`gl-react`](http://github.com/ProjectSeptemberInc/gl-react) with the same API. +**There's also a React version [`gl-react`](http://github.com/ProjectSeptemberInc/gl-react) with the same API.** [![](docs/examples/simple.gif)](./Examples/Simple)[![](docs/examples/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 React.Component { + render () { + const { width, height } = this.props; + return ; + } +} +``` + +![](docs/examples/1.jpg) + ## Focus - **Virtual DOM and immutable** paradigm: OpenGL is a low level imperative and mutable API. This library takes the best of it and exposes it in an immutable, descriptive way. @@ -19,7 +50,6 @@ There's also a React version [`gl-react`](http://github.com/ProjectSeptemberInc/ - **Support for images** as a texture uniform. - **Support for UIView rasterisation** as a texture uniform. - ## Installation a few steps are required to install `gl-react-native`: diff --git a/docs/examples/1.md b/docs/examples/1.md index fbcdac9ea4f5d971659815b5f4de21b12b86c0c3..ae46957322d0e68b52482249d2aa939ec99007b6 100644 --- a/docs/examples/1.md +++ b/docs/examples/1.md @@ -8,12 +8,12 @@ This minimal example shows the classical "Hello World" of OpenGL 2D drawing, sho > N.B. a GLSL fragment uses a ["functional rendering"](http://greweb.me/2013/11/functional-rendering/) paradigm, which means you have to implement a `Position => Color` function. -![](1.jpg) - ```html ``` +![](1.jpg) + ## Implementation ```js diff --git a/docs/examples/2.md b/docs/examples/2.md index f693481bac8d4a8323cc8de5b5c0d9b249631c0f..ee90f622d788d6f35801015cca069198c5fba063 100644 --- a/docs/examples/2.md +++ b/docs/examples/2.md @@ -2,8 +2,6 @@ Effects on images like *saturation, contrast, brightness, inverse, hue,...* are very easy to implement in GLSL. Here is the example of **Saturation**. -![](2.gif) - ```html ``` +![](2.gif) + + ## Implementation ```js diff --git a/docs/examples/3.md b/docs/examples/3.md index d2f1716df16fd4cff460fa9369dd4accc1108dd5..71faf4db7ff1f2710ddf7bded181d0c5214d4cd5 100644 --- a/docs/examples/3.md +++ b/docs/examples/3.md @@ -2,8 +2,6 @@ `gl-react-native` not only allow to add effects on top of images but also on top of any content. This example shows the Hue rotation effect on top of texts and image. -![](3.gif) - ```html ``` +![](3.gif) + ## Implementation ```js diff --git a/docs/examples/4.md b/docs/examples/4.md index 54c7679c41d992faf5e27c4984ae4497b1991982..82e299c62682bb5efd6591ba538d965ef01512cd 100644 --- a/docs/examples/4.md +++ b/docs/examples/4.md @@ -4,16 +4,13 @@ This example show a graphical composant implemented in OpenGL that would not be > N.B. the pie is transparent and the background is black with 50% opacity. That would easily allow to put this view on top of an image to show an image upload progress. -![](4.gif) - ```html - + ``` +![](4.gif) + + *explicit props:* ```html diff --git a/docs/examples/5.md b/docs/examples/5.md index b687f90ce753c8699811f3194f4d0f611f387022..004c7cd2204acf86eee7e1ef9f2fd5117cbdbdcf 100644 --- a/docs/examples/5.md +++ b/docs/examples/5.md @@ -2,15 +2,12 @@ This example shows a simple rendering that responds to touch events (one finger only). -![](5.gif) - ```html - + ``` +![](5.gif) + ## Implementation ```js diff --git a/docs/examples/6.md b/docs/examples/6.md index 1dd13020edbfe54b3ab56a6666a2a3fa66e155cc..688ccd73ef4fd71c3ce8961b7069003c3beff3b1 100644 --- a/docs/examples/6.md +++ b/docs/examples/6.md @@ -2,12 +2,12 @@ Any value can be programmatically animated in a render loop. This example extends the simple [Hello GL](1.md) to add a `value` uniform that is passed in blue color component. `value` is animated over time. -![](6.gif) - ```html ``` +![](6.gif) + ## Implementation ```js diff --git a/package.json b/package.json index 15dcac6abe4a1529a14db669d10438d8ed57314d..0e9e4a75cecba81602d47f952eb8490f8cadd625 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "gl-react-native", "version": "0.0.1", - "description": "OpenGL bindings for react-native for complex effects on images and components", + "description": "OpenGL bindings for react-native to implement complex effects over images and components, in VDOM descriptive paradigm", "main": "index.js", "repository": { "type": "git",