—

Divide by depth for instant 3D

A peek into how cameras work in 3D graphics

September 15, 2026

When I first started working on games, I used high level frameworks that would give you a Camera that just kind of worked. But as I learned more and wanted to apply more creative techniques, I struggled to even have the vocabulary to search for what I wanted to do, and only after writing lower level graphics code did I understand cameras are based around kind of really simple math.

In the excellent One Formula That Demystifies 3D Graphics (via @tsoding), we’re presented with the following:

(x, y, z)
x' = x/z
y' = y/z

In essence, if we say \(y\) is up and \(z\) is forward, 3D coordinates \((x, y, z)\) can be projected into 2D coordinates \((x', y')\) by dividing \(x\) and \(y\) by \(z\). For example, if we have a series of 3D points that only vary in depth, as depth increases, their projected positions get closer to vanishing point \((0,0)\):

\[\begin{array}{c|c} (x,y,z) & (x',y') \\ \hline (2,1,2) & (1,0.5) \\ (2,1,4) & (0.5,0.25) \\ (2,1,8) & (0.25,0.125) \end{array}\]

This can be demonstrated by a ball that moves and scales with depth as it orbits the camera’s up axis, offset along the \(z\) axis by forward:

  // slider:1 5
  const float forward = 2.0;

  vec3 camera_pos = vec3(sin(iTime), 0., cos(iTime) + forward);
  vec2 projected_pos = camera_pos.xy / camera_pos.z;
  float radius = 0.5 / camera_pos.z;

Using the same principle, we can even draw more sophisticated “geometry” in the same way!

  // slider: 2 5
  const float z = 2.5;
  float d = 0.0;
  for (int i = 0; i < 12; i++) {
    vec3 a = r * c[e[i].x] + fwd * z, b = r * c[e[i].y] + fwd * z;
    d = max(d, line(uv, a.xy / a.z, b.xy / b.z));
  }
  fragColor = iForeground * d;

Obviously, these are very constrained and naive examples that are largely impractical in all but the simplest scenarios. When we do any kind of 3D work, we typically need to involve things like the direction the camera’s pointing in, it’s position, it’s field of view, etc. While we could in theory hack those shaders to support these features, there is a way that’s less effort and more practical. It’s called the perspective projection matrix, and it’s the magic behind the mighty Camera.

Perspective Projection

There are a few ways to construct a perspective projection matrix, depending on your use case. Computer vision and graphics for example, have slightly different conventions for layout, which is why it’s hard to point to a single Wikipedia article and expect a universal form. That being said, in triangle-based graphics, a common convention that’s often followed involves parameterization of field of view, aspect ratio, and near and far clipping planes. These values are all very important because they also double as a way to easily know what’s in frame and what isn’t, which lets us render our scenes in performant ways, such as through culling off-screen geometry and rendering only what’s visible.

While this varies across different coordinate conventions (little consensus around which axes correspond to up, right, and forward), the general structure is mostly consistent:

\[P = \begin{bmatrix} \frac{f}{a} & 0 & 0 & 0 \\ 0 & f & 0 & 0 \\ 0 & 0 & A & B \\ 0 & 0 & 1 & 0 \end{bmatrix}\]

This describes a camera with focal scale \(f\) (derived from vertical fov angle \(\theta\)) and aspect ratio \(a\):

\[f = \frac{1}{\tan(\theta/2)},\quad a = \frac{width}{height}\]

Where \(A\) and \(B\) represent depth mapping, derived from near and far clipping planes \(n\) and \(F\) respectively:

\[A = \frac{F+n}{F-n}, \quad B = -\frac{2Fn}{F-n}\]

  // slider:0 10
  const float z = 3.5;
  // slider: 20 120
  const float fov = 60.0;
  // slider: 0.5 2.5
  const float aspect = 0.8;
  // slider: 0.25 2.5
  const float nearClip = 1.0;
  // slider: 2.0 8.0
  const float farClip = 5.0;

  float f = 1.0 / tan(radians(fov) * 0.5);
  mat4 p = mat4(
    f / aspect, 0., 0., 0.,
    0., f, 0., 0.,
    0., 0., (farClip + nearClip) / (farClip - nearClip), 1.,
    0., 0., -2. * farClip * nearClip / (farClip - nearClip), 0.
  );

