top of page

Writing a 3D-to-2D Transition Shader

Updated: Nov 12, 2018


Take a look at these two images: on the left is Zelda: A Link Between Worlds, and on the right is a Zelda-style level from Super Mario 3D Land. Despite the fact that these both have "top-down" perspectives, the Zelda screenshot shows the fronts of objects -- the character the house, etc. -- while the Mario screenshot only shows the tops of objects.


The perspective used by Zelda lets the player see the most relevant portions of the objects: both the top AND the front. This is done by shearing the 3D models vertically relative to the camera. In other words, the models are slanted such that both the front and top sides are visible from above.



Now, let's look at a totally different graphical technique. This is Fez, a 2D pixel art game... right?


A key element of Fez's gameplay is the ability to rotate the world about the upward axis, allowing the player to see the same areas from four different perspectives. How is this done? Well, the worlds of Fez are actually 3D models, viewed with a orthographic (2D) camera.


After learning about these cool perspective techniques, I wondered if it would be possible to merge them somehow. Maybe I could make a game that looks like a top-down pixel art game like Final Fantasy IV or A Link to the Past, but you could change the perspective into a fully 3D game!

To do this, I started with simple voxel art. Voxel modeling has a unique look about it that lets artists combine 3D skills with 2D pixel art, so I figured it would be perfect for this experiment.

Now on to implementing it -- the first step was to displace the vertices by their relative height. That is to say, the lowest vertices of a voxel model are unchanged, but as you go higher they get sheared back.

A shader that does this is fairly trivial, but I added a bit of pizzazz by making the shearing scale vary with the rotation of the camera. So if the camera is pointed directly down onto an object, the shearing would be at its full extent, giving me the 2D look I desired. But just by turning the camera, it would smoothly transition back to the traditional 3D look.


Here it is in action! The art doesn't look great, but I hope it conveys the idea well. From the top it looks like pixel art, with square "pixels" and both front and top sides visible.

Maybe you are playing a game that looks like A Link to the Past, and to solve a puzzle, you need to rotate the camera to switch from 2D to 3D, revealing a hidden area behind a building.

Will I ever make a game that uses this to its fullest potential? Maybe, I think it would be very interesting.


Recent Posts

See All
bottom of page