[spankalee]

I like versions of this that are web components so that they're declarative and you can just drop them into HTML.

<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/

[rileyjshaw]

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>

Let me know if you have any feedback, or if you make something cool with it!

---

[1]: https://misery.co/shaderpad/docs/components/web-component/

[rileyjshaw]

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.

[1]: https://misery.co/shaderpad/docs/guides/react/