ShaderToyLite.js
ShaderToyLite.js is a full featured ShaderToy renderer, in ~400 lines of code.
Demo
^ This demo renders Paint Streams by Michael Moroz
Note: iOS has rendering artifcacts due to texelFetch not being fully supported
Features
- direcly load any ShaderToy shaders (except sound & vr) without modification
- supports buffer shaders (i.e BufferA, BufferB, BufferC, BufferD)
- pixel perfect rendering
- supports all uniforms
- upload your own textures
- shader common code (i.e. ‘Common’ tab in ShaderToy)
- update shaders at any time
- uses the same texture format as ShaderToy (RGBA float32)
- WebGL 2.0 (only)
Not Supported:
- VR, Sound, Keyboard
- pre-provided textures (‘Wood’, ‘Rock Tiles’, etc)
Usage
// initialize
var toy = new ShaderToyLite('myCanvas');
// add webgl textures (optional)
toy.addTexture(texture, 'rock');
// set shaders
toy.setCommon("");
toy.setBufferA({source: bufferA, iChannel0: 'rock'});
toy.setImage({source: image, iChannel0: 'A'});
// draw callback (optional)
toy.setOnDraw((){
console.log(toy.getTime());
})
// start render loop
toy.play();
// pause render loop
toy.pause();
// currently playing?
tod.isPlaying();
// reset time to zero
toy.rewind();
Minimal Example
Minimal example showing multiple buffer usage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ShaderToyLite</title>
</head>
<body>
<canvas id="myCanvas" width="840" height="472"></canvas>
<script>
var a = `
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord/iResolution.xy;
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
fragColor = vec4(col,1.0);
}
`;
var image = `
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec4 col = texture(iChannel0, uv);
fragColor = vec4(col.rgb, 1.);
}
`;
var toy = new ShaderToy('myCanvas');
toy.setCommon('');
toy.setBufferA({source: a});
toy.setImage({source: image, iChannel0: 'A'});
toy.play();
</script>
</body>
</html>