float sdSegment(vec2 p, vec2 a, vec2 b) {
  vec2 pa = p - a, ba = b - a;
  float h = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-8), 0.0, 1.0);
  return length(pa - ba * h);
}

vec2 project(mat4 m, vec3 p) {
  vec4 q = m * vec4(p, 1.0);
  return q.xy / q.w;
}

vec2 iso(vec3 p, float s) {
  return vec2(dot(p, normalize(vec3(1., 0., 1.))),
              dot(p, normalize(vec3(-.5, 1., .5)))) * s;
}

vec3 frustumPoint(vec3 c, vec3 near, vec3 far) {
  vec3 s = mix(near, far, c.z);
  return vec3(c.xy * s.xy, s.z);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
  float t = tan(radians(fov) * 0.5);
  float screenAspect = iResolution.x / iResolution.y;
  float s = 1.65 / (8.0 * max(t * aspect, 1.0));
  
  // slider:0 10
  const float z = 3.5;
  // slider: 20 120
  const float fov = 60.0;
  // slider: 0.5 2.5
  const float aspect = 0.8;
  // slider: 0.25 2.5
  const float nearClip = 1.0;
  // slider: 2.0 8.0
  const float farClip = 5.0;

  float f = 1.0 / tan(radians(fov) * 0.5);
  mat4 p = mat4(
    f / aspect, 0., 0., 0.,
    0., f, 0., 0.,
    0., 0., (farClip + nearClip) / (farClip - nearClip), 1.,
    0., 0., -2. * farClip * nearClip / (farClip - nearClip), 0.
  );
  const vec3 c[8] = vec3[](
    vec3(-1., -1., 0.), vec3(1., -1., 0.),
    vec3(-1., 1., 0.), vec3(1., 1., 0.),
    vec3(-1., -1., 1.), vec3(1., -1., 1.),
    vec3(-1., 1., 1.), vec3(1., 1., 1.)
  );
  const ivec2 e[12] = ivec2[](
    ivec2(0, 1), ivec2(0, 2), ivec2(1, 3), ivec2(2, 3),
    ivec2(4, 5), ivec2(4, 6), ivec2(5, 7), ivec2(6, 7),
    ivec2(0, 4), ivec2(1, 5), ivec2(2, 6), ivec2(3, 7)
  );
  vec3 n = vec3(nearClip * t * aspect, nearClip * t, nearClip);
  vec3 F = vec3(farClip * t * aspect, farClip * t, farClip);
  vec3 ball = vec3(sin(iTime), 0.0, z + cos(iTime));
  const float ballRadius = 0.35;
  vec4 clip = p * vec4(ball, 1.0);
  vec3 q = clip.xyz / clip.w;
  float visible = step(-1.0, q.z) * step(q.z, 1.0);
  bool diagram = uv.x < 0.0;
  vec2 lo = vec2(1e6), hi = -lo;
  for (int i = 0; i < 8; i++) {
    vec2 corner = iso(frustumPoint(c[i], n, F), s);
    lo = min(lo, corner); hi = max(hi, corner);
  }
  vec2 offset = vec2(-screenAspect * 0.5, 0.0) - (lo + hi) * 0.5;
  vec2 viewport = vec2(screenAspect * 0.5, 0.0);
  vec2 size = 0.72 * vec2(aspect, 1.0) / max(aspect, 1.0);

  float d = 0.0;
  for (int i = 0; i < 12; i++) {
    vec3 a = frustumPoint(c[e[i].x], n, F), b = frustumPoint(c[e[i].y], n, F);
    vec2 pa = diagram ? iso(a, s) + offset : viewport + project(p, a) * size;
    vec2 pb = diagram ? iso(b, s) + offset : viewport + project(p, b) * size;
    float opacity = diagram ? mix(1.0, 0.4, (a.z + b.z) * 0.5 / farClip) : 0.25;
    d = max(d, smoothstep(fwidth(uv.y) * 1.5, 0.0, sdSegment(uv, pa, pb)) * opacity);
  }

  float w = fwidth(uv.y) * 1.5;
  if (diagram) {
    vec2 center = iso(ball, s) + offset;
    float radius = length(iso(ball + vec3(ballRadius, 0., 0.), s) - iso(ball, s));
    float outline = smoothstep(w * 1.5, w, abs(length(uv - center) - radius));
    d = max(d, mix(outline, smoothstep(radius + w, radius, length(uv - center)), visible));
  } else {
    vec2 center = viewport + q.xy * size;
    float radius = length((project(p, ball + vec3(ballRadius, 0., 0.)) - q.xy) * size);
    d = max(d, smoothstep(radius + w, radius, length(uv - center)) * visible);
  }

  d = max(d, (1.0 - smoothstep(0.0, fwidth(uv.x), abs(uv.x))) * 0.2);
  fragColor = iForeground * d;
}

