a blog by Bartek Drozdz

J3D: taming WebGL


I started to work with WebGL a few months ago. WebGL (in case you never heard about it) is a new emerging standard for rendering GPU accelerated graphics in the browser, without any plugins. Not all browsers support it yet, but the latest Chrome and Firefox do and others are about to follow (Safari, Opera, sadly not IE for the moment).

Whatever happens, WebGL seems to be here for good and it is definitely worth learning or at least looking at. It is a pretty low level API unlike Flash Away3d, not to mention Unity. In this respect, it’s much closer to Molehill. This can be discouraging at first, but after I got into it a bit, I found out it’s actually pretty fun to play with. WebGL is a Javascript API. I always had mixed feelings about Javascript, remembering it from the days of Netscape and the so-called DHTML. But it was 10 years ago, and when I tried it again now I had to change my opinion. It may not be as strict and carefully designed as C# but it is simple, very flexible and easy to share. In the web environment, that last point (often brought by mrdoob) is perhaps the most important. Based on OpenGL ES, WebGL is a collection of functions to communicate with the graphics card. To those of you who are used to OOP patterns and frameworks, WebGL will come as a shock. It’s mostly plain functions that set some properties, toggle some states or push some data to the GPU. It’s like a giant switchboard with one big global space for all operations. Sounds like fun, eh? Resources and WebGL demos appear almost everyday, so be sure look around the web for interesting stuff. There aren’t that many comprehensive tutorials yet, but you can try the lessons at Learning WebGL – it’s the best introduction to the subject I’ve seen so far. J3D What better way to learn a 3D API than to build an engine? I was contemplating writing my own engine in Flash/AS3 a few times before, but never though I had quite enough knowledge to do this. This time I felt much more confident. Also, WebGL gives a pretty good start that Flash didn’t back in the days. That’s how J3D was born. J3D is a very simple engine that can load 3D models and textures, has a scene with a hierarchy of objects and can render everything using basic lights. Somewhere on the way I added the feature to export models from Unity3d which I thought would make the job of preparing assets much easier. Although J3D is pretty small and has limited functionality, it works and building it allowed me to learn and understand WebGL pretty well. This was my primary objective. Last week I uploaded all the code to github and shared the link on Twitter. People seemed to like it and showed quite some interest. This made me very happy and gave me the idea to continue with the project and see where it leads me. To sum up: demo, another demo, source code on github and more coming soon!
  • Rumori on April 17th, 2011

    Nice work, keep it coming!

  • felix on April 18th, 2011

    Great stuff! What’s your opinion on three.js?

  • tommekkie on April 19th, 2011

    When I click the first picture I get just white blank window, on clicking the second pic I get only the checkboxes. Why?

  • bartek drozdz on April 19th, 2011

    @felix Three.js is great and has lots of cool functionality. I’ve been playing with it at the beginning but later I wanted to look under the hood ;)

    @tommekkie depends on what browser you are using. I didn’t add any warning in case your browser doesn’t support WebGL (but I will do it some day). For the time being make sure it’s Firefox 4 or latest Chrome. If it still fails, go here and send me whatever you see there: http://alteredqualia.com/tmp/webgl-maxparams-test/ along with your browser version and OS. Thanks.

  • tommekkie on April 20th, 2011

    Thanks for reply. Unfortunately I can’t see anything more than a black line of text on the top on both Firefox 4.0 and Google Chrome 10.0.648.205 on Windows XP Professional SP3 system, Nvidia GeForce 9500 GT graphic card.

  • proti on April 21st, 2011

    The same situation as tommekkie Firefox4.0 + WebDeveloper plugin can see only the checkboxes, when testing WebGL only “WebGL MAX parameters test” text appears on white bg.

  • bartek drozdz on April 23rd, 2011

    @proti @tommekkie Maybe you have WebGL disabled then. Have you tried other webgl demos? To check if WebGL is enabled in FF (should be on by default, but you never know) type “about:config” in the address bar, filter for “webgl” and check webgl.disabled is set to false. If this doesn’t work, well… you’ll need to search google for some more information. It’s all still very experimental :)

  • tommekkie on April 23rd, 2011

    Thanks, I could find the solution neither in config nor google, but getting the new card drivers helped(I have bought the card almost 3 years ago)and now I can see the demos and they are great.

  • bartek drozdz on April 26th, 2011

    @tommekkie Great! Good to know updating drivers can help! :)

  • J3D, GL64K, node-webgl on April 29th, 2011

    […] for WebGL that has a Unity3d object/scene exporter. The author wrote a blog post about it entitled Taming WebGL with some background on the library:J3D is a very simple engine that can load 3D models and […]

  • Scientific Visualization Programming on February 23rd, 2012

    I think that J3D is a great 3d engine, but it has not enough documentation about its API…

    Please someone help me…

    Where can i find the J3D API or more documented bibliography ???

  • bartek drozdz on March 15th, 2012

    @Scientific Visualization Programming I agree with you but theres only so much things I can do it a day so no documentation. However, if you, or anyone else, is willing to look into that and contribute to the project it would be awesome!

Post a comment