be·low the lay·er

One file, then modules. The piece began as a single HTML page of about 1,550 lines, with three.js loaded from a CDN through an import map and its fonts from Google. Here it is the same code split into nine TypeScript modules and a stylesheet under src/submarine/, bundled by Vite against this site's own three.js. The look is deliberately its own: a night-sea palette, a stencil display face, a news serif and a mono for the instruments, all inside the live page only.

A hull from five curves. The boat is lofted, not modelled. Five one-dimensional curves along its length give the half-breadth, the keel line, the widest point, the deck and the casing's width; a superellipse between them makes each cross-section, and a sweep joins the sections into the upper and lower hull. The bulbous bow is just where those curves swell at the stem. Saddle tanks are lathed, the fairwater is extruded from a plan shape and then raked in code, and the free-flooding holes along the casing are one instanced mesh placed on the hull's own curve.

Every material hears the ping. The sonar is not a mesh that happens to be in front of things. Four expanding spheres carry their centres and radii in a uniform array that every lit material in the scene reads: an onBeforeCompile patch adds a thin bright line wherever a surface sits on a shell's radius, so the ping visibly slides over the hull, the mines and the seabed. The same patch adds caustics from above, the layer's glowing line and depth fog that fades into the colour of the water.

The layer is one number. Anything on the far side of the thermocline from a shell's origin sees that shell at 14% strength. The echo's strength is how much of the boat's height, keel to periscope standards, sits below the layer: all of it above gives a strong echo, all of it below gives about an eighth. The trace, the readouts, the status line and the sound all read that one value.

Opened up is a single eased number too. Every part group has a direction and a distance; one value from 0 to 1 moves them all, spreads the compartments along the boat, fades in dashed leader lines and warms the interior. Labels are HTML, projected from 3D points each frame, and hide themselves wherever the interface would cover them.

The port. The CDN and Google Fonts are gone: this site's content security policy allows no third-party requests, so three.js is bundled (0.185 here, up from 0.169) and the fonts are self-hosted. Two things had moved in three.js between those versions: PCFSoftShadowMap was retired, so the shadows use PCFShadowMap, its successor, and THREE.Clock was deprecated, so the scene keeps its own clock. The inline script became modules, since the policy forbids inline scripts. For testing, the piece gained a pinned, frozen state (?depth=280&view=open&ping=0.4), which also meant stamping the echo with the moment it hit the hull rather than the frame that noticed it, and seeding the marine snow so every load draws the same picture. A sourcing pass corrected four lines of the copy (see History notes).

Built by Jack in one conversation with Claude, then ported to this site with Claude Code.

1. Loft the hull from curves. Write down a handful of numbers per station along the boat (half-breadth, keel, deck) and fit a smooth 1D curve through each. A cross-section function turns those into a ring of points; a sweep turns the rings into a mesh. Changing the bow is changing five numbers.
2. Put the physics in the shaders, not in meshes. Keep the sonar pulses as a small uniform array (centre and radius) and patch every material to draw a line where its surface meets a radius. Then the pulse lights up whatever it touches without a single collision test.
3. Make the story one number. Here, how much of the boat is below the layer. Drive the echo, the words, the trace and the sound from it, and the whole piece agrees with itself.
4. Slow the physics down, but say so. Sound is drawn 36 times slower than life so you can watch it travel, but the readout gives the real round trip. Label every liberty on the page.
5. Explode with one eased value. Give each part group a direction and a distance and multiply by one number from 0 to 1. Warm the interior and fade the leader lines on the same value.
6. Pin a frozen state from day one. A URL that sets depth, view and the ping's progress, and stops the clock, turns a live scene into something you can screenshot, measure and compare between versions.
7. Check the history before you publish it. Write the claims down, find a source for each, and correct the copy where the sources disagree. Ours turned up a bow that was only cut away on two boats, and a pressure that was 133, not 130.

The shader patch that makes every surface hear the ping (the full piece is in src/submarine/ on GitHub):

// four pulses: xyz = where it was sent from, w = how far it has got
uniform vec4 uWave[4];
uniform vec4 uWaveC[4];   // rgb = colour, a = strength
uniform float uLayerY;    // the thermocline