So how does this connect to the depth division trick from earlier? Turns out that’s a special form of the perspective projection matrix.

Given a point somewhere in 3D space, we first describe its position relative to the camera. This takes us from world space, where coordinates are shared by the whole scene, into view space, where the camera sits at the origin. We then multiply by the perspective projection matrix, producing clip-space coordinates that are ready for the perspective division.

\[\begin{bmatrix} \frac{f}{a} & 0 & 0 & 0 \\ 0 & f & 0 & 0 \\ 0 & 0 & A & B \\ 0 & 0 & 1 & 0 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix} = \begin{bmatrix} \frac{f}{a}x + 0y + 0z + 0(1) \\ 0x + fy + 0z + 0(1) \\ 0x + 0y + Az + B(1) \\ 0x + 0y + z + 0(1) \end{bmatrix} = \begin{bmatrix} \frac{f}{a}x \\ fy \\ Az + B \\ z \end{bmatrix}\]

After dividing the first three clip-space components by \(w\), the coordinates no longer describe distances in the scene. Instead, they describe where the point falls inside the camera’s visible bounds. These are normalized device coordinates, usually shortened to NDC, which later allow points to finally be mapped to the screen’s output resolution.

\[x_{ndc} = \frac{\frac{f}{a}x}{z}, \qquad y_{ndc} = \frac{fy}{z}\]

In the earlier example, both focal scale \(f\) and aspect ratio \(a\) are omitted. Substituting them both with 1 gives us exactly the original depth division trick:

\[x_{ndc} = \frac{\frac{1}{1}x}{z} = \frac{x}{z}, \qquad y_{ndc} = \frac{1y}{z} = \frac{y}{z}\]

While the depth division trick works for camera-relative points in simple scenarios, it’s really just one step in the full graphics pipeline. Now that all of those terms have names, the whole journey looks like this:

\[\mathrm{world} \rightarrow \mathrm{view} \rightarrow \mathrm{clip} \xrightarrow{\,/w\,} \mathrm{NDC} \rightarrow \mathrm{pixels} \rightarrow \mathrm{rasterization}\]

Tying it all together

If there’s one thing to take away from this writeup, it’s that Cameras are just doing a few simple transformations, and if you understand what each of those transformations are for, you can pick and choose which parts to implement yourself based off your own needs and constraints. Sometimes you need the entire pipeline, and sometimes you need that one depth division.

Gabriel O'Flaherty-Chan

Select work 2015—

Divide by depth for instant 3D

A peek into how cameras work in 3D graphics

Perspective Projection

Tying it all together

Interchange 1

"BITFIELD"

Modelling every piece from a 1/144 Gundam kit in 100 days

"CHAOTIC ERA"

Emojivision