Away3d: experimenting with light and shading
A couple of weeks ago the Away3D team announced the release of version 2.0. The news was accompanied with a stunning demo called Green Planet. I was impressed, so I downloaded the source and started to play with it.
From the start I was interested in checking some light and shading possibilities that Away3D offers. I was not disappointed. It turns out that Away3D has some really nice features and they are easy to use. Not everything is well documented, so I had to opt for a trial-and-error technique, but it is ok, as it was released just a few days ago one cannot expect a full documentation. Click on the image above to see a demo I created. Below I share some hopefully useful tips.
For the light source I use the PointLight3D. It takes as initObject argument where you need to pass its x, y and z coordinates, but also some settings for the light itself. We have a brightness parameter, which is pretty self explanatory, and three others: ambient, diffuse and specular. Now, if you don't have a clue what these are, as it was the case with me, start by reading this. The exact values that those settings can take is not quite clear, but I tried different options and ended up with something like this:
-
sunLight = new PointLight3D(
-
{ x:1200, y:0, z:-600,
-
brightness:5, ambient:30, diffuse:500, specular:180 } );
If you want your bitmap material to react to the light, a basic BitmapMaterial won't do the job. I experimented many materials available in the package and found out that WhiteShadingBitmapMaterial works pretty well. It is straightforward in setup as it just takes a bitmapData as argument. In my code it looks like this:
-
var earthMat:WhiteShadingBitmapMaterial =
-
new WhiteShadingBitmapMaterial(earthBmp.bitmapData);
-
earth = new Sphere(
-
{ material:earthMat, radius:150,
-
segmentsW:32, segmentsH:18, y:0, x:0, z:0 } );
-
view.scene.addChild(earth);
The sun does not need to react to any light, for it is light itself. It also does not need any bitmap texture either, so I just use a basic ColorMaterial. But the sun needs to have a glow. And for that I found one super cool feature in Away3D, and it is called ownCanvas. It is a boolean value, and by setting it to true (default is false) you can assign filters to 3d objects exactly the same way you would assign them to regular sprites. Here's how it looks in the code:
-
var sunMat:ColorMaterial = new ColorMaterial(0xffffff);
-
sun = new RegularPolygon(
-
{ material:sunMat, radius:100, sides:32,
-
x:2400, y:0, z: -1200 } );
-
sun.ownCanvas = true;
-
sun.filters = [
-
new GlowFilter(0xffffbe, 1, 12, 12, 3, 3, false, false),
-
new GlowFilter(0xffffbe, 1, 12, 12, 3, 3, true, false)
-
];
A final tip, and this one I found on the Away3D discussion group, is to set the stage.quality to LOW. There is no visible difference in rendering quality, but a huge one in performance. And remember, that you can always check the performance by selecting 'Away3D project stats' option from the right-click menu.
UPDATE May 19th 2008. Source code. I was asked to post the source code of some other examples on the blog and I did it. Later on I thought there is no reason to leave this one behind. So, before anyone asks: the classes are commited to my Google Code account, and there is also a ZIP with the code and the assets here.
April 26th, 2008 at 10:41 pm
I`m suprised how fast is Away3D. i have slow computer and it works incredibly fast. Good job Drodjo.
April 29th, 2008 at 8:49 pm
Wow, that’s blazing fast rendering. I’ve only dabbled with Papervision and haven’t touched Away3D yet, but looking at the speed of Away3D I may well have to look into it.
May 19th, 2008 at 5:43 pm
[…] nuevo) que ya incluye 3D de manera nativa, hay que seguirle sacando jugo a las librerías actuales. Este tutorial/demo de Away3D esta poca madre. ¿Lo mejor? Tiene snipets de código para que luego luego podamos ver los […]
July 25th, 2008 at 3:03 pm
Away3D just tears PV3D apart. I love it.
July 26th, 2008 at 8:58 pm
Oh, one other thing - I tried using WhiteShadingBitmapMaterial with PointLight3D, and the object with the WhiteShadingBitmapMaterial just shows up black. It’s there, but it’s always black, whereas if I make that object use a ColorShadingMaterial instead, it shows up, and is affected properly by the light. The WhiteShadingBitmapMaterial shows up when affected by a DirectionalLight3D, but it’s not as nice. Any thoughts? I thought I might be using a version of Away3D with a bug in that area, but I’m using 2.0, and that’s what you’re using. I downloaded your source code, set it up in Flex, and ran it, and I get the same anomaly - the Earth appears completely black. Please email me or reply if you have any advice, thanks!
July 29th, 2008 at 10:11 am
@Shaun I did this demo using a trial-and-error technique, so I can’t really say how exactly the WhiteShadingBitmapMaterial works. It may also have been changed by the Away3d team in the meantime. But I also had the problem with my material getting dark - it was realted with the light settings being too high. I hope that helps.
July 29th, 2008 at 11:38 am
@Bartek: Yeah, thanks - it helps to a degree! Can you tell me exactly what version of Away3D you’re using in this example? Maybe even offer up the entire project folder for download? I can assure you I’m not trying to steal your code - I just want to prove to myself that PointLight3D works with WhiteShadingBitmapMaterial, because at the moment, I’m having a lot of trouble getting reasonable results from combinations of materials and lights, even though I know what each should do (I’m not new to 3D graphics, only to 3D Flash).
Thanks
July 29th, 2008 at 12:35 pm
Yeah, I’ve tried your code again (with my version of Away3D, 2.0, which I downloaded from the site), but this time I’m making the Earth use a ShadingColorMaterial instead of the WhiteShadingBitmapMaterial. You can see the Earth, and it’s lit properly.
July 29th, 2008 at 12:50 pm
Okay, I’ve finally found a version of the Away3D class library that doesn’t produce this anomaly. 2_0_0 from the Away3D site works fine (with the PointLight3D with WhiteShadingBitmapMaterial thing), and 2_0_1 gives me the black material again.
I’ll let them know about this… and feel free to collate or remove my many repeat posts!
July 29th, 2008 at 10:42 pm
@Shaun I compiled this demo with Away3D 2.0 rev. 494 from SVN. Due to some later changes in the code, compiling with higher version creates the problems with materials/lights you mentionned above.
I think that is why 2.0.0 works fine for you and 2.0.1 doesn’t. I did not ask anyone on the Away3d forum about those changes, so I do not know exactly what they were.