About
This is a blog I’m keeping while I teach myself WebGL. I’m learning 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 nascent 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.
A few things to keep in mind as you follow the lessons:
- 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’m basing the 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!
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.