Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to Create the Apple Fifth Avenue Cube in WebGL

tympanus.net

Post reply on HN
Print view View original

11–20 of 25 posts

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#11

Post by dkarras »

Jasper_ wrote: post #9
mrspeaker wrote: post #7

Earlier quoted context omitted.

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. https://bugs.webkit.org/show_bug.cgi?id=126404

Just to be clear, it is not supported on macOS Safari, but WebGL2 works with other browser engines. On iOS, there are no choices however because all browsers have to use the provided Apple one behind the scenes.

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#12

Post by hoorayimhelping »

raspo wrote: post #5

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…

GL was written in the early 90s with a late 80s / early 90s programming context in mind. It's essentially a giant state machine with some limited programmability bolted on in later additions. It feels really clunky compared to modern frameworks.

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.

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#13

Post by Reelin »

mrspeaker wrote: post #4

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 ph…

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.

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#15

Post by pjmlp »

Reelin wrote: post #13
mrspeaker wrote: post #4

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 ph…

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 believ…

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

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#16

Post by pjmlp »

foota wrote: post #6
raspo wrote: post #5

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…

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 e…

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

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#17

Post by pjmlp »

Jasper_ wrote: post #9
mrspeaker wrote: post #7

Earlier quoted context omitted.

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. https://bugs.webkit.org/show_bug.cgi?id=126404

Together with Apple employees, as explained in some Khronos talk available on their YouTube channel.

Google is also working alongside Apple on WebGPU (Chrome initial support is macOS only), with Mozilla finally having some initial work ongoing.

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#18

Post by gfxgirl »

mrspeaker wrote: post #4

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 ph…

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.

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#19

Post by pjmlp »

hoorayimhelping wrote: post #12
raspo wrote: post #5

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…

GL was written in the early 90s with a late 80s / early 90s programming context in mind. It's essentially a giant state machine with some limited programmability bolted on in later additions. It feels really clunky compared to modern frameworks. 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 W…

Except almost all major APIs, even from those days (e.g. Glide, QuickDraw 3D, Warp3D) used structs to contain state, instead of a global state machine.

Had not been for miniGL and Quake, and GL would have had other relevance in history.

Re: How to Create the Apple Fifth Avenue Cube in WebGL

#20

Post by Jasper_ »

pjmlp wrote: post #15
Reelin wrote: post #13

Earlier quoted context omitted.

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 believ…

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.
Post reply on HN