WebGL is the standard for rendering hardware-accelerated 3D graphics in a browser using JavaScript. WebGL is a blank canvas– literally! just put a canvas element in your page and you’re ready to program web applications in 3D– with virtually limitless applications.

The journey into WebGL programming begins with knowledge, andfor many developers, Learning WebGL is the first stop. I hope to continue the groundbreaking work Giles Thomas began in 2009, with the highest quality tutorials and a weekly roundup of WebGL goings-on. In 2013 we plan to expand the site with new content and features; watch this space. Till then, happy coding!

If you have thoughts, suggestions or feedback, please don’t hesitate to use the Comments, or feel free to contact me directly.

Original Posting from Giles Thomas, Creator and Editor Emeritus

This is a blog I’m keeping while I teach myself WebGL.  It’s made up of links to cool WebGL demos, news about WebGL, and a gradually-increasing set of tutorials that I hope will help other people learn WebGL — though I’m learning it myself as I go along, so any code I post is likely to be broken in strange, subtle ways.  Possibly in boring, unsubtle ways too.

WebGL is a standard for hardware-accelerated 3D graphics on the Web.  More here.

I am Giles Thomas, and I keep a non-WebGL blog at http://www.gilesthomas.com/. I’m also on GitHub as gpjt. My day job is co-creating a browser-based Python environment called PythonAnywhere. It doesn’t use WebGL yet, but it will when I’ve talked my colleagues and investors into it :-)

A few things to keep in mind if you want to follow the tutorials:

  • To write WebGL code, you’ll need to write JavaScript, and I’m targeting these lessons at people with a reasonable amount of general programming knowledge. If you don’t know at least one programming language reasonably well (and HTML doesn’t count, sorry) then you’ll probably need a different WebGL tutorial. On the other hand, I’m not assuming any 3D graphics or specific JavaScript knowledge. Basically, if you can code Python, C#, Java, Perl, C, C++, or something similar reasonably well, you should be fine.
  • I’m not a JavaScript or WebGL expert, Python has been more my kind of thing recently. So I’m learning this stuff as I go along, and while everything I say here is true to the best of my knowledge, it might be catastrophically wrong. That said, lots of people have been really kind about gently correcting my mistakes in the comments, and I’ve been fixing things retrospectively to make sure that no-one’s led astray, so errors should at least be short-lived!
  • I based the first ten tutorials on the well-known series of OpenGL lessons by Jeff Molofee aka NeHe. These tutorials are a great introduction to the art of OpenGL, and should work equally well as an introduction to WebGL. However, their code can be… interesting at times, and while I’ve tried to keep the sample code on this site as clean as possible, I may have inherited or introduced messiness. Did I mention that I’m no JavaScript expert?

To counter-balance all of the warnings — NeHe’s tutorials really are great, and I’ve been coding for almost 30 years (15 professionally), so hopefully what winds up on these pages won’t be total nonsense!

Licensing

The contents of this site are licensed under a Creative Commons Attribution/Share-Alike license. If you’d like to use any of the code here, or do something with the tutorials themselves (for example, translate them into another language), go ahead — just include a link back to this site. I’d also love to know about it, so please do drop me a line — though that’s not a requirement.