`GL.Shaders.create(spec)` allows to create shaders that can be used later in *GL.View* component.
**Example usage:**
```js
varshaders=GL.Shaders.create({
myEffect:{
frag:`
void main () {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // red
}
`
},
...
})
// Use it later:
<GL.Viewshader={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.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.Viewshader={shaders.myEffect}
width={200}height={100}/>;
}
```
Renders a shader with uniform parameters:
```js
render(){
return<GL.Viewshader={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.Viewshader={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`.