From cb0388227e770238395b3792eff4532c871f845d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= Date: Thu, 20 Aug 2015 16:58:16 +0200 Subject: [PATCH] polish docs --- README.md | 36 +++++++++++++++++++++++++++++++++--- docs/examples/1.md | 4 ++-- docs/examples/2.md | 5 +++-- docs/examples/3.md | 4 ++-- docs/examples/4.md | 11 ++++------- docs/examples/5.md | 9 +++------ docs/examples/6.md | 4 ++-- package.json | 2 +- 8 files changed, 50 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 09a6d12..78fc9d3 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 fbcdac9..ae46957 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 f693481..ee90f62 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 d2f1716..71faf4d 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 54c7679..82e299c 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 b687f90..004c7cd 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 1dd1302..688ccd7 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 15dcac6..0e9e4a7 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", -- 2.26.2