The Lessons

I’ve been creating a series of lessons as a way of teaching myself WebGL. The first ten are based on the well-known NeHe OpenGL tutorials, but I’ve diverged since then. Here are the ones so far.

If English isn’t your first language, you might like these translations of the lessons:

Lesson 0 thumbnail Lesson 0: Getting Started shows you how to download, install and configure a web browser that can show WebGL content, and gives links to a set of pages that show what it can do.
Lesson 1 thumbnail Lesson 1: A Triangle and a Square gives you an overview of how WebGL works, with enough code to simply draw a static triangle and a square on the screen.
Lesson 2 thumbnail Lesson 2: Adding Colour builds on lesson 1, and adds colour to the triangle and the square.
Lesson 3 thumbnail Lesson 3: A Bit of Movement builds on lesson 2, making the triangle and the square spin around.
Lesson 4 thumbnail Lesson 4: Some Real 3D Objects builds on lesson 3, bringing us into the third dimension fully by replacing the triangle with a pyramid and the square with a cube.
Lesson 5 thumbnail Lesson 5: Introducing Textures shows how you can use an image file to “skin” your 3D objects, giving you a quick and easy way to make them look more interesting.
Lesson 6 thumbnail Lesson 6: Keyboard Input and Texture Filters builds on lesson 6, showing you some more advanced ways to use textures, and also gives some pointers on how to read the keyboard in a way appropriate for 3D scenes and for games.
Lesson 7 thumbnail Lesson 7: Basic Directional and Ambient Lighting introduces the two simplest forms of lighting.
Lesson 8 thumbnail Lesson 8: The Depth Buffer, Transparency and Blending shows one way in which you can simulate transparent materials in WebGL, teaching you a little more theory along the way.
Lesson 9 thumbnail Lesson 9: Improving the Code Structure With Lots of Moving Objects uses simple object-oriented techniques to give us number of independently-animated objects moving around the screen at the same time.
Lesson 10 thumbnail Lesson 10: Loading a World, and the Most Basic Kind of Camera uses techniques from the previous lesson, along with a new trick to simulate a camera that moves around the scene, and demonstrates a kind of nano-Doom :-)
Lesson 11 thumbnail Lesson 11: Spheres, Rotation Matrices, and Mouse Events shows how to draw spheres, and how to write code so that the user can spin them using the mouse.
Lesson 12 thumbnail Lesson 12: point lighting shows how implement lighting that seems to come from points within your 3D scene.
Lesson 13 thumbnail WebGL Lesson 13: per-fragment lighting and multiple programs describes a way of doing more realistic lighting at the cost of more processing time for the graphics card.
Lesson 14 thumbnail WebGL Lesson 14: specular highlights and loading a JSON model makes the lighting even better by adding specular highlights, and also shows how to use load up models of 3D objects from JSON files.
Lesson 15 thumbnail WebGL Lesson 15: specular maps shows how to use specular maps, which give your scenes greater realism by making it easy to specify how reflective an object is at every point on its surface, just as normal textures allow you to specify its detailed colour.
Lesson 16 thumbnail WebGL Lesson 16: render-to-texture shows how to render a WebGL scene into a texture that can then be used in another scene — a neat trick in itself, and a useful foundation for other techiques.

