Introducing: ShaderPad

[−] spankalee 27d ago

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

is one: https://github.com/halvves/shader-doodle but it hasn't been updated in a long time and I think builds to UMD

is a newer one with a nice site, but I haven't used it: https://keithclark.github.io/shaderview/

[−] rileyjshaw 21d ago

I spent the weekend adding a new version with a web component export. Documentation is here[1]. A quick example:

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

[−] rgbrgb 27d 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/

[−] denntenna 27d 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 27d 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?

[−] rileyjshaw 27d ago

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

[−] mncharity 27d 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.

Introducing: ShaderPad (rileyjshaw.com)

22 comments