@es3d/es3d 0.0.0-stage → 1.0.0

package/src/render/renderer.js

@@ -0,0 +1,249 @@
+// Renderer facade: picks a GPU backend (WebGPU preferred, WebGL2 fallback)
+// and runs the backend-independent parts of a frame (camera, culling, LOD,
+// batching, uniform packing, incremental geometry upload).
+//
+// The facade is the only renderer API used by the application and the
+// benchmark; backends never see the ES3D document, only a RenderScene.
+
+import { GeometryPool } from './geometry-pool.js';
+import { FrameBuilder } from './frame-builder.js';
+import { TextureCache } from './texture-cache.js';
+import { FRAME_FLOATS, packFrameUniforms } from './lighting.js';
+import { Mesh } from '../geometry/mesh.js';
+import { WebGL2Backend } from './webgl2/webgl2-backend.js';
+import { WebGPUBackend } from './webgpu/webgpu-backend.js';
+
+const now = () => performance.now();
+
+function cubeEdges() {
+  const p = [];
+  for (let i = 0; i < 8; i++) p.push(i & 1 ? 0.5 : -0.5, i & 2 ? 0.5 : -0.5, i & 4 ? 0.5 : -0.5);
+  const e = [0, 1, 2, 3, 4, 5, 6, 7, 0, 2, 1, 3, 4, 6, 5, 7, 0, 4, 1, 5, 2, 6, 3, 7];
+  return new Mesh({ positions: Float32Array.from(p), indices: Uint32Array.from(e), kind: 'lines' });
+}
+
+export const OVERLAY_COLORS = {
+  wireframe: [0.02, 0.03, 0.05, 0.55],
+  normals: [1.0, 0.82, 0.15, 0.95],
+  bbox: [0.35, 0.78, 1.0, 0.75],
+  selection: [1.0, 0.55, 0.12, 1.0],
+};
+
+// setScene keeps the packed geometry, so a new document that shares meshes
+// with the last one (a colour change, an edit elsewhere in the file) uploads
+// only what is new. Meshes no longer used stay packed until the pool passes
+// this size; then it is repacked from what the scene draws.
+const POOL_REPACK_BYTES = 32 << 20;
+
+/**
+ * Tessellation budget (ms per frame) for render loops that draw again while
+ * stats.refining is non-zero: the first frame comes at once with coarser
+ * stand-ins, full detail a few frames later.
+ */
+export const PROGRESSIVE_BUDGET_MS = 4;
+
+export class Renderer {
+  constructor(backend) {
+    this.backend = backend;
+    this.kind = backend.kind;
+    this.pool = new GeometryPool();
+    this.frames = new FrameBuilder();
+    this.textures = new TextureCache();
+    this.frameData = new Float32Array(FRAME_FLOATS);
+    this.options = {
+      wireframe: false,
+      normals: false,
+      bbox: false,
+      autoLod: true,
+      fixedLod: 0,
+      culling: true,
+      lodBias: 1,
+      // Same picture on every screen: the canvas resolution is capped at this
+      // many device pixels per CSS pixel, and automatic LOD budgets its error in
+      // CSS pixels, so a phone and a desktop choose the same meshes for the
+      // same view ('device' spends more triangles on high-density screens).
+      maxPixelRatio: 2,
+      lodPixels: 'css',
+      // Milliseconds of mesh generation per frame. Past it, levels that do not
+      // exist yet are drawn with a coarser one, and stats.refining counts them:
+      // render again while it is non-zero and full detail follows within a few
+      // frames. Infinity (the default) generates everything the frame needs.
+      tessellationBudget: Infinity,
+    };
+    this.selection = new Set();
+    this.scene = null;
+    this.meshOf = null;
+    this.cube = cubeEdges();
+    this.cubeRange = this.pool.meshRange(this.cube);
+    this.lastDraw = null;
+    this.lightInfo = { truncated: 0, usedDefaults: false };
+    this.stats = { cpuMs: 0, uploadBytes: 0, totalUploadBytes: 0, drawCalls: 0, triangles: 0, visible: 0, instances: 0 };
+  }
+
+  get info() {
+    return this.backend.info;
+  }
+
+  /**
+   * What this device actually renders with, for checking that two devices
+   * show the same thing: backend, MSAA samples, texture filtering, limits,
+   * and whether the scene has more lights than are drawn.
+   */
+  get caps() {
+    return { backend: this.kind, ...this.backend.caps, maxPixelRatio: this.options.maxPixelRatio, lodPixels: this.options.lodPixels, lightsDropped: this.lightInfo.truncated || 0 };
+  }
+
+  /** Device pixels per CSS pixel actually used for a requested ratio. */
+  pixelRatio(dpr) {
+    return Math.min(dpr || 1, this.options.maxPixelRatio || Infinity);
+  }
+
+  /**
+   * Replace the scene. Geometry is packed lazily into the shared buffers.
+   * Meshes already packed are kept (pass keepGeometry: false for a cold start).
+   */
+  setScene(scene, meshOf, { keepGeometry = true } = {}) {
+    this.scene = scene;
+    this.meshOf = meshOf;
+    if (!scene || !keepGeometry || this.pool.byteSize > POOL_REPACK_BYTES) {
+      this.pool.reset();
+      this.cubeRange = this.pool.meshRange(this.cube);
+    }
+    this.backend.releaseMaterials(new Set(scene ? scene.materials : []));
+    this.stats.totalUploadBytes = 0;
+  }
+
+  /**
+   * Render one frame.
+   * @param {import('./camera.js').Camera} camera
+   * @param {{width:number, height:number, dpr?:number, time?:number}} view CSS size of the canvas
+   */
+  render(camera, view) {
+    const t0 = now();
+    const dpr = this.pixelRatio(view.dpr);
+    const w = Math.max(1, Math.round(view.width * dpr));
+    const h = Math.max(1, Math.round(view.height * dpr));
+    this.backend.resize(w, h);
+    const scene = this.scene;
+    const bounds = scene ? scene.bounds : { min: [-1, -1, -1], max: [1, 1, 1] };
+    camera.update(w / h, this.backend.zeroToOne, bounds);
+    const env = scene && scene.environment ? scene.environment : { background: [0.09, 0.1, 0.12, 1], sky: [0.8, 0.86, 0.95, 1], ground: [0.25, 0.22, 0.2, 1], intensity: 0.5, exposure: 1 };
+    let draw;
+    if (scene) {
+      draw = this.buildFrame(camera, view, h);
+    } else {
+      draw = { batches: [], overlays: { wireframe: [], normals: [], bbox: null, selection: null }, instanceData: new Float32Array(16), instanceCount: 0, stats: { instances: 0, visible: 0, culled: 0, batches: 0, drawCalls: 0, triangles: 0, lodHistogram: [0, 0, 0, 0], refining: 0 } };
+    }
+    const radius = Math.hypot(bounds.max[0] - bounds.min[0], bounds.max[1] - bounds.min[1], bounds.max[2] - bounds.min[2]) / 2 || 1;
+    this.lightInfo = packFrameUniforms(this.frameData, {
+      viewProj: camera.viewProj,
+      view: camera.view,
+      cameraPos: camera.position,
+      time: view.time || 0,
+      environment: env,
+      lights: scene ? scene.lights : [],
+      normalLength: radius * 0.025,
+      lineBias: 0.0015,
+      viewportHeight: h,
+    });
+    const uploaded = this.backend.syncPool(this.pool);
+    this.backend.render(draw, this.frameData, {
+      background: env.background,
+      textures: this.textures,
+      overlayColors: OVERLAY_COLORS,
+      cubeRange: this.cubeRange,
+    });
+    this.lastDraw = draw;
+    const s = this.stats;
+    s.cpuMs = now() - t0;
+    s.uploadBytes = uploaded + draw.instanceCount * 64;
+    s.totalUploadBytes += uploaded;
+    s.drawCalls = draw.stats.drawCalls;
+    s.triangles = draw.stats.triangles;
+    s.visible = draw.stats.visible;
+    s.instances = draw.stats.instances;
+    s.culled = draw.stats.culled;
+    s.batches = draw.stats.batches;
+    s.lodHistogram = draw.stats.lodHistogram;
+    s.refining = draw.stats.refining || 0;
+    s.geometryBytes = this.pool.byteSize;
+    s.instanceBytes = draw.instanceCount * 64;
+    s.textureBytes = this.backend.gpuBytes;
+    return draw;
+  }
+
+  buildFrame(camera, view, deviceHeight, tessellationBudget = this.options.tessellationBudget) {
+    const lodHeight = this.options.lodPixels === 'device' ? deviceHeight : Math.max(1, Math.round(view.height));
+    return this.frames.build({
+      scene: this.scene,
+      camera,
+      pool: this.pool,
+      meshOf: this.meshOf,
+      viewportHeight: lodHeight,
+      options: { ...this.options, selection: this.selection, tessellationBudget },
+    });
+  }
+
+  /**
+   * Generate and pack (but do not draw) every mesh a view needs, so a later
+   * frame from that view does not stall on tessellation. The upload happens
+   * with the next render. Used to warm up a scroll-driven camera path.
+   * @param {import('./camera.js').Camera} camera not modified
+   * @param {{width:number, height:number, dpr?:number}} view
+   */
+  prepare(camera, view) {
+    if (!this.scene) return;
+    const dpr = this.pixelRatio(view.dpr);
+    const w = Math.max(1, Math.round(view.width * dpr));
+    const h = Math.max(1, Math.round(view.height * dpr));
+    const cam = camera.clone();
+    cam.update(w / h, this.backend.zeroToOne, this.scene.bounds);
+    const keep = this.frames.last;
+    this.buildFrame(cam, view, h, Infinity);
+    this.frames.last = keep;
+  }
+
+  /** Wait for the GPU to finish all submitted work (benchmarks). */
+  finish() {
+    return this.backend.finish();
+  }
+
+  dispose() {
+    this.textures.clear((g) => this.backend.destroyTexture(g));
+    this.backend.dispose();
+  }
+}
+
+/**
+ * Create a renderer for a canvas.
+ * @param {HTMLCanvasElement} canvas
+ * @param {{backend?: 'auto'|'webgpu'|'webgl2', present?: 'canvas'|'readback'}} [opts]
+ */
+export async function createRenderer(canvas, opts = {}) {
+  const want = opts.backend || 'auto';
+  const errors = [];
+  if ((want === 'auto' || want === 'webgpu') && typeof navigator !== 'undefined' && navigator.gpu) {
+    const b = new WebGPUBackend(canvas, { present: opts.present });
+    try {
+      await b.init();
+      return new Renderer(b);
+    } catch (e) {
+      errors.push(e.message);
+      if (want === 'webgpu') throw e;
+    }
+  } else if (want === 'webgpu') {
+    throw new Error('WebGPU is not available in this browser.');
+  }
+  // A canvas that already has a WebGPU context cannot create a WebGL2 context.
+  let target = canvas;
+  if (errors.length && canvas.getContext && canvas.parentNode) {
+    target = canvas.cloneNode(false);
+    canvas.parentNode.replaceChild(target, canvas);
+  }
+  const b = new WebGL2Backend(target);
+  await b.init();
+  const r = new Renderer(b);
+  r.fallbackReason = errors.join('; ');
+  r.canvas = target;
+  return r;
+}

