Text facing 3d camera without peasy

justincou..

Text facing 3d camera without peasy

in Processing with Other Languages • 8 months ago

Hello everyone,

I've got a 3d data viz sketch that I want to put on a web page using processing.js. Unfortunately, this means that peasy cam is out. I've created a simple camera on weak springs setup that sort of moves around the scene, but I want to display text that always faces the camera. With peasy, this is really easy with the getRotations() function. I was hoping that there was a simple way to get this from the processing camera, but it appears that there isn't, and i've run into a world of quaternions and matrices and euler angles.

Can anyone explain to me how I can find the correct rotation angles? I've looked at the peasy code and it's just a little beyond me.

Information that I have in the sketch to work with is the camera setup information (eye position, lookat position, up vector). Shouldn't this be enough to calculate the angles?

Thanks!

Replies(1)

justincou..

Re: Text facing 3d camera without peasy

8 months ago

I was able to hack together a solution.

In my camera setup PVector eye is the camera position, PVector lookat is the lookat position and the up vector is (0, 0, -1).

WARNING: pretty sure this will only work for camera's with this particular up vector. also, i don't think my theta and phi are correctly oriented per the spherical coordinate system, but it works for me.

here's what i got if someone might get something from it.

here's the getRotations function:

float [] getRotations(){
float rx = eye.x-lookat.x; float ry = eye.y-lookat.y; float rz = eye.z-lookat.z;
float disteyelook = eye.dist(lookat);
float rho = disteyelook;
float theta = atan((ry)/(rx));
float phi = atan((sqrt(sq(rx)+sq(ry)))/rz);
//println("rho: " + rho + ", theta: " + theta + ", phi: " + phi);
//println(disteyelook);
//float rotx = atan2(ry, rz);
float rotx = -acos(rz/disteyelook);
float roty = atan(rz/rx); // unused
float rotz = atan2(-rx, ry);
rots[0] = rotx; rots[1] = roty; rots[2] = rotz;
return rots;
}

call that when you're ready to draw your text and then this is where I draw it. It does matter in which order you call your rotations.

pushMatrix();
translate(x, y, z);
sphere(2);
float[] rotations = cam.getRotations();
//println(rotations);
rotateZ(rotations[2]);
rotateX(rotations[0]);
textAlign(LEFT);
textSize(3);
text(name, 2.5, 0);
textSize(2);
text(txtstring, 2.5, 0);
popMatrix();

Top Reply