Shader Toy Viewer
A powerful and flexible component to render interactive GLSL shaders from ShaderToy in the browser.
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
shaderCode | string | - | GLSL fragment shader source code from ShaderToy. |
mouseMode | 'click' | 'hover' | 'click' | Mouse tracking mode: either on click or continuous hover. |
class | string | - | Custom classes to apply to the container. |
Installation
Make sure to include and install ogl (for rendering) in your project.
Install using CLI
Install Manually
Copy and paste the following code:
Features
- Shadertoy-Compatible: Supports Shadertoy-style
mainImage,iTime,iResolution, andiMousevariables. - GLSL Shader Rendering: Render full-featured ShaderToy-like fragment shaders.
- iMouse Support: Interactive shaders with real-time mouse input (click or hover).
- iDate, iTime, iResolution: Full compatibility with ShaderToy uniform standards.
- Resize Support: Automatically adjusts canvas size with container.
- Runtime Control: Play, pause, and reset shaders dynamically.
Notes
- Converts and wraps Shadertoy-style shaders to work in a WebGL2 environment.