shadertoy-renderer
v1.1.0
Published
A lightweight WebGL 2.0 shader renderer for ShaderToy-compatible fragment shaders
Downloads
30
Maintainers
bartek_makosReadme
shadertoy-renderer
A lightweight WebGL 2.0 shader renderer for ShaderToy-compatible fragment shaders.
Original Project
This is an npm package version of ShaderToyLite.js by chipweinberger.
- Original Repository: https://github.com/chipweinberger/ShaderToyLite.js
- Original Author: chipweinberger
- Original Demo: https://chipweinberger.github.io/ShaderToyLite.js/ShaderToyLite-demo.html
Features
- 🚀 Lightweight - Only ~400 lines of code
- 🔧 Direct ShaderToy compatibility - Load shaders without modification
- 🎯 Pixel-perfect rendering
- 🔄 Multiple buffer support (BufferA, BufferB, BufferC, BufferD)
- 🖼️ Custom texture support
- 📱 WebGL 2.0 powered
- 🎮 Mouse and time-based interactions
Installation
npm install shadertoy-rendererUsage
ES6 Modules
import ShaderToyRenderer from 'shadertoy-renderer';
const toy = new ShaderToyRenderer('myCanvas');
toy.setImage({
source: `
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);
}
`
});
toy.play();CommonJS
const ShaderToyRenderer = require('shadertoy-renderer');
const toy = new ShaderToyRenderer('myCanvas');
// ... same usage as aboveAPI
Constructor
new ShaderToyRenderer(canvasId)- Initialize with canvas element ID
Shader Methods
setCommon(source)- Set shared shader codesetBufferA(config)- Configure buffer A shadersetBufferB(config)- Configure buffer B shadersetBufferC(config)- Configure buffer C shadersetBufferD(config)- Configure buffer D shadersetImage(config)- Set main image shader
Playback Control
play()- Start animationpause()- Pause animationreset()- Reset animation to beginningtime()- Get current animation time in secondsisPlaying()- Check if animation is playing
Utility Methods
addTexture(texture, key)- Add custom texturesetOnDraw(callback)- Set custom draw callback
Configuration Object
When setting shaders, use a configuration object:
{
source: "void mainImage...", // Shader source code
iChannel0: "A", // Input from BufferA
iChannel1: "B", // Input from BufferB
iChannel2: "rock", // Input from custom texture
iChannel3: "C" // Input from BufferC
}Supported Uniforms
All standard ShaderToy uniforms are supported:
iResolution- Viewport resolutioniTime- Shader playback timeiTimeDelta- Render time between framesiFrame- Frame counteriMouse- Mouse coordinatesiDate- Current date/timeiChannel0-3- Input texturesiChannelTime[4]- Channel playback timesiChannelResolution[4]- Channel resolutions
Requirements
- WebGL 2.0 compatible browser
- Canvas element in the DOM
Limitations
- WebGL 2.0 only (no WebGL 1.0 fallback)
- No built-in VR, sound, or keyboard support
- Some rendering issues on iOS devices
- No pre-provided textures (you must supply your own)
Example
<!DOCTYPE html>
<html>
<head>
<script type="module">
import ShaderToyRenderer from './node_modules/shadertoy-renderer/index.js';
const toy = new ShaderToyRenderer('canvas');
toy.setImage({
source: `
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);
}
`
});
toy.play();
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>License
MIT - Check the original repository for licensing details.