[UPDATE] Added a yawing example to make more clear what's going on. [/UPDATE]
It's been quite a while since my last post. In between I've been on vacation for a couple of weeks and had some strong deadlines to deliver my daily work. I've many cool idea's to work out and write about on this blog. One of them is called a "Sprite3D", which name is based on Sprite 3D from Sandy.
The concept is that you'll have just a basic plane which is always faced up to the camera. Depending on the angle between a camera and a sprite3D object it will change it's texture. When you have for example 360 images of an object which rotates 360 degrees, you can show for each angle a different texture, which will give a 3D effect to this plane. This makes it possible to show advanced models without actually rendering them! Because it's all shown at a plane, it's all very light for your CPU.
I've put this all together in a class which extends DisplayObject3D. Working with this class is like working with standard objects like cubes or planes, so it's pretty straightforward like you will see in the following example.
var materialList:MaterialsList = new MaterialsList();
// angle range -45 (315) - 45
materialList.addMaterial(new BitmapFileMaterial("assets/image1.png"));
// angle range 45 - 135
materialList.addMaterial(new BitmapFileMaterial("assets/image2.png"));
// angle range 135 - 225
materialList.addMaterial(new BitmapFileMaterial("assets/image3.png"));
// angle range 225 - 315
materialList.addMaterial(new BitmapFileMaterial("assets/image4.png"));
//Just enter your materialList and dimensions
sprite3D = new Sprite3D(materialList,300,150);
//add sprite3D to the scene, like you would do with any object.
scene.addChild(sprite3D);
Depending on how many materials you'll add to the sprite3D it will automatically calculates on which angle it should change a texture. In case you'll add just one MovieMaterial to the materiallist, it will look at the number of frames within this MovieClip as your textures. This is especially useful when you have a 360 frames render of an object. You don't want to add 360 separate materials to the materiallist.
Below you'll find two working examples of a rotating car. You can change your position by using your arrow keys.
Same example, but with a yawing sprite3D:
I have to say this approach also has it's downsides:
- You'll get bigger downloads, since you need to load image sequences.
- You can't get too close with a camera, this will make it feel unnatural.
- Only rotation on the Y axis is implemented. Implementing another axis will end up with an even bigger download (360*360 images if you want the best quality)
- Animation of a texture should be possible, however you'll end up here as well with a big download.
Anyway, I think it's a very useful object type, below you'll find the source files. Hopefully it will also be useful for you. Let me know if you have any ideas of what to implement, how to improve performance or adjustments you did yourself. I would like to hear your feedback!
Downloads:
Example model used from Troyano
Tags: Actionscript, Papervision3D by Paul Tondeur
10 Comments »
