About

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 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

45 Responses to “About”

  1. spacer Elvis Pfutzenreuter says:
    December 4, 2009 at 6:48 pm

    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 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 :)

  2. spacer giles says:
    December 7, 2009 at 8:42 pm

    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..

  3. spacer James says:
    December 10, 2009 at 10:11 pm

    https://www.khronos.org/webgl/

    Draft spec is public now. WebGL wiki and public mailing lists online and ready for consumption.

    Enjoy!

  4. spacer giles says:
    December 10, 2009 at 10:44 pm

    Thanks for the heads-up! Writing a celebratory post now :-)

  5. spacer Trevor F. Smith says:
    December 26, 2009 at 9:34 pm

    Thanks so much for making these lessons. Even if you don’t write a book you might add a tipjar to the site.

  6. spacer giles says:
    December 29, 2009 at 8:53 pm

    Thanks! I’m never sure about tipjars, though…

  7. spacer Daniel Hendrycks says:
    January 29, 2010 at 7:30 pm

    When is this expected to be finalized?

  8. spacer giles says:
    January 30, 2010 at 6:59 pm

    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…

  9. spacer Anthony says:
    February 18, 2010 at 8:25 pm

    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

  10. spacer giles says:
    February 22, 2010 at 12:47 pm

    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 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

  11. spacer Peter says:
    February 27, 2010 at 10:53 am

    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.

  12. spacer giles says:
    March 1, 2010 at 1:55 pm

    That’s a great point.

  13. spacer JonBrant says:
    June 20, 2010 at 10:42 am

    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

  14. spacer giles says:
    June 21, 2010 at 2:54 pm

    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

  15. spacer Miguel Ortiz says:
    September 9, 2010 at 12:29 am

    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.

  16. spacer giles says:
    October 3, 2010 at 7:39 pm

    @Miguel — Sure, no problem! Sorry to take so long to get back to you.

  17. spacer Georgi says:
    October 17, 2010 at 10:57 am

    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 gogo008.com
    We look forward to your opinion and comment about it. Best wishes

  18. spacer giles says:
    October 21, 2010 at 7:26 pm

    Hey Georgi — that looks interesting! I’ll take a look.

  19. spacer Georgi says:
    October 21, 2010 at 8:37 pm

    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.

  20. spacer Georgi says:
    October 21, 2010 at 9:34 pm

    Now everything works. We apologize for this.

  21. spacer stephen says:
    February 23, 2011 at 3:05 am

    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 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

  22. spacer giles says:
    March 5, 2011 at 6:51 pm

    @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.

  23. spacer Peter says:
    March 10, 2011 at 1:33 am

    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.

  24. spacer snauts says:
    March 24, 2011 at 12:01 pm

    Big thanks for making this website.

    I’m writing a lisp program that generates plants:
    piepe.lv/abop/

    Thanks to your tutorials and source code I was able to setup plant model previewer in less than on day:
    piepe.lv/abop/webgl/?q=rose
    piepe.lv/abop/webgl/?q=dandelion

  25. spacer giles says:
    March 29, 2011 at 2:44 pm

    @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.

  26. spacer Gaurav Mishra says:
    April 20, 2011 at 11:29 am

    I reached to your blog via
    https://wiki.mozilla.org/User:Jgoulie (January 12, 2011)

    Great learning resources on WebGL.
    Keep Sharing! :-D

  27. spacer giles says:
    April 27, 2011 at 9:05 pm

    Cool, glad you like it!

  28. spacer Max says:
    May 26, 2011 at 1:09 am

    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.

  29. spacer Max says:
    May 26, 2011 at 3:31 am

    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)

  30. spacer Max says:
    May 26, 2011 at 3:33 am

    Nope, still didn’t show that line. I guess I’ll just have to write it omitting proper syntax:

    span id = “MySQLdata” … /span

  31. spacer giles says:
    May 30, 2011 at 12:29 am

    Hi Max — still not sure I understand what you’re trying to do — any chance you could link to the full code?

  32. spacer Ehsan Kia says:
    June 2, 2011 at 3:24 am

    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?

  33. spacer giles says:
    June 12, 2011 at 7:23 pm

    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?

  34. spacer Bill Evans says:
    August 2, 2011 at 8:12 pm

    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.

  35. spacer Nicole says:
    August 16, 2011 at 4:50 pm

    You provide the most comprehensive tutorials on WEBGL that I could find. A lot of it seems to just go over my head though

  36. spacer B says:
    November 25, 2011 at 12:33 am

    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?

  37. spacer Pierre-Etienne says:
    December 11, 2011 at 11:22 am

    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!

  38. spacer Aexol says:
    January 23, 2012 at 2:09 pm

    Greetings from Aexol! See our website, with WebGL demos. They are written in aexolGL – a new framework for WebGL.
    aexol.com/
    aexol.com/leviteo/?q=matte
    aexol.com/leviteo/?q=editor
    aexol.com/leviteo/?q=city
    aexol.com/leviteo/?q=heads

  39. Dart: The status of WebGL. « financecoding says:
    January 24, 2012 at 7:52 am

    [...] 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 [...]

  40. spacer Miladin Danailov says:
    March 25, 2012 at 8:59 pm

    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 www.overrungames.com/hoc

    PS: my game really shows the future gaming potential of webgl technology.

    Thanks,
    M.

  41. spacer giles says:
    March 28, 2012 at 8:32 pm

    @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

Related searches:
people really opengl december chrome
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.