Introducing: ShaderPad

144 points by evakhoury 38 days ago | 22 comments

spankalee 35 days 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 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 29 days ago | |

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 35 days ago | |

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/

coxmi 35 days ago |

Nice project!

I’ve been doing something very similar recently[0] with slightly different goals (still a tiny bundle size, but fully typed uniforms, deeper control over buffer bytes and layout, and less setup than raw gl).

Some in the comments seem to think GL is dead, but for me I think it’s just an easier shader language for beginners and that’s most important for dabbling and many small web use cases.

[0] https://github.com/coxmi/gleasy

rileyjshaw 35 days ago | |

Nice work! Great use of proxies for setting uniforms.

coxmi 35 days ago | | |

Thank you!

rgbrgb 35 days ago |

looks great, congrats. quick note, the examples are really cool, but the link in your blogpost is broken.

working link: https://misery.co/shaderpad/docs/getting-started/examples/

rileyjshaw 35 days ago | |

Great catch - thanks for taking the time to let me know! I just fixed the link.

fudged71 35 days ago | |

Also one or more examples in this blog post would have been great to see

rileyjshaw 35 days ago | | |

Great point; I wasn’t sure if anyone would see this post so I spent most of my time on the docs. I just added a few visual examples to the post. Thanks!

denntenna 35 days ago |

really appreciate this. As an occasional dabbler in shaders, I find setting up the boilerplate to get a shader working on web painful to setup every time I have to work on a project that requires. starring this on github for later.

avaer 35 days ago |

GLSL. Makes sense as the breezy path, but it seems WebGL2 is a dead evolutionary branch, even if it can be transpiled over.

What are your thoughts on supporting other languages? Or did I miss that in the docs?

koolala 35 days ago | |

It isn't a dead end when WebGPU failed at all their graphics performance promises for being better than it in every way.

socalgal2 35 days ago | | |

What part of WebGPU isn't meeting graphics performance? AFAICT it's only people who continue to treat it like WebGL. It's like C++ programmers complaining Rust is slow and then Rust programmers say "stop using it like C++". If you want perf in a low-level API liek WebGPU you have to work with it using patterns that fit. If you stick to your WebGL patterns then yea, your app will suck.

avaer 35 days ago | | |

I was speaking more to the willingness of vendors to support. It's debatable how well WebGL(2)/WebGPU are designed and especially implemented. But it does seem like most evolutionary features, if they make it to browsers at all, would come from the WebGPU path. Not saying the reasons for that are good.

rileyjshaw 35 days ago |

Thanks for posting this! Really appreciate everyone’s comments.

mncharity 35 days ago |

I revisit the site's open tab, and find a full screen, black background:

> It is 12:56am. Do you still want to be on the internet? Yes No

Lol. Nice touch.

> No -> "Okay", fade to black.

rileyjshaw 35 days ago | |

Universe says go to bed :P

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