6 ms·

WebGL Fundamentals

TazeTSchnitzel 12y ago
I like how it starts by mentioning that WebGL, fundamentally, is 2D, and shaders are where all the 3D magic happens. It's true, and it's important for understanding it.
- overgard 12y ago
  His notion of a "2d" library versus a "3d" library is weird. First, who cares? He's inventing this semantic argument that nobody else has even bothered with. Second, WebGL has builtin depth buffers, vertices are specified with 3+ coordinates, and most of the shader math operates on things obviously in three dimensions... so, saying it's 2D is incredibly misleading.
  - panic 12y ago
    In one sense, WebGL is a 4D library, since most vertex and color buffers are vec4s. In another sense, WebGL is 3D, since the vertices (and colors, if you're using premultiplied alpha: http://core.ac.uk/download/pdf/1578955.pdf http://core.ac.uk/download/pdf/1578955.pdf) are in 3-dimensional projective space. In another sense, WebGL is a 2D library, since it's outputting 2D fragments. The author is just making it clear that there's no magic here. It's all just 2D points on a screen eventually.
  - greggman 12y ago
    The person that cares is the the person that expects a library called something to actually do what it says. If I download a physics library I expect to to do the physics, not just be a math library with some features that happen to help you write your own physics library. If I download a png library I expect it to decode and/or encode PNGs not just be a zlib library and some pointers to some docs on the png format. WebGL is not a 3D library by any possible definition as it does not provide 3D. It's a rasterization at best. Why does that matter? Because if you want a 3D library, as in a library that does 3D then you want something else like three.js, (http://threejs.org http://threejs.org). Knowing that WebGL is not a 3D library and that you're going to have to write your own from scratch if you use it directly seems like an important distinction
    - Klinky 12y ago
      three.js is a 3D engine. WebGL is a library that let's you interface with 3D graphic accelerators(rasterizers on steroids). That is it's main purpose. Rasterization is a fundamental of real-time 3D graphics. I am not sure why people are feeling deceived by finding this out?
      - fit2rule 12y ago
        Its a distinction, not a deception. If I'm going to write a game and I hear about WebGL, I have to make the distinction between where my art gets turned into an asset, and where that asset gets rendered. There is a lot of ground between those two points, and understanding the difference between a library that you can just throw artwork at, and a device-driver layer that expects data in a certain format (or it won't work at all), is where the application/engine/library lines must be drawn in the sand. The author is (imho) correct in pointing this out from the perspective of having produced a tutorial for newcomers to this scene - so far my observation is that those who wish to argue with him about this point seem to want to generalize it into a ball of mystery, as they are more expert and know the territory better. That may well be the case, but use the rear-vision mirror and look at this from a total newbie perspective. You can't just load up Wavefront .obj's into a WebGL instance and expect to get a bouncing ball. You'll need a 3D engine - or library - to do that. There's room in this discussion to fill that void - for the newbie - by using terminology that allows a better understanding than, perhaps, those who understand it all, already, permit/allow/agree to. The distinction seems to have a locus around the data formats - either of the files being loaded, or at the parameter/buffer-object layer. There is quite some territory between an .OBJ vector (for example) and some other vector format that needs to be loaded into buffers and passed over to the hardware device through a driver layer. Where does the physics go? What is a shader for and why bother with it in this context? These questions get answered by having firm terminology: WebGL is not a 3D library, because a 3D library would have some sort of blackbox'ed object loader, maybe a bit of physics/collision-detection too, and so on .. and it may well be an engine which uses WebGL simply as one of a series of front-ends, through a driver layer, successfully too - they're out there.
        12y ago
- 4ydx 12y ago
  OpenGL is a collection of api calls that move buffer data around. It is an api for interacting with shaders compiled into a program. This is all done in 2D, 3D, and even 4D. The rendered product is a screen which only has 2 dimensions, but calling it 2D is a huge oversimplification.
- jheriko 12y ago
  its not exactly accurate or relevant. clip space is 2d because the monitor is. all of the 3d operations and 3d relevant functionality breaks the argument. the depth buffer for instance, and even more so, the perspective transformation hack (1/w) have limited utility outside of 3D...
