Dimetric (orthographic) camera angle for "retro" pixel look

Questions
,
1

I’m trying to get my camera to use dimetric projection, mimicking old school games (the basically all seem to use dimetric projection and not orthographic technically speaking), where for every pixel vertically, there are two pixels horizontally (2:1). I’m purposely using a very low resolution and have removed any kind of antialiasing or image smoothing of my canvas to get that retro pixelated look.

The link says the camera should be at an angle of 30 degrees, but I think my trigonometry – and also Three.js – skills might not be up to the task. Using a handy online calculator, I figured out that with an angle of 30 degrees, a = 3 and b = 5.19615, so that if my camera is at (0,3,0) I should look to (5.19615, 0, 5.19615) and that would give me what I want.

That does not work though, and I get semi jagged lines that are pretty close to 2:1 but definitely not there. Also when I inspect the rotation of my camera after doing that, I can’t really seem to find 30 degrees anywhere in some form. And when I overlay a screenshot of Diablo 2, the angles clearly don’t match up.

Does anyone know what might be the mistake here? Or might there be other factors in play besides the camera angle to recreate that 2:1 pixel look? Is it even possible? Any advice is greatly appreciated as the 2:1 look makes the low res visuals feel much more stable and less noisy than when there are jagged edges moving around.

2

Hi!
Use THREE.Spherical() object or .setFromSphericalCoords() method of THREE.Vector3().

camera.position.setFromSphericalCoords( 
    _desiredDistance, 
    Math.PI / 3, // 60 degrees from positive Y-axis and 30 degrees to XZ-plane
    Math.PI / 4  // 45 degrees, between positive X and Z axes, thus on XZ-plane
);

Picture:

изображение
изображение567×541 4.57 KB

Example: https://jsfiddle.net/prisoner849/ukjvh6xL/

1 Like
3

that’s it! i would never have come up with that myself, thank you! :smiley: Here’s a live link if you’re curious https://zax.vercel.app/ :slight_smile:

2 Likes
4

@tommhuth you’re welcome :slight_smile: :beers:
The project looks nice :+1: