Hacker News new | ask | show | jobs
by mrspeaker 2372 days ago
This is a really fantastic write-up. I've been getting into webgl a lot more recently, and there is not a huge volume of information out there once you're past the "comfortable with rendering a textured spinning cube" stage (hmm, ironically this article is also a textured spinning cube - but it goes beyond the basics).

The sketchpunklabs guy (https://www.youtube.com/channel/UCSnyjB_8iVxi2ZAfn_1L6tA/vid...) has a phenomenal series, but as far as any written articles I can find, they are really sparse.

Does anyone know any other good written resources like this?

2 comments

Isn't WebGL a fairly direct wrapper over OpenGL ES? The basics get you up to speed with the JS take on this otherwise standard (and very old) API, particularly integrating with the DOM and Web Workers. After that, any OpenGL book or tutorial series should do for the rest.

An extremely good resource (IMO) for 3D graphics in general is Learning Modern 3D Graphics Programming (https://paroj.github.io/gltut/). I believe that's a slightly updated version; the original author of the base text goes by Nicol Bolas on SE (https://stackoverflow.com/users/734069/nicol-bolas). Note that it uses (I think?) OpenGL 3.3, which is a bit dated at this point. However, the focus of the text is on programmable pipelines and generalized 3D graphics concepts. I've found it to be a tremendously useful resource overall.

Regarding API versions and documentation, note that WebGL 2.0 matches OpenGL ES 3.0, which is in turn compatible with OpenGL 4.3 (https://en.wikipedia.org/wiki/OpenGL_ES#OpenGL_ES_3.0). (Did I mention it's an old API?)

As always, consult:

* The ever excellent Mozilla documentation (https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API#G...).

* The relevant Khronos API registry (https://www.khronos.org/registry/OpenGL-Refpages/es3.0/).

* The relevant Khronos specifications (https://www.khronos.org/registry/OpenGL/index_es.php#specs3).

Edit: I almost forgot, Song Ho Ahn (http://www.songho.ca/opengl/) is an ever indispensable reference for graphics related math and diagrams.

WebGL is a subset of OpenGL ES, some stuff like compute shaders isn't available.
WebGL 2.0 is a version of OpenGL ES 3.0, which does not have compute. That was added in 3.1.
Indeed, I keep forgetting that the latest OpenGL ES version is 3.2, and all attempts to bring it into WebGL failed.

Still not every ES 3.0 feature is available.

I'd recommend https://webglfundamentals.org at least as a starting place

As for using OpenGL ES references, there are enough differences what I wouldn't recommend that route. 85% or 95% of the info will be similar but WebGL has a bunch of minor gotchas and changes to the spec to make it secure and consistent and those ways will be no fun to discover when you're copying code from a C or C++ OpenGL ES example.