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

**Source.** [codewiki.google](https://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:

```glsl
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

| What was measured | Value |
|---|---|
| Library | three.js (`window.THREE` present), WebGL 2.0 |
| Canvases | 3, all `pointer-events: none` |
| Geometry in the scene | `PlaneGeometry` ×28, `LineSegmentsGeometry` ×28 |
| Materials | `RawShaderMaterial` ×44, `LineMaterial` ×28 |
| Lights | **none** |
| Shadows · tone mapping · environment · fog | off · none · none · none |
| Camera | PerspectiveCamera, **fov 30** |
| Pixel ratio | 1 |
| Loaded 3D models | none — no `.glb`, `.gltf`, `.hdr`, `.ktx2` requested |

**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)`. Since 14-09-2026 a dark page is allowed when it also offers a light mode ([`taste.md`](../../taste.md) §5), so the black ground can stay. **The light mode is the hard part: 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](../../motion/index.html) — 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**.