Effects / Shader
The shader effect puts a WebGL quad (2 triangles) over a component and initiates a GLSL shader in it.
Options
| Option | What it does |
|---|---|
| padding | Distance to draw outside of the component in pixels |
| vs | a string containing a vertex shader |
| fs | a string containing a fragment shader |
Example
Example code
import Tile from "../../components/Tile.js";
import withNeon, { fx } from "react-neon";
const vs = `
attribute vec4 position;
void main() {
gl_Position = position;
}
`;
const fs = `
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main()
{
vec2 uv = gl_FragCoord.xy / u_resolution;
uv = uv + vec2(0.5 - cos(uv.y * 8.0), 2.0) * (sin(u_time) * 0.05);
float cb = floor(uv.x*25.) + floor(uv.y*25.);
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.15 * mod(cb, 2.0));
}
`
const effect = new fx.Shader({ vs: vs, fs: fs });
const Shader = withNeon(Tile, effect);