Tuesday, June 11, 2019

3d - Perspective projection with 90 degrees between X-Y axis?


I'm trying to create a game that mimics Tibia's projection style: mmoginfo.com/imagenes/foto_tibia.jpg

(source: mmoginfo.com)
,


As you can see, a 3d point is mapped to 2d like this: imgur.com/3SL6j.png


So I've downloaded Three.JS and a lib to create a Orthographic Camera. But I'm getting this: imgur.com/KFxYf.png


Where, as you can see, the projection is like this: imgur.com/8r2Xz.png


Which is not what I want. What can I do to get the desired projection?


NOTE: I noticed the Orthographic Camera object is just a regular camera with camera.projectionMatrix changed, so I guess I could create my own kind of camera object, probably finding out the right projectionMatrix, but how?



Answer



What you'll need to do is create a sheared projection matrix that leaves the X and Y axes alone but bends the Z axis up and to the left. The matrix to do the shearing would generally look like this:


1 0 A 0

0 1 B 0
0 0 1 0
0 0 0 1

Or possibly the transpose of that, depending on whether your math library is using a column vector convention (as above) or a row vector convention. You'll probably need to multiply the above matrix with a regular 2D top-down projection matrix (which order they go in will also depend on the vector convention). Here, A and B are numbers that control how far the Z axis gets sheared along the X and Y axes respectively. I'd suggest trying values between -1 and +1 for these and tweaking to get the look you want.


No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...