GLSL

100% a WIP, use at own risk.

Usage example

const glsl = new GLSL(canvas);

glsl.addVariable('u_delta', [0, 2, 4]);

glsl.fragment`
out vec4 fragColor;
void main() {
  vec2 uv = gl_FragCoord.xy/u_resolution.xy;
  vec3 col = 0.5 + 0.5 * cos(u_time + uv.xyx + u_delta);
  fragColor = vec4(col,1.0);
}`;

glsl.render();

alternatively you can let GLSL generate the canvas by providing width and height as follow:

const glsl = new GLSL([100, 100]);
document.body.appendChild(glsl.canvas);

Constructor options

The second argument of GLSL accepts a set of options.

const defaultOptions = {
  antialias: false, // boolean
  precision: 1, // 0: lowp, 1: mediump, 2: highp
  webglVersion: 'webgl2' // 'webgl', 'webgl2'
};

new GLSL([100, 100], defaultOptions)

Variables

Variables provided by GLSL

u_time shows the elapsed time in s.

u_resolution is the resolution based on the canvas' size.

Custom Variables

glsl.addVariable('u_background', [1.,0.,0.,1.]);

glsl.fragment`void main() {
  gl_FragColor = u_background;
}`;

glsl.render();

Dynamically updating variables

glsl.addVariable returns a function, which let's you update the value.

Attention: currently, updateVariable() doesn't check that the new variable matches the initial variable.

const updateVarOne = glsl.addVariable('u_var1', [1., 1., 1., 1.]);

glsl.fragment`void main() {
  gl_FragColor = u_var1;
}`;

setInterval(_ => {
  updateVarOne([Math.random(), Math.random(), Math.random(), 1.]);
}, 1000);

glsl.render();

Textures

Image based textures

glsl.addTexture('u_image', 'http://url-to-texture');

const img = new Image();
img.onLoad = _ => {
  glsl.addTexture('u_image', img);
};

in either case you can then use the texture in your fragment shader as below:

glsl.fragment`void main() {
  vec2 uv = gl_FragCoord.xy/u_resolution.xy;
  gl_FragColor = texture2D(u_image, vec2(uv.x, 1. - uv.y - 1.0));
}`;

glsl.render();

Kill the instance

The following command will stop the rendering loop.

glsl.kill();
glsl = null; // be nice to the garbage collector