README.md 1.64 KB
Newer Older
1 2 3 4
# gl-react-native

`gl-react-native` implements OpenGL bindings for react-native.

5
It lets you implement complex effects on top of images and components
6 7
and in the Virtual DOM descriptive paradigm.

8
More technically, `gl-react-native` allows you to write a fragment shader that covers a View. This shader can render: some graphics/demos, any effects over images, any effects over any UI content.
9 10 11

A React version also exists: [`gl-react`](http://github.com/ProjectSeptemberInc/gl-react).

12 13 14 15 16 17 18 19 20
## Focus

- **Virtual DOM and immutable** paradigm: OpenGL is a low level imperative and mutable API. This library takes the best of it to expose it in a immutable and descriptive way.
- **Performance**
- **Developer experience**: the application does not crash if developer make mistakes, it uses React Native error message to display GLSL errors and help him developing the effects with Live Reload support.
- **Uniform bindings**: The library implements binding from the JavaScript objects to the OpenGL GLSL language types (bool, int, float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D...)
- **Support for images** as texture uniform.
- **Support for UIView rasterisation** as a texture uniform.

Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
21 22 23

## Installation

24
a few steps are required to install `gl-react-native`:
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
25

26
**Install the dependency from your React Native application:**
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
27 28 29 30 31

```
npm i --save gl-react-native
```

32
**Configure your React Native Application:**
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
33 34 35 36

![](docs/install-steps.png)


37
## Influence / Credits
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
38 39 40 41

- [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)
42 43 44


## Documentation