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. isha says:

    Cool tuitorial :)
    im wrking on a brick game..,can you help me with the gl texture?..,

  2. [...] 3. Уроки по изучению WebGL [...]

  3. andola says:

    Hey,could you sends me a code for a brick game?

  4. Maarten says:

    Thanks a lot for this! This looks awesome… i made a 3D game in Macromedia Director 8 a long time ago, now i’m into Javascript programming. Never managed to write a 3D renderer in js myself, but now that browsers are starting to support this kind of stuff i don’t even need to….

  5. giles says:

    @Bluce — sorry, I’ve no idea. What did it return in the color array?

    (That said, while I’m not a JavaScript expert, I would expect the first line to be var color = new Uint8Array(); — note the brackets.)

  6. giles says:

    @Tomas — no problem, that’s cool! I’ll drop you a line.

  7. giles says:

    @isha — perhaps, you’ll have to be more specific about the problem, though.

    @andola — no, sorry — but if you read the lessons carefully, you may be able to write one yourself.

    @Maarten — awesome it certainly is :-)

  8. magicSuper says:


    Thanks to your lesson, I have writed an example—Wall Of Photo.
    1.Weather it’s the only way of implementing animation is to use the method—tick() ?
    2.If you are not busy,here is my email address —-”[email protected]” , and give me some advice how to improve the structure of my code.(but if you are busy~,could you leave me a message :) , I promise not to tell anyone else your email address).
    3. If I want to learn more about webGL,what should I do?Could you give me some websites?(In my country,there is no useful information about webGL – - ).

    Thank you!

  9. [...] anderes als OpenGL ES 2.0 mit angeflanschtem JavaScript-Befehlssatz. Wir denken, dass wir uns mit dessen Befehlssätzen wohl eher selten herumschlagen müssen, sondern, wie im klassischen 3D-Bereich auch, wir immer mehr [...]

  10. [...] anderes als OpenGL ES 2.0 mit angeflanschtem JavaScript-Befehlssatz. Wir denken, dass wir uns mit dessen Befehlssätzen wohl eher selten herumschlagen müssen, sondern, wie im klassischen 3D-Bereich auch, wir immer mehr [...]

  11. magicSuper says:

    I am very confused to see the WebGL FAQ.

    What does the framework do?(encapsulation low-level function and provide high-level function?)
    There are so many frameworks ,what frames should I learn?

    What does the utils do? (encapsulation low-level function and provide high-level function?)

  12. giles says:

    Hi magicSuper — you can implement animation any way you want, so long as you draw a different thing each frame; the tick() function is just a nice way to do that.

    The best way to learn WebGL (other than these lessons, of course!) is to look at other people’s demos. If you read the “around the net” posts I do each week and look at the examples, you should be able to learn from them.

    Both frameworks and utils encapsulate low-level functions and provide high-level functions; frameworks generally tend to require that you structure your code in a specific way, utilities are more general-purpose. A good framework to get started with, if you’re not familiar with 3D programming, might be SceneJS.

  13. borablanca says:

    Thank you, very nice lessons. I’m new to webgl/opengl and they helped me so much. I want to ask how to render plain text in webgl?

  14. borablanca says:

    Oh sorry didn’t see older comments about how to render text .. Don’t take into account my last comment :)

  15. Owen Densmore says:

    Is it possible to have a triangle based model rendered in wireframe rather than filled? I realize I could build a new buffer rendered with lines, but I presumed there was a “fill” “draw” sort of switch for drawing triangles.


  16. dolaan says:


    could you help me wid a game?..,im trying to implement the classic super mario in im stuck.i went through your entire tuitorial,bt im stuck big tym.cud you help me start off?

  17. giles says:

    @Owen — there’s no switch like that that I’m aware of. As you say, you could build a new buffer — or alternatively you could index into the existing one with an index buffer.

    @dolaan — I’m happy to help but you’ll have to be more specific :-)

  18. Danny says:

    Are you by any chance going to write more lessons? I find them extremely helpful. At the moment the subject I’d require help with is shadows, because I think NeHe lesson on it is not very easy for one not experienced in C++ or graphics programming in general.

  19. giles says:

    I’m certainly planning to! Things have been a bit busy recently, so that’s held things up. However, I’ve got the beginnings of one on picking worked out — hopefully I’ll get that done sooner rather than later.

  20. [...] Você pode aprender WebGL neste link:  [...]

  21. DK_wu says:

    I’m a Chinese boy.I like 3D development.Also in reference to the moderator document.But there are many places don’t understand.My English is not good.Please take help!thank you!

  22. [...] 学习网站 [...]

  23. [...] stuff. There aren’t that many comprehensive tutorials yet, but you can try the lessons at Learning WebGL – they’re the best introduction to the subject I’ve seen so [...]

  24. [...] sami chcecie kodować trochę materiałów : Lerning WebGl (ang) Dokumentacja [...]

  25. Sylvain230 says:

    I’m french. This is a very good tutorial.
    There is no more lessons ? :p

  26. giles says:

    @Sylvain230 — glad you like the tutorials, I’m trying to make time to write more!

    @zziuni — thanks for the tip! I’ll put that in next week’s roundup. If they translate more than half of them, it might be worth putting a link at the top of this page too.

  27. sdkmods says:

    thanks for sharing this info, im am new to webGL but it was easy to follow and start building. love your work :)

  28. xxx says:

    best WebGL Totorial every!

    could you provide a DL link to get an offline version, so that i can learn while im sitting in my train?

  29. giles says:

    @xxx — thanks! I do intend to put HTML versions of the lessons in the github repo sometime, but haven’t done so yet. You can download the code from there, though:

  30. [...] to learn CoffeeScript and WebGL together I am going to try and convert Giles’ excellent Learning WebGL Lessons to CoffeeScript.  I’ve got a repo set up on GitHub and so far have complete lesson 01. [...]

  31. Andersen says:

    can I translate it into chinese version?

  32. Eugene says:

    Thanks for the lessons. This blog is really great.

    I have a question.
    Do I really need to know all this to develop 3D web-apps?
    There are a lot of tools quite easy to use for developing desktop and mobile 3D apps, for example Unity3D. And when I use these tools I don’t have to know how OpenGL works.

    There are some projects I’ve heard of that make developing of WebGL 3D web-apps as easy as developing desktop 3D apps, for example HTML5 WebGL platform for 3D games. Does anyone know about their platform?

  33. giles says:

    @Andersen — sure! Let me know where you post it, and I’ll link there from the main page.
    @Eugene — you don’t need to know all of this, no — though it’s always helpful to understand the foundations you’re building on. If you want to get started, check out the frameworks (listed in the blogroll to the right-hand side of the page)

  34. Jim Davis says:

    Gile, I have three books that teach OpenGL language, a
    teach them language OpenGL ES 2.0. It is advisable I
    guided by these books?


  35. giles says:

    Jim — the best OpenGL book I’ve found for learning WebGL is the OpenGL ES 2.0 Programming Guide. Books about non-ES OpenGL probably won’t be very helpful, because OpenGL ES is quite different.

  36. Jim Davis says:

    Giles would be good if you create a lesson on shadow mapping, related to projective texture. what do you think of the idea?


  37. johnny says:

    my firefox can’t deal with the webGL,so i study them with chrome, but chorme can’t run lesson10 in my own machine, i also download Opera and Nightly, but they do not work. i study webGL by myself, can you help me?

  38. Marcus says:

    Do you have an idea of when you’ll be publishing the next tutorial (picking)? And will you touch upon both GPU/Color picking and “Ray Intersection Picking”?

    Thanks for the great work so far! It’s helped me a great deal in my project.

  39. Denis says:

    Thanks for all the work to do these tutorial: very useful and i learnt a lot in just a few hours.

  40. jarou says:

    Thank You for the great lessons. Here is my project at chromeexperiments:

  41. Alucard says:

    Thanks a lot for these tutorials ! very clear !

    I am having a trouble loading some objects so .. I amusing indexed vertex positions and texcoords but couldnt find a way to display correctly the texture coords so, the positions are well display but how can I had the indices of the coord ?

  42. Andreas says:

    I am impresed by your Tutorials and right now I reached Lesson 10 :)

    Can someone tell me:

    How to draw a line in WebGL ?
    Especially lines with curve (awry) pointing at two points on a sphere ?


  43. [...] Acceder al Tutorial: Tutorial WebGL – Inglés – Learning WebGL [...]

  44. [...] 原文地址: [...]

  45. [...] WebGL ( has a great set of lessons to get everyone started with WebGL and contain familiar ports of the [...]

  46. [...] use for experimenting with this stuff. At around the same time, I found the impressive tutorials at which take you through both OpenGL and how to use it via WebGL with code in Javascript. I’d [...]

Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter