Skip to main content

​
Overview

Shader Toy Viewer is a component that renders interactive GLSL shaders from ShaderToy in the browser using WebGL. Features adjustable color controls and mouse interaction modes.

​
Usage

<template>
  <ShaderToy
    :shaderCode="glslCode"
    mouseMode="click"
    :hue="0"
    :saturation="1"
    :brightness="1"
    :speed="1"
  />
</template>

<script setup>
const glslCode = `
  void mainImage( out vec4 fragColor, in vec2 fragCoord )
  {
    // Your shader code here
  }
`
</script>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
shaderCodestring-GLSL fragment shader source code from ShaderToy.
mouseMode'click' | 'hover''click'Mouse tracking mode: either on click or continuous hover.
huenumber0Adjust the hue of the shader output.
saturationnumber1Adjust the saturation of the shader output.
brightnessnumber1Adjust the brightness of the shader output.
speednumber1Adjust the speed of the shader output.
classstring-Custom classes to apply to the container.

​
Dependencies

  • ogl

​
Credits

  • Built with OGL.
  • Inspired by Shadertoy and adapted for Vue compatibility.

Build docs developers (and LLMs) love

Get started for freeTalk to us