- AKluge 12y ago
  The folks who consider WebGL as a 2D API include some of the the browser developers who implemented it. That said, I don't fully agree with them. If WebGL were simply a 2D API, this example, from a talk I gave way back in '13 wouldn't work. In this example, one triangle is clearly drawn behind the other using only raw 3D coordinates with no projection yet. http://www.vizitsolutions.com/portfolio/webgl/animatedWalkthrough.html http://www.vizitsolutions.com/portfolio/webgl/animatedWalkth... It also isn't a fully 3D API either, otherwise we wouldn't have to be so concerned about the order in which we draw transparent objects. This is the result of using a 2D drawing surface plus a depth buffer. That said, it might be too subtle a point to open with. Especially since you are showing code, the understanding of which requires material that they haven't covered yet.
spartanatreyu 12y ago
It's cool but it still needs work when it comes to teaching glsl. Just giving semi-commented code samples isn't enough when a student doesn't know what an attribute is.
- lobo_tuerto 12y ago
  What about The Book of Shaders? It's not complete by any means, but will get there eventually, hopefully. :) http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/
  - kazagistar 12y ago
    Looks like it will be pretty good when finished... pity you haven't gotten to textures yet.
dyarosla 12y ago
I like the sheer number of running examples. When I first learned any OpenGL/WebGL, I had to imagine all of these examples from the text and static images. I especially like the up-to-date examples for how to write WebGL in shorthand and the common practices examples. The explanations are phenomenal too. I guess what I'm trying to say is, this is likely the best WebGL reference I've seen yet.
benihana 12y ago
This is fantastic. Particularly helpful to me is the antipatterns. I've been playing around with Canvas for about four years now and I never knew to use clientWidth and clientHeight to fix the problems I was having using width and height.
artursapek 12y ago
I love this teaching pattern. It's well broken down and interactive. Great role model.
rvdm 12y ago
This is a fantastic resource for people with an understanding of Three.js that want to know what's going on under the hood. Thank you for sharing this!
javajosh 12y ago
Great work. This is precisely the kind of site every web API needs. I would like to see one for Sockets, Workers, Canvas, SVG, etc. I think this format could even work for transpiled language documentation (although that's a little more doubtful). My only suggestion is that the author[1] name himself, and date the content (at least month/year)! Both of these can be inferred from the github link, but it belongs on the page itself. [1] http://games.greggman.com/game/ http://games.greggman.com/game/
- voltagex_ 12y ago
  > Sockets, Workers, Canvas, SVG, etc. So does anyone here have links to similar documentation for the above?
- voltagex_ 12y ago
  Filed https://github.com/greggman/webgl-fundamentals/issues/6 https://github.com/greggman/webgl-fundamentals/issues/6
lelandbatey 12y ago
Really like this, it seems just right for introducing someone with programmer experience but who doesn't have graphics experience. Note, the "Frustum" example[0] linked on the 3D perspective page[1] is not working on Firefox (screenshot comparing FF and Chrome[2]). [0] - http://webglfundamentals.org/webgl/frustum-diagram.html http://webglfundamentals.org/webgl/frustum-diagram.html [1] - http://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html http://webglfundamentals.org/webgl/lessons/webgl-3d-perspect... [2] - http://nacr.us/media/pics/screenshots/screenshot--18-21-58.png http://nacr.us/media/pics/screenshots/screenshot--18-21-58.p...
- greggman 12y ago
  Thanks! Fixed. Also learned something really scary about JavaScript in Firefox https://gist.github.com/greggman/15b5285fab6e0ca0a799 https://gist.github.com/greggman/15b5285fab6e0ca0a799
- nnq 12y ago
  > just right for introducing someone with programmer experience but who doesn't have graphics experience Are you kidding? Most programmers with really no graphics experience are along the lines of "wtf is a shader?!" or "wtf is clip space?!"... this give absolutely no clear explanation of what those things are, even the fundamentals section assumes you already know the fundamentals...
qshugaung 12y ago
nice
jheriko 12y ago
its always good to see websites with nice 3d elements involved like this. started reading the tutorials... and i have to say the quality is questionable. from very big things like the claim that the API is fundamentally 2D (really?) down to small things like doing the pixel space to clip space conversion in an inexperienced way (its one 2d vector multiply or a matrix multiply... surely?) he is clearly aware of some of this stuff though (he mentions the magic perspective w divide in a later tutorial), so maybe its intended and i am just being over-critical since i understand how this stuff works and disagree with the approach taken to introduce it... saying that he seems to have confused scene graph with a transform hierarchy. oh dear...
- greggman 12y ago
  Thanks for the feedback. I addressed my 2d point here http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-li... TL;DR OpenGL 1.0 is a 3D library because you can give it 3d data and will draw a 3D with no 3D knowledge on your part. WebGL is not a 3D library because you have supply the 3D knowledge. Arguably it would have been better to say WebGL is a rasterization library that has some features that make it good for rasterizing 3d. If you think about it though it is, by no reasonable definition, a 3D library. As for any other issues patches and suggestions welcome.
  - jheriko 12y ago
    yeah, this is not really true either. you should be careful with bold claims, especially if you don't have a great depth of knowledge (everyone should believe this...) i commented on the post. (don't let me nay-say too much. you have done a really wonderful thing here. that is what matters most.)
    - moron4hire 12y ago
      Can you explain why it isn't true? He goes into explicit detail why he thinks it's so, yet you have only repeated "you're wrong" without providing any counter example.