package/src/render/scroll-timeline.js

@@ -0,0 +1,104 @@
+// Page scroll -> animation progress for timeline="scroll" animations.
+//
+// Progress runs from 0 to 1 while a section of the page scrolls past. The
+// usual layout is a tall section with a sticky canvas inside it:
+//
+//   <section id="tour" style="height: 400vh">
+//     <div style="position: sticky; top: 0; height: 100vh"> canvas </div>
+//     <p data-es3d-stop>…</p> <p data-es3d-stop="0.5">…</p> …
+//   </section>
+//
+// Without stops, progress is 0 when the section's top reaches the top of the
+// viewport and 1 when its bottom reaches the bottom. Elements inside it with
+// data-es3d-stop pin progress values to page content instead: a stop is
+// reached when the element's centre is at the viewport's centre (its value,
+// or i / (n - 1) for the i-th of n stops when the attribute is empty), and
+// progress is interpolated between stops. Give the camera's keyTimes the same
+// values and each key view lines up with its paragraph.
+//
+// Scroll events only mark the timeline stale; update() reads layout at most
+// once per frame. The value eases towards the scroll position so wheel steps
+// do not jerk the camera. With reduced motion it jumps from stop to stop.
+
+const reducedMotionQuery = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+export class ScrollTimeline {
+  /**
+   * @param {HTMLElement} section element whose scroll position drives progress
+   * @param {{smoothing?: number, reducedMotion?: boolean}} [opts] smoothing: time constant in seconds (0 = none)
+   */
+  constructor(section, opts = {}) {
+    this.section = section;
+    this.smoothing = opts.smoothing ?? 0.12;
+    this.reducedMotion = opts.reducedMotion ?? reducedMotionQuery();
+    this.value = NaN; // current (smoothed) progress
+    this.target = 0; // progress the scroll position asks for
+    this.stale = true;
+    this.markStale = () => {
+      this.stale = true;
+    };
+    addEventListener('scroll', this.markStale, { passive: true, capture: true });
+    addEventListener('resize', this.markStale, { passive: true });
+  }
+
+  dispose() {
+    removeEventListener('scroll', this.markStale, { capture: true });
+    removeEventListener('resize', this.markStale);
+  }
+
+  /** Stops inside the section: [{el, value}] in document order. */
+  stops() {
+    const els = [...this.section.querySelectorAll('[data-es3d-stop]')];
+    return els.map((el, i) => {
+      const raw = el.getAttribute('data-es3d-stop');
+      const v = raw === null || raw.trim() === '' ? (els.length > 1 ? i / (els.length - 1) : 0) : Number(raw);
+      return { el, value: Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : 0 };
+    });
+  }
+
+  /** Progress for the current scroll position (reads layout). */
+  measure() {
+    const vh = innerHeight || 1;
+    const stops = this.stops();
+    if (!stops.length) {
+      const r = this.section.getBoundingClientRect();
+      const range = r.height - vh;
+      if (range <= 0) return r.top <= 0 ? 1 : 0;
+      return Math.min(1, Math.max(0, -r.top / range));
+    }
+    // signed distance of each stop's centre below the viewport centre
+    const d = stops.map((s) => {
+      const r = s.el.getBoundingClientRect();
+      return r.top + r.height / 2 - vh / 2;
+    });
+    if (d[0] >= 0) return stops[0].value;
+    const last = stops.length - 1;
+    if (d[last] <= 0) return stops[last].value;
+    let i = 0;
+    while (i < last - 1 && d[i + 1] <= 0) i++;
+    const u = d[i] === d[i + 1] ? 0 : -d[i] / (d[i + 1] - d[i]);
+    if (this.reducedMotion) return u < 0.5 ? stops[i].value : stops[i + 1].value;
+    return stops[i].value + (stops[i + 1].value - stops[i].value) * u;
+  }
+
+  /**
+   * Advance by dt seconds. Returns true when the value changed (redraw).
+   * @param {number} dt
+   */
+  update(dt) {
+    if (this.stale) {
+      this.stale = false;
+      this.target = this.measure();
+    }
+    if (Number.isNaN(this.value) || this.reducedMotion || !(this.smoothing > 0)) {
+      if (this.value === this.target) return false;
+      this.value = this.target;
+      return true;
+    }
+    const diff = this.target - this.value;
+    if (diff === 0) return false;
+    if (Math.abs(diff) < 1e-4) this.value = this.target;
+    else this.value += diff * (1 - Math.exp(-Math.max(dt, 0) / this.smoothing));
+    return true;
+  }
+}

