dinsdag 11 februari 2014

Perspective anyone?

If anyone is interested, I found the complete code from that same period as the rotation of a point in the previous post of a 3D camera (perspective transformation) I once wrote.

I was most ambitiously creating a 3D animation and object editing program. And I had never even heard off openGL.
So it's a little bit of a different approach than OpenGL and it uses CPU exclusively, but I needed it then to do CartoonRendering, back when I invented it.
It uses a camera object, an axis with a screen/plane floating in front of it. For every point in the model, I project it onto the screen.
The whole thing came about when I saw perspective explained on a plate from the Dutch golden age. A guy was looking through a glass plate with one eye closed and could trace the contours of a cube onto the glass plate. It was so simple.

So the eye became an axis, the glass plate a plane and I basically did the same thing in the program.



The fun thing is, it's a much easier to understand model, than the openGL model with a four dimensional array. Which has been optimised for computers, not for human understanding.
Honestly, the first time I saw what openGL was doing, I felt my brain was dripping out of my ears.
Also getting screen coordinates back from openGL can be a bit tiring. But for interactive 3D environments screen-coordinates (or virt-points as I dubbed them back in 1993) are sooooo handy.

This system doesn't use the matrices that you need for openGL either and is quite easy to understand if you keep this picture in your head. It's probably also easier for emulating specific camera's if you know the focal lengths of this lens and the size of the objective, although I never tried.

So anyone up for a tutorial? Just say the word. (Actually, literally comment, because I'm not convinced anyone is interested.. Maybe everybody is perfectly allright with openGL, webGl and whatever else is out ther and it's quite a voluminous tutorial if I want to do it right)



Rotating a point in 3D

It seems so trivial in this age of OpenGL, WebGL and many other beautiful libs, that will do the hard work for you. And then you find yourself in a position, where you need something simple and it's nowhere to be found.

Rotation of a point around the origin or O  or {x:0,y:0,z:0}
How hard can it be.
Well, it's not simple.

Here is the code in as3 and javascript

function rotatePoint(p,rx,ry,rz)
{
    var x,y,z,q={};
    x=p.x*Math.cos(rz)-p.y*Math.sin(rz);
    y=p.x*Math.sin(rz)+p.y*Math.cos(rz);

    q.x=x*Math.cos(ry)-p.z*Math.sin(ry);
    z=x*Math.sin(ry)+p.z*Math.cos(ry);

    q.y=y*Math.cos(rx)-z*Math.sin(rx);
    q.z=y*Math.sin(rx)+z*Math.cos(rx);
    return q;
}

The parameters:
p is a point, so an object with {x:x,y:y,z:z};
rx is the amount you want to rotate around the x axis in radians.
ry is the amount you want to rotate around the y axis in radians.
rz  is the amount you want to rotate around the z axis in radians.

It returns a point with the new rotated coordinates. Don't try to understand the maths, it took me three days to put this together.

So in practice, I have a point 1,0,0 and I want to rotate it around the z axis 45 degrees.
The answer is in this case pretty obvious, it would be 0,707...,0.707....,0 or cos(45),sin(45),0
So how would we go about doing that with the function?

  p.x=1;
  p.y=0;
  p.z=0;
  p=rotatePoint(p,45/180*Math.PI,0,0);
  trace(p.x+","+p.y+","+p.z);

Output:
0.7071067811865476,0.7071067811865475,0

Halleluja, you can now play around with the other axis and stuff.
Any time you need something rotated, this function is your friend.
I've been using it on an off since 1988 just needed it again for my Delft project (about which I will tell you more later, but now, I'm sworn to secrecy :)
I found it in an ancient piece of code from 1996 in C, so I rewrote it to Javascript/As3.
And there you are.