We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpOpenGL and 3D Libraries › Billboarding + render text to texture
Page Index Toggle Pages: 1
Billboarding + render text to texture (Read 2736 times)
Billboarding + render text to texture
May 17th, 2005, 9:04am
 
I have two problems.. i need to make an axis-aligned billboard -> a polygon that allways faces the camera, and i need to render text to texture, for the billboard-polygon..

i found some scripts in opengl c++ with billboarding, but they i'm not getting a whole lot out of them..
if anybody could point me in some kind of direction with either of the problems i'd be really happy

http://nehe.gamedev.net/data/articles/article.asp?article=19
read some stuff here, but i got lost at section 7.

-seltar
Re: Billboarding + render text to texture
Reply #1 - May 17th, 2005, 3:14pm
 
This is a snippet of what i've got so far
Code:

// cp = camara position; op = object position; CVector = (x,y,z);
CVector lookAt = new CVector(0,0,1), objToCamProj = new CVector(cp.x-op.x,0,cp.z-op.z), upAux = new CVector(0,1,0);
float angleCosine;
objToCamProj.Normal();
angleCosine = lookAt.InnerProduct(lookAt,objToCamProj);
pushMatrix();
rotate(radians(acos(angleCosine)*180/PI),upAux.x, upAux.y, upAux.z);
popMatrix();


It works most of the rotation, but at some point it stops rotating, and when you go abit more around, you can rotate again.. so there's one "section" that's left out.. that's the problem i'd like to get fixed..

And, is there a way to output text to a PImage or something? or PGraphics, with an image as background, and use it as texture on a polygon..

I'd appreciate any help i'd get

-seltar
Re: Billboarding + render text to texture
Reply #2 - May 17th, 2005, 11:46pm
 
woohoo, i got it working, both rendering text to texture (using PGraphics3), and the billboard.. the problem was when (camera.x - object.x) was negative, so i had to use rotateY(radians(-acos(angleCosine)*180/PI));

It's still a long way from finished, but still.. alot is done Smiley

http://wliia.org/projects/evolver/


-seltar
Re: Billboarding + render text to texture
Reply #3 - May 18th, 2005, 12:05am
 
I'm not sure how other people do it, but I'm keeping track of the camera position and its movement using a sphere.  I've done billboarding with a particle generator that generates stars (inspiration was the particle fury application) and to do the billboarding in the simplest way, I just use my reference camera horizontal and vertical angles.  

In effect all my particles face a plane thats perpendicular to the camera in 2 dimensions, so their rotation is identical for each.

Of course i'm doing a very simplistic approach due to the fact that I am always looking at the origin.

Works well for stars  Smiley

Jon
Re: Billboarding + render text to texture
Reply #4 - Dec 6th, 2005, 11:24pm
 
I know that this is a fairly old topic, but I also needed to billboard text in 3D. This is how I did it. I dug down into the Processing internals to do it, so it may not be supported in the future. I used the inverse camera matrix in the PGraphics3 class to put the renderer into the camera-centric coordinate system. In this example (which used the ocd library), click and drag to rotate the cube. Type any text to see the billboarded texture. I have a sample up at http://homepage.mac.com/cchoge/Billboard/

Code:

import damkjer.ocd.*;
Billboard billboard;
Camera camera1;
float rotX;
float rotY;

void setup()
{
 size( 600, 600, P3D );

 billboard = new Billboard( (PGraphics3)(this.g) );
 camera1 = new Camera( this, width/2, height/2, 600, width/2, height/2, 0 );
 rotX = 0.0;
 rotY = 0.0;
}

void draw()
{
 background( 0 );
 camera1.feed();
 pushMatrix();
 translate( width/2, height/2 );
 fill( 124, 80, 200 );
 stroke( 255 );
 box( 200 );
 popMatrix();
 billboard.draw();
}

// rotate the camera when the mouse is dragged
void mouseDragged()
{
 rotY = mouseX - pmouseX;
 rotX = mouseY - pmouseY;
 camera1.circle( radians( rotY) );
 camera1.arc( radians( rotX ) );
}

void keyPressed()
{
 billboard.m_message += key;
}


