Code Wiki (Google) — the model: light without lights, 3D without models

Source. codewiki.google · probed and captured headless at 1440×900 on 15-08-2026 · banked on Frank's word, as the example to study for the use of light in a page and how 3D is managed.

What it is. Google's browser for Gemini-generated documentation of open-source repositories. The page is black. A blue glow sits behind the title and the search field; below, panels of blue glass float at slight angles, each with a bright hairline edge and an icon inside, over a wide pool of blue light rising from the bottom of the screen.

The finding that matters, and it reverses the question. There is not one light in the scene. Not an ambient light, not a directional one, no shadows, no environment map, no tone mapping, no fog. Measured by wrapping WebGLRenderer.render and walking the scene graph, at the second frame and again at frame 400: lights: [] both times. Everything that reads as light is painted by hand in a shader.

How the light is actually made

One line of shader maths does most of it. The fragment shader carries this:

float getFresnel(vec3 viewDir, vec3 worldNormal, float power) {
  return pow(1.0 - abs(dot(viewDir, worldNormal)), power);
}

That is the Fresnel term: it is near zero where a surface faces you and near one where it turns away. Multiply it by a colour (uFresnelColor) and every panel gets a bright rim that follows the eye, which the brain reads as a light source somewhere off-screen. No light object exists. This is the whole trick, and it costs nothing.

The glass is two passes, not refraction. The uniforms are tMap, tBackfaceMap, tIcon. The scene is rendered once to a texture from the back faces, then the front pass samples that texture. Sampling the back of an object while drawing its front is what makes a panel look thick and slightly liquid. Real refraction is not computed.

The icon is inside the glass, not on it. tIcon with its own uIconColor and uIconAlpha is composited within the same material, so the mark sits under the surface rather than being a PNG stuck on top.

The pool of light on the ground is a flat quad. The wide blue glow at the bottom of the screen is not a spotlight hitting a floor. It is one more transparent plane with a gradient, in normal blending, like every other surface: 60 of the 72 materials sampled are transparent, all at blending: 1 (normal). No additive blowout, which is why the black stays black.

How the 3D is managed

There is no 3D object anywhere. Twenty-eight flat rectangles and twenty-eight sets of lines, tilted in space. The depth comes from the arrangement and from the long lens: a 30° field of view flattens perspective, so the panels keep their shape and only their edges tell you they are turned. A wide lens would have made them lurch and look like a screensaver.

The lines carry the drawing. LineSegmentsGeometry with LineMaterial gives a hairline of a chosen width that does not thin out with distance. That is what draws the bright outline of each panel and the wireframe rectangles further back.

Nothing is interactive. All three canvases are pointer-events: none. The 3D never intercepts a click, the real interface — search field, links — sits above it in ordinary HTML.

What we would copy

The mechanism, all of it. A rim-light shader on flat planes, a back-face pass for thickness, hairline outlines, a long lens, and one soft gradient quad as the light pool. That is a whole visual world with no models to load, no lighting to tune and no shadow maps.

The restraint in the numbers. Pixel ratio 1, normal blending, no post-processing. Cheap enough to run on a phone.

The layer separation. Decorative canvas below, real HTML above, the canvas untouchable by the pointer. This is the rule that keeps a moving background from breaking the page.

What we would refuse

The ground. The page is pure black, rgb(0,0,0). Our rule is light, always, in every band — see taste.md §5. A Fresnel rim does not survive a white page unchanged: on a light ground the trick inverts, the rim must become a shadow edge and the pool of light becomes a soft shade. That is a real piece of work, not a colour swap, and it should be tried on one panel before it is promised.

The glow behind the words. The blue aura behind the title and the search field would fight text on a light ground and would fail contrast. Keep the glow for objects, never behind reading text.

Where this belongs in the studio

The mechanism belongs with motion — it is how a page is made to feel three-dimensional — and it is banked here because Frank picked the site. The one-line lesson to carry: light in a page is a decision about edges, not a lamp; and 3D on the web is cheapest when there is no 3D in it.