On a recent job, I had a need for a 3d scene with lots of sprites. I decided to use Papervision3d but couldn't find an easy way of having an interactive sprite in the scene. There are classes for billboard planes, but that seemed like too much calculation. This means you can do anything you would normally do with a sprite, but in 2.5d.

The solution turned out to be pretty simple. Just use the screen.x, y and z variables in the DisplayObject3D class to align some sprites to their projected 3d locations, and then z-sort the whole lot of them.

• Works with Papervision3D 2.0 (GreatWhite)
• The z-sorting for each SpriteGroup3D completely circumvents papervision's internal sorting so this won't work in conjunction with other types of scene objects (like polygons)

Hopefully someone will find them useful =) View the rest of this post for the code.

Sprite3D.as

package
{
	import flash.display.DisplayObjectContainer;
 
	import org.papervision3d.core.proto.CameraObject3D;
	import org.papervision3d.core.render.data.RenderSessionData;
	import org.papervision3d.objects.DisplayObject3D;
 
	public class Sprite3D extends DisplayObject3D
	{
		public var sprite :DisplayObjectContainer;
		public var camera :CameraObject3D;
 
		public var group  :SpriteGroup3D;
 
		public function Sprite3D(_sprite:DisplayObjectContainer)
		{
			sprite = _sprite;
 
			autoCalcScreenCoords = true;
		}
 
		public function addedToGroup():void
		{
			// Called when the sprite is added to a SpriteGroup3D
		}
 
		public function removedFromGroup():void
		{
			// Called when the sprite is removed from a SpriteGroup3D
		}
 
		public function preProject():void
		{
			// Do things before projection
		}
 
		public function postProject():void
		{
			// Do things after projection
		}
 
		override public function project(parent:DisplayObject3D, renderSessionData:RenderSessionData):Number
		{
			camera = renderSessionData.camera;
 
			preProject();
 
			super.project(parent, renderSessionData);
 
			// Set the sprite position and scale
 
			sprite.x = this.screen.x;
			sprite.y = this.screen.y;
 
			var scale:Number = camera.focus * camera.zoom / (camera.zoom + screen.z);
			sprite.scaleX = sprite.scaleY = scale;
 
			postProject();
 
			return this.screenZ;
		}
 
		public function suicide():void
		{
			if(group)
				group.removeChild(this);
		}
	}
}
 

SpriteGroup3D.as

package
{
	import flash.display.Sprite;
 
	import org.papervision3d.core.render.data.RenderSessionData;
	import org.papervision3d.objects.DisplayObject3D;
 
	public class SpriteGroup3D extends DisplayObject3D
	{
		public var sprites         :Array;
		public var spriteContainer :Sprite;
 
		public function SpriteGroup3D(_spriteContainer:Sprite)
		{
			spriteContainer = _spriteContainer;
			sprites = [];
		}
 
		override public function addChild(child:DisplayObject3D, name:String=null):DisplayObject3D
		{
			if(child is Sprite3D) {
				var c3d:Sprite3D = child as Sprite3D;
				c3d.group = this;
				c3d.addedToGroup();
			}
 
			return super.addChild(child, name);
		}
 
		override public function removeChild(child:DisplayObject3D):DisplayObject3D
		{
			if(child is Sprite3D) {
				var c3d:Sprite3D = child as Sprite3D;
				if(spriteContainer.contains(c3d.sprite))
					spriteContainer.removeChild(c3d.sprite);
				c3d.group = null;
				c3d.removedFromGroup();
			}
 
			return super.removeChild(child);
		}
 
		override public function project(parent:DisplayObject3D, renderSessionData:RenderSessionData):Number
		{
			super.project(parent, renderSessionData);
 
			// Z-Sort the sprites
 
			sprites = [];
			for each(var obj:DisplayObject3D in children)
				if(obj is Sprite3D)
					sprites.push(obj);
			sprites.sort(zSort);
 
			for each(var s3d:Sprite3D in sprites) {
				if(spriteContainer.contains(s3d.sprite))
					spriteContainer.setChildIndex(s3d.sprite, 0);
				else
					spriteContainer.addChildAt(s3d.sprite, 0);
			}
 
			return screenZ;
		}
 
		private function zSort(a:Sprite3D, b:Sprite3D):int
		{
			if(a.screen.z > b.screen.z) return 1;
			if(a.screen.z < b.screen.z) return -1;
			return 0;
		}
	}
}
 

Photo and Photoshop, 2007

Just posted a couple videos to Flickr. I've been playing with using Frame Buffer Objects in GL as a way to draw dynamically to a surface. I'm pretty happy with the result. Drawing to a 1024 x 1024 texture is very fast. Go GL!

So if you want to do something similar in Processing, the first thing you need to do is transform the point on your surface (building, wall, etc) to a point on your texture. After a lot of valiant help from Keith, the math was still confusing me. Then I stumbled on the PerspectiveTransform class. Given 4 points unTransformQuad() will map any value inside to a point on a unit (0 to 1) square. Anyway, I hope this helps someone =)

// Try 2 Tri 2 Try = TryanGLE
 
import javax.media.jai.PerspectiveTransform;
import java.awt.geom.Point2D;
 
Vert vtx[] = new Vert[4];
Vert pnt, tpnt;
 
void setup()
{
  size(500,500, P3D);
  ellipseMode(CENTER);
}
 
void draw()
{
  background(0);
  stroke(255,255,0);
  noFill();
 
  beginShape();
  for(int i=0; i<vtx.length; i++)
    if(vtx[i]!=null)
      vertex(vtx[i].x, vtx[i].y, vtx[i].z);
  endShape(CLOSE);
 
  if(pnt!=null && clicks==4) {
    stroke(0,0,255);
    line(pnt.x-5,pnt.y, pnt.x+5,pnt.y);
    line(pnt.x,pnt.y-5, pnt.x,pnt.y+5);
 
    // here is the real calculation
    tpnt = unTransformQuad(pnt, vtx[0], vtx[1], vtx[2], vtx[3]);
 
    stroke(0,128,255);
    line(tpnt.x-5,tpnt.y, tpnt.x+5,tpnt.y);
    line(tpnt.x,tpnt.y-5, tpnt.x,tpnt.y+5);
  }
}
 
int clicks = 0;
void mousePressed()
{
  if(clicks < 4) {
    vtx[clicks++] = new Vert(mouseX,mouseY,0);
  }
  else {
    pnt = new Vert(mouseX,mouseY,0);
  }
}
void mouseDragged()
{
  if(clicks==4) pnt = new Vert(mouseX,mouseY,0);
}
void keyPressed()
{
  clicks = 0;
  vtx = new Vert[4];
}
 
Vert unTransformQuad(Vert pnt, Vert a, Vert b, Vert c, Vert d)
{
  PerspectiveTransform persp = PerspectiveTransform.getQuadToSquare(
    a.x, a.y,
    b.x, b.y,
    c.x, c.y,
    d.x, d.y
  );
 
  Point2D p2d = persp.transform(new Point2D.Double(pnt.x,pnt.y), null);
 
  return new Vert((float)p2d.getX() * width, (float)p2d.getY() * height, 0);
}
 
class Vert
{
  float x, y, z;
 
  Vert(float _x, float _y, float _z)
  {
    x = _x; y = _y; z = _z;
  }
}
 
class Vector3
{
  float x, y, z;
 
  Vector3(float _x, float _y, float _z)
  {
    x = _x; y = _y; z = _z;
  }
 
  float mag()
  {
    return sqrt(x*x + y*y + z*z);
  }
}

RapidShare .pdf

copy and paste

Super Simple Sand

Twitter Blocks Logo (alt)