How to Create the Apple Fifth Avenue Cube in WebGL(tympanus.net) |
How to Create the Apple Fifth Avenue Cube in WebGL(tympanus.net) |
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?
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.
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.
It looks like this API aims to keep the same abstraction level as OpenGLs API, but without the state management required.
So this won't allow you to go straight to OpenGL, but it will teach you the concepts and objects you use with OpenGL.
One of my favorite tutorials and references for learning graphics concepts is http://learnwebgl.brown37.net/.
If you're just getting started and want to do it from completely from scratch, then https://webglfundamentals.org (or https://webgl2fundamentals.org - though I'm starting to fear WebGL2 is not getting as much traction as it should... is it dead?!) is the place to go. This site is really fantastic at explaining what all the boilerplate is actually doing.
Google has since picked up the slack and is working to add WebGL 2 to WebKit on Mac/iOS platforms.
There is comparatively little content for that -- most of it gets sucked down into the mathematics of bump mapping or discussions about stencil buffer precision. I rather liked it.
Similarly, there are plenty of tech art / VFX shader tutorials out there if you go looking in the right spot, but they can't tell you how to construct a scene like this. That's something that the art side of you needs to solve.
I think anyone interested in it should find a basic WebGL tutorial and render some triangles and cubes with vertex coloring and some texture mapping to see how it's done in WebGL and to see how tedious it can be. Having to change a lot of different pieces of state every render call to do what seems like very basic things (is there anything more basic than rendering a triangle?) gets old quick.
Had not been for miniGL and Quake, and GL would have had other relevance in history.
Seems like the framework used in the tutorial is somewhat in between, where you're still using opengl concepts but without having to do state management.
Your link is just talking about the feature being blocked on the ANGLE switch.
Google is also working alongside Apple on WebGPU (Chrome initial support is macOS only), with Mozilla finally having some initial work ongoing.
Still not every ES 3.0 feature is available.