Static site

index.html

@@ -8,7 +8,7 @@
   <meta name="theme-color" content="#10131b">
   <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;800;900&family=Inter:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/static/style.css?v=1793426655">
+  <link rel="stylesheet" href="/static/style.css?v=1793427139">
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Crect width=%2764%27 height=%2764%27 rx=%2714%27 fill=%27%23050506%27/%3E%3Ccircle cx=%2732%27 cy=%2732%27 r=%2716%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%275%27/%3E%3C/svg%3E">
   <script type="importmap">
     { "imports": {
@@ -219,6 +219,6 @@
 <div id="toast" role="status"></div>
 <noscript><p style="position:fixed;inset:auto 0 0;padding:16px;background:#111;color:#fff;text-align:center">VOID needs JavaScript for the 3D car.</p></noscript>
 <script src="/static/hub.js" data-app="void" defer></script>
-<script type="module" src="/static/main.js?v=1793426655"></script>
+<script type="module" src="/static/main.js?v=1793427139"></script>
 </body>
 </html>

static/city.js

@@ -632,15 +632,18 @@ export async function buildCity(scene, canvasTex, COARSE) {
   const TILE = 640, tileOf = (x, z) => Math.floor(x / TILE) * 1000 + Math.floor(z / TILE);
   const byMat = new Map();
   for (const o of B.values()) { if (!o.pos.length) continue; if (!byMat.has(o.m)) byMat.set(o.m, []); byMat.get(o.m).push(o); }
+  const triTile = (p, t) => tileOf((p[t] + p[t + 3] + p[t + 6]) / 3, (p[t + 2] + p[t + 5] + p[t + 8]) / 3);
   for (const [mtl, list] of byMat) {
+    // count each tile's triangles first, then fill typed arrays of exactly that size (growing plain arrays was most of the load time here)
     const tiles = new Map();
+    for (const o of list) for (let t = 0; t < o.pos.length; t += 9) { const k = triTile(o.pos, t), a = tiles.get(k); if (a) a.n++; else tiles.set(k, { n: 1 }); }
+    for (const a of tiles.values()) { a.pos = new Float32Array(a.n * 9); a.uv = new Float32Array(a.n * 6); a.tile = new Float32Array(a.n * 3); a.i = 0; }
     for (const o of list) for (let t = 0, u = 0; t < o.pos.length; t += 9, u += 6) {
-      const k = tileOf((o.pos[t] + o.pos[t + 3] + o.pos[t + 6]) / 3, (o.pos[t + 2] + o.pos[t + 5] + o.pos[t + 8]) / 3);
-      let a = tiles.get(k); if (!a) tiles.set(k, a = { pos: [], uv: [], tile: [] });
-      for (let i = 0; i < 9; i++) a.pos.push(o.pos[t + i]); for (let i = 0; i < 6; i++) a.uv.push(o.uv[u + i]); a.tile.push(o.tile, o.tile, o.tile);
+      const a = tiles.get(triTile(o.pos, t)), i = a.i++;
+      for (let j = 0; j < 9; j++) a.pos[i * 9 + j] = o.pos[t + j]; for (let j = 0; j < 6; j++) a.uv[i * 6 + j] = o.uv[u + j]; a.tile[i * 3] = a.tile[i * 3 + 1] = a.tile[i * 3 + 2] = o.tile;
     }
     for (const a of tiles.values()) {
-      const g = new THREE.BufferGeometry(); g.setAttribute("position", new THREE.Float32BufferAttribute(a.pos, 3)); g.setAttribute("uv", new THREE.Float32BufferAttribute(a.uv, 2)); g.setAttribute("aTile", new THREE.Float32BufferAttribute(a.tile, 1)); g.computeVertexNormals();
+      const g = new THREE.BufferGeometry(); g.setAttribute("position", new THREE.BufferAttribute(a.pos, 3)); g.setAttribute("uv", new THREE.BufferAttribute(a.uv, 2)); g.setAttribute("aTile", new THREE.BufferAttribute(a.tile, 1)); g.computeVertexNormals();
       const m = new THREE.Mesh(g, mtl); m.userData.solid = true; scene.add(m);
     }
   }

static/main.js

@@ -8,7 +8,8 @@ import { mergeGeometries } from "three/addons/utils/BufferGeometryUtils.js";
 Object.defineProperty(THREE.Material.prototype, "forceSinglePass", { get: () => true, set() {} });
 const V = new URL(import.meta.url).search;
 const $ = id => document.getElementById(id);
-const setLoad = p => { $("ldbar").style.width = p + "%"; $("ldpct").textContent = Math.round(p); };
+const LT = window.__loadTimes = [], lt = k => LT.push([k, Math.round(performance.now())]);       // where the loading time goes (window.__loadTimes)
+const setLoad = p => { $("ldbar").style.width = p + "%"; $("ldpct").textContent = Math.round(p); lt(p); };
 setLoad(15);
 const [{ createWorld, clamp, lerp, smooth, frame, PAD_R, ZONES }, { buildCar, MODELS }, { addInterior, HEAD }, { Sound, BAR }, { createWatch, TOTAL, CHAPTERS }, { createGame }, { createLife, personGeo }] = await Promise.all(
   ["world", "car", "interior", "sound", "watch", "game", "npc"].map(n => import(`./${n}.js${V}`)));
@@ -54,11 +55,11 @@ const interior = addInterior(car, renderer);
 const sound = new Sound();
 const watch = createWatch(W, car, interior);
 const DENSITY = { few: .55, normal: 1, busy: 1.3 }[(store.get("void.settings") || {}).crowd || (LITE ? "few" : "normal")] || 1;
-const life = createLife(scene, W.roads, W.walkways, COARSE || LITE, DENSITY);
+const life = createLife(scene, W.roads, W.walkways, COARSE || LITE, DENSITY); lt("life");
 const TIMES = ["night", "sunset", "day"];
 function cycleTime() { const k = TIMES[(TIMES.indexOf(W.timeOfDay) + 1) % 3]; W.setTime(k); store.set("void.time", k); toast({ night: "Night in the city", sunset: "Golden hour", day: "Daytime" }[k]); cubeN = 0; }
 let police, races, nav;
-const net = createNet();
+const net = createNet(); lt("net");
 setInterval(() => { if (document.hidden) net.tick(.5, null); }, 500);     // a hosting tab in the background still relays everyone
 // settings: graphics quality, look speed, auto gas, touch steering (kept on this device)
 // a strong graphics card starts on High; everything else starts on Medium (it can be raised in the Menu)
@@ -81,9 +82,9 @@ const gameOpts = {
     mx.font = "bold 12px sans-serif"; mx.textAlign = "center"; for (const st of W.city.stations) { const [a, b] = P(st.x, st.z); if (Math.abs(a) < 90 && Math.abs(b) < 90) { mx.save(); mx.translate(a, b); mx.rotate(g.yaw + Math.PI / 2); mx.fillText("⛽", 0, 4); mx.restore(); } }
   },
 };
-const game = createGame(W, car, sound, life, gameOpts);
-const vehicles = createVehicles(scene, game.api, W); gameOpts.vehicles = vehicles;
-const atmos = createAtmos(W, sound, COARSE);
+const game = createGame(W, car, sound, life, gameOpts); lt("game");
+const vehicles = createVehicles(scene, game.api, W); gameOpts.vehicles = vehicles; lt("vehicles");
+const atmos = createAtmos(W, sound, COARSE); lt("atmos");
 // trophies: a banner slides in at the top when a challenge is done
 const goals = createGoals(gl => { const t = document.getElementById("gTrophy"); t.innerHTML = `<b>${gl.icon}</b><div><span>Challenge complete</span>${gl.name}<em>+1000</em></div>`; t.classList.remove("on"); void t.offsetWidth; t.classList.add("on"); if (game.state) { game.state.score += 1000; } sound.win(); renderGoals(); });
 function renderGoals() {
@@ -140,10 +141,18 @@ document.getElementById("gSens").addEventListener("input", e => { SET.sens = +e.
 }
 // headlights that light the road at night
 const heads = new THREE.SpotLight(0xfff1d6, 0, 70, .55, .6, 1.2); heads.position.set(2.2, .7, 0); heads.target.position.set(18, -1.5, 0); scene.add(heads, heads.target);           // in the scene (it follows the car each frame), so it never disappears with the car
-police = createPolice(scene, game.api, sound, life);
-races = createRaces(scene, game.api, sound, W.canvasTex, net);
-nav = createNav(scene, game.api, W, ZONES, races.starts, () => clock.elapsedTime);
-const extras = createExtras(W, game.api, nav, sound);
+police = createPolice(scene, game.api, sound, life); lt("police");
+races = createRaces(scene, game.api, sound, W.canvasTex, net); lt("races");
+nav = createNav(scene, game.api, W, ZONES, races.starts, () => clock.elapsedTime); lt("nav");
+// every light now exists (they are part of each shader), so build all the shaders on the graphics driver's own threads
+// while the rest loads; the first city render would otherwise compile them one at a time (about 3 s)
+function precompile() {
+  const rt0 = renderer.getRenderTarget(); renderer.setRenderTarget(composer.renderTarget1);         // the game always draws into the composer's target
+  let p = null; try { p = renderer.compileAsync(scene, camera); } catch (e) { console.warn("precompile", e); }
+  renderer.setRenderTarget(rt0); return Promise.race([p || Promise.resolve(), new Promise(r => setTimeout(r, 8000))]);
+}
+const shadersReady = precompile();
+const extras = createExtras(W, game.api, nav, sound); lt("extras");
 document.getElementById("gTaxi").onclick = () => extras.toggle();
 // people knocked over: a thud, a shake, and the police notice; they bounce off walls instead of flying through them
 life.onHit = sp => { sound.thud && sound.thud(Math.min(1, sp / 22)); if (game.state) game.state.shake = Math.min(1, (game.state.shake || 0) + .25); police && police.event("ped"); };
@@ -231,7 +240,7 @@ function dailyProg(k) { const [stat, need] = DAILY[k]; return Math.min(1, ((goal
 function dailyCheck() { for (const k of daily.picks) if (!daily.done.includes(k) && dailyProg(k) >= 1) { daily.done.push(k); store.set("void.daily", daily); cash += 2500; earn(0); toast(`Daily challenge done: ${DAILY[k][2]} · +$2,500`); sound.win(); } }
 function renderDaily() { document.getElementById("gDaily").innerHTML = daily.picks.map(k => { const v = dailyProg(k), ok = daily.done.includes(k); return `<div class="goal${ok ? " ok" : ""}"><b>${DAILY[k][2].split(" ")[0]}</b><div><span>${DAILY[k][2].split(" ").slice(1).join(" ")}</span><small>$2,500</small><i style="--v:${v}"></i></div>${ok ? "✅" : `<em>${Math.floor(v * 100)}%</em>`}</div>`; }).join(""); }
 // contracts: hybrid drive + fly jobs and pursuits with medals
-const contracts = createContracts(W, game.api, nav, sound, police);
+const contracts = createContracts(W, game.api, nav, sound, police); lt("contracts");
 function renderContracts() { document.getElementById("gContracts").innerHTML = contracts.CONTRACTS.map(c => `<button class="tile con" data-con="${c.id}"><b>${c.icon}</b>${c.name}<small>${c.text}</small><i>${["Not done", "🥉 Bronze", "🥈 Silver", "🥇 Gold"][contracts.best[c.id] || 0]}</i></button>`).join("") + (contracts.active ? `<button class="tile con" id="gConStop"><b>✕</b>Cancel contract</button>` : ""); }
 document.getElementById("gContracts").addEventListener("click", e => { const b = e.target.closest("[data-con]"); if (b) { if (extras.job.on) extras.toggle(false); contracts.start(b.dataset.con); } else if (e.target.closest("#gConStop")) contracts.cancel(); });
 // backups: every void.* key in one code, so progress survives a new browser or device
@@ -288,7 +297,8 @@ function renderPlayers() { document.getElementById("gPlayers").innerHTML = net.o
   $("gEmotes").innerHTML = EMOTES.map((e, k) => `<button class="pill" data-e="${k}">${e}</button>`).join("");
   $("gEmotes").onclick = ev => { const b = ev.target.closest("[data-e]"); if (!b || !net.online()) return; net.send({ t: "emote", e: +b.dataset.e }); feed(`You: ${EMOTES[+b.dataset.e]}`); };
 }
-W.setTime(store.get("void.time") || "night");
+await shadersReady; lt("shaders");
+W.setTime(store.get("void.time") || "night"); lt("setTime");
 // fill the car's reflection cube once before the first frame, so the paint never samples an empty one
 
 $("osmCredit").textContent = W.credit;
@@ -339,7 +349,7 @@ $("share").onclick = async () => {
   const url = location.origin + location.pathname + "#b=" + Object.keys(DEFAULT).map(k => build[k]).join(".");
   try { await navigator.clipboard.writeText(url); toast("Link to your build copied"); } catch { prompt("Copy your build link", url); }
 };
-applyBuild();
+applyBuild(); lt("applyBuild");
 // ---------- performance upgrades: every point you score is also cash, spent here (kept on this device) ----------
 const UPG = { engine: ["⚙️", "Engine", "More power and top speed"], grip: ["🛞", "Tyres", "Grip in corners, longer drifts"], nitro: ["🔥", "Nitro", "A bigger nitro tank"], armor: ["🛡️", "Armour", "Takes less damage"] };
 const PRICE = [2500, 6000, 15000];
@@ -428,7 +438,7 @@ function resize() {
 }
 addEventListener("resize", resize); addEventListener("orientationchange", () => setTimeout(resize, 200));
 if (window.visualViewport) visualViewport.addEventListener("resize", resize);
-resize();
+resize(); lt("resize");
 const fovFor = f => { const a = camera.aspect; if (a >= 1.5) return f; const h = 2 * Math.atan(Math.tan(f * Math.PI / 360) * 1.5); return Math.min(88, 2 * Math.atan(Math.tan(h / 2) / a) * 180 / Math.PI); };
 
 // ---------- the showroom pose (home and build) ----------
@@ -484,7 +494,7 @@ function cullSmall(time, det) {
   }
 }
 const perf = { t: 0, n: 0, pr: renderer.getPixelRatio(), max: renderer.getPixelRatio(), down: 0 };
-applySettings();
+applySettings(); lt("applySettings");
 let lastHud = 0, prevGear = 1, feedFlip = 0;
 function frameLoop(fixed) {
   const raw = fixed ? 0 : clock.getDelta(), dt = fixed || Math.min(.05, raw), time = clock.elapsedTime;
@@ -672,6 +682,7 @@ function frameLoop(fixed) {
   composer.render();
 }
 
+lt("pre-flyers");
 // the flying VOID cars in traffic wear your car's real shape: everything visible on it, baked into one mesh (paint left white so each one gets its own colour)
 try {
   carRoot.updateMatrixWorld(true);
@@ -686,7 +697,7 @@ try {
   if (parts.length) { const geo = mergeGeometries(parts); geo.translate(0, -.02, 0); life.setVoidGeo(geo); life.setVoidDetail(W.quality !== "lite"); window.__voidTris = geo.attributes.position.count / 3; }
 } catch (e) { console.warn("VOID flyers keep the simple shape", e); }
 setLoad(95);
-renderer.compile(scene, camera);
+await precompile(); lt("compile");
 // warm-up: draw every mesh once into a tiny target so its buffers and textures are on the graphics card before you play.
 // Otherwise each new part of the city uploads the first time it comes into view, and that is a stutter.
 try {
@@ -696,6 +707,7 @@ try {
   renderer.setRenderTarget(rt); renderer.render(scene, camera); renderer.setRenderTarget(null); rt.dispose(); renderer.shadowMap.autoUpdate = sh;
   for (const [o, v, f, m] of saved) { o.visible = v; o.frustumCulled = f; o.layers.mask = m; } for (const [o, v] of parents) o.visible = v;
 } catch (e) { console.warn("warm-up skipped", e); }
+lt("warm-up");
 let raf;
 let frameErr = 0;
 const loop = () => { raf = requestAnimationFrame(loop); try { frameLoop(); } catch (e) { if (frameErr++ < 3) console.error(e); } };   // one bad frame never stops the game