What is it about?
We can perceive depth because when we move, other things around us move as well – depending on their distance from us.
I would like to have a nice demonstration of that, but for now I have to redirect you to the Wikipedia article.
From hereon this effect will be called “parallax effect”, although its not really that, I guess.
We can fake that effect using DOMiao, so that static images feel a bit moredimensional (at the end, the usual computer monitor stays flat).
If you want to understand the (tricky/wrong) mathematics, read on. Otherwise jump to the other examples, take a look at the demo or simply enjoy yourself.
The information here is not needed to use DOMiao and there are real mathematic errors inside. Also some of the variables might not yet be changeable or implemented in DOMiao.
Again: One can not do what I do here in an exam or something. It is a “it works”- solution and the motivation behind it will be explained now.
How does it work?
I will explain why I do use the formulae that I use. Because professional computer graphic guys have a lot more to tell about it and i am really not an expert in this topic (dont have references and came up with it by myself) I call the basic mechanism Pseudo- projection. Again, if you want to know something about the real thing, 3D Engines and stuff, the wikipedia articles are not a bad starting point.
Pseudo-projection is what we need to calculate the position of images on the screen.
I know that the math is wrong and proper projection works differently, but it gives us an okay approximation.
How will you try to explain what pseudo- projection is?
We will consider a “2D” setup first. That means, stuff in the world just has two coordinates, wx and wy (“world coordinates”). Furthermore, our camera – the eye into this setup – will only move left or right. What is left or right? Well, the more on the x- axis the more right. The more on the y axis the more far.
By convention, the camera will start to sit at the coordinates (0,0). If I show coordinates in brackets, the first one is on the x- axis. So our eye sits neither left nor right nor far nor close.
Another parameter of the camera is its opening angle (a), that is currently fixed at lets say 60 deg.
Now, Pseudo Projection is the question where to position the images on the screen. But where is the screen? Well it is the backside of our camera. We have to know how big the area is on which is projected. So, how big is the image that we want to have at the end? This “drawing area” for images is called Viewport, and it has a width and a height.
It is easy to calculate, that if the openening angle a is 60 deg and our viewport is 640 px wide, 1 degree spans 640/2*60 = 5 and 1/3 pixel!
I was talking of images, but what I really mean is layers. They are shown in the second picture here. Their position is defined as the “left- most” point of the layer.
As you can see, both layers cover the entire width.
When positioning the monsters on a screen later on, we deal with a different coordinate system, where (0.0) is in the upper left corner of the viewport.
At the moment that means, we would draw both layers at (?,0).
I would put examples of a rendered image here, if I had more time.
The camera moves
Now it gets interesting. We move the camera a little to the right. Before we could the all of layer 1 and layer 2 but now just around one half of layer two and really less (maybe a third) of layer 1. Why this difference? Hey! Thats exactly the effect we are after!
Unfortunately the calculations are slighty more complicated than my graphs.
We need some triangles, sinuses and these kind of things to find the right values. Yep – scary school math.
But its more complicated…
We have seen a simplified case, where all layers initially had the same size (in pixels), since their leftmost point was the leftmost point of our cameras viewpoint (and their right- most one the right- most). But actually we do not always want to have that. Practically it would mean if we would have a tiny bird in front of a huge cloud one would have to store two equally big pictures, the one with the bird mostly transparent.
So lets have a look at a scene with a different setup.
Here, the initial case it not quite as clear. Where on the viewport lies layer 3s upper left corner?