163 Responses to “The Lessons”

  1. [...] being said, there are already tutorials popping up, and Khronos has a page showing off some live examples of what’s being done with the [...]

  2. [...] tutorials can be found here. My code is based entirely on his excellent work.  Please be aware that since he posted his [...]

  3. [...] WebGL Tutorials (Inglese) January 28th, 2010 in WebGL | tags: WebGL [...]

  4. [...] Learning WebGL (tags: 3d browser html5 learning programming tutorial webdev) [...]

  5. R4Y says:

    Long time no see.

    Wow, Much more Nice Lessons than several months ago.

    I am back to learn.

    Keep going~~!

  6. Varun says:

    Thanks for Great tutorial :)
    I really appreciate the work done by the author for providing such explanatory tutorial to get started with OpenGL ES 2.0 and Webgl.

    Thanks again…….

  7. giles says:

    Thanks, guys!

  8. Varun says:

    Any chances of a tutorial that explains text rendering?

  9. giles says:

    @Varun — check out http://murfy.de/read/webgl-text-rendering

    (I’ll do one of my own sometime, though.)

  10. [...] 学习webGL资讯比较全的网站 http://learningwebgl.com/blog/ 一系列课程: http://learningwebgl.com/blog/?page_id=1217 从这个课程中翻译的中文资料(只有3章) [...]

  11. [...] if you want to know more about WebGL and are  going to do some lessons, [...]

  12. Vani says:

    Great Lessons and its a good start for me!!!

  13. [...] WebGL es un interesante estándar que permite con JS y desde el navegador, sin necesidad de plugins usar gráficos 3D acelerados por hardware con OpenGL 2.0, en esta pagina podremos desde ya aprender a como usar WebGL [...]

  14. giles says:

    Thanks, Vani — glad you like the lessons!

  15. Tad says:

    Thanks for the tutorials — I’m working on an astronomy education project. I’m something of a beginner at JavaScript, and I’m wondering how I can move the fragment/vertex shaders to an external file. Thanks in advance for your time!

  16. giles says:

    Hi Tad — if you look at the way lesson 10 uses to load up the world file using XmlHttpRequest, you could probably adapt getShader/initShaders so that they use something similar.

  17. [...] unlike OpenGL in C++, you must write your own shader programs; I suggest using samples from learningwebgl.com at least to get started. However, once you have a functioning WebGL canvas, it is easy to pick up [...]

  18. Nathan says:

    These are great tutorials. I appreciate the effort, I have been working through them and yesterday all of the images on animated objects worked, but today they don’t? I noticed this as I was just about to start lesson 7, and clicked a couple others. L6 seems to still show crate.gif, but anything that rotates does not show the image. I am guessing there was another “demo breaking” update.

  19. Nathan says:

    I have noticed that going through your tutorials, when I remove the generateMipmap, and use gl.LINEAR only, they are starting to work. Looks like something changed with the MIPMAP?

    Where do you monitor changes in the code that could potentially break demos?

  20. giles says:

    Hi Nathan,

    Glad you like the lessons, sorry to hear that they’re not working for you. I track changes to the spec on the “Public WebGL” list, where the working group discuss a lot of the changes they’re making. I don’t think anything new has his the spec since Chrome dropped the WebGLXXXArray array types. However, I updated everything to match this change on the 16th, which I see is when you made this comment — so perhaps you just need to upgrade your browser?

    Cheers,

    Giles

  21. giles says:

    Nathan — another possibility — on a different thread, pianom4n reports that he’s having a problem with mipmaps on a Radeon 4200 HD — sounds rather like what you mention in your second comment, and he was able to fix it up updating his drivers.

  22. Nathan says:

    Thanks for the tip, I put the MIMAP back in the code I was trying, and that works, as well as the textures loading on your site. I am trying to combine what I learn here with the O3D project. Thanks again!

  23. giles says:

    Cool, glad it helped!

  24. Alexander Repenning says:

    Demos using textures do not work with current WebGL on Safari (WebKit). However, WebKit is pretty stable with WebGL and CAN render much more complex demos including Quake 3 http://media.tojicode.com/q3bsp/

  25. thoa says:

    why WebGL not run on IE, although it is run by Javascript
    thanks

  26. wimy says:

    that’s an amazing

  27. vincent says:

    Thanks for the lessons! Great website!

  28. Sumez says:

    Excellent tutorial!

    I like how it doesn’t assume the reader is a total idiot, while at the same time explaining all the complicated stuff so it is understandable by any programmer without GL experience.

    I also like how it stays clear of using complicated object oriented programming – even though it’s a must in a program like this, your tutorial allows every reader to develop his own way of implementing what you’re teaching into a more complex system.

  29. Chun Li says:

    Thanks for the great tutorials. Very helpful and much appreciated.

  30. giles says:

    @Alexander Repenning — examples should work now, there was a period when textures were broken in most extant demos because the WebKit guys introduced a check that the textures had power-of-two dimensions (which is what the WebGL spec says they should) and most people hadn’t bothered to follow that part of the spec…

    @thoa — WebGL is a library to allow people to access the 3D graphics hardware from JavaScript, so although you write WebGL code in JS, the browser itself needs to pass your program’s 3D requests through from that JS to the graphics hardware. So each browser has to support it separately, and Microsoft have chosen not to support it in IE9.

    @wimy, vincent, Sumez, Chun Li — many thanks!

  31. Andrea says:

    I’ve been learning OpenGL ten years ago with the Ne-He tutorials.
    Now I see you are using the same textures, what is your relation with Ne-He?

  32. [...] encontré una serie de tutoriales por pare de http://learningwebgl.com bastante bueno y llevo un rato jugando con ellos, ya acabe las [...]

  33. giles says:

    Hi Andrea — no formal relationship; I started porting the NeHe lessons for my own amusement and published the results. I did try to get in touch with the people who took over NeHe’s site a while back, but they didn’t get back to me :-(

  34. Johnny says:

    Don’t forget the unpublished examples 16 & (maybe?) 17. Add the number at the end of the urls to find these special secret cookies of love.

  35. [...] look at how the shaders work I’d recommend running through the first couple of lessons at Learning WebGL. It is important to notice that we give each shader a unique id, and define whether it is a vertex [...]

  36. [...] before this will look very familiar to you, otherwise I’d again recommend looking at the Learning WebGL tutorials which explain how the projection and modelview matrices determine where objects are [...]

  37. giles says:

    @Johnny — well spotted :-) The code for lesson 16 is done, but I’ve been finding it hard to make the time to write it up — should happen soon, though.

  38. Zhouli says:

    Hi,giles.Your tutorials are wonderful!I want to translate your tutorials into Chinese.Is it ok?

  39. Phinehas says:

    I only can either draw in color or map texture in the same scene.

    May I know the method of drawing lines in color and mapping texture to triangle in the same scene?

  40. giles says:

    Hi Zhouli — sure! Please include a link back here, though.

  41. Zhouli says:

    Thank you! giles,of course, I will include as many back links as possible.

  42. esacosta says:

    Very good lessons. I want to do same like this in spanish, in webgl.tk. As soon as posible :)
    Thanks for your lessons!!!!!

  43. Danilo says:

    Hello,

    Using your first lesson, I was trying to implement the same funcionality of ShaderToy. But, well, the performance is far too slow. I’d like to know how to get the maximum perfomance of WebGL. Would you give me some book reference (or something direct to the point)?

    Thanks

  44. Danilo says:

    Sorry,

    The problem with my code was that I used setInterval instead of setTimeout inside the draw function. :P

  45. giles says:

    I guess you mean the other way around? That would cause problems :-)

    (One thing that I need to do to the lessons is actually to move away from using setInterval and instead to use the new requestAnimationFrame stuff that’s just been added to the browsers…)

  46. Bluce says:

    Thanks for these lessons.
    I have a problem that I don’t know which lesson is about it, so I ask here.
    I have to get the pixel value from the canvas that I drew my 3D object when I clicked my mouse. I tried to add the “gl.readPixel” function in the lesson 3 example code, but it’s failed. Can you help me to resolve this problem?

    Here is the code that I added when the event, onMouseClick, was triggered:
    var color = new Uint8Array;
    gl.readPixels(preMousePosX, preMousePosY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, color);

  47. Bluce says:

    Sorry, I added the “gl.readPixel” function in the lesson 5 example code.

  48. [...] is the first post in what will hopefully be a series of posts exploring how to use WebGL to do GPGPU (General-purpose computing on graphics processing units). In this installment we [...]

  49. Tomas says:

    Hi,
    i think, that yours tutorials are very gut.You made a lot of work. I have converted your lessons to MOBI format (kindle 3) – dont be afraid – citation are included;-) and my question is, if you don’t want to publish these files on your web. It’s realy comfortable, read tutorial, before i gonna to sleep.;)So what do you think? Write me pls email.
    Bye.

Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter