Three.js and webGL

To view the example you will need to make sure you have an up to date, webGL enabled browser.

As I mentioned in my last post after having a play with the Molehill version of Away3D, I was really itching to try and have a go at recreating the same model in webGL. So knowing that there is a great 3D engine for Javascript that implements webGL, I decided to have a go and have to say that I am totally blown away.

Firstly the development process was a lot simpler than I expected. Three.js is a fantastically written framework, which when downloaded contains all of the source files as well as the minified build file for production, so finding out what methods are available was incredibly easy. The framework also comes with some great examples that seem to cover every aspect of using the framework from the most basic cube models to complex webGL examples with multiple models.

My process was made somewhat easier than the molehill demo I did as I already had my models created and ready to go, so for the example I have created here for this blog all I needed to do was get the models into three.js to display in the browser. Now if you have used Papervision3D or Away3D in any form before in AS3, you will be very familiar with the structure of this framework as it uses a lot of the same ideals by creating a scene, a camera and other objects like lights etc and finally a renderer, in this case as I wanted to do a webGL version I used the WebGLRenderer, but a CanvasRenderer is also available for browsers that do support canvas but don’t support webGL (IE9).

  1. camera = new THREE.Camera(70, window.innerWidth / window.innerHeight, 1, 1000);
  2. camera.position.y = 150;
  3. camera.position.x = 500;
  4. camera.target.position.y = 150;
  5.  
  6. renderer = new THREE.WebGLRenderer();
  7. renderer.setSize(window.innerWidth, window.innerHeight);
  8. container.appendChild(renderer.domElement);
  9.  
  10. car = new THREE.Object3D();
  11. scene.addObject(car);

Once this is all added it is just a matter of loading in the objects and assigning them a material. Now thankfully all of this has been considered with three.js and extensions have been created for most of the popular 3D editing packages out there, so as I was using Blender 3D I just installed the plug in and then exported the parts of my models as .js files ready to import into my scene. Three.js does have other methods available via python scripts for converting exported obj files into either .bin files with supporting .js files or as just plain .js files but the straight export from Blender suited me fine.

  1. loader = new THREE.JSONLoader(true);
  2. loader.load({ model: "js/objects/car_body.js", callback: function ( geometry ) { addPart(geometry, 0, 150, 0, carBodyMat)}});
  3. loader.load({ model: "js/objects/chrome.js", callback: function ( geometry ) { addPart(geometry, 0, 150, -17, chromeMat)}});
  4. loader.load({ model: "js/objects/glass.js", callback: function ( geometry ) { addPart(geometry, 0, 172, 91, glassMat)}});

Loading the parts of my car into my scene again was easy by just creating a THREE.JSONLoader object and calling the load() method one by one, with no need for listeners etc as the method uses a call back to add the model once loaded. The only problem I had here was that when the models are exported from Blender they are repositioned to 0,0,0 rather than the position they should be so once loading them into the scene there was quite a bit of re-jigging to make sure that the model was positioned nicely in its place, so some of my model parts may be slightly off but they seem to look ok to me.

Anyway, as I have said I have been totally blown away, not only by the simplicity of the whole process, but also by the overall effect. OK the car body material could do with a little more work as it looks too metallic compared to the Molehill version which looked like, well, car paint. But one thing that did surprise me as I didn’t expect, given my past experiences with webGL, is the performance. This webGL version of my model performed far better than the molehill example that I did on my crappy laptop, OK after a while you could feel that the graphics card was being taxed quite a bit, which it didn’t in the molehill version, but the whole performance felt a whole lot smoother, so yes pleasantly surprised.

As usual all source available here.

This entry was posted in Away 3D, Javascript, Three.js, webGL and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>