jeffreyrogers 12y ago
This looks great. If you're interested in learning modern OpenGL (not WebGL) here are two similar resources: http://www.opengl-tutorial.org/ http://www.opengl-tutorial.org/ http://ogldev.atspace.co.uk/index.html http://ogldev.atspace.co.uk/index.html
bastomi29 12y ago
http://museumaneh.livejournal.com/723.html http://museumaneh.livejournal.com/723.html
_nedR 12y ago
What are the applications of WebGL? If you are doing a game or a 3d application on browsers- WebGL would be the way to go obviously. But apart from that, where could it be used? Could websites and web applications benefit from using WebGL? If so, in what way? Would it improve or worsen battery performance? ps: Sorry for all the noob questions but i am genuinely curious about the implications of WebGL.
- frik 12y ago
  If you do anything graphical, be it 2D or 3D, you can use WebGL or Canvas2D (for 2D-only). For some domains it's enough to do redraw/render only if a mouse/touch-events fires which helps a lot with the battery performance.
- deleted 12y ago
  [deleted]
- pjmlp 12y ago
  Currently it is a no go if you plan to target mobile devices. Only the latest version of iOS supports it, on Android it is a joke with Chrome blacklisting many handsets[0] and Windows Phone only partially supports it. [0] You can re-enable it via developer flags, but no normal user is going to know about it.
  - zurn 12y ago
    A minority of drivers/GPUs are blacklisted on desktop, and you have to deal with less than 100% WebGL coverage in any case. But yeah on mobile it's a sharper "reasonably recent devices only" division. You can see (somewhat skewed) stats on http://webglstats.com/ http://webglstats.com/ Interestingly iOS is ahead of Android in tablets, but behind on phones.
    - fulafel 12y ago
      Be careful to interpret the stats there correctly. Eg when you leave just the specific category checkmarked, the graph shows ios-smartphone webgl support rate at 79% and android-smartphone rate at 75%. The percentages in the sidebar are just browser shares and not WebGL support rates.
