
WebGL Fundamentals - unusximmortalis
http://webglfundamentals.org/
======
dyarosla
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.

------
javajosh
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_
> Sockets, Workers, Canvas, SVG, etc.

So does anyone here have links to similar documentation for the above?

------
jeffreyrogers
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)

------
jheriko
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
Thanks for the feedback. I addressed my 2d point here

[http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-li...](http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html)

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
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.)

~~~
lbenes
For novices like me, this site seems very useful. If there are some genuine
problems, I hope you can take the time to report those issues on github.

Also, what's the final verdict on Fast InvSqrt()? Is the optimal magic number
Q3's 0x5f3759df, Chris's 0x5f375a86, or your 0x5F375A7F?

~~~
jheriko
i think i came to the conclusion of 0x5f375a84 at the end of that article. at
least by the criteria the test program used to measure error.

the differences are tiny though, and there are other measures that can be used
(which will result in different constants)

in any case, on most modern hardware it is not relevant since there is some
lookup based instruction that is more accurate, and faster.

the problems here aren't enormous, a smart programmer will work them out for
himself, but they are misleading. i think there is some confusion just because
this is a low-level API, essentially a hardware abstraction layer, but the
user is expecting high level features like a complete maths library. (maybe?)

------
frik
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)
)

------
_nedR
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.

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

------
lelandbatey
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-perspect...](http://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html)

[2] - [http://nacr.us/media/pics/screenshots/screenshot--
18-21-58.p...](http://nacr.us/media/pics/screenshots/screenshot--18-21-58.png)

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

------
TazeTSchnitzel
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
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.

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

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

It's the opposite, this stuff is already hard, there's no need to make it more
complicated by introducing a distinction that's misleading.

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

That's a pretty arbitrary cutoff, but all the same: you're describing a 3d
engine, not a library. Besides why would you want all that in one library? I'd
rather have my mesh loading and my physics be separate libraries so I can have
more choices and keep my includes small.

------
rvdm
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!

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

------
spartanatreyu
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
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
Looks like it will be pretty good when finished... pity you haven't gotten to
textures yet.

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

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

------
benihana
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.

------
qshugaung
nice

