Skip to content
A friendly web-component for writing and rendering shaders.
Branch: master
Clone or download
Latest commit 42653a5 Apr 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshot shader-doodle Apr 11, 2019
src fix mouse uniform math Apr 12, 2019
.editorconfig
.gitignore
LICENSE
README.md add css-doodle to see also section Apr 12, 2019
package-lock.json 0.0.5 Apr 12, 2019
package.json 0.0.5 Apr 12, 2019
rollup.config.js

README.md

<shader-doodle />

Latest NPM release License

A friendly web-component for writing and rendering shaders.

demo

<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>
  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);
  }
</shader-doodle>

Import

npm install shader-doodle

import 'shader-doodle';
<shader-doodle>
  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);
  }
</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
  • texture attribute
  • video for texture attribute
  • webcam for texture attribute
  • uniforms for device orientation & gyro
  • lerp attribute for mouse
  • custom uniforms attribute
  • custom vertex shader attribute

See Also

You can’t perform that action at this time.