Commit cb038822 authored by Gaëtan Renaudeau's avatar Gaëtan Renaudeau

polish docs

parent 984bdd86
# 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 <GL.View
shader={shaders.helloGL}
width={width}
height={height}
/>;
}
}
```
![](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`:
......
......@@ -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
<HelloGL width={256} height={171} />
```
![](1.jpg)
## Implementation
```js
......
......@@ -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
<Saturation
width={256}
......@@ -13,6 +11,9 @@ Effects on images like *saturation, contrast, brightness, inverse, hue,...* are
/>
```
![](2.gif)
## Implementation
```js
......
......@@ -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
<HueRotate
width={256}
......@@ -15,6 +13,8 @@
</HueRotate>
```
![](3.gif)
## Implementation
```js
......
......@@ -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
<PieProgress
width={256}
height={180}
progress={progress}
/>
<PieProgress width={256} height={180} progress={progress} />
```
![](4.gif)
*explicit props:*
```html
......
......@@ -2,15 +2,12 @@
This example shows a simple rendering that responds to touch events (one finger only).
![](5.gif)
```html
<OneFingerResponse
width={256}
height={180}
/>
<OneFingerResponse width={256} height={180} />
```
![](5.gif)
## Implementation
```js
......
......@@ -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
<AnimatedHelloGL width={256} height={180} />
```
![](6.gif)
## Implementation
```js
......
{
"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",
......
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