shader-doodle v0.0.5

<shader-doodle />

A friendly web-component for writing and rendering shaders.

NOTE: this README and branch are for the new <shader-doodle /> alpha. To view the current stable version go to the v0 branch.

<shader-doodle /> is a simple web-component loosely based on the The Book of Shaders's glsl previewer and Shadertoy. It sets up a flat responsive canvas on which to draw fragment shaders, and provides several built in uniforms relating to time, resolution, mouse position, etc.

Usage

Script Include

<script src="https://unpkg.com/shader-doodle"></script>
<shader-doodle>
  <script type="x-shader/x-fragment">
    void main() {
      vec2 st = gl_FragCoord.xy / u_resolution.xy;
      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));

      gl_FragColor = vec4(color, 1.0);
    }
  </script>
</shader-doodle>

Import

npm install shader-doodle

import 'shader-doodle';

<shader-doodle>
  <script type="x-shader/x-fragment">
    void main() {
      vec2 st = gl_FragCoord.xy / u_resolution.xy;
      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));

      gl_FragColor = vec4(color, 1.0);
    }
  </script>
</shader-doodle>

API

Right now the api is fairly basic. The default syntax is vanilla glsl and there are several built in uniforms following the conventions seen in The Book of Shaders. If you prefer ShaderToy's syntax you can set an attribute like so: <shader-doodle shadertoy />.

Pre-Defined Uniforms

Default (<shader-doodle />)

• uniform float u_time;: shader playback time (in seconds)
• uniform float u_delta;: delta time between frames (in seconds)
• uniform int u_frame;: shader playback frame
• uniform vec4 u_date;: year, month, day and seconds
• uniform vec2 u_resolution;: viewport resolution (in pixels)
• uniform vec2 u_mouse;: mouse pixel coords (x & y)

Shadertoy (<shader-doodle shadertoy />)

• uniform float iTime;: shader playback time (in seconds)
• uniform float iDelta;: delta time between frames (in seconds)
• uniform int iFrame;: shader playback frame
• uniform vec4 iDate;: year, month, day and seconds
• uniform vec2 iResolution;: viewport resolution (in pixels)
• uniform vec4 iMouse;: -- mouse pixel coords. xy: current (if mousedown), zw: click.

NOTE: the only functional difference is in mouse position behavior

Next steps (ordered by priority)

• shader precision attribute
• clearColor attribute
• touch support for mouse uniform
• uniforms for device orientation & gyro
• lerp attribute for mouse
• custom uniform component
• webgl2
• api for multi-pass?

See Also

• shaderpen - This library's predecessor.
• css-doodle - The inspiration behind rewriting shaderpen as a web-component.
• The Book of Shaders - A gentle step-by-step guide through the world Fragment Shaders.
• Shadertoy - Shader playground.