WebGL Programming Guide

Kouichi Matsuda, Rodger Lea

Mentioned 3

Master WebGL, and create interactive web browser-based 3D graphics with no plugins -- even if you have no computer graphics experience! * *Learn breakthrough 3D programming techniques for tomorrow's web games, user interfaces, and information visualization applications *Seamlessly integrate rich 3D into Web pages, and interact with your applications through 3D UI elements *100+ recipes demonstrate and explain basic to advanced tasks: complete code library jumpstarts your own projects *Part of AW's official OpenGL series: co-written by a member of Khronos's official WebGL team. WebGL brings plugin-free 3D to the web, enabling you to create sophisticated interactive 3D graphics right inside web browsers -- perfect for games, user interfaces, and information visualization. The WebGL Programming Guide will help you get started quickly with interactive WebGL 3D programming, even if you have no prior knowledge of HTML5, JavaScript, 3D computer graphics, mathematics, or OpenGL. You'll learn step-by-step, through realistic examples, building your skills as you move from simple to complex solutions for building visually appealing web pages and 3D applications with WebGL. WebGL and 3D pioneers Dr. Kouichi and Dr. Rodger Lea offer easy-to-understand tutorials on every technology you'll need, plus 100 sample programs, each demonstrating a specific WebGL topic. You'll move from basic techniques such as rendering, animating, and texturing triangles, all the way to advanced techniques such as lighting, interacting with 3D objects, fogging, shadowing and working with 3D models generated by 3D authoring tools. This book won't just teach you WebGL programming best practices: it will give you a library of code you can use to jumpstart your own WebGL projects.

More on Amazon.com

Mentioned in questions and answers.

I'm new and starting to learn about 3D computer graphics in web browsers. I'm interested in making 3D games in a browser. For anyone who has learned both WebGL and three.js...

  1. Is knowledge of WebGL required to use three.js?

  2. What are the advantages of using three.js vs. WebGL?

I picked up three.js, but also jumped into GLSL and experimented a lot with three.js shaderMaterial. One way of going about it - three.js still abstracts much of the stuff for you, but it also gives you a very clean, low level access to all the rendering (projection, animation) capabilities.

This way, you can follow even something like this awesome open-gl tutorial. You don't have to set up the matrices, typed arrays, because three already sets it up for you, updating them when needed. The shader though, you can write from scratch - a simple color rendering would be two lines of GLSL. There is also a post processing plug-in for three.js that sets up all the buffers, full screen quads and stuff you need to do the effects, but the shader can be very simple to begin with.

Since programmable shaders are the essence of modern 3d graphics, i hope my answer is not missing the point :) Sooner or later, anyone who does this needs to at least understand what goes on under the hood, it's the nature of the beast. Also, understanding the 4th dimension in homogeneous space is probably important as well.

This book is good for WebGL.

I recently started studying WebGL, and it's all very exciting. I really want to be able to code stuff on my own, but unfortunately, I have to rely a lot on libraries like three.js and matrix utility libraries to get anything done.

I have a strong JavaScript background, and I feel that if I could better understand the concepts behind WebGL (or OpenGL ES 2.0, for that matter), I could code all sorts of things without having to rely on so many libraries.

Some examples of things that confuse me are why people commonly use an MV matrix with a perspective matrix and combine them together to create the view you see, what exactly the frustum is and how to change it to get the intended view, as well as how to code some of the more complex things, like rotating 3D objects, etc.

I guess my point is, I can look at someone else's code and memorize it, but I want to understand why people code 3D the way they do, and I want to be able to code WebGL applications without relying on lots of libraries.

To that end, if anyone has any recommendations for good books/literature/documentation that will teach me the concepts and how to code WebGL applications without the use of libraries, I would be very appreciative.

Thank you.

Are 2 sites that come to mind. I'd suggest you at least read the first one as it's short and you'll get a taste for what's to come.

As for books,

Recently, I have been studying a number of matrix libraries used for WebGL to better understand the math that goes into the various transforms performed on matrices. Currently, I am trying to better understand the math used for rotational transforms.

Specifically, I already understand the transforms used for rotating around the three axes as well as how to generate these matrices (shown below).

enter image description here

However, I don't get the equations used to rotate around an arbitrary axis that isn't the x-, y- or z-axis.

I'm currently reading through WebGL Programming Guide, and in the provided library, they use the following JS to rotate around an arbitrary axis (where e is the array that contains the 4x4 matrix):

len = Math.sqrt(x*x + y*y + z*z);
if (len !== 1) {
  rlen = 1 / len;
  x *= rlen;
  y *= rlen;
  z *= rlen;
nc = 1 - c;
xy = x * y;
yz = y * z;
zx = z * x;
xs = x * s;
ys = y * s;
zs = z * s;

e[ 0] = x*x*nc +  c;
e[ 1] = xy *nc + zs;
e[ 2] = zx *nc - ys;
e[ 3] = 0;

e[ 4] = xy *nc - zs;
e[ 5] = y*y*nc +  c;
e[ 6] = yz *nc + xs;
e[ 7] = 0;

e[ 8] = zx *nc + ys;
e[ 9] = yz *nc - xs;
e[10] = z*z*nc +  c;
e[11] = 0;

e[12] = 0;
e[13] = 0;
e[14] = 0;
e[15] = 1;

From what I can tell, the first part of the code is used to normalize the 3D vector, but other than that, I honestly cannot make any sense of it.
For example, what do nc, xy, yz, zx, xs, ys and zs mean? Also, as an example, how did they come up with the formula x*x*nc + c to calculate e[0]?

As per a related SO post, I did find a reference to the following matrix for rotating about an arbitrary axis:

enter image description here

This seems to be related to (if not the same as) what the JS code above is doing.

How is this matrix generated? I've thought a lot about how to rotate around an arbitrary axis, but the only thing I could come up with was to break the 3D vector extending from the origin into its x, y and z components, and then perform three different rotations, which seems pretty inefficient.

Having one matrix to do all of that for you seems best, but I really want to understand that matrix and how it's generated.

Lastly, while I'm not sure, it seems like the matrix above does not account for a translation of the axis away from the origin. Could that be easily handled by simply using a 4x4 matrix instead with Tx, Ty and Tz values in the appropriate locations?

Thank you.

Please find the math overview here:


There is a detailed explanation here:


You are correct about that rotation matrix not accounting for translation.

Yes, you can create a rotate-then-translate matrix by multiplying translation x rotation:

    1 0 0 t1      r11 r12 r13 0
T = 0 1 0 t2  R = r21 r22 r23 0
    0 0 1 t3      r31 r32 r33 0
    0 0 0 1       0   0   0   1

        1 0 0 t1   r11 r12 r13 0   r11 r12 r13 t1
T x R = 0 1 0 t2 x r21 r22 r23 0 = r21 r22 r23 t2
        0 0 1 t3   r31 r32 r33 0   r31 r32 r33 t3
        0 0 0 1    0   0   0   1   0   0   0   1

If you only want to rotate around an arbitrary axis away from origin (that is, around a line), look for the item "6.2 The normalized matrix for rotation about an arbitrary line" in the 2nd URL (http://inside.mines.edu/~gmurray/ArbitraryAxisRotation/ArbitraryAxisRotation.html).