A Message from Tony Parisi, Editor-in-Chief
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, and for 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/. You can email me at giles at giles dot net, or follow me on twitter as @gpjt. 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.
Cheers,
Giles
Dude, your WebGL lessons are awesome. I hope you are planning to publish a book on the subject, I’d be the first to buy it. There are no books about the subject at Amazon.
I found your site while searching desperately some information about WebGL. I plan to remake some stock options graphics (like this http://epx.com.br/ctb/estudo.php) in 3D, and I plan to do it using WebGL. I also plan to do that in a ‘didatic’ way as much as possible so I can collaborate with some WebGL information to the Internet too
Thanks! Glad you like the lessons, and I look forward to seeing your WebGL pages. Interesting idea about a book, perhaps I should consider that..
https://www.khronos.org/webgl/
Draft spec is public now. WebGL wiki and public mailing lists online and ready for consumption.
Enjoy!
Thanks for the heads-up! Writing a celebratory post now
Thanks so much for making these lessons. Even if you don’t write a book you might add a tipjar to the site.
Thanks! I’m never sure about tipjars, though…
When is this expected to be finalized?
WebGL? I don’t think there’s been an announcement yet. The spec does seem to be stabilising, but things are still changing. I suspect it may be live in the browsers before the spec’s fully nailed down…
Giles, A big thank you for your tutorials and the time and effort sharing with us all.
Could you share your thoughts on a couple of my concerns. First the worry that Microsoft aren’t supporting WebGl and are unlikely to do so with there effort focusing on Silverlight and DirectX. Whilst developers may have preferences one way or the other and can argue about technical merits all day long, the millions of average people sat at a PC don’t care at all and if you WebGL based site won’t work in IE they will just go somewhere else.
My second concern is the openness of client side JS, A developer can expend time and effort developing unique webGL applications but the JS source is easily accessible and others can just help themselves to it. I know that opensource advocates will have no problem, but it will hold back some commercial organisations. (I’m not wanting to start any kind of debate about open source software here) can the source be protected?
Cheers A
Hi Anthony,
Those are great questions. There was an interesting discussion of the first in the LinkedIn group a little while back, so I’ll summarise here: while MS have no current plans to support WebGL in IE, I’m sure they’re watching it with interest. If it looks like it’s getting large-scale adoption, they’ll either adopt it themselves or come up with some kind of “WebDirectX” or something based on Silverlight/XNA. The latter would be more in character, but if WebGL is showing progress on mobile platforms then it might make less sense for them.
In the shorter term, will IE’s lack of support slow adoption? Not right now, as only early adopters are looking at the technology, and early adopters pretty much by definition are happy with downloading and using new versions of Firefox/WebKit. In the longer term, there is an IE plugin called Chrome Frame (see http://www.roughlydrafted.com/2009/09/25/google-sneaks-webkit-html-5-support-into-internet-explorer/) which lets you run Google Chrome in an IE tab, so perhaps that could smooth the way for widespread adoption. After all, people seem to be reasonably happy downloading plugins if they need them for the content they want to see — Flash being, of course, the best example.
Regarding the openness of the source — I don’t really think that’s as much of a problem as people think. Client side JavaScript has succeeded commercially in non-3D applications, and there’s nothing inherently different about 3D. At the end of the day, the value doesn’t have to be in the bit of code that’s downloaded to the user. And if you really need to hide the algorithms, there are always JS obfuscators.
Cheers,
Giles
Hi,
Indeed, JS can be obfuscated… meanwhile Java & .Net (probably flash too, I guess) bytecode can be quite trivially decompiled; I’m sure a lot of people naively think their code to be more hidden than it really is if it is not obfuscated.
That’s a great point.
Hey, just wanted to say that I nearly peed myself when I got this running for the first time with one of your examples. I’ve been using OpenGL for various toys over the years (thanks to Jeff Molofee’s Tutorials) and the entire reason I chose it was its compatibility. I just wanted to say thank you, so much, for putting this together in an accessible, reliable and useful format.
I did have a question though, and I think its answer will be useful to others so I’ll post it here: Is it possible using your sourcecode to retrieve information from a SQL database at run time? Basically I would like to use one for variables.
Thanks again,
JonBrant
I’m glad you find the tutorials useful!
Because WebGL runs in the browser, it won’t be able to talk to an SQL database on the browser machine for security reasons, and I don’t think there are any JavaScript bindings that let you call back to a database on your server. The best way of getting data from SQL through to a WebGL page would probably be to write a server-side application using your favourite server-side language (PHP, Rails, Django, etc) and then pass the data over to the browser in some appropriate format — I’d probably use Django on the server to generate JSON-formatted messages which could be loaded on the client side using XMLHttpRequest (similarly to the way that lesson #10 loads up the map).
Hope that helps!
Giles
Hi Giles:
I like your info. Can i republish your posts in my site?
I want be the spanish option to WebGL.
I want begin in these days. I will put your credits and links.
I is not possible, please answer this message
My WebGL site will be in: cuzamil dot net slash latinwebgl
Thx 4 your jon, is inspirational.
@Miguel — Sure, no problem! Sorry to take so long to get back to you.
Hi Giles, I am pleased to inform you that we have developed a system Gogo008. It allows graphical management WebGL content in the browser. Export created content, its inclusion in other projects and many other features.
It’s available here http://gogo008.com
We look forward to your opinion and comment about it. Best wishes
Hey Georgi — that looks interesting! I’ll take a look.
Hi Giles, at this time we have a small technical problem. Within a few hours we will remove it. Come by to view our application then. Many apologize for the situation.
Now everything works. We apologize for this.
webgl stopped working in chrome canary build
but works in chrome build 9
Spent 2 hours ripping my hair out
Did google turn it off in chrome????
Also, check out the teapots, on http://www.coolgl.com
*see webgl demo link*
please tell everyone, webgl dont work in google chrome canary build no more
just works in chrome 9
@stephen — yup, I think they might have turned it off in that build again. In general, I recommend that if you’re developing WebGL you should use the Chromium nightly builds or Minefield. Details on installing them (if you don’t already know!) are here.
Thanks for the demo links, I’ll put them in the next “around the net” post.
They turned it off if you don’t have the driver support. It doesn’t work on my work PC with an integrated graphics card, but still works fine on my home PC with a proper discrete card.
Big thanks for making this website.
I’m writing a lisp program that generates plants:
http://piepe.lv/abop/
Thanks to your tutorials and source code I was able to setup plant model previewer in less than on day:
http://piepe.lv/abop/webgl/?q=rose
http://piepe.lv/abop/webgl/?q=dandelion
@Peter — yes, there’s now a blacklist of drivers that make Firefox crash. Try upgrading the driver and see if that fixes it.
@snauts — cool! I’ll put a link in the next roundup.
I reached to your blog via
https://wiki.mozilla.org/User:Jgoulie (January 12, 2011)
Great learning resources on WebGL.
Keep Sharing!
Cool, glad you like it!
Almost a decade ago I learned OpenGL programming from NeHe’s tutorials. Just only recently I learned about WebGL and found my way to your tutorials – great work! They are clear to me, but I have just one issue and I wonder if you / someone could shed some light on.
I’m trying to change the location of a 3D object by reading the coordinates out from a MySQL db via PHP using AJAX. The AJAX part works like this (just excerpt from the full code):
I create first a request object:
var http = createRequestObject();
Then I call the PHP file that reads out the data from my MySQL db:
http.open(‘get’, ‘getMySQLdata.php’);
http.onreadystatechange = handleResponse;
http.send(null);
The function handleResponse changes the text in the HTML file:
document.getElementById(‘MySQLdata’).innerHTML = http.responseText;
Usually if I just want to output the data returned from getMySQLdata.php, I just put the following into the body part:
And that works just fine for displaying the result.
But like I said, I want the output specify the location (just on the X axis in this case, I’ll need two more AJAX calls for Y and Z, but that’d be then trivial) of the object in 3D space. I tried putting that whole line into where the location is defined in OpenGL, but nothing happens.
I imagine that perhaps innerHTML might need to change to something else, and/or might also need to change?
I’d very appreciative for a solution to my problem – either via post here (if that’s ok) or by emailing me (starovis at gmail.com).
If that will work then that’d just make my day! I’ll be happy to post a link here to the website once it’s done, so that people can check out the result.
I just realized after reading my post to check for correctness, that the line that outputs the db data, is missing:
(maybe that’ll show up in here correctly)
Nope, still didn’t show that line. I guess I’ll just have to write it omitting proper syntax:
span id = “MySQLdata” … /span
Hi Max — still not sure I understand what you’re trying to do — any chance you could link to the full code?
Hey Giles, quick WebGL question for you. I searched everywhere but I keep getting lost between WebGL/OpenGL/GLSL/HLSL/etc.
In Lesson 5 you say that you can have up to 32 textures per call (gl.TEXTURE0 to gl.TEXTURE31) Now, I’m loading a huge model with 31 textures but unlike most who use a texturesheet, I have separate textures and although I can loop through them in javascript, I don’w know how to loop through them in the shader.
Do I really have to make 31 sampler2D’s and a HUGE if-statement to handle all these textures?
I’m passing the id of the texture to use through the vertex, but once up there, I don’t know how to get a link to each texture and select according to this varying I’m passing to the fragmentshader.
I read a bit about sampler2DArray and stuff, but they don’t seem to be available in WebGL?
Hi Ehsan — sorry, that’s not something I’ve looked at doing myself, so I don’t know the answer offhand. Perhaps someone on the WebGL forums would know?
I recommended on my new website that anyone using WEBGL should certainly read your excellent tutorials. Although I used both OpenGL and DirectX in the distant past I
found your site the only one to explain in an easy to understand way, WEBGL.
Thanks for all of your hard work.
You provide the most comprehensive tutorials on WEBGL that I could find. A lot of it seems to just go over my head though
Hello, giles
Thank you indeed for building this site! I am quite new to WebGL, nevertheless got quite excited with those examples you provided. But meanwhile I also read from wikipedia that there are some security concerns around webGL, which seem quite severe. How do you see the situation? will webGL flourish or to be victimized?
I would like to create a website in French for WebGL technology. Do I inspire me with your tutorials? (I would mention your site of course)
In thanking you in advance for your answer.
See you soon!
Greetings from Aexol! See our website, with WebGL demos. They are written in aexolGL – a new framework for WebGL.
http://aexol.com/
http://aexol.com/leviteo/?q=matte
http://aexol.com/leviteo/?q=editor
http://aexol.com/leviteo/?q=city
http://aexol.com/leviteo/?q=heads
[...] the following sample with code could help guide those excited to play with webgl on dart. Thank you Learning WebGL for the sample code work [...]
Hi I’m Miladin, indie game developer of webgl game “Hero of Crystalmire”. I just wanted to say thanks for this site, because it is where I got my foundational knowledge of webgl. This knowledge allowed me to expand into game territory, the result of which is my webgl game. You can find it at http://www.overrungames.com/hoc
PS: my game really shows the future gaming potential of webgl technology.
Thanks,
M.
@Bill, @Nicole — thanks!
@B — the security bugs were severe, but the one that scared me most (which could have let the attacker see what was on your screen) is now fixed. The other (which could lock up Macs or Linux boxes, or make Windows machines freeze for a few seconds) is harder, but some kind of fix will have to be created — it’s a problem that would affect any system that gave web pages decent-quality access to the GPU, and ultimately will have to be fixed at the graphics driver level. (It’s Windows’ distrust of graphics drivers that makes it better at handling the problem — if a driver stops responding for a few seconds, it kills it and restarts it.) Taken together, I think it’s good that the problems are out in the open, and I don’t think they will hold WebGL back in the long run.
@Pierre-Etienne — sure! Let me know when you have something and I’ll put it on one of my weekly WebGL roundups too.
@Aexol, @Miladin — thanks! I’ll put something about both in this week’s roundup.
Thanks to your tutorials I just spent my Sunday afternoon learning WebGL, it was great. I spent some time this year trying to figure out transform matrices, but never found any resource as good as the lessons you provide – i’ll put up in a small donation on payday.
Thanks a lot!
Yeah that’s great, thank you
but if you can publish something in Spanish will be great or if you let me translate and publish again this page, because i live in south america and my classmates need it please
atte. TaXxX
@Richard — thanks, glad you found the tutorials useful!
@TaXxX — there’s a Spanish translation at http://www.jlabstudio.com/webgl/tutoriales-webgl/
Hey, I’m new to webgl but I have some java and c++ background, but I’m really intrigued by this. What do I need to download to start creating??
Hi
Re. Chief Feb 20th
Nothing!
You just use a basic text editor; type or copy the code & save it as a HTML file just like you would any web page.
You will need the Chrome or Firefox to see 3D web pages.
Have fun.
d0m.
Hi
* “Please note !!!!”
To be able to open any WebGl apps you may save or create on your computer with a browser; you will first need to download glMatrix-0.9.5.min.js from http://code.google.com/p/glmatrix/downloads/detail?name=glMatrix-0.9.5.min.js&can=2&q=
& save it as glMatrix-0.9.5.min.js in the same folder where you have saved your WebGl apps. If you don’t the “canvas” will open blank!
Have fun.
d0m.