If you want to go beyond the "hello, world", I highly recommend this huge series: <a href="https://www.youtube.com/channel/UCSnyjB_8iVxi2ZAfn_1L6tA" rel="nofollow">https://www.youtube.com/channel/UCSnyjB_8iVxi2ZAfn_1L6tA</a> (it's up to episode 130-something now... but start at the beginning!)<p>After grokking the basics of WebGL I was stuck at where to go next. I could draw triangles, and I could give them perspective... but I didn't know how to combine them into something bigger. The Sketchpunk series was really good at showing how to build it into a library and make real projects.<p>I used that knowledge to make this minecraft-y thing: <a href="https://github.com/mrspeaker/webgl2-voxels" rel="nofollow">https://github.com/mrspeaker/webgl2-voxels</a> (which I especially love as it doesn't use any compilation/build steps - just native modules and plain ol' javascript!).
> The hard part of learning OpenGL for me has been the sheer amount of boilerplate needed to get the most basic image on the screen.<p>You think that now, but wait until you get to Vulkan.
Shameless plug: If you're interested in building a complete engine, I published a book on WebGL 2, where readers go from the very basics all the way up to building a minimalistic rendering engine (THREE.js like) and use it to render a virtual 3D car showroom.<p><a href="https://www.amazon.com/Real-Time-Graphics-WebGL-interactive-applications/dp/1788629698" rel="nofollow">https://www.amazon.com/Real-Time-Graphics-WebGL-interactive-...</a>
For someone who wants to get started messing around with webgl I would recommend <a href="http://regl.party/" rel="nofollow">http://regl.party/</a>. I found it easier to work with webgl by learning about the concepts from tutorials like <a href="https://webglfundamentals.org/" rel="nofollow">https://webglfundamentals.org/</a> but then use regl for my actual coding, because you still need to understand the way webgl works but the API regl exposes is much more ergonomic.
It's been a while since I touched WebGL, but this site was the most informative one I found, and is what I based most of my code on: <a href="https://webglfundamentals.org/" rel="nofollow">https://webglfundamentals.org/</a>
Hi,
Here's my tutorial for going much further than a colored triangle, with very few code too: <a href="https://xem.github.io/articles/webgl-guide.html" rel="nofollow">https://xem.github.io/articles/webgl-guide.html</a>