class Billboard
{
 String m_message;
 PGraphics3 m_engine;
 PMatrix m_inv;
 PFont m_font;

 // From setup() call billboard = new Billboard( (PGraphics3)(this.g));
 Billboard( PGraphics3 engine )
 {
   m_engine = engine;
   m_font = loadFont( "BankGothic.vlw" );
   textFont( m_font, 48 );
   m_message = new String("");
 }

 void draw()
 {
// The graphics engine stores an inverse camera transformation
   m_inv = m_engine.cameraInv;
   noStroke();

   pushMatrix();
   fill( 255 );
// Applying the matrix takes us to the camera coordinate system
   applyMatrix( m_inv.m00, m_inv.m01, m_inv.m02, m_inv.m03,
   m_inv.m10, m_inv.m11, m_inv.m12, m_inv.m13,
   m_inv.m20, m_inv.m21, m_inv.m22, m_inv.m23,
   m_inv.m30, m_inv.m31, m_inv.m32, m_inv.m33 );

   textAlign( CENTER );
   text( m_message, 0, 0, -400 );
   popMatrix();
 }
}
Orient text (or any object) towards camera
Reply #5 - Dec 17th, 2005, 8:54am
 
I updated my Billboard work to allow any object in space to be oriented towards the camera. This is useful for forcing text to always orient to the screen. This example draws a coordinate system. Rotate about the axes with the mouse; the labels will always face the camera. http://campbellhoge.us/cchoge/billboard/

Code:

import damkjer.ocd.*;

BillBoard billboard;
PFont font;
Camera camera1;
float rotX;
float rotY;

void setup()
{
size( 300, 300, P3D );

billboard = new BillBoard( (PGraphics3)(this.g) );

camera1 = new Camera( this, width/2, height/2, width, width/2, height/2, 0 );
rotX = 0.0;
rotY = 0.0;

font = loadFont( "Copperplate.vlw" );
textFont( font, 48 );
framerate( 15 );
}

void draw()
{
background( 0 );
camera1.feed();
pushMatrix();
translate( width/2, height/2 );
fill( 80, 200, 124 );
stroke( 255 );
box( 50 );
line( -50, 50, -50, 50, 50, -50 );
line( -50, 50, -50, -50, -50, -50 );
line( -50, 50, -50, -50, 50, 50 );

fill( 80, 124, 200 );

billboard.BeginBillboard(50, 50, -50);
text( "x", 0, 0 );
billboard.EndBillboard();

billboard.BeginBillboard(-50, -50, -50);
text( "y", 0, 0 );
billboard.EndBillboard();

billboard.BeginBillboard(-50, 50, 50 );
text( "z", 0, 0 );
billboard.EndBillboard();

popMatrix();
}

// rotate the camera when the mouse is dragged
void mouseDragged()
{

rotY = mouseX - pmouseX;
rotX = mouseY - pmouseY;
camera1.circle( radians( rotY) );
camera1.arc( radians( rotX ) );
}

class BillBoard
{
PGraphics3 m_engine;
PMatrix m_inv;

// From setup() call billboard = new Billboard( (PGraphics3)(this.g));
BillBoard( PGraphics3 engine )
{
m_engine = engine;
}

// x, y, and z are the local coordinates of the object
// you want to billboard
void BeginBillboard( float x, float y, float z )
{
m_inv = m_engine.cameraInv;
float[] in = new float[4];
float[] out = new float[4];

in[0] = x; in[1] = y; in[2] = z; in[3] = 1;
m_engine.camera.mult( in,out );

pushMatrix();

applyMatrix( m_inv.m00, m_inv.m01, m_inv.m02, m_inv.m03,
m_inv.m10, m_inv.m11, m_inv.m12, m_inv.m13,
m_inv.m20, m_inv.m21, m_inv.m22, m_inv.m23,
m_inv.m30, m_inv.m31, m_inv.m32, m_inv.m33 );

translate( out[0], out[1], out[2] );
}

void EndBillboard()
{
popMatrix();
}
}
Re: Billboarding + render text to texture
Reply #6 - Dec 17th, 2005, 9:57am
 
really nice, especially since you're using the camera-class from processing.. good job Smiley

-seltar
Page Index Toggle Pages: 1