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. [...] חשבתי “איזה באסה ! ודווקה חשבתי שאוכל לבנות אחלה ממשקים לתוכנות שלי עם זה”  אבל אז ” רגע… יש תוכנות שיש להן ממשק web , איך לעזעזל? ” . אחרי בירור קצר הבנתי – כל תוכנה כזאת מפעילה שרת web בתוכה מחכה שיעבירו לה פקודות. javascript יכול לעביר את הפקודות בסגנון ajax או ע”י כניסה לקישור “הנכון” (אסביר את זה בהזהדמנות אחרת). קיבלתי עוד תשובות מעניינות בספק על javascript – למשל זמן ריצה ולמה javascript לפעמים “קורס” ואיך אפשר לחלק משאבים מעבד. הסבירו על איפשרות מטמון מתקדמות . והדבר שהכי ריגש אותי היה איפשרות הציור. מה שמזכיר לי : javascript ו-HTML5 תומכים ביחד בתלת מימד!.  [...]

  2. [...] am trying to learn some WebGL (from this tutorial I followed the guide, and now I am trying to implement my own demo. I want to create a graphics [...]

  3. Nelson says:

    Hi your tutorial lessons are wonderful!
    But I found that they are not working with the latest version of Chrome…!?



  4. Terrific blog. Cheers for publishing.

  5. [...] following the tutorials on, I decided to break it up into even smaller chunks. This really isn’t necessary, but I [...]

  6. [...] Las tutoriales de Learning WebGL explican en detalle las estructuras de código necesarias para trabajar en WebGL. [...]

  7. Saurabh says:

    Hi Giles,

    Thanks a lot for the tutorial. I must say it is the best guide for WebGL out there. Well I have been using it to create a Cloud Viewer application to visualize PCL RGB point clouds. Here’s the link

    Kindly have a look and let me know if you have any inputs. Also I am currently facing some issues with loading >100k points: the screen just turns blank. Please let me know if have any suggestions regarding this.


  8. [...] Copying HTML/Javascript Leave a reply So I’m working on learning WebGL using this website. To see the code, I just saved the webGL tutorial page files, through chrome, to my computer. When [...]

  9. Howard says:

    I tried to get the js code from git but it is obfuscated to the point I can’t read it. How do I get the support code so I can see what it says.

  10. akshay says:

    Nice series of tutorial. Very helpful to find examples of webGL coding.

  11. Gökçe Gün says:

    Wow. I model these with 3Ds Max. I didn’t know you could do these with Javascript, thanks!!

Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter