Hacker News Reader

Comment by 90s_dev | Hacker News Reader

On this note, can anyone recommend basic webgl 2d effects tutorial? I have a super exciting project I'm really close to announcing, but the last step is adding some pretty Animal Well style effects via webgl2, but I know practically nothing about webgl except the very very basics that you learn from webgl2fundamentals.org. Any pointers would be appreciated.

View on HN

I like https://thebookofshaders.com/ . It’s unfinished and I don’t think it’s been updated in years, but what’s there is pretty good

I second this! Shame it’s still not finished though. I did this tutorial like 5 years ago

Webgl2fundamentals is pretty great :)

shadertoy.com

The "problem" with it is that you only learn about fragment shaders, you should also learn about the WebGL API, and vertex shaders.

Not having to learn the API & vertex shaders is definitely a feature of ShaderToy, not a problem. :P The extremely low barrier to entry to writing shaders is one of it’s best qualities. Anyway, the question asked about 2d effects, so they maybe don’t need vertex shaders, and they can of course learn the small amount of WebGL API needed somewhere else like https://webgl2fundamentals.org/.

https://www.shadertoy.com/view/XXyGzh

... this is amazing!

I can't wait to dig in and figure out how to add effects like this over my 2d content!

It’s super easy. ShaderToy draws a rectangle on the screen and runs the given shader on it. There’s a small amount of plumbing to wire in a few variables like time & mouse position, and your texture coordinates. The rendering part of ShaderToy is simple enough that you can make your own clone in a day. The rest of the site is the hard part, the editor, the API & saving shaders in the cloud, getting lots of people to write awesome shaders, etc., but the rendering part is near trivial.

Reply on news.ycombinator.com