WebGL Tutorial 02 - Rotating 3D Cube

In this video, I explain the theory behind expressing 3D scenes in 2D spaces (such as your screen), and how to program with that in consideration with WebGL. I imagine this is closer to what you want to do with WebGL.

In this series, I will not be using any external libraries like Three.JS. These tutorials are intended for people comfortable (but not necessarily experienced) with JavaScript and HTML, with or without any prior graphics programming experience. Ideally, I would like anybody watching my full tutorial set to be able to create a 3D video game from scratch using WebGL.

Other fantastic WebGL resources:

[tomshieff]

You came back to a 7 year old vid and added chapters, I am grateful!

[jasoncessna]

With how little information and tutorials there are on WebGL out there still, this video is extremely valuable for beginners with this style of programming. Thank you so much for posting this!

[charlesmerriam]

I'm amused by the type at "3:10". Oops typo. Replace with new typo. Move on. Made me smile.

[obnoxiouscommenter]

You're a lifesaver. I learned much more from this tutorial playlist than my university. I really needed that solid foundation of understanding. Almost every source code in my course uses different methods for, say, inserting vertex data to GPU or rendering points, but they can't even be bothered to explain. The boxIndex method was one of them. Then, after only touching on rendering a single static 3D object, the lab assignment soon after required students to render _multiple 3D objects_ with _each object having their own unique transformations!_ It's terrible.

[Fabroskii]

This is an absolutely incredible tutorial. Perfect pace, informative, not dumbed down, just the right amount of detail.

I really hope there are plenty more episodes coming - I'm subscribed now. Thank you!

[Bluecrimson]

For anyone getting the error "mat4 is not defined" around 14:24 you need to write it as glMatrix.mat4
Probably caused by an update (?)

[triputrafauzanhradji]

3:08
"mopre or less" *exists
"Oops typo" *proceed to change it to "mope or less"

[markbrownmb]

This loop is going to Change The World! Really awesome tutorials, thanks!

[CherryBomb_Games]

"Whoops, there's a typo"


*deletes wrong letter in the typo*

[aspeno]

Very late to the party but wanted to say thanks so much for this! Saved my life in my graphics class haha

[MisterBrausepulver]

The 'v' at `gl.uniformMatrix4fv` stands for vector since you pass it an array. There is also an equivalend function without the 'v' which would take the four components of the Float32Array as individual arguments.

[RetroEcoChicken]

tbh i think this is a million times better then your newer once. leaving it unedited is alot easier to follow then when people fast forward the code.

[tiffanychong]

For anyone getting the small triangle to show up, make sure that `mProj * mView * mWorld *` are in the right order. I forgot that matrix multiplication is not commutative.

[bonbonpony]

15:28 The `v` stands for "vector", as in array of elements of the same type. It's another low-level cruft from the C interface to OpenGL where when you wanted to pass an array of elements of the same type, you had to pass it as a pointer (address) to the first element of the array along with the number of elements in this array.
BTW is there a way to reuse just the vertex coordinates, but use a separate buffer for color values, and index in both accordingly? (So that you didn't have to repeat the coordinates just because you want them to have a different colour.)

[SpencerGD]

"It took 45 minutes just to draw a simple triangle... this one is not going to be as long."
**looks at video length**
Well, I guess at 40 minutes 6 second, that's _technically_ true.

Really, though, these videos are great and extremely helpful.

[ShermanSitter]

3:00 "more" spelled "mopre" ..."Whoops, type..." changes it to "mope" :))) I'm not trying to pick on you, but that was hilarious! :)

[DerTypDerVideosGuckt]

3:08 That's mope or less a nice correction :D

[Kosro]

A BIG Thank you! I really like your voice, pace & comprehensiveness. Hope you'll make some more videos :D

[AlexanderBollbach]

i think the v in uniform4fv stands for vector which makes sense as a 4x4 matrix can be described as four column vectors.

[singingvikram]

I don't know if you already knew this, but you don't need to set glClearColor(); in the render loop. Once the opengl state is set with a certain color it stays the same. :)