bastomi29 12y ago
http://museumdijakarta.hatenablog.com/entry/2015/04/05/205316 http://museumdijakarta.hatenablog.com/entry/2015/04/05/20531...
frik 12y ago
Thank you! The demos and the comment section below each page is great, I wished every API gets such a great documentation. Good that it covers really WebGL. And not Three.js as do several "WebGL" books and tutorials. (as I wrote two days ago: https://news.ycombinator.com/item?id=9320571 https://news.ycombinator.com/item?id=9320571 )
pjmlp 12y ago
Nice examples, if I only had something interactive like this back in the day. Although I have to recognize that NeHe tutorials were quite good. Personally I think the biggest problem with modern 3D APIs is learning the shading languages and how to separate work across them.
z3t4 12y ago
This article expect you to already know 3d programming. You need to be familiar with vectors, matrices, buffers and shaders.

I like how it starts by mentioning that WebGL, fundamentally, is 2D, and shaders are where all the 3D magic happens. It's true, and it's important for understanding it.

overgard 12y ago
His notion of a "2d" library versus a "3d" library is weird. First, who cares? He's inventing this semantic argument that nobody else has even bothered with. Second, WebGL has builtin depth buffers, vertices are specified with 3+ coordinates, and most of the shader math operates on things obviously in three dimensions... so, saying it's 2D is incredibly misleading.
- panic 12y ago
  In one sense, WebGL is a 4D library, since most vertex and color buffers are vec4s. In another sense, WebGL is 3D, since the vertices (and colors, if you're using premultiplied alpha: http://core.ac.uk/download/pdf/1578955.pdf http://core.ac.uk/download/pdf/1578955.pdf) are in 3-dimensional projective space. In another sense, WebGL is a 2D library, since it's outputting 2D fragments. The author is just making it clear that there's no magic here. It's all just 2D points on a screen eventually.
- greggman 12y ago
  The person that cares is the the person that expects a library called something to actually do what it says. If I download a physics library I expect to to do the physics, not just be a math library with some features that happen to help you write your own physics library. If I download a png library I expect it to decode and/or encode PNGs not just be a zlib library and some pointers to some docs on the png format. WebGL is not a 3D library by any possible definition as it does not provide 3D. It's a rasterization at best. Why does that matter? Because if you want a 3D library, as in a library that does 3D then you want something else like three.js, (http://threejs.org http://threejs.org). Knowing that WebGL is not a 3D library and that you're going to have to write your own from scratch if you use it directly seems like an important distinction
  - Klinky 12y ago
    three.js is a 3D engine. WebGL is a library that let's you interface with 3D graphic accelerators(rasterizers on steroids). That is it's main purpose. Rasterization is a fundamental of real-time 3D graphics. I am not sure why people are feeling deceived by finding this out?
    - fit2rule 12y ago
      Its a distinction, not a deception. If I'm going to write a game and I hear about WebGL, I have to make the distinction between where my art gets turned into an asset, and where that asset gets rendered. There is a lot of ground between those two points, and understanding the difference between a library that you can just throw artwork at, and a device-driver layer that expects data in a certain format (or it won't work at all), is where the application/engine/library lines must be drawn in the sand. The author is (imho) correct in pointing this out from the perspective of having produced a tutorial for newcomers to this scene - so far my observation is that those who wish to argue with him about this point seem to want to generalize it into a ball of mystery, as they are more expert and know the territory better. That may well be the case, but use the rear-vision mirror and look at this from a total newbie perspective. You can't just load up Wavefront .obj's into a WebGL instance and expect to get a bouncing ball. You'll need a 3D engine - or library - to do that. There's room in this discussion to fill that void - for the newbie - by using terminology that allows a better understanding than, perhaps, those who understand it all, already, permit/allow/agree to. The distinction seems to have a locus around the data formats - either of the files being loaded, or at the parameter/buffer-object layer. There is quite some territory between an .OBJ vector (for example) and some other vector format that needs to be loaded into buffers and passed over to the hardware device through a driver layer. Where does the physics go? What is a shader for and why bother with it in this context? These questions get answered by having firm terminology: WebGL is not a 3D library, because a 3D library would have some sort of blackbox'ed object loader, maybe a bit of physics/collision-detection too, and so on .. and it may well be an engine which uses WebGL simply as one of a series of front-ends, through a driver layer, successfully too - they're out there.
      - 12y ago
4ydx 12y ago
OpenGL is a collection of api calls that move buffer data around. It is an api for interacting with shaders compiled into a program. This is all done in 2D, 3D, and even 4D. The rendered product is a screen which only has 2 dimensions, but calling it 2D is a huge oversimplification.
jheriko 12y ago
its not exactly accurate or relevant. clip space is 2d because the monitor is. all of the 3d operations and 3d relevant functionality breaks the argument. the depth buffer for instance, and even more so, the perspective transformation hack (1/w) have limited utility outside of 3D...
AKluge 12y ago
The folks who consider WebGL as a 2D API include some of the the browser developers who implemented it. That said, I don't fully agree with them. If WebGL were simply a 2D API, this example, from a talk I gave way back in '13 wouldn't work. In this example, one triangle is clearly drawn behind the other using only raw 3D coordinates with no projection yet. http://www.vizitsolutions.com/portfolio/webgl/animatedWalkthrough.html http://www.vizitsolutions.com/portfolio/webgl/animatedWalkth... It also isn't a fully 3D API either, otherwise we wouldn't have to be so concerned about the order in which we draw transparent objects. This is the result of using a 2D drawing surface plus a depth buffer. That said, it might be too subtle a point to open with. Especially since you are showing code, the understanding of which requires material that they haven't covered yet.

spartanatreyu 12y ago

It's cool but it still needs work when it comes to teaching glsl. Just giving semi-commented code samples isn't enough when a student doesn't know what an attribute is.

lobo_tuerto 12y ago
What about The Book of Shaders? It's not complete by any means, but will get there eventually, hopefully. :) http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/
- kazagistar 12y ago
  Looks like it will be pretty good when finished... pity you haven't gotten to textures yet.

dyarosla 12y ago

I like the sheer number of running examples. When I first learned any OpenGL/WebGL, I had to imagine all of these examples from the text and static images. I especially like the up-to-date examples for how to write WebGL in shorthand and the common practices examples. The explanations are phenomenal too. I guess what I'm trying to say is, this is likely the best WebGL reference I've seen yet.

benihana 12y ago

This is fantastic. Particularly helpful to me is the antipatterns. I've been playing around with Canvas for about four years now and I never knew to use clientWidth and clientHeight to fix the problems I was having using width and height.

artursapek 12y ago

I love this teaching pattern. It's well broken down and interactive. Great role model.

rvdm 12y ago

This is a fantastic resource for people with an understanding of Three.js that want to know what's going on under the hood. Thank you for sharing this!

javajosh 12y ago

Great work. This is precisely the kind of site every web API needs. I would like to see one for Sockets, Workers, Canvas, SVG, etc. I think this format could even work for transpiled language documentation (although that's a little more doubtful). My only suggestion is that the author[1] name himself, and date the content (at least month/year)! Both of these can be inferred from the github link, but it belongs on the page itself. [1] http://games.greggman.com/game/ http://games.greggman.com/game/

voltagex_ 12y ago
> Sockets, Workers, Canvas, SVG, etc. So does anyone here have links to similar documentation for the above?
voltagex_ 12y ago
Filed https://github.com/greggman/webgl-fundamentals/issues/6 https://github.com/greggman/webgl-fundamentals/issues/6

lelandbatey 12y ago

Really like this, it seems just right for introducing someone with programmer experience but who doesn't have graphics experience. Note, the "Frustum" example[0] linked on the 3D perspective page[1] is not working on Firefox (screenshot comparing FF and Chrome[2]). [0] - http://webglfundamentals.org/webgl/frustum-diagram.html http://webglfundamentals.org/webgl/frustum-diagram.html [1] - http://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html http://webglfundamentals.org/webgl/lessons/webgl-3d-perspect... [2] - http://nacr.us/media/pics/screenshots/screenshot--18-21-58.png http://nacr.us/media/pics/screenshots/screenshot--18-21-58.p...

greggman 12y ago
Thanks! Fixed. Also learned something really scary about JavaScript in Firefox https://gist.github.com/greggman/15b5285fab6e0ca0a799 https://gist.github.com/greggman/15b5285fab6e0ca0a799
nnq 12y ago
> just right for introducing someone with programmer experience but who doesn't have graphics experience Are you kidding? Most programmers with really no graphics experience are along the lines of "wtf is a shader?!" or "wtf is clip space?!"... this give absolutely no clear explanation of what those things are, even the fundamentals section assumes you already know the fundamentals...

qshugaung 12y ago

nice

jheriko 12y ago

its always good to see websites with nice 3d elements involved like this. started reading the tutorials... and i have to say the quality is questionable. from very big things like the claim that the API is fundamentally 2D (really?) down to small things like doing the pixel space to clip space conversion in an inexperienced way (its one 2d vector multiply or a matrix multiply... surely?) he is clearly aware of some of this stuff though (he mentions the magic perspective w divide in a later tutorial), so maybe its intended and i am just being over-critical since i understand how this stuff works and disagree with the approach taken to introduce it... saying that he seems to have confused scene graph with a transform hierarchy. oh dear...

greggman 12y ago
Thanks for the feedback. I addressed my 2d point here http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-li... TL;DR OpenGL 1.0 is a 3D library because you can give it 3d data and will draw a 3D with no 3D knowledge on your part. WebGL is not a 3D library because you have supply the 3D knowledge. Arguably it would have been better to say WebGL is a rasterization library that has some features that make it good for rasterizing 3d. If you think about it though it is, by no reasonable definition, a 3D library. As for any other issues patches and suggestions welcome.
- jheriko 12y ago
  yeah, this is not really true either. you should be careful with bold claims, especially if you don't have a great depth of knowledge (everyone should believe this...) i commented on the post. (don't let me nay-say too much. you have done a really wonderful thing here. that is what matters most.)
  - moron4hire 12y ago
    Can you explain why it isn't true? He goes into explicit detail why he thinks it's so, yet you have only repeated "you're wrong" without providing any counter example.

jeffreyrogers 12y ago

This looks great. If you're interested in learning modern OpenGL (not WebGL) here are two similar resources: http://www.opengl-tutorial.org/ http://www.opengl-tutorial.org/ http://ogldev.atspace.co.uk/index.html http://ogldev.atspace.co.uk/index.html

bastomi29 12y ago

http://museumaneh.livejournal.com/723.html http://museumaneh.livejournal.com/723.html

_nedR 12y ago

What are the applications of WebGL? If you are doing a game or a 3d application on browsers- WebGL would be the way to go obviously. But apart from that, where could it be used? Could websites and web applications benefit from using WebGL? If so, in what way? Would it improve or worsen battery performance? ps: Sorry for all the noob questions but i am genuinely curious about the implications of WebGL.

frik 12y ago
If you do anything graphical, be it 2D or 3D, you can use WebGL or Canvas2D (for 2D-only). For some domains it's enough to do redraw/render only if a mouse/touch-events fires which helps a lot with the battery performance.
deleted 12y ago
[deleted]
pjmlp 12y ago
Currently it is a no go if you plan to target mobile devices. Only the latest version of iOS supports it, on Android it is a joke with Chrome blacklisting many handsets[0] and Windows Phone only partially supports it. [0] You can re-enable it via developer flags, but no normal user is going to know about it.
- zurn 12y ago
  A minority of drivers/GPUs are blacklisted on desktop, and you have to deal with less than 100% WebGL coverage in any case. But yeah on mobile it's a sharper "reasonably recent devices only" division. You can see (somewhat skewed) stats on http://webglstats.com/ http://webglstats.com/ Interestingly iOS is ahead of Android in tablets, but behind on phones.
  - fulafel 12y ago
    Be careful to interpret the stats there correctly. Eg when you leave just the specific category checkmarked, the graph shows ios-smartphone webgl support rate at 79% and android-smartphone rate at 75%. The percentages in the sidebar are just browser shares and not WebGL support rates.

bastomi29 12y ago

http://museumdijakarta.hatenablog.com/entry/2015/04/05/205316 http://museumdijakarta.hatenablog.com/entry/2015/04/05/20531...

frik 12y ago

Thank you! The demos and the comment section below each page is great, I wished every API gets such a great documentation. Good that it covers really WebGL. And not Three.js as do several "WebGL" books and tutorials. (as I wrote two days ago: https://news.ycombinator.com/item?id=9320571 https://news.ycombinator.com/item?id=9320571 )

pjmlp 12y ago

Nice examples, if I only had something interactive like this back in the day. Although I have to recognize that NeHe tutorials were quite good. Personally I think the biggest problem with modern 3D APIs is learning the shading languages and how to separate work across them.

z3t4 12y ago

This article expect you to already know 3d programming. You need to be familiar with vectors, matrices, buffers and shaders.