package/src/render/shaders/glsl.js

@@ -0,0 +1,285 @@
+// GLSL ES 3.00 shaders for the WebGL2 backend. They mirror shaders/wgsl.js.
+//
+// Instancing: the per-instance world matrix arrives as four vec4 attributes.
+// Normals are transformed with the cofactor matrix of the instance matrix
+// (proportional to the inverse transpose), so no normal matrix is uploaded and
+// non-uniform and mirrored scales are handled correctly.
+
+import {
+  MAT_FLAG_MAP, MAT_FLAG_NORMAL_MAP, MAT_FLAG_UNLIT, MAT_FLAG_DOUBLE_SIDED, MAT_FLAG_MR_MAP,
+  MAT_FLAG_OCCLUSION, MAT_FLAG_EMISSIVE_MAP, MAT_FLAG_ALPHA_MASK,
+} from '../lighting.js';
+
+const FRAME_BLOCK = /* glsl */ `
+layout(std140) uniform Frame {
+  mat4 uViewProj;
+  mat4 uView;
+  vec4 uCameraPos;
+  vec4 uSky;
+  vec4 uGround;
+  vec4 uParams;
+  vec4 uLightPos[16];
+  vec4 uLightDir[16];
+  vec4 uLightColor[16];
+  vec4 uLightExtra[16];
+};
+`;
+
+const MATERIAL_BLOCK = /* glsl */ `
+layout(std140) uniform Material {
+  vec4 mBaseColor;
+  vec4 mEmissive;
+  vec4 mParams;
+  vec4 mUv;
+  vec4 mOverlay;
+};
+`;
+
+const INSTANCE_INPUTS = /* glsl */ `
+layout(location = 0) in vec3 aPosition;
+layout(location = 1) in vec3 aNormal;
+layout(location = 2) in vec2 aUv;
+layout(location = 3) in vec4 iM0;
+layout(location = 4) in vec4 iM1;
+layout(location = 5) in vec4 iM2;
+layout(location = 6) in vec4 iM3;
+`;
+
+const COMMON_FS = /* glsl */ `
+const float PI = 3.14159265359;
+vec3 linearToSrgb(vec3 c) {
+  c = max(c, vec3(0.0));
+  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(vec3(0.0031308), c));
+}
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+`;
+
+/** Vertex shader of the mesh programs; texture coordinates only for textured materials. */
+export const meshVertexShader = (textured) => /* glsl */ `#version 300 es
+precision highp float;
+${FRAME_BLOCK}
+${INSTANCE_INPUTS}
+out vec3 vWorld;
+out vec3 vNormal;
+${textured ? 'out vec2 vUv;' : ''}
+void main() {
+  mat4 M = mat4(iM0, iM1, iM2, iM3);
+  vec4 wp = M * vec4(aPosition, 1.0);
+  vec3 c0 = iM0.xyz;
+  vec3 c1 = iM1.xyz;
+  vec3 c2 = iM2.xyz;
+  mat3 cof = mat3(cross(c1, c2), cross(c2, c0), cross(c0, c1));
+  float det = dot(c0, cross(c1, c2));
+  vNormal = cof * aNormal * (det < 0.0 ? -1.0 : 1.0);
+  vWorld = wp.xyz;
+  ${textured ? 'vUv = aUv;' : ''}
+  gl_Position = uViewProj * wp;
+}
+`;
+
+/** Material flags that need texture coordinates. */
+export const TEXTURE_FLAGS = MAT_FLAG_MAP | MAT_FLAG_NORMAL_MAP | MAT_FLAG_MR_MAP | MAT_FLAG_OCCLUSION | MAT_FLAG_EMISSIVE_MAP;
+
+/**
+ * Fragment shader for one material feature set (MAT_FLAG_* bits) and one
+ * light setup (lightTypes() of the frame: its light types, in order). Everything else is
+ * compiled out, as a renderer that specialises its programs does: textures
+ * are sampled only when the material has them, `discard` exists only for
+ * alpha-masked materials (its mere presence disables early depth testing on
+ * many GPUs), and the light loop is unrolled with each light's type known.
+ */
+export function meshFragmentShader(flags, lights) {
+  const has = (f) => (flags & f) !== 0;
+  const map = has(MAT_FLAG_MAP), normalMap = has(MAT_FLAG_NORMAL_MAP), mrMap = has(MAT_FLAG_MR_MAP);
+  const occlusion = has(MAT_FLAG_OCCLUSION), emissiveMap = has(MAT_FLAG_EMISSIVE_MAP);
+  const textured = map || normalMap || mrMap || occlusion || emissiveMap;
+  // explicit gradients only where a discard could leave later lookups without them
+  const grad = has(MAT_FLAG_ALPHA_MASK);
+  const sample = (sampler) => (grad ? `textureGrad(${sampler}, uv, duv1, duv2)` : `texture(${sampler}, uv)`);
+  const L = [];
+  L.push(`#version 300 es
+precision highp float;
+precision highp int;
+${FRAME_BLOCK}
+${MATERIAL_BLOCK}`);
+  if (map) L.push('uniform sampler2D uMap;');
+  if (normalMap) L.push('uniform sampler2D uNormalMap;');
+  if (mrMap) L.push('uniform sampler2D uMrMap;');
+  if (occlusion) L.push('uniform sampler2D uOcclusionMap;');
+  if (emissiveMap) L.push('uniform sampler2D uEmissiveMap;');
+  L.push(`in vec3 vWorld;
+in vec3 vNormal;
+${textured ? 'in vec2 vUv;' : ''}
+out vec4 outColor;
+${COMMON_FS}`);
+  if (!has(MAT_FLAG_UNLIT)) L.push(BRDF);
+  L.push('void main() {');
+  if (textured) L.push('  vec2 uv = vUv * mUv.xy;');
+  // derivatives before any discard, so every lookup after it still has them
+  if ((textured && grad) || normalMap) L.push('  vec2 duv1 = dFdx(uv);', '  vec2 duv2 = dFdy(uv);');
+  L.push('  vec4 base = mBaseColor;');
+  if (map) L.push(`  base *= ${sample('uMap')};`);
+  if (has(MAT_FLAG_ALPHA_MASK)) L.push('  if (base.a < mParams.w) discard;');
+  L.push('  vec3 emitted = mEmissive.rgb;');
+  if (emissiveMap) L.push(`  emitted *= ${sample('uEmissiveMap')}.rgb;`);
+  if (has(MAT_FLAG_UNLIT)) {
+    L.push('  outColor = vec4(linearToSrgb(base.rgb + emitted), base.a);', '}');
+    return L.join('\n');
+  }
+  L.push('  vec3 N = normalize(vNormal);');
+  if (has(MAT_FLAG_DOUBLE_SIDED)) L.push('  N = gl_FrontFacing ? N : -N;');
+  if (normalMap) {
+    L.push(`  vec3 dp1 = dFdx(vWorld);
+  vec3 dp2 = dFdy(vWorld);
+  vec3 dp2perp = cross(dp2, N);
+  vec3 dp1perp = cross(N, dp1);
+  vec3 T = dp2perp * duv1.x + dp1perp * duv2.x;
+  vec3 B = dp2perp * duv1.y + dp1perp * duv2.y;
+  float invmax = inversesqrt(max(max(dot(T, T), dot(B, B)), 1e-20));
+  vec3 n = ${sample('uNormalMap')}.xyz * 2.0 - 1.0;
+  n.xy *= mEmissive.w;
+  N = normalize(mat3(T * invmax, B * invmax, N) * n);`);
+  }
+  L.push(`  vec3 V = normalize(uCameraPos.xyz - vWorld);
+  float NdotV = max(dot(N, V), 1e-4);
+  float rough = clamp(mParams.y, 0.045, 1.0);
+  float metal = clamp(mParams.x, 0.0, 1.0);`);
+  if (mrMap) {
+    L.push(`  vec4 mr = ${sample('uMrMap')};
+  rough = clamp(rough * mr.g, 0.045, 1.0);
+  metal = clamp(metal * mr.b, 0.0, 1.0);`);
+  }
+  L.push(`  float a = rough * rough;
+  vec3 f0 = mix(vec3(0.04), base.rgb, metal);
+  vec3 diffuse = base.rgb * (1.0 - metal);
+  vec3 color = vec3(0.0);
+  vec3 ambient = vec3(0.0);`);
+  if (lights) lights.split(',').forEach((type, i) => L.push(lightTerm(Number(type), i)));
+  L.push(`  float envI = uSky.w;
+  vec3 hemi = mix(uGround.rgb, uSky.rgb, N.y * 0.5 + 0.5) * envI + ambient;
+  vec3 R = reflect(-V, N);
+  vec3 envSpec = mix(uGround.rgb, uSky.rgb, smoothstep(-0.25 - rough, 0.25 + rough, R.y)) * envI;
+  envSpec = mix(envSpec, hemi, rough * rough);`);
+  if (occlusion) {
+    L.push(`  float ao = mix(1.0, ${sample('uOcclusionMap')}.r, mUv.z);
+  hemi *= ao;
+  envSpec *= ao;`);
+  }
+  L.push(`  color += diffuse * hemi + envSpec * envBRDF(f0, rough, NdotV);
+  color += emitted;
+  color *= uGround.w;
+  outColor = vec4(linearToSrgb(aces(color)), base.a);
+}`);
+  return L.join('\n');
+}
+
+const BRDF = /* glsl */ `
+float D_GGX(float NdotH, float a) {
+  float a2 = a * a;
+  float d = NdotH * NdotH * (a2 - 1.0) + 1.0;
+  return a2 / (PI * d * d);
+}
+float V_Smith(float NdotV, float NdotL, float a) {
+  float a2 = a * a;
+  float gv = NdotL * sqrt(NdotV * NdotV * (1.0 - a2) + a2);
+  float gl = NdotV * sqrt(NdotL * NdotL * (1.0 - a2) + a2);
+  return 0.5 / max(gv + gl, 1e-5);
+}
+vec3 F_Schlick(vec3 f0, float VdotH) {
+  return f0 + (vec3(1.0) - f0) * pow(1.0 - VdotH, 5.0);
+}
+vec3 envBRDF(vec3 f0, float roughness, float NdotV) {
+  const vec4 c0 = vec4(-1.0, -0.0275, -0.572, 0.022);
+  const vec4 c1 = vec4(1.0, 0.0425, 1.04, -0.04);
+  vec4 r = roughness * c0 + c1;
+  float a004 = min(r.x * r.x, exp2(-9.28 * NdotV)) * r.x + r.y;
+  vec2 AB = vec2(-1.04, 1.04) * a004 + r.zw;
+  return f0 * AB.x + AB.y;
+}
+// one light's contribution, zero when it is behind the surface
+vec3 shade(vec3 N, vec3 V, vec3 L, vec3 radiance, float NdotV, vec3 f0, vec3 diffuse, float a) {
+  float NdotL = dot(N, L);
+  if (NdotL <= 0.0) return vec3(0.0);
+  vec3 H = normalize(V + L);
+  float NdotH = max(dot(N, H), 0.0);
+  float VdotH = max(dot(V, H), 0.0);
+  vec3 F = F_Schlick(f0, VdotH);
+  vec3 spec = D_GGX(NdotH, a) * V_Smith(NdotV, NdotL, a) * F;
+  vec3 kd = (vec3(1.0) - F) * diffuse / PI;
+  return (kd + spec) * radiance * NdotL;
+}
+`;
+
+/** GLSL for light i of a known type (lighting.js: 0 directional, 1 point, 2 spot, 3 ambient, 4 hemisphere). */
+function lightTerm(type, i) {
+  if (type === 3) return `  ambient += uLightColor[${i}].rgb;`;
+  if (type === 4) return `  ambient += mix(uLightExtra[${i}].yzw, uLightColor[${i}].rgb, N.y * 0.5 + 0.5);`;
+  if (type === 0) return `  color += shade(N, V, -uLightDir[${i}].xyz, uLightColor[${i}].rgb * PI, NdotV, f0, diffuse, a);`;
+  return `  {
+    vec3 Lv = uLightPos[${i}].xyz - vWorld;
+    float d = length(Lv);
+    vec3 L = Lv / max(d, 1e-5);
+    float att = 1.0 / max(d * d, 1e-4);
+    float range = uLightDir[${i}].w;
+    if (range > 0.0) {
+      float x = d / range;
+      float w = clamp(1.0 - x * x * x * x, 0.0, 1.0);
+      att *= w * w;
+    }${type === 2 ? `\n    att *= smoothstep(uLightColor[${i}].w, uLightExtra[${i}].x, dot(-L, uLightDir[${i}].xyz));` : ''}
+    color += shade(N, V, L, uLightColor[${i}].rgb * PI * att, NdotV, f0, diffuse, a);
+  }`;
+}
+
+/** Lines: scene polylines (unlit material color), wireframe and bounding boxes. */
+export const LINE_VS = /* glsl */ `#version 300 es
+precision highp float;
+${FRAME_BLOCK}
+${INSTANCE_INPUTS}
+void main() {
+  mat4 M = mat4(iM0, iM1, iM2, iM3);
+  vec4 wp = M * vec4(aPosition, 1.0);
+  // pull lines slightly toward the camera so they win the depth test against
+  // the surfaces they outline (a relative offset works at every distance)
+  wp.xyz = mix(wp.xyz, uCameraPos.xyz, uParams.z);
+  gl_Position = uViewProj * wp;
+}
+`;
+
+/** Normal visualisation: the tip vertex (uv.x = 1) is offset along the world normal. */
+export const NORMAL_VS = /* glsl */ `#version 300 es
+precision highp float;
+${FRAME_BLOCK}
+${INSTANCE_INPUTS}
+void main() {
+  mat4 M = mat4(iM0, iM1, iM2, iM3);
+  vec4 wp = M * vec4(aPosition, 1.0);
+  vec3 c0 = iM0.xyz;
+  vec3 c1 = iM1.xyz;
+  vec3 c2 = iM2.xyz;
+  mat3 cof = mat3(cross(c1, c2), cross(c2, c0), cross(c0, c1));
+  float det = dot(c0, cross(c1, c2));
+  vec3 n = normalize(cof * aNormal * (det < 0.0 ? -1.0 : 1.0));
+  wp.xyz += n * aUv.x * uParams.y;
+  wp.xyz = mix(wp.xyz, uCameraPos.xyz, uParams.z);
+  gl_Position = uViewProj * wp;
+}
+`;
+
+export const LINE_FS = /* glsl */ `#version 300 es
+precision highp float;
+precision highp int;
+${FRAME_BLOCK}
+${MATERIAL_BLOCK}
+out vec4 outColor;
+${COMMON_FS}
+void main() {
+  int flags = int(mParams.z + 0.5);
+  if ((flags & 16) != 0) {
+    outColor = mOverlay;
+    return;
+  }
+  outColor = vec4(linearToSrgb(mBaseColor.rgb + mEmissive.rgb), mBaseColor.a);
+}
+`;