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. |
hue | number | 0 | Adjust the hue of the shader output. |
saturation | number | 1 | Adjust the saturation of the shader output. |
brightness | number | 1 | Adjust the brightness of the shader output. |
speed | number | 1 | Adjust the speed of the shader output. |
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
,iMouse
, and more. - GLSL Shader Rendering: Render full-featured ShaderToy-like fragment shaders.
- iMouse Support: Interactive shaders with real-time mouse input (click or hover).
- HSV Color Control: Dynamically adjust shader hue, saturation, and brightness.
- Responsive Design: Automatically adjusts canvas size with container resizing.
- Runtime Control: Play, pause, and reset shaders dynamically.
Notes
- Converts and wraps Shadertoy-style shaders to work in a WebGL2 environment.
- Color control (
hue
,saturation
,brightness
) is applied as a post-processing step to simulate HSV adjustments.