How to Create the Apple Fifth Avenue Cube in WebGL
1–10 of 25 posts
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#2Very nice tutorial and a super cool result at the end. Thanks for sharing!
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#3This 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.
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#4This 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?
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#5I 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.
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#6I 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…
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/.
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#7I 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…
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 (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.
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#8I 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…
Really, it's more a tutorial on rendering algorithms than it is about WebGL per se. There are lots of tutorials out there where you can look up the minutiae of how to set up a canvas, clear the framebuffer and set up a rendering loop. This is about how to draw stuff using fragment shaders in a non-trivial (but still pleasingly simple!) way.
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.
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#9I 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…
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 (or https://webgl2fundamentals.org - though I'm starting to fear Web…
It's not supported on Mac/iOS. Apple's solution to this was going to be WebGPU, but it's been in committee hell for way too long, and Apple is seemingly intent on torpedoing any goodwill they have left.
Google has since picked up the slack and is working to add WebGL 2 to WebKit on Mac/iOS platforms.
Re: How to Create the Apple Fifth Avenue Cube in WebGL
#10I 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…
Really, it's more a tutorial on rendering algorithms than it is about WebGL per se. There are lots of tutorials out there where you can look up the minutiae of how to set up a canvas, clear the framebuffer and set up a rendering loop. This is about how to draw stuff using fragment shaders in a non-trivial (but still pleasingly simple!) way. There is comparatively little content for that -- most of it gets sucked down…
Part of it is that it requires an art side of things. There's no tutorial that can tell you "how to shader", more than there is a tutorial that tells you how to draw. Well, there are plenty of "how to draw" tutorials but they don't get you that far, it's a process of self-discovery and a skill that you need to practice.
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.