6 ms·

How to Create the Apple Fifth Avenue Cube in WebGL

253 points by cardimart 7y ago

pininja 7y ago
Very nice tutorial and a super cool result at the end. Thanks for sharing!
degenerate 7y ago
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.
mrspeaker 7y 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/videos 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?
- Reelin 7y ago
  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#Guides_and_tutorials 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/ 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 7y ago
    WebGL is a subset of OpenGL ES, some stuff like compute shaders isn't available.
    - Jasper_ 7y ago
      WebGL 2.0 is a version of OpenGL ES 3.0, which does not have compute. That was added in 3.1.
      - pjmlp 7y ago
        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.
- gfxgirl 7y ago
  I'd recommend https://webglfundamentals.org 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.
raspo 7y ago
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 7y ago
  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 7y ago
    Picogl, threejs or Babylonjs would have been better choices, given their usage across WebGL community.
    - foota 7y ago
      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.
- mrspeaker 7y ago
  This is the opposite problem of why I enjoyed the article! I understand why they used Regl (as they say, it's because WebGL is ludicrously verbose)... so the article was great for me as someone comfortable with the the very basic basics! If you're just getting started and want to do it from completely from scratch, then https://webglfundamentals.org https://webglfundamentals.org (or https://webgl2fundamentals.org 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.
deleted 7y ago
[deleted]
xyst 7y ago
Animation is smooth on a mobile device (iDevice) - any examples of full games written exclusively in WebGL?
- ailideex 7y ago
  Maybe https://hordes.io/ https://hordes.io/

253 points by cardimart 7y ago

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

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.

mrspeaker 7y 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/videos 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?

Reelin 7y ago
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#Guides_and_tutorials 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/ 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 7y ago
  WebGL is a subset of OpenGL ES, some stuff like compute shaders isn't available.
  - Jasper_ 7y ago
    WebGL 2.0 is a version of OpenGL ES 3.0, which does not have compute. That was added in 3.1.
    - pjmlp 7y ago
      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.
gfxgirl 7y ago
I'd recommend https://webglfundamentals.org 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.

raspo 7y ago

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 7y ago
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 7y ago
  Picogl, threejs or Babylonjs would have been better choices, given their usage across WebGL community.
  - foota 7y ago
    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.
mrspeaker 7y ago
This is the opposite problem of why I enjoyed the article! I understand why they used Regl (as they say, it's because WebGL is ludicrously verbose)... so the article was great for me as someone comfortable with the the very basic basics! If you're just getting started and want to do it from completely from scratch, then https://webglfundamentals.org https://webglfundamentals.org (or https://webgl2fundamentals.org 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.

deleted 7y ago

[deleted]

xyst 7y ago

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

ailideex 7y ago
Maybe https://hordes.io/ https://hordes.io/