3 ms·
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/ha
by spankalee 6mo ago
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 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/ https://keithclark.github.io/shaderview/
- rileyjshaw 6mo agoThis 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/ https://misery.co/shaderpad/docs/guides/react/
- rileyjshaw 6mo agoI 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/ https://misery.co/shaderpad/docs/components/web-component/