Re:Introducing: ShaderPad
by rileyjshaw on Saturday April 18, 2026 @01:10AM
(#47813303)
This is a great idea! ShaderPad should be able to wrap into a web component easily. I already export a React wrapper[1], so I can use a similar API for the web component.
Give me a few days and check back in.
Re:Introducing: ShaderPad
by rileyjshaw on Thursday April 23, 2026 @05:48PM
(#47882561)
I spent the weekend adding a new version with a web component export. Documentation is here[1]. A quick example:
<shader-pad style="width: 320px; height: 480px">
<img src="/trees.jpg" data-texture="u_trees" />
<script type="x-shader/x-fragment">
#version 300 es
precision highp float;
in vec2 v_uv;
uniform float u_time;
uniform sampler2D u_trees;
out vec4 outColor;
void main() {
vec2 p = 2.0 * (v_uv - 0.5);
float r = length(p);
vec2 uv = 0.15 + v_uv * 0.7 + p * (0.1 + 0.025 * sin(u_time * 2.0)) * r;
outColor = texture(u_trees, uv);
}
</script>
</shader-pad>
---
[1]: https://misery.co/shaderpad/docs/components/web-component/
<shader-doodle> is one: https://github.com/halvves/shader-doodle but it hasn't been updated in a long time and I think builds to UMD
<shaderview> is a newer one with a nice site, but I haven't used it: https://keithclark.github.io/shaderview/