The Art of Cameras in 3D Games

Visual asset credits: Seth Khaw

What was taught

A perspective camera is how we see the real world. If we take a look at the things around us, they have depth and we can judge their distance. Objects appear narrower as they appear further into the distance. This is due to foreshortening and points of convergence known as vanishing points.An orthographic camera however removes this sense of perspective and establishes a fixed depth. Objects are drawn without perspective distortion, and communicates dimensions unambiguously through unit length and breadth.Perspective
- Objects are assimilated in a real world view
- The scene creates depth with vanishing points and fore-shortening
- Commonly used in 3D games
- Objects have fixed depth (no z-axis considerations)
- The scene runs in parallel lines into the distance
- Commonly used in 2D games
A visual representation of how the camera renders are drawn in each case (Credits: Stack Overflow)
Types of camera distances and tropes used in 3D games (Credits: GDC ‘14)

What was researched

Camera tropes for dynamic and fixed viewports: (Left) Genshin Impact and (Right) Shadowgun War Games
(Left) A close-up Third Person Camera of Lara Croft during a wolf attack in Tomb Raider incurs a similar yet different nuance as compared to (Right) Getting your fingers amputated in Outlast

The Problem

A comparison between the Field-of-Vision of 2D and 3D games by Senior Lecturer at DigiPen, Jonathan Kwek
Player’s viewport obscured by camera issues: 50% of the real estate has been obscured by the enormous bottom of Vordt of the Boreal Valley in Dark Souls 3
Final Fantasy XV’s Superboss, the Adamantoise, sounds good on paper, yet struggles in compatibility with player abilities and melee combat

Art I — Forced Perspective

(Left) Pere Borrell del Caso, “Escaping Criticism” 1874; (Middle) Fresco with trompe l’œil dome painted on low vaulting, Jesuit Church, Vienna, by Andrea Pozzo, 1703; (Right) Cornelis Norbertus Gysbrechts, “Trompe-l’oeil of Open Glazed Cupboard Door with Numerous Papers and Objects” 1666
The game features a beautiful pixel art style and takes place in a dark, anthropomorphic version of Vancouver, BC.
The legacy problem with 2D pixel assets if converted to a 3D composition
Employing forced perspective in asset creation and set dressing to bring 2D sets into a parallax world
For floors, walls, and ceilings, materials were used to react to the global lighting in 3D, before the positioning of scene objects.
Various steps in set dressing that is interwoven to create the intended effect in the Foreground, Middleground, and Background.
Elongated objects in a 3D scene look like cubes when viewed from an orthographic camera
Towns, buildings, and platforms are rendered in 3D with 2D pixel skins, with water textures applied to rivers and seas. Dialogue boxes appear in 3D, much unlike the 2D pipeline which appears on a UI canvas
In this example, the depth of the game scene is blurred with a ‘bokeh’ effect by using a parallax script to increase distances between subject and background, which results in long focal lengths

Art II — Curved World Shader

Inflexion and extrusion distortions of linear planes to create the “world bending” effect for players
Employing a Curved World Shader and Forced perspective in Animal Crossing: New Horizons to create an illuson (Left: Before; Right: After)

Art III — Rule of Thirds & Leading Lines

Guiding principles: (Left) Framing a composition using the Rule of Thirds (Right) Framing a composition using Leading Lines (Credits: Wikipedia and MasterClass)
Whether the vanishing point leads you through a meandering path or a direct line of sight ahead, these are details that game designers need to gauge when framing moment-to-moment cameras throughout the game.
Layering grounds in 2D and 3D are similar in workflow, however, assets have to be placed relative to the Z-axis
Rule of Thirds applied to scene compositions in The Last of Us II
Leading lines point towards the next destination in The Last of Us II (Credits: Ovidiu Mantoc)

What was learned

Want more?



Get the Medium app