// a pulse that crosses the layer arrives at 14%
float layerAtt(vec3 o, vec3 p) {
  float oAbove = step(uLayerY, o.y);
  float pBelow = smoothstep(uLayerY + 3.0, uLayerY - 3.0, p.y);
  float crossing = oAbove * pBelow + (1.0 - oAbove) * (1.0 - pBelow);
  return mix(1.0, 0.14, crossing);
}

vec3 waveGlow(vec3 p, float sharp) {
  vec3 acc = vec3(0.0);
  for (int i = 0; i < 4; i++) {
    if (uWaveC[i].a <= 0.0005) continue;
    float d = length(p - uWave[i].xyz) - uWave[i].w;  // distance to the shell
    float line = exp(-d * d * sharp);
    float trail = d < 0.0 ? exp(d * 0.035) * 0.16 : 0.0;
    acc += uWaveC[i].rgb * uWaveC[i].a * (line + trail) * layerAtt(uWave[i].xyz, p);
  }
  return acc;
}
// in each material's onBeforeCompile, after the emissive chunk:
//   totalEmissiveRadiance += waveGlow(vWorldPos, 0.25);

The shader reads the world position the vertex patch passes down; the JavaScript side only grows each pulse's radius by the shown speed of sound each frame.

What the piece shows, checked against the sources below. Where they disagreed with the original copy, the copy was changed.

• The T-class. The Royal Navy's standard ocean-going patrol submarine of the war: 53 were built in three groups (15, 7 and 31), and nine more were cancelled in 1945. About 84 m (276 ft) long, with a wartime crew of around 60. The early boats were riveted and rated to 300 feet; the welded boats of the last group, to 350.
• The bow. The first group had ten torpedo tubes facing forward: six inside the bow, two outside it in the bulbous bow casing, and two outside amidships. The bulge cost speed on the surface in rough weather and threw up a bow wave at periscope depth. The original copy said it was "later removed"; in fact it was cut away on two boats, Triumph and Thunderbolt (the salvaged Thetis), during repairs, and the second group moved those tubes aft so the bow could be finer. The piece shows the bow as built.
• A mid-war fit. The early boats were built with machine guns, not the Oerlikon shown aft of the bridge, and radar came mid-war. The model shows that later fit on an early hull, and says so.
• ASDIC. The British name for active sonar, fitted to their submarines as well as their escorts. The piece does not expand the acronym: the familiar "Allied Submarine Detection Investigation Committee" has no trace in the Admiralty's archives.
• The layer. Sound bends toward slower water, so at a sharp drop in temperature much of a ping is refracted downward, leaving a shadow zone beneath the layer that the sound barely reaches. The original copy said the ping was "bent away and scattered"; refraction, not scattering, does the work, and the copy now says so. U-boats are recorded diving under layers to shake off ASDIC. The layer's depth changes with the season and the sea; the piece's 180 feet is illustrative.
• The pressure. Seawater (1,025 kg/m³) weighs 1,025 × 9.807 = 10,052 pascals per metre of depth, or 1.458 psi per metre: about one atmosphere (14.7 psi) every 33 feet. At 300 ft, 91.44 m, that is 919,100 Pa, or 133 psi more than at the surface, 148 psi with the air on top. The original copy said "about 130"; it now says 133. The readout is the same sum: 1.4585 psi per metre, gauge.
• The echo. The escort's range comes from the echo's time for the round trip, out and back: time = 2 × range ÷ 1,500 m/s. Sound in seawater runs from about 1,440 to 1,570 m/s with temperature, salinity and depth. On screen the pulse moves at 42 m/s, about 36 times slower than life; the status line gives the real time.

Drawn loosely, and not verified: the net cutter at the stem, and the exact compartment layout (the broad order, torpedo spaces forward, control room under the bridge, engines then motors aft, is standard for the period, but we found no T-class plan to check it against). The escort, the wreck and the mines are generic.

• uboat.net, T class submarines; HMS Truant (its 1941 patrol log: depths in feet, torpedoes heard on ASDIC); ASDIC / sonar
• rnsubs.co.uk (Barrow Submariners Association), T class and the streamlined T class
• Wikipedia, British T-class submarine, used only where the two above agree; Type 291 radar
• NOAA National Ocean Service, How does pressure change with ocean depth?
• arc.id.au, Underwater sound propagation; Discovery of Sound in the Sea (URI), speed of sound and shadow zone

A claim-by-claim ledger with verdicts lives in the repo: docs/submarine-sources.md. Three of the pages listed refused our fetcher and were read only through search summaries; the ledger marks which.