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

    Hi guys!
    Someone knows a good tutorial about spherical/cube mapping?

    Thanks in advance.

  2. [...] com esse link hoje: Learning WebGL. Vale a pena conferir… Share this:TwitterFacebookLike this:LikeBe the first to like this [...]

  3. [...] LearningWebGl.com is a site with tons of WebGL stuff, including a series of tutorials. [...]

  4. [...] As mentioned, you can also write your own WebGL from scratch, using no libraries. Find out how at the Learning WebGL blog. [...]

  5. Marcus says:

    Might it be time for some new tutorials soon? It’s allmost one year since the last one. I check here about twice per week, but it’s been very silent. Are you going to put out any more tutorials?
    The ones you’ve got up now are excellent. They’ve not only helped me with WebGL, they’ve also explained stuff that I didn’t get my head around in “regular” OpenGL.

    Thanks!

  6. [...] you want to learn how to actually use WebGL (and you already know a little JavaScript), LearningWebGL.com is a great place to [...]

  7. Matteo says:

    hi everyone!
    I’m new with opengl (thanks to giles for the excellent tutorials) and I want to load meshes on the web and visualize them.
    someone can suggest me the best framework to do so? or it’s better to use no one and do low level stuff (like in tutorials)?
    A friend of mine has tried three.js but he says that it has big limitations on file handling.
    thank you in advance ^_^

  8. [...] 教程方面推荐Giles编写的WebGL教程,我们的网站上有这一教程的指定中文版本,这一教程的大部分课程都是从大名鼎鼎的Nehe的OpenGL教程改编的,从浅入深,相当的通俗易懂。如果学习过程中有什么疑问,可以加入我们的QQ群提问,也可以在论坛发帖提问。 [...]

  9. [...] For years, NeHe has provided the best tutorials for getting into OpenGL. Several of those tutorials have been ported to WebGL at learningwebgl.com [...]

  10. Someone says:

    Hello guys!

    I already have an experience at OpenGL but I’m new to WebGL.

    I got a problem with drawing textured object (texture doesn’t showing, in other words, always returns ‘vec4(0.0)’ in shader. I can’t understand why doesn’t work but looks browser’s bug or something which I don’t know (I’m using Mozilla FireFox 7).

    For example, if I’ll pick your tutorial (can be lesson5) and test it there (over the Internet) it would works fine. But if I’ll download it to my machine (of course, including all scripts and images) there is nothing drawn (mean objects which uses textures). I have looked for some references ‘how to fix it up’ on the Internet (because at first time application throwed exception error at line ‘.texImage2D(…)’, I forget how it sounds but something with SECURITY_ERR) and found the instruction how to solve it: ’set about:config->security.fileuri.strict_origin_policy to false’. I did it but there are no expected results. I also tried to use image from web (http path) but it doesn’t work too.

    Is there any (maybe easy) way of solution of that problem?

  11. Jesse Good says:

    @Someone:

    In InitTexture() do this:
    neheTexture.image.crossOrigin = “anonymous”;

  12. Lord Ashes says:

    These are great lessons…

    Excellent follow-ups would be lessons on:

    1) Collision Detection

    2) Object Selection

    Thanks a lot for these lessons.

  13. [...] WebGL is an amazing piece of technology that enables browsers to natively render hardware accelerated 3d creations (yay, no o3d plugin needed!). I’ve always been specially amazed by what Mr Doob has been doing with his Three.js framework for quite a while (in particular his participation on the ROME project, which I briefly talked about recently). Nonetheless, there are some other amazing WebGL creations around, such as those featured on Chrome Experiments, those crafted by OOS and the projects recently presented on WebGLCamp (not to mention the amazing Team Fortress 2 level vizualizer). [...]

  14. [...] Source : http://learningwebgl.com/blog/?page_id=1217 [...]

  15. [...] rest of the set of 16 demos from learningwegl.com have been posted here. Note that some of them work, some only partially work, and others do not [...]

  16. [...] Tutoriels WebGL Exemple normal map en WebGL [...]

  17. [...] major portion of the codes are directly taken from Learning WebGL lessons written by Giles [...]

  18. [...] are many nice tutorials out there to learn WebGL, which is essentially a simplified OpenGL API with less room for [...]

  19. lacroix says:

    3d object selection would be nice!!

  20. [...] Jobbat med learning webGL: [...]

  21. [...] har hela eftermiddagen spenderats med att utbilda sig i WebGL, främst utifrån LearningWebGL.com. Vi har suttit tillsammans allihopa i 3D-salen. Vi ligger nu allihopa kring cirka lektion 6, och [...]

  22. [...] be drawn. Those things are fast as hell. If you want a good place to start learning this stuff see Learning WebGL blog. But note that they may not explain all the nitty-gritty details, so you’ll probably end [...]

  23. [...] [1]http://en.wikipedia.org/wiki/Canvas_element [2]http://en.wikipedia.org/wiki/WebGL [3]http://learningwebgl.com/blog/?page_id=1217 [4]https://github.com/mrdoob/three.js/ [5]http://en.wikipedia.org/wiki/Scalable_Vector_Graphics [...]

  24. snoopp says:

    Hey, dont know how solve this, gl runs, but lighting,there is no lighting.

    MAC OS lion, macbook pro 13, anybody knows how to enable this? Tried Chrome, Chromium and Firefox, everywhere same shit, no lighting…

  25. This particular tutorial was very helpful to me in learning how to render to a texture. Thanks! I’ve done two things with this, depth-peeling transparency and mouse picking.

    Here are details of how to do transparency in WebGL using depth peeling:

    http://www.khronos.org/message_boards/viewtopic.php?f=44&t=4905

    And mouse picking is treated in detail in a response to this post:

    http://www.khronos.org/message_boards/viewtopic.php?f=44&t=4899

  26. [...] major portion of the codes are directly taken from Learning WebGL lessons written by Giles [...]

  27. [...] MisterSaisho on Apr.12, 2012, under Uncategorized Tweethttp://learningwebgl.com/blog/?page_id=1217 Print window.fbAsyncInit = function() { FB.init({ appId: '136642053037999', status: [...]

  28. [...] I have discovered so many cool WebGL examples and demos through this website, and he also has a great series of tutorials on getting started out with WebGL. Highly recommended if you’re looking to learn more about [...]

  29. [...] major portion of the codes are directly taken from Learning WebGL lessons written by Giles [...]

  30. [...] 在做WebGL开发的时候,可以利用「glMatrix.js」库矩阵运算的功能。 2009年末、Giles发表了使用WebGL的入门向导文章「Learning WebGL」、WebGL的使用方法变得更加容易理解了。虽说通过WebGL的绘制效果甚至可能达到本地的高性能游戏专用机的绘制效果,但如果没有非常精通OpenGL的人在还是不太现实的。 因此、2010年末为了能够更加简单的利用WebGL,库「Three.js(Mr.doob)」被发表了。因为 Three.js 非常容易使用,所以很快变得非常有人气。 发表的初期每周一回的频率、到2012年2月还保持在1.5个月1回的频率进行版本更新、期待它在未来有更远的发展。 本文的三维物理模拟的绘制也使用了Three.js。 WebGL的javascript框架除了Three.js之外,还有「J3D」和 「SceneJS」和、日本开发的「gl.enchant.js β版(株式会社ユビキタスエンターテインメント)」等。 [...]

  31. Dimitris says:

    Hi,
    I am just getting started on WebGL (noob :) )
    and i have a small problem already while trying to run the first lesson.

    When i click ‘Click here and you’ll see the live WebGL version’ my browser (Chrome) displays it correctly but when I get the source code, copy it in a simple .html file and open it again with the same browser i only see the black canvas without any shapes in it.

    Just wanted to ask this simple question now before I dive in deeper as i will be using webGL a lot in the next months.

    Any help appreciated,
    Kind Regards
    Dimitris

  32. Dimitris says:

    Sorry for the comment above, i was not patient and didn’t read the whole thing before asking

    Dimitris

  33. [...] most part my efforts so far have been centered around finding work, and following a small series of WebGL tutorials based on the popular Nehe OpenGL series. I’m using WebGL to brush up on the OpenGL I covered [...]

  34. Sam says:

    @snoopp did you figure out what the problem was? I’m having the same issues, gl runs fine on all browsers but no lighting. I’m running OS X Lion 10.7.4 on a Mac Mini server….

    Anybody know how to fix this?

  35. snoopp says:

    Sam, my friend tryed to run application on mac mini, there is better ati videocard(i have intel in mac book), and there was shaddows and lighting works well. It seems like video driver or something on(

  36. sah says:

    Is it possible to make 3D UI using just html5 ,css how much of WEBGL would be involved.Please let me know the details i am a begginer.

  37. [...] major portion of the codes are directly taken from Learning WebGL lessons written by Giles [...]

  38. Nikola Lukic says:

    Please check out my 3D first person online web site creator. Devised examples of my work from this site. glmatriks the tip of the iceberg.

    http://www.zlatnaspirala.netfast.org/

    Nidza

  39. sah says:

    trying a tree structure to draw a node and child nodes
    if we have n square’s do we have to feed n vertices into the buffer?

  40. [...] et logique. Si certains points de ce tutoriel vous semblent obscurs, je vous invite à regarder ici, ou vous trouverez un des tutoriels qui m'a énormément [...]

  41. [...] of 3D and WebGL, but the first question a WebGL book must face is: how is it better than the Learning WebGL intro lessons? The answer is that the Learning WebGL intro lessons, while pragmatically useful, focus more on [...]

  42. [...] you are a designer, or want to become a designer, there are tutorials already available on the web about how to integrate and create WebGL . In short, these tutorials will teach you how to access the power of a computer’s graphics [...]

  43. [...] started learning WebGL using http://learningwebgl.com/blog/. At the same time I came across Dart http://www.dartlang.org/. So I decide to write “WebGL [...]

  44. [...] I have been working my way through the WebGL tutorials on Learning WebGL. [...]

Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter