camera-dof-lattice
camera-dof-lattice
Camera DOF — the three.js lattice. A port of three.js's examples/webgpu_postprocessing_dof.html onto this engine, built to be profiled next to the original (devtools runtime, three.js Inspector: key I or ?inspector=1) and compared frame for frame against it.
Read the rig's notes
THE REFERENCE sits beside this file: camera-dof-lattice.three.html is the
example verbatim plus a few URL knobs (camera pose, dof uniforms, a pinned
tint clock). The camera below HOLDS on five poses, A–E; each has a matching
reference URL, listed at its keyframes. Shots: camera-dof-lattice.*.png.
WHAT IS IDENTICAL
lattice 14 × 9 × 14 = 1764 spheres, r=60 (SphereGeometry(60, 20, 10)),
200 apart, x,z = 200·(i − 7), y = 200·(j − 4.5) — the example's
own loop, 1 unit = 1 mm, so its numbers carry over untouched.
lens fov 70, near 1, far 3500, (0 0 200) → (0 0 0) at the open.
look mirror balls on black: the example's SwedishRoyalCastle cube map
(./swedish-royal-castle/, © Emil Persson, see its readme.txt)
resampled to swedish-royal-castle.hdr — linear equirect, same
orientation three gives the cube — as a lighting-only env. No
lights, no tone mapping (renderer tone_mapping=None), exactly as
the example's MeshBasicNodeMaterial + RenderPipeline output.
dof dof_pass=three runs three's own DepthOfFieldNode (the example's
pass — gpu/post/three-dof.ts): near/far CoC, 64-tap Vogel disc,
16-tap max, half-res, no per-pixel noise. focus = focusDistance,
dof_range = focalLength, and dof_blur keeps camera_dof's meaning:
the pass turns it into bokehScale 0.45 · dof_blur px at 1080p
(scaled with the buffer), so 22 is the example's 10 and 31 its
14. dof_depth=scene keys it on the scene pass's own view-Z, as
the example does (every ball writes depth, so the pre-pass the
ui reels need would only draw the lattice twice). Drop dof_pass
to see camera_dof on the same lens.
WHAT IS NOT
tint the example multiplies each pixel by oscSine(positionWorld/1000
+ 0.2·time). Colour cannot be animated here, so every sphere's
fill is that oscillator at its centre with time frozen at 0 —
the reference shots pin t=0 to match. Linear → sRGB in the vary.
shading metalness=1 roughness=0 physical: the env reflection × fill, as
colorNode is — plus a Schlick rim the unlit example lacks.
cost the example draws ONE InstancedMesh; `repeat` builds 1764 meshes,
1764 draws — the gap the Inspector's Performance tab shows.
(camera_dof would draw them all again for its depth pre-pass.)
CAMERA PATHS stay inside free planes — y = 0 (every sphere centre sits on an
odd hundred in y) and x = 100 (x centres are even hundreds) — so the lens
never cuts through a ball between keyframes.- Topic
- camera
- Scenes
- 1
- Kind
- reference rig
//
Camera DOF — the three.js lattice. A port of three.js's
examples/webgpu_postprocessing_dof.html onto this engine, built to be
profiled next to the original (devtools runtime, three.js Inspector: key I
or ?inspector=1) and compared frame for frame against it.
THE REFERENCE sits beside this file: camera-dof-lattice.three.html is the
example verbatim plus a few URL knobs (camera pose, dof uniforms, a pinned
tint clock). The camera below HOLDS on five poses, A–E; each has a matching
reference URL, listed at its keyframes. Shots: camera-dof-lattice.*.png.
WHAT IS IDENTICAL
lattice 14 × 9 × 14 = 1764 spheres, r=60 (SphereGeometry(60, 20, 10)),
200 apart, x,z = 200·(i − 7), y = 200·(j − 4.5) — the example's
own loop, 1 unit = 1 mm, so its numbers carry over untouched.
lens fov 70, near 1, far 3500, (0 0 200) → (0 0 0) at the open.
look mirror balls on black: the example's SwedishRoyalCastle cube map
(./swedish-royal-castle/, © Emil Persson, see its readme.txt)
resampled to swedish-royal-castle.hdr — linear equirect, same
orientation three gives the cube — as a lighting-only env. No
lights, no tone mapping (renderer tone_mapping=None), exactly as
the example's MeshBasicNodeMaterial + RenderPipeline output.
dof dof_pass=three runs three's own DepthOfFieldNode (the example's
pass — gpu/post/three-dof.ts): near/far CoC, 64-tap Vogel disc,
16-tap max, half-res, no per-pixel noise. focus = focusDistance,
dof_range = focalLength, and dof_blur keeps camera_dof's meaning:
the pass turns it into bokehScale 0.45 · dof_blur px at 1080p
(scaled with the buffer), so 22 is the example's 10 and 31 its
14. dof_depth=scene keys it on the scene pass's own view-Z, as
the example does (every ball writes depth, so the pre-pass the
ui reels need would only draw the lattice twice). Drop dof_pass
to see camera_dof on the same lens.
WHAT IS NOT
tint the example multiplies each pixel by oscSine(positionWorld/1000
+ 0.2·time). Colour cannot be animated here, so every sphere's
fill is that oscillator at its centre with time frozen at 0 —
the reference shots pin t=0 to match. Linear → sRGB in the vary.
shading metalness=1 roughness=0 physical: the env reflection × fill, as
colorNode is — plus a Schlick rim the unlit example lacks.
cost the example draws ONE InstancedMesh; `repeat` builds 1764 meshes,
1764 draws — the gap the Inspector's Performance tab shows.
(camera_dof would draw them all again for its depth pre-pass.)
CAMERA PATHS stay inside free planes — y = 0 (every sphere centre sits on an
odd hundred in y) and x = 100 (x centres are even hundreds) — so the lens
never cuts through a ball between keyframes.
promo#camera-dof-lattice(width=1920 height=1080 fps=30)
scene#dof-lattice(duration=27 transition=none)
renderer(tone_mapping=None shadow_map=false)
camera( type=perspective fov=70 near=1 far=3500 position="0 0 200" look_at="0 0 0" dof_pass=three dof_depth=scene focus=500 dof_range=200 dof_blur=22)
properties
frame
keyframes
// A · the example's opening frame — focusDistance 500, focalLength 200.
// ref: ?t=0&inspector=0 (hold 0–3 s)
kf(time=0 easing=easeInOutCubic position="0 0 200" look_at="0 0 0" fov=70 focus=500 dof_range=200 dof_blur=22)
kf(time=3 easing=easeInOutCubic position="0 0 200" look_at="0 0 0" fov=70 focus=500 dof_range=200 dof_blur=22)
// B · same pose, focus racked deep into the lattice.
// ref: ?t=0&inspector=0&focus=1100 (hold 5–7 s)
k