shader-doodle

0.0.5 • Public • Published

<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

Package Sidebar

Install

npm i shader-doodle

Weekly Downloads

348

Version

0.0.5

License

MIT

Unpacked Size

35.6 kB

Total Files

6

Last publish

Collaborators

  • halvves