
How to Create the Apple Fifth Avenue Cube in WebGL - cardimart
https://tympanus.net/codrops/2019/12/20/how-to-create-the-apple-fifth-avenue-cube-in-webgl/
======
mrspeaker
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...](https://www.youtube.com/channel/UCSnyjB_8iVxi2ZAfn_1L6tA/videos))
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?

~~~
Reelin
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/](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](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](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...](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API#Guides_and_tutorials)).

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

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

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

~~~
pjmlp
WebGL is a subset of OpenGL ES, some stuff like compute shaders isn't
available.

~~~
Jasper_
WebGL 2.0 is a version of OpenGL ES 3.0, which does not have compute. That was
added in 3.1.

~~~
pjmlp
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.

------
degenerate
This article wouldn't be the same without all the progress examples sprinkled
in. The explanation of how to make the material ""feel" like we are looking at
glass (and accompanying graphics explaining the method) is excellent.

------
pininja
Very nice tutorial and a super cool result at the end. Thanks for sharing!

------
xyst
Animation is smooth on a mobile device (iDevice) - any examples of full games
written exclusively in WebGL?

~~~
ailideex
Maybe [https://hordes.io/](https://hordes.io/)

------
raspo
I don't know much about WebGL (that's why I would be interested in reading
something like this), but I'm turned off at the very beginning by the choice
of this extra regl framework. To me, it sounds like having a tutorial titled
"How to create an HTML5 form for your website", and as the very first step
installing React or Vue... maybe that's just me. I'll probably still check it
out at it seems like a very good write-up.

~~~
foota
OpenGL (which WebGL is a sister API of) is a relatively obnoxious API to work
with, requiring lots of calls to set an maintain state, as well as pick which
state you're working with for a give call. (conceptually you can think of
there as being a bunch of static variables that point to the current state for
a call). This is IMO one of the biggest barriers to OpenGL, although I believe
they've made some of this more explicit than it used to be.

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/](http://learnwebgl.brown37.net/).

~~~
pjmlp
Picogl, threejs or Babylonjs would have been better choices, given their usage
across WebGL community.

~~~
foota
Picogl looks like you still have to manage state, whereas ThreeJs and
BabylonJs are both fairly high level iirc?

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.

