Blender to WebGL JavaScript Exporter

Posted by on Feb 4, 2010 in 3D, WebGL10 comments

I’ve been playing with this technology lately and I have to say: WebGL is hot stuff. Through the HTML5 <canvas> element you can add hardware-accelerated 3D graphics to web pages. There’s no need to install a separate plug-in. It isn’t available in current browser versions however. You’ll need to install nightly builds of Firefox, Chrome or Safari in order to view WebGL.

Its worth playing around with WebGL even though it’ll take a fair bit of time until it becomes mainstream technology. WebGL a binding for JavaScript to native OpenGL ES 2.0
which means that if you learn the API you can use it for iPhone (Objective-C) and Android (Java) development as well.

You can also write shaders using GLSL (OpenGL Shading Language). To see what you can do with shaders take a look at this page.

If you don’t want to get your hands dirty with the low-level stuff then there are a couple of excellent libraries that do a lot of work for you. A very powerful one is GLGE. There’s also a fairly new one called SceneJS.

During my presentation at LFPUG last week I briefly touched WebGL to show how easy it is to write exporter scripts for Blender. I’m still working on the script but here are some preliminary results:

The script exports to SceneJS for now but I will add the option to export to pure WebGL and GLGE. I will make it available soon :-)



Tags: , , ,


10 comments

» Comments RSS Feed
  1. Looking great!

  2. Great work, keep it up, I’ll look forward to see the exporter for GLGE ;-)

  3. Nice work Dennis, thanks!

  4. LOL @ “There’s no need to install a separate plug-in… You’ll need to install nightly builds of Firefox, Chrome or Safari” :))

  5. [...] you can easily read. Paul Brunt’s GLGE has some support for doing this from Blender, but Dennis Ippel has just announced a project that makes exporting from Blender to WebGL code its main f…. So far it exports to SceneJS, but a generic WebGL version is on its way. It’s not ready to [...]

  6. [...] Blender to WebGL exporter [...]

  7. [...] Javascript RayCaster Burst Engine for SVG in JavaScript Canvas 3D JS3D library Parallax in CSS WebGL Example Bookmark and ShareClose Bookmark and Share This Page Save to Browser Favorites / [...]

  8. [...] j’ai enfin trouvé des démos qui fonctionnent ! Elles sont sur la page de rozengain. Cette page présente quelques démos notamment les test de shaders et [...]

  9. I really get the following error when you run the scenejs-example:

    ERROR: 0:1:”: Not Specified for precision (float)
    ERROR: 0:1:”: Not Specified for precision (float)
    ERROR: 0:1:”: Not Specified for precision (float)

  10. someone can help me with this? I’m just beginning to study because I need WebGL for my thesis and I would be helpful to explain to me like riding a blender model on the web with WebGL.

Leave a comment