Three.js and webGL

Posted on 31 March, 2011 by UltraVisual
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).

PLAIN TEXT
JavaScript:
  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.

PLAIN TEXT
JavaScript:
  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.

Posted in Away 3D, Javascript, Three.js, webGL | Tagged , | 2 Comments

More Molehill & Away3D Fun

Posted on 22 March, 2011 by UltraVisual

To view the example click the image above - you will need the Flash Player 11 beta for it to run.

So after my last post and initial tests with Away3D 4.0 and the new Molehill APIs, I wanted to dig a bit deeper and get together an example that would test the powers of this great new Flash Player feature a little further and so decided to get a more complete model together. So I downloaded a nice car model to import into blender and played around with it a bit until I had a model that I was happy with, a nice Lamborghini Murcielago.

So exporting my model to use in Away3D was a bit of a pain, it could be because Blender 2.56 is still a beta version and full import / export support for the obj format isn't in there yet, but due to the fact I had to export each material type into its own obj file and then edit it so that the .mtl file that came with it wasn't used so that I could create my own materials in Away3D. Hopefully in the future, especially when Unity finally release a version with Flash export support, dealing with models etc should become a lot easier and should simply involve dropping the model into the IDE. So now that I had my obj files ready to import into Away3D, I decided to create a class per obj to load them in individually, these all extended an abstract class as the main functionality is the same for each model, the only part that differed was the materials which was just over-riden per model.

PLAIN TEXT
Actionscript:
  1. public function Chrome(view : View3D, lights : Array, name : String, _parent:*)
  2.         {
  3.             super(view, lights, name, _parent);
  4.         }
  5.        
  6.         override protected function assignMaterial() : void
  7.         {               
  8.             var _material:ColorMaterial = new ColorMaterial(0xc0c0c0, 1);
  9.             _material.specular = 1;
  10.             _material.ambient = 0.5;
  11.            
  12.             _material.specularMethod = new FresnelSpecularMethod(true);
  13.             _material.addMethod(new EnviromentMap());
  14.             _material.gloss = 10;
  15.            
  16.             _material.ambientColor = 0x555555;
  17.             _material.diffuseMethod = new BasicDiffuseMethod();
  18.             _material.lights = _lights;
  19.            
  20.             mesh.material = _material;
  21.            
  22.             this.dispatchEvent(new UltraEvent(UltraEvent.OBJ_COMPLETE));
  23.         }

As Away3D stands at the moment, the ResourceManager that is used to load in assets is a singleton class and so can only do one load at a time, looking through the Away3D source code it looks like this is intended to change but that is the way it is at the moment. Anyway again I can't praise enough the work that has gone into Away 3D to make this great new API available to someone like myself who has no experience working with openGL / DirectX or any type of shaders. The simplicity of Away3D makes creating the materials a breeze and giving materials nice reflections is very simple. For this example as the environment map is used on multiple materials I encapsulated it in a class to re-suse per model. The environment mapping for this is simple and shown clearly on the Away3D examples, in fact the images I used for the mapping I took straight from the Away3D Environment map example.

PLAIN TEXT
Actionscript:
  1. public function EnviromentMap(envMap : CubeMap = null, _alpha: Number = 1)
  2.         {         
  3.             _envMap = new CubeMap(  new EnvPosX().bitmapData, new EnvNegX().bitmapData,
  4.                                     new EnvPosY().bitmapData, new EnvNegY().bitmapData,
  5.                                     new EnvPosZ().bitmapData, new EnvNegZ().bitmapData);
  6.             envMap = _envMap;      
  7.             super(envMap, _alpha);
  8.         }

Anyway I am really pleased with not only the visual effects achieved, but also the performance on this as again with a reasonably complex model that would of completely choked in previous versions of flash, I still got a good frame rate on my old laptop. I am also impressed that all in all this example didn't really add up to a huge amount of work, but of course, with third party tools that will be available in the near future for exporting these kind of models straight to flash, this will become a lot easier.

I think next I would be interested in getting the same model into webGL, not only to test the development pipeline, which I don't expect to be too dissimilar, but also to see the finished results.

Get the source code for my example here.

Posted in Actionscript 3.0, Away 3D, Molehill | Tagged , , | 10 Comments

Molehill & Away3D 4.0

Posted on 10 March, 2011 by UltraVisual
To view the example click the image above - you will need the Flash Player 11 beta for it to run.

 

Finally just over 1 week after the beta release of Molehill and Flash Player 11, I have finally managed to spend some time to play with the new version of Away3D. So my intention today was to just get a model loaded and running, and firstly I was absolutely amazed at what a fantastic job the Away3D team have done with the new version of the engine, if you have ever done any AS3 programming with either Papervision or Away3D previously you will have no problem with this and even if you haven't it is easy to pick up as the whole process has become a lot easier. Creating materials has been stream lined, in the example I have put together I am just using a simple ColorMaterial and simply by changing the ambient and specular amounts you can easily get very different effects. My materials are simply added like so:

PLAIN TEXT
Actionscript:
  1. material = new ColorMaterial(currentColour, 1);
  2. material.specular = currentSpecular;
  3. material.ambient = currentAmbient;
  4. material.ambientColor = 0x555555;
  5. material.diffuseMethod = new BasicDiffuseMethod();
  6. material.lights = [pl, pl2];
  7.  
  8. mesh.material = material;

with currentColour, currentSpecular & currentAmbient being values assigned by my components in this example, you can of course put your own variables and of course your own values. The rest of the example is pretty straight forward and just involves a View3D as you would expect a couple of PointLights and of course an enter frame event loop to render the scene each frame. I have also lifted the HoverDragController class from the Away3D examples.

The examples downloaded from the Away3D download pages go a long way in getting you started with some great work to build upon but also some amazing examples to show you what can be achieved.

What is most impressive about all of this is how smoothly it all runs. Even running the examples on my crappy Dell laptop with its measly ATI Radeon graphics card, most of the examples run perfectly at about 30 - 40 fps. I know there seems to be a bit of a WebGL vs Molehill thing going on at the moment, hey there is always a 'something' vs Flash thing going on - but I have never managed to get any WebGL example to run past 12 fps and most won't run at all, so in my book that says a lot about how beautiful the the Molehill API is.

Next I want to have a play with getting some 2D objects running via Molehill which seems a really exciting prospect considering the popularity of frameworks such as Cocos2D for game dev...

If you want to download the source from my example you can get it here.

Posted in Actionscript 3.0, AS3 3D, Away 3D, Molehill | Tagged , | 7 Comments