10 Other fragment outputs

gl_FragDepth: a card pretending to be a sphere

The green “sphere” is really a flat card facing you. The fragment computes the sphere’s depth and writes it to gl_FragDepth, so the box intersects it correctly.

Write gl_FragDepthOn

Sphere radius0.95

0.51.3

Runs once per pixelDrag numbers, or edit the code

uniform mat4 projectionMatrix;   // Three.js declares it automatically only in the vertex shader
uniform float uRadius;
uniform float uWriteDepth;
in vec2 vUv;
in vec3 vViewPos;
out vec4 fragColor;

void main() {
  vec2 p = vUv * 2.0 - 1.0;
  float r2 = dot(p, p);
  if (r2 > 1.0) discard;                            // drop everything outside the circle
  vec3 N = vec3(p, sqrt(1.0 - r2));                 // pretend this is a sphere surface
  vec3 surface = vViewPos + vec3(0.0, 0.0, N.z * uRadius);
  vec4 clip = projectionMatrix * vec4(surface, 1.0);
  float sphereDepth = clip.z / clip.w * 0.5 + 0.5;  // NDC z -> 0..1 depth buffer value
  gl_FragDepth = mix(gl_FragCoord.z, sphereDepth, uWriteDepth);
  float light = max(dot(N, normalize(vec3(-0.5, 0.7, 0.8))), 0.0);
  fragColor = vec4(vec3(0.48, 0.83, 0.69) * (0.2 + 0.8 * light), 1.0);
}

uniform mat4 projectionMatrix;   // Three.js declares it automatically only in the vertex shader
uniform float uRadius;
uniform float uWriteDepth;
in vec2 vUv;
in vec3 vViewPos;
out vec4 fragColor;

void main() {
  vec2 p = vUv * 2.0 - 1.0;
  float r2 = dot(p, p);
  if (r2 > 1.0) discard;                            // drop everything outside the circle
  vec3 N = vec3(p, sqrt(1.0 - r2));                 // pretend this is a sphere surface
  vec3 surface = vViewPos + vec3(0.0, 0.0, N.z * uRadius);
  vec4 clip = projectionMatrix * vec4(surface, 1.0);
  float sphereDepth = clip.z / clip.w * 0.5 + 0.5;  // NDC z -> 0..1 depth buffer value
  gl_FragDepth = mix(gl_FragCoord.z, sphereDepth, uWriteDepth);
  float light = max(dot(N, normalize(vec3(-0.5, 0.7, 0.8))), 0.0);
  fragColor = vec4(vec3(0.48, 0.83, 0.69) * (0.2 + 0.8 * light), 1.0);
}

JS side

Rasterization gives every fragment a depth; writing gl_FragDepth replaces it. That is how a flat card can intersect a box like a real sphere.

Try it

Turn off “Write gl_FragDepth”: how do the box and the card intersect now?
Increase the radius for a rounder bulge
Replace N.z with 0.0: the depth goes flat again