3D card flip effect

Started by
1 comment, last by scarypajamas 7 years, 3 months ago

Lets say sprites are defined by an x/y position and a width/height. How can I make the sprites flip on any axis as if they are 3D like in this online example or in this screenshot? The rotation should be performed from the perspective of a camera looking dead center at the sprite regardless of where the sprite is on screen.

I'm currently displaying the sprites using an orthogonal matrix.

This seems like it should be a solved problem. Bonus points if there is a way to make this work with an arbitrary rotation matrix.

Advertisement

At least possible:

a) Fake solution: Take the 4 corner positions of the mesh where the image is mapped onto. Translate them to be centered around the camera space origin, if needed. Ensure that they have a depth co-ordinate. Transform them with a perspective projection. Use the result in orthogonal space.

The above solution is a fake because it does distribute the image pixels evenly, i.e. it does not consider death shortening for the pixels. However, it will probably not be noticed, especially for an animation with decent speed.

b) Real solution: Do a render-to-texture with a full perspective projection, and render the result with an orthogonal projection onto the standard target.

This method will do depth shortening, but it more complex.

a) Fake solution: Take the 4 corner positions of the mesh where the image is mapped onto. Translate them to be centered around the camera space origin, if needed. Ensure that they have a depth co-ordinate. Transform them with a perspective projection. Use the result in orthogonal space.

Could you clarify the last part: How do I use the results of the perspective projection in orthogonal space?

Here is what I tried: After I transformed the vertices with my perspective matrix I took the resulting clip space coordinates and performed the perspective divide myself. Now that the coordinates are in NDC space I can scale/position them as needed and voila, I have 2d screen coordinates again. When I put these screen coordinates in orthogonal space I get the following:

cKA73Zr.gif

Notice the texture warping. This is because the vertices don't have any depth in orthogonal space so the texture coordinates are not perspective correct. I'm wondering if there is a nice solution to this problem or if I misinterpreted your suggestion.

b) Real solution: Do a render-to-texture with a full perspective projection, and render the result with an orthogonal projection onto the standard target.

How would performance fair with thousands of sprites being rendered-to-texture?

UPDATE I fixed the warping issue by introducing perspective correction.

This topic is closed to new replies.

Advertisement