Chris Herring

There are many ways to improve the performance of your Papervision application, and in my first blog post in a few months I’ll cover the technique of mapping a 2D sprite to an object in 3D Papervision. The main concept of this technique is two reduce the number of elements rendered in 3D to a minimum, naturally this is only applicable to certain situations. The yellow triangle below is a standard Sprite, and by clicking upon it will map the triangle to a red particle within the rotating sphere.

Flash is displayed here

Step 1
After setting up a basic Papervision environment with a sphere, the next thing to do is add a particle to the edge of the sphere. Within Papervision its not possible to just create a new Particle, and it add it the scene, instead the Particle must be added to an instantiation of the Particles class, which acts as holding container for a Particle. It is worth noting that thousands of individual Particles can be added to the Particles container and then added to the scene to be rendered.

var material = new ParticleMaterial(0xFF3333, 1);
var particle = new Particle(material, 15);
this.particles = new Particles();
this.particles.x =-294.8020952990483;
this.particles.z = -44.981004334405526;
this.particles.y = 47.67005198611658;
this.particles.addParticle(particle);
this.sphere.addChild(this.particles);


Step 2
In order to map a 2D Sprite to a 3D object we need to calculate the 3D objects relative position in x and y to the screen. Luckily by adding the following line to the previous code block this functionally can be switched on. The method autoCalcScreenCoords is available to any class which extends DisplayObject3D, however user must be careful as extra calculations are made with the potential for a performance drop if used with out.

this.particles.autoCalcScreenCoords = true;


Step 3
The screen x and y are always calculated relative to the size of the viewport being used. I’ve added the following couple of lines of code, within the render EnterFrame only so that the 2D Sprite is always mapped to the 3D object but of course could exist elsewhere.

this.triangle.x = ( this.particles.screen.x ) + (this.viewport.width / 2);
this.triangle.y = ( this.particles.screen.y ) + (this.viewport.height / 2);

And that’s it, pretty basic stuff yet can still be very useful.

Source code