{"id":13577132,"url":"https://github.com/halvves/shader-doodle","last_synced_at":"2025-05-16T14:04:59.394Z","repository":{"id":34627029,"uuid":"180878739","full_name":"halvves/shader-doodle","owner":"halvves","description":"A friendly web-component for writing and rendering shaders.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:34:23.000Z","size":74568,"stargazers_count":566,"open_issues_count":6,"forks_count":38,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-10T08:49:31.447Z","etag":null,"topics":["canvas","creative-coding","fragment-shader","glsl","glsl-sandbox","html-canvas","javascript","pixel-shader","shader-playback","shaders","shadertoy","texture","uniform","vertex-shaders","webgl"],"latest_commit_sha":null,"homepage":"https://shader-doodle-overview.glitch.me/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/halvves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-11T21:12:40.000Z","updated_at":"2025-04-01T07:04:48.000Z","dependencies_parsed_at":"2024-05-03T11:14:13.639Z","dependency_job_id":"b6112070-a31c-4b73-b574-148ca897491e","html_url":"https://github.com/halvves/shader-doodle","commit_stats":{"total_commits":108,"total_committers":7,"mean_commits":"15.428571428571429","dds":0.2592592592592593,"last_synced_commit":"7afed13c6b31699d99d6684d192e22f6b19b3d83"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvves%2Fshader-doodle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvves%2Fshader-doodle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvves%2Fshader-doodle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halvves%2Fshader-doodle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halvves","download_url":"https://codeload.github.com/halvves/shader-doodle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544146,"owners_count":22088807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","creative-coding","fragment-shader","glsl","glsl-sandbox","html-canvas","javascript","pixel-shader","shader-playback","shaders","shadertoy","texture","uniform","vertex-shaders","webgl"],"created_at":"2024-08-01T15:01:18.358Z","updated_at":"2025-05-16T14:04:54.382Z","avatar_url":"https://github.com/halvves.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Real World"],"sub_categories":["Components"],"readme":"# \u0026lt;shader-doodle /\u0026gt;\n\n[![Latest NPM release][npm-badge]][npm-badge-url]\n[![Dependencies][deps-badge]][deps-badge-url]\n[![Minzip Size][size-badge]][size-badge-url]\n[![License][license-badge]][license-badge-url]\n\n*A friendly web-component for writing and rendering shaders.*\n\n[![hello shader-doodle](screenshot/hello.gif)](https://hello-shader-doodle.glitch.me) [![fire rings](screenshot/fire-rings.gif)](https://codepen.io/pjkarlik/pen/abOVwaB) [![contrast bath](screenshot/contrast-bath.gif)](https://codepen.io/halvves/pen/xxGXdRv)\n[![audiovisualizer w/ feedback](screenshot/audio-visualizer.gif)](https://codepen.io/halvves/pen/abOwJbR) [![rainbow woozy](screenshot/rainbow-woozy.gif)](https://codepen.io/halvves/pen/WNbgvNx) [![vertigo truchet tiles](screenshot/vertigo-truchet-tiles.gif)](https://codepen.io/pjkarlik/pen/yLNEoBK)\n[![raymarching + clouds](screenshot/raymarching-clouds.gif)](https://codepen.io/mhazani/pen/VwwQYvE) [![audio reactive](screenshot/audio-reactive.gif)](https://codepen.io/pjkarlik/pen/JjdVmqv) [![space flame orb](screenshot/space-flame-orb.gif)](https://codepen.io/pjkarlik/pen/poJYLea)\n[![spooky](screenshot/spooky.gif)](https://codepen.io/halvves/pen/dyyvrxN) [![vhs webcam](screenshot/webcam.gif)](https://codepen.io/halvves/pen/VwwdQEN) [![audio + mouse](screenshot/audio-mouse.gif)](https://codepen.io/halvves/pen/PoqGvVG)\n\nNOTE: this README and branch are for the new `\u003cshader-doodle /\u003e` alpha. To view the current stable version go to the [v0 branch](https://github.com/halvves/shader-doodle/tree/v0).\n\n`\u003cshader-doodle /\u003e` is a simple web-component loosely based on the [The Book of Shaders](https://thebookofshaders.com/)'s glsl previewer and [Shadertoy](https://www.shadertoy.com/). 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.\n\n## Usage\n\n### Script Include\n\n```html\n\u003cscript src=\"https://unpkg.com/shader-doodle@alpha\"\u003e\u003c/script\u003e\n\u003cshader-doodle\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    void main() {\n      vec2 st = gl_FragCoord.xy / u_resolution.xy;\n      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));\n\n      gl_FragColor = vec4(color, 1.0);\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n### Import\n\n`npm install shader-doodle@alpha`\n\n```javascript\nimport 'shader-doodle';\n```\n\n```html\n\u003cshader-doodle\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    void main() {\n      vec2 st = gl_FragCoord.xy / u_resolution.xy;\n      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));\n\n      gl_FragColor = vec4(color, 1.0);\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n## API\n\nRight 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](https://thebookofshaders.com/). If you prefer ShaderToy's syntax you can set an attribute like so: `\u003cshader-doodle shadertoy /\u003e`.\n\n### Pre-Defined Uniforms\n\n#### Default (`\u003cshader-doodle /\u003e`)\n\n* `uniform float u_time;`: shader playback time (in seconds)\n* `uniform float u_delta;`: delta time between frames (in seconds)\n* `uniform int u_frame;`: shader playback frame\n* `uniform vec4 u_date;`: year, month, day and seconds\n* `uniform vec2 u_resolution;`: viewport resolution (in pixels)\n* `uniform vec2 u_mouse;`: mouse pixel coords (x \u0026 y)\n* `uniform vec4 u_mousedrag`: xy: last click or current drag position, zw: starting drag position (flipped negative when not mousedown)\n* `uniform vec3 u_orientation;`: [device orientation api](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation) values: alpha, beta, gamma\n\n#### Shadertoy (`\u003cshader-doodle shadertoy /\u003e`)\n\n* `uniform float iTime;`: shader playback time (in seconds)\n* `uniform float iDelta;`: delta time between frames (in seconds)\n* `uniform int iFrame;`: shader playback frame\n* `uniform vec4 iDate;`: year, month, day and seconds\n* `uniform vec2 iResolution;`: viewport resolution (in pixels)\n* `uniform vec2 iCurrentMouse;`: mouse pixel coords (x \u0026 y)\n* `uniform vec4 iMouse`: xy: last click or current drag position, zw: starting drag position (flipped negative when not mousedown)\n* `uniform vec3 iOrientation;`: [device orientation api](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation) values: alpha, beta, gamma\n\n_NOTE: the slight difference in mouse uniform naming_\n\n### Textures\n\nTextures can be used as a `sampler2D` in a shader by using the `\u003csd-texture /\u003e` component. This will pass in two uniforms:\n\n* `uniform sampler2D {texture_name}`\n* `uniform vec2 {texture_name}_resolution`\n\n#### Attributes\n\n* `src`: source of an image/video or selector for a canvas\n* `name`: specify a name for the texture uniform (will default to `u_texture{index}`)\n* `webcam`: overrides `src` and tries to use webrtc webcam as texture source\n* `force-update`: forces a texture to always update (useful when using a canvas animation or animated gif as a texture)\n\n#### Examples\n\n##### Image:\n```html\n\u003cshader-doodle\u003e\n  \u003csd-texture src=\"image.jpg\"\u003e\u003c/sd-texture\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D u_texture0;\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n      vec4 texture = texture2D(u_texture0, uv);\n\n      gl_FragColor = texture;\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n##### Video:\n```html\n\u003cshader-doodle\u003e\n  \u003csd-texture src=\"video.mp4\" name=\"video\"\u003e\u003c/sd-texture\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D video;\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n      vec4 texture = texture2D(video, uv);\n\n      gl_FragColor = texture;\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n##### Canvas:\n```html\n\u003ccanvas id=\"canvas\"\u003e\u003c/canvas\u003e\n\u003cshader-doodle\u003e\n  \u003csd-texture src=\"#canvas\" name=\"u_canvas\"\u003e\u003c/sd-texture\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D u_canvas;\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n      vec4 texture = texture2D(u_canvas, uv);\n\n      gl_FragColor = texture;\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n\u003cscript\u003e\n  const text = 'L  O  R  E  M     I  P  S  U  M';\n  const canvas = document.getElementById(\"canvas\");\n  canvas.height = 1024; canvas.width = 1024;\n  const ctx = canvas.getContext(\"2d\");\n  ctx.font = \"Bold \" + canvas.width / 12 + \"px 'Helvetica'\";\n  ctx.textAlign = \"center\";\n  ctx.textBaseline = \"top\";\n  ctx.fillStyle = '#000';\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n  ctx.fillStyle = '#fff';\n  ctx.translate(canvas.width / 2, 0);\n  for (var i = -1; i \u003c 6; i++) {\n    ctx.fillText(text, 0, i * canvas.height / 6);\n  }\n\u003c/script\u003e\n```\n\n##### Camera:\n```html\n\u003cshader-doodle\u003e\n  \u003csd-texture webcam name=\"cam\"\u003e\u003c/sd-texture\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D cam;\n    uniform vec2 cam_resolution;\n\n    vec2 coverScreen(vec2 fragCoord, vec2 resolution, float aspect) {\n      vec2 uv = 0.5 * (2.0 * fragCoord - resolution);\n      if (resolution.x / resolution.y \u003e aspect) {\n        uv = 0.5 - uv / vec2(resolution.x, -resolution.x / aspect);\n      } else {\n        uv = 0.5 - uv / vec2(resolution.y * aspect, -resolution.y);\n      }\n      return uv;\n    }\n\n    void main() {\n      float aspect = cam_resolution.x / cam_resolution.y;\n      vec2 uv = coverScreen(gl_FragCoord.xy, u_resolution, aspect);\n      vec4 texture = texture2D(cam, uv);\n\n      gl_FragColor = texture;\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n### Audio Data\n\nThe frequency and waveform data from an audio source can be used in a shader as a `sampler2D` by using the `\u003csd-audio /\u003e` component. This will pass in one uniform:\n\n* `uniform sampler2D {audio_name}`\n\nThe audio data is setup as two rows of texels.\n\nThe first row is frequency data. The x/u axis corresponds to frequency (scaled to 0..1), and the value of a texel at a given x/u is the amplitude of the corresponding frequency.\n\nThe second row is wave data. The x/u axis corresponds to the x axis of the waveform. (scaled to 0..1), and the value of a texel at a given x/u is the y axis of the waveform.\n\n#### Attributes\n\n* `src`: a url to an audio file or an id selector for an `\u003caudio /\u003e` element.\n* `name`: specify a name for the texture uniform (will default to `u_audio{index}`)\n* `loop`: (_temporarily disabled as part of an ios13 fix_) loop the audio file (_doesn't work on an existing audio tag_)\n* `autoplay`: (_temporarily disabled as part of an ios13 fix_) autoplay the audio file (_doesn't work on an existing audio tag_)\n* `crossorigin`: (_temporarily disabled as part of an ios13 fix_) specify cors (_doesn't work on an existing audio tag_)\n\nNot yet implemented is a `mic` attribute that will allow using audio from a webrtc source.\n\n#### Examples\n\n##### File:\n```html\n\u003cshader-doodle\u003e\n  \u003csd-audio src=\"./audio.mp3\" autoplay loop\u003e\u003c/sd-audio\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D u_audio0;\n\n    float amplitude(sampler2D audio, float f) {\n      return texture2D(audio, vec2(f, .25)).x;\n    }\n\n    float wave(sampler2D audio, float t) {\n      return texture2D(audio, vec2(t, .75)).x;\n    }\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n      float w = wave(u_audio0, uv.x);\n      float a = amplitude(u_audio0, abs(.5 - uv.y) / w);\n\n      vec3 color = vec3(a * .5, (1. - a), 5. * a * (1. - a)) * a;\n      color.rb += (1. - smoothstep(.0, .1, abs(w - uv.y))) * a;\n\n      gl_FragColor = vec4(color, 1.);\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n##### Audio Tag:\n```html\n\u003caudio src=\"./audio.mp3\" autoplay loop id=\"audio\"\u003e\u003c/audio\u003e\n\u003cshader-doodle\u003e\n  \u003csd-audio src=\"#audio\"\u003e\u003c/sd-audio\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D u_audio0;\n\n    float amplitude(sampler2D audio, float f) {\n      return texture2D(audio, vec2(f, .25)).x;\n    }\n\n    float wave(sampler2D audio, float t) {\n      return texture2D(audio, vec2(t, .75)).x;\n    }\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n      float w = wave(u_audio0, uv.x);\n      float a = amplitude(u_audio0, abs(.5 - uv.y) / w);\n\n      vec3 color = vec3(a * .5, (1. - a), 5. * a * (1. - a)) * a;\n      color.rb += (1. - smoothstep(.0, .1, abs(w - uv.y))) * a;\n\n      gl_FragColor = vec4(color, 1.);\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n## Next steps (ordered by priority)\n\n* shader precision attribute\n* clearColor attribute\n* mouseover 0-1 uniform\n* LinearCopy/NearestCopy helpers\n* lerp attribute for mouse, mouseover, and deviceorientation\n* custom uniforms\n* webgl2\n* improvements to buffers (shared buffers etc...)\n\n## See Also\n\n* [shaderpen](https://github.com/halvves/shaderpen/) - This library's predecessor.\n* [css-doodle](https://github.com/css-doodle/css-doodle) - The inspiration behind rewriting shaderpen as a web-component.\n* [The Book of Shaders](https://thebookofshaders.com/) - A gentle step-by-step guide through the world Fragment Shaders.\n* [Shadertoy](https://www.shadertoy.com/) - Shader playground.\n\n[npm-badge]: https://img.shields.io/npm/v/shader-doodle/alpha\n[npm-badge-url]: https://www.npmjs.com/package/shader-doodle/v/alpha\n[deps-badge]: https://img.shields.io/david/halvves/shader-doodle\n[deps-badge-url]: https://david-dm.org/halvves/shader-doodle\n[size-badge]: https://img.shields.io/bundlephobia/minzip/shader-doodle/1.0.0-alpha.20\n[size-badge-url]: https://bundlephobia.com/result?p=shader-doodle@1.0.0-alpha.20\n[license-badge]: https://img.shields.io/github/license/halvves/shader-doodle\n[license-badge-url]: ./LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalvves%2Fshader-doodle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalvves%2Fshader-doodle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalvves%2Fshader-doodle/lists"}