Commit 9f1b5560 authored by Gaëtan Renaudeau's avatar Gaëtan Renaudeau

writing the documentation

parent 19bbda90
# The API # The API
```js
var GL = require("gl-react-native");
```
## [GL.Shaders.create](Shaders.create.md)
`GL.Shaders.create(spec)` allows to create shaders that can be used later in GL.View component.
## [GL.View](View.md)
`GL.View` is a React Component that renders a given shader with uniforms (parameters to send to the shader).
## [GL.Target](Target.md)
*(advanced)* `GL.Target` allows to render a shader with any content (any React Native component rasterized as a uniform texture).
# GL.Shaders.create
`GL.Shaders.create(spec)` allows to create shaders that can be used later in *GL.View* component.
**Example usage:**
```js
var shaders = GL.Shaders.create({
myEffect: {
frag: `
void main () {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // red
}
`
},
...
})
// Use it later:
<GL.View shader={shaders.myEffect} ... />
```
There are two kinds of OpenGL Shaders: vertex and fragment shaders.
The vertex shader iterates over polygons and computes a position, the fragment shaders iterates over pixels and computes a color.
In current version of `gl-react-native`, the vertex shader is implemented for you
and you only have to implement the fragment shader.
> This documentation assumes you know the basics of GLSL, the OpenGL Shading Language, if not, feel free to learn [shader-school](https://www.npmjs.com/package/shader-school), read the [specification](https://www.opengl.org/documentation/glsl/) or learn from the examples.
`GL.Shaders.create` is inspired from ReactNative's `StyleSheet.create`: it creates an object with key-value and will returns an object with the same keys and where the values can be used in the Virtual DOM.
The value of each Shader is an object with a `frag` field: the fragment GLSL code.
# GL.Target
`GL.Target` allows to render a shader with any content (any React Native component rasterized as a uniform texture).
> **N.B.** This feature is advanced and experimental. It current does not yet support subviews content refreshing (like Image load event,...).
**Example:**
```js
render () {
return <GL.View shader={shaders.myEffect3}
width={200} height={100}>
<GL.Target uniform="textureName">
...any React Native components
</GL.Target>
</GL.View>;
}
```
## Props
- **`uniform`** *string* **(required)**: The name of the shader texture uniform to use for rendering the content.
# GL.View
`GL.View` is a React Component that renders a given shader with uniforms (parameters to send to the shader).
**Quick Examples:**
Renders a "standalone" shader:
```js
render () {
return <GL.View shader={shaders.myEffect}
width={200} height={100} />;
}
```
Renders a shader with uniform parameters:
```js
render () {
return <GL.View shader={shaders.myEffect2}
width={200} height={100}
uniforms={{
floatValue: 0.5,
vec3Value: [ 1, 0.5, 0.5 ]
}} />;
/*
// in myEffect2:
uniform float floatValue;
uniform vec3 vec3Value;
*/
}
```
Renders a shader with an image (texture):
```js
render () {
return <GL.View shader={shaders.myEffect3}
width={200} height={100}
uniforms={{
textureName: {{ uri: "...url" }} // RN convention
}} />;
/*
// in myEffect3:
uniform sampler2D textureName;
*/
}
```
## Props
- **`shader`** *id created by GL.Shaders.create* **(required)**: The shader to use for rendering the `GL.View`.
- **`width`** and **`height`** *Number* **(required)**: the size of the view.
- **`uniforms`**: an object that contains all uniform parameters to send to the shader. The key is the uniform name and the value is whatever value that makes sense for the uniform's type (see below).
- **`opaque`**: specify if the view should be opaque. By default, it is true, meaning that the GL View won't support texture opacity and alpha channel.
## Uniform types
Here is the correspondance of GLSL and JavaScript types.
- `int`, `float`, `bool` : Number (e.g: `42`).
- `sampler2D` : an object with an `uri` (`require("image!id")` is also supported), exactly like the `source` prop of `React.Image`.
- `vecN`,`ivecN`,`bvecN` where N is {2,3,4} : an array of N Number (e.g: `[1, 2, 3.5]` for a `vec3`)
Complex struct types and uniform array **are not** currently supported.
## Note on textures
Images given to uniforms props are always loaded as they are. If you want resize/crop features, you can use an `React.Image` inside a `GL.Target`.
...@@ -111,7 +111,6 @@ GLView.propTypes = { ...@@ -111,7 +111,6 @@ GLView.propTypes = {
width: PropTypes.number.isRequired, width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired, height: PropTypes.number.isRequired,
uniforms: PropTypes.object, uniforms: PropTypes.object,
childrenUniform: PropTypes.string,
opaque: PropTypes.bool opaque: PropTypes.bool
}; };
GLView.defaultProps = { GLView.defaultProps = {
......
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