Tutorial :C++ / openGL: Rotating a QUAD toward a point using quaternions


When I have a QUAD at a certain position, how can I rotate it in such a way that its normal points toward a given point? Imagine the colored blocks are just rectangular quads, then this image shows a bit what I mean. The quads are all oriented in such a way they point toward the center of the sphere.

alt text http://emrahgunduz.com/wp-content/uploads/2009/01/material_id_gui-600x364.jpg

Maybe this second image shows a bit more what I'm trying to do: alt text http://img689.imageshack.us/img689/3130/screenshot20100708at555.png

I'm using openGL / C++ (and the Eigen lib). And I have this code to draw a simple quad:

#include "ofMain.h"  #include "Quad.h"  Quad::Quad(Vector3f oPosition):position(oPosition) {  }    void Quad::update() {  }    void Quad::draw() {      float size = 1.3;      glColor3f(1.0f, 0.0f, 0.6f);      glPushMatrix();          glTranslatef(position.x(), position.y(), position.z());          glScalef(size, size,size);          glBegin(GL_QUADS);              glVertex3f(0,0,0);              glVertex3f(1,0,0);              glVertex3f(1,1,0);              glVertex3f(0,1,0);          glEnd();      glPopMatrix();  }  

Update 17-07 Dear reader,

Just got a little bit further with rotating the quads. I'm positioning a couple of quads randomly and then I rotate them towards a look_at vector3f using this code using the descriptions from the replies below:

void Quad::draw() {      float size = 0.5;      glColor3f(1.0f, 0.0f, 0.6f);      glPushMatrix();          Vector3f center = look_at - position;          Vector3f center_norm = center.normalized();          float r_angle   = acos(center_norm.dot(normal));          Vector3f axis = normal.normalized().cross(center_norm);            glPointSize(8);          glLineWidth(4.0f);            // draw the center point          glColor3f(1.0f, 0.0f, 0.0f);          glBegin(GL_POINTS);               glVertex3fv(look_at.data());          glEnd();            // draw the quad          glColor4f(0.0f, 0.0f, 0.0f, 0.85f);           glTranslatef(position.x(), position.y(), position.z());          glRotatef(r_angle * RAD_TO_DEG, axis.x(), axis.y(), axis.z());          glScalef(size, size,size);          glBegin(GL_QUADS);              glVertex3f(-0.5,-0.5,0);              glVertex3f(0.5,-0.5,0);              glVertex3f(0.5,0.5,0);              glVertex3f(-0.5,0.5,0);          glEnd();        glPopMatrix();  }  

The result looks like this: alt text http://img688.imageshack.us/img688/711/3drotatedquads.png

As you can see I'm almost there, though the rotation of the quads is still a bit "strange". I you see the image below with the colored quads you clearly see the difference in rotation. How can I rotate the quad in such a way I get the same result as the colored sphere below?


Rotation axis = normalize(crossproduct(currentNormal, desiredNormal))

Rotation angle = acos(dotproduct(normalize(currentNormal), normalize(desiredNormal)).

You can build either rotation matrix or quaternion from axis and angle. Exact formula can be found in any resource about quaternions.

You may need to flip angle or axis depending on whether you rotate normal around its' base or around its' tip.

Also THIS resource seems to have enough information about quaternions, rotations, and 3d space in general.


You may have already found this - http://gpwiki.org/index.php/OpenGL:Tutorials:Using_Quaternions_to_represent_rotation - but I found it useful when I last looked into this topic.


If "at a certain position" means that you know your current normal, than here is the thing:

  1. Dot product of an old and new normal is a cosine of an angle between them.
  2. Their cross product is an axis around which you should perform desired rotation
  3. Construction of rotation quaternion from given axis and angle is well documented and basic feature.
  4. Rotating the quad itself is tricky and depends on how what exactly you want it to be rotated.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »