Spaces:

VBTSX
/

proceduralhtml3dcity

Running

App Files Files Community

VBTSX commited on 9 days ago

Commit

476bd09

verified ·

1 Parent(s): c5f4c0c

Upload airport_building_preview_three.html

Browse files

🏙️ Procedural 3D City Dashboard (WebGL + GPT-5 Experiment)
🎯 Overview

This project is an AI-assisted no-code experiment built with Three.js and enhanced by GPT-5.
It procedurally generates a colorful, realistic 3D city—complete with buildings, streets, cars, pedestrians, and airport runways—directly in the browser.
The scene is fully interactive with cinematic sunlight, depth effects, and UE-style post-processing.

🧩 Features
🌇 Procedural World Generation

Buildings: randomized architecture styles (brick, glass, painted) with PBR-style materials

Dynamic streets with crosswalks, reflections, and light variation

Cars & pedestrians that move procedurally

Airport area with planes, signals, and runways

☀️ Lighting & Environment

Physically-based sunlight system with color shift (warm at dawn/dusk, white at noon)

Soft shadows, fog, and ambient hemisphere lighting

Night mode adds emissive window lights to buildings

🎨 Visual Effects (Unreal-style)

Bloom, Depth of Field, Vignette, FXAA, SSAO, and Clarity filter

Auto-focus on selected objects (Depth of Field)

Real-time exposure & sharpness controls

🧠 Dashboard & UI

Dockable panels for:

City controls

Post-FX sliders

Object info inspector

Close buttons for each panel and a “Hide All (H)” hotkey

Preset: Clarity → disables blur, boosts contrast, and sharpens details

Files changed (1) hide show

airport_building_preview_three.html +807 -0

airport_building_preview_three.html ADDED Viewed

	@@ -0,0 +1,807 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Procedural 3D City + Airport (UE-style Features)</title>
+  <style>
+    :root { --ui: rgba(255,255,255,.85); --accent:#1a56db; }
+    html, body { margin:0; height:100%; background:#cfe6ff; color:#0b1220; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
+    #app { position:fixed; inset:0; }
+    .ui { position:fixed; top:12px; left:12px; display:flex; flex-direction:column; gap:10px; background:var(--ui); padding:12px 14px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(6px); z-index:10; max-width: 430px; }
+    .ui h1 { margin:0; font-size:14px; opacity:.95; letter-spacing:.5px; font-weight:700; }
+    .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+    .row label { width:160px; font-size:12px; opacity:.9; }
+    .row input[type="range"] { width:180px; }
+    .btn { cursor:pointer; border:1px solid #b9c7e6; background:#eef4ff; padding:8px 10px; border-radius:8px; color:#0b1220; font-size:12px; }
+    .btn:hover { border-color:#90a7d9; }
+    .credit { position:fixed; right:12px; bottom:10px; font-size:12px; opacity:.7; }
+    .legend { font-size:11px; opacity:.8; }
+    .panel { position:fixed; right:12px; top:12px; width:420px; background:var(--ui); padding:10px 12px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(6px); z-index:10; }
+    .panel h2 { margin:0 0 6px; font-size:13px; }
+    .log, .infoBody { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:11px; max-height:200px; overflow:auto; background:#f4f7ff; border:1px solid #b9c7e6; border-radius:8px; padding:8px; color:#0b1220; }
+    .pass { color:#148a3b; }
+    .fail { color:#b00020; }
+    .dashboard { position:fixed; right:12px; top:260px; width:420px; background:var(--ui); padding:10px 12px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(6px); z-index:10; }
+    .dashboard .row { gap:6px; }
+    .dashboard label { width:auto; }
+    .miniwrap { display:flex; gap:10px; align-items:flex-start; }
+    #minimap { width:170px; height:170px; background:#f4f7ff; border:1px solid #b9c7e6; border-radius:8px; }
+    .filters { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; font-size:12px; }
+    .searchbar { display:flex; gap:6px; }
+    .searchbar input { flex:1; padding:6px 8px; background:#f4f7ff; border:1px solid #b9c7e6; border-radius:8px; color:#0b1220; font-size:12px; }
+    .infopanel { position:fixed; right:12px; bottom:12px; width:420px; background:var(--ui); padding:10px 12px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(6px); z-index:10; }
+    .infopanel h3 { margin:0 0 6px; font-size:13px; }
+    .hidden { display:none !important; }
+    .icon { position:absolute; top:6px; right:8px; border:none; background:rgba(0,0,0,.08); color:#0b1220; border-radius:6px; padding:2px 6px; cursor:pointer; font-size:12px; }
+    .icon:hover { background:rgba(0,0,0,.15); }
+    .ui .icon { right:8px; }
+    .panel .icon, .dashboard .icon, .infopanel .icon { right:8px; }
+    .btn.small { padding:4px 8px; font-size:12px; }
+    .dock { position:fixed; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px; align-items:center; background:var(--ui); padding:6px 10px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:11; backdrop-filter: blur(6px); }
+  </style>
+  <!-- Import Map: resolves 'three' & addons to full URLs (fixes module specifier error) -->
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+    }
+  }
+  </script>
+</head>
+<body>
+  <div id="app"></div>
+  <div id="uiPanel" class="ui"><button class="icon x" data-hide="uiPanel" title="Close">✕</button><button class="icon min" data-hide="uiPanel" title="Close">—</button>
+    <h1>Procedural City (3D)</h1>
+    <div class="row"><label># Buildings</label><input id="count" type="range" min="1" max="20" step="1" value="9"><span id="countVal">9</span></div>
+    <div class="row"><label>Max Floors</label><input id="floors" type="range" min="6" max="60" step="2" value="24"><span id="floorsVal">24</span></div>
+    <div class="row"><label>Footprint Variance</label><input id="variance" type="range" min="0" max="1" step="0.01" value="0.5"><span id="varianceVal">0.50</span></div>
+    <div class="row"><label>Cars</label><input id="cars" type="range" min="0" max="50" step="1" value="16"><span id="carsVal">16</span></div>
+    <div class="row"><label>People</label><input id="people" type="range" min="0" max="60" step="1" value="20"><span id="peopleVal">20</span></div>
+    <div class="row"><label>Airport</label><input id="airportOn" type="checkbox" checked></div>
+    <div class="row"><label>Planes</label><input id="planes" type="range" min="0" max="12" step="1" value="4"><span id="planesVal">4</span></div>
+    <div class="row"><label>Streets</label><input id="streetsOn" type="checkbox" checked></div>
+    <div class="row"><label>Night Mode</label><input id="night" type="checkbox"></div>
+    <div class="row"><label>Cinematic Bloom</label><input id="bloom" type="checkbox"></div>
+    <div class="row"><label>Auto Orbit</label><input id="orbit" type="checkbox" checked></div>
+    <!-- UE-like rendering controls -->
+    <div class="row"><label>SSAO (ambient occlusion)</label><input id="ssao" type="checkbox" checked></div>
+    <div class="row"><label>Depth of Field</label><input id="dof" type="checkbox"></div>
+    <div class="row"><label>DOF Focus Distance</label><input id="dofFocus" type="range" min="5" max="150" step="1" value="40"><span id="dofFocusVal">40</span></div>
+    <div class="row"><label>DOF Aperture</label><input id="dofAperture" type="range" min="0" max="0.002" step="0.00005" value="0.00025"><span id="dofApertureVal">0.00025</span></div>
+    <div class="row"><label>Exposure</label><input id="exposure" type="range" min="0.6" max="1.6" step="0.01" value="1.0"><span id="exposureVal">1.00</span></div>
+    <div class="row"><label>FXAA (anti‑aliasing)</label><input id="fxaa" type="checkbox" checked></div>
+    <div class="row"><label>Vignette</label><input id="vignette" type="checkbox"></div>
+    <div class="row"><label>Sun Elevation</label><input id="sunElev" type="range" min="5" max="85" step="1" value="55"><span id="sunElevVal">55°</span></div>
+    <div class="row"><label>Sun Azimuth</label><input id="sunAzi" type="range" min="0" max="360" step="1" value="45"><span id="sunAziVal">45°</span></div>
+    <div class="row"><button class="btn" id="regen">Regenerate (R)</button><button class="btn" id="pause">Pause Build</button><button class="btn" id="runTests">Run Tests</button></div>
+    <div class="legend">Sunlight + UE-style pipeline • Mouse: drag/orbit • wheel: zoom • right-drag: pan • Click objects for details</div>
+  </div>
+  <div id="testsPanel" class="panel"><button class="icon x" data-hide="testsPanel" title="Close">✕</button>
+    <h2>Runtime Tests</h2>
+    <div class="log" id="testLog">Waiting…</div>
+  </div>
+  <div id="dashPanel" class="dashboard"><button class="icon x" data-hide="dashPanel" title="Close">✕</button>
+    <h2>Interactive Dashboard</h2>
+    <div class="searchbar">
+      <input id="search" placeholder="Search e.g. plane:2, car:5, person:3, building:7"/>
+      <button class="btn" id="searchBtn">Find</button>
+    </div>
+    <div class="miniwrap">
+      <canvas id="minimap" width="170" height="170"></canvas>
+      <div class="filters">
+        <label><input type="checkbox" id="fPlanes" checked> Planes</label>
+        <label><input type="checkbox" id="fCars" checked> Cars</label>
+        <label><input type="checkbox" id="fPeople" checked> People</label>
+        <label><input type="checkbox" id="fBuildings" checked> Buildings</label>
+        <label><input type="checkbox" id="fStreets" checked> Streets</label>
+        <label><input type="checkbox" id="fAirport" checked> Airport</label>
+      </div>
+    </div>
+  </div>
+  <div id="infoPanel" class="infopanel"><button class="icon x" data-hide="infoPanel" title="Close">✕</button>
+    <h3>Selected Object</h3>
+    <div class="infoBody" id="info">Click a plane/car/person/building…</div>
+  </div>
+  <div class="credit">Sunlit preview • UE-style: Sky/Env, SSAO, DOF, FXAA, Vignette • Procedural city+airport • Interactive dashboard</div>
+  <!-- Dock before scripts so listeners can bind safely -->
+  <div class="dock" id="dock">
+    <span>Panels:</span>
+    <button class="btn small" data-show="uiPanel">UI</button>
+    <button class="btn small" data-show="testsPanel">Tests</button>
+    <button class="btn small" data-show="dashPanel">Dashboard</button>
+    <button class="btn small" data-show="infoPanel">Info</button>
+    <button class="btn small" id="toggleAll">Hide All (H)</button>
+  </div>
+  <script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    import { Sky } from 'three/addons/objects/Sky.js';
+    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+    import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+    import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
+    import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
+    import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+    import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
+    import { VignetteShader } from 'three/addons/shaders/VignetteShader.js';
+    // --- Core Scene ---
+    const app = document.getElementById('app');
+    const renderer = new THREE.WebGLRenderer({ antialias:true });
+    renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+    renderer.setSize(innerWidth, innerHeight);
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // softer shadows
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.0; // daylight baseline (slider below)
+    app.appendChild(renderer.domElement);
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0xcfe6ff); // clear sky backdrop
+    const camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 5000);
+    camera.position.set(64, 40, 64);
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.target.set(0, 8, 0);
+    // Physically based sky & environment (UE-like)
+    const sky = new Sky();
+    sky.scale.setScalar(10000);
+    scene.add(sky);
+    const skyUniforms = sky.material.uniforms;
+    skyUniforms[ 'turbidity' ].value = 2.0;
+    skyUniforms[ 'rayleigh' ].value = 2.5;
+    skyUniforms[ 'mieCoefficient' ].value = 0.005;
+    skyUniforms[ 'mieDirectionalG' ].value = 0.8;
+    const sunVec = new THREE.Vector3();
+    function setSun(elevDeg, aziDeg){
+      const phi = THREE.MathUtils.degToRad(90 - elevDeg);
+      const theta = THREE.MathUtils.degToRad(aziDeg);
+      sunVec.setFromSphericalCoords(1, phi, theta);
+      sky.material.uniforms['sunPosition'].value.copy(sunVec);
+      sun.position.copy(sunVec.clone().multiplyScalar(200));
+      // Warm sun at low elevation, cooler at high
+      const t = elevDeg/85; // 0..1
+      const hue = 0.1 + (1-t)*0.05; // 0.15 -> 0.1
+      const sat = 0.55 - t*0.25; // more saturated at low sun
+      const light = 0.95 - (1-t)*0.25;
+      sun.color = new THREE.Color().setHSL(hue, sat, light);
+      sun.intensity = 1.2 + t*0.6;
+      hemi.intensity = 0.7 + t*0.3;
+      updateEnvironment();
+    }
+    const pmrem = new THREE.PMREMGenerator(renderer);
+    let envRT = null;
+    function updateEnvironment(){
+      if (envRT) envRT.dispose();
+      envRT = pmrem.fromScene(sky, 0.5);
+      scene.environment = envRT.texture;
+    }
+    // Daytime lights (synced to sky sun)
+    const hemi = new THREE.HemisphereLight(0xffffff, 0xcad7ea, 0.9);
+    scene.add(hemi);
+    const sun = new THREE.DirectionalLight(0xffffff, 1.5);
+    sun.castShadow = true;
+    sun.shadow.mapSize.set(2048,2048);
+    sun.shadow.camera.left = sun.shadow.camera.bottom = -160;
+    sun.shadow.camera.right = sun.shadow.camera.top = 160;
+    scene.add(sun);
+    setSun(55, 45); // initial
+    // Distance fog
+    scene.fog = new THREE.FogExp2(0xdfeffd, 0.002);
+    // Postprocessing chain (UE-style order)
+    const composer = new EffectComposer(renderer);
+    const renderPass = new RenderPass(scene, camera);
+    composer.addPass(renderPass);
+    const ssaoPass = new SSAOPass(scene, camera, innerWidth, innerHeight);
+    ssaoPass.kernelRadius = 13; // stronger occlusion
+    ssaoPass.minDistance = 0.0005; ssaoPass.maxDistance = 0.12;
+    composer.addPass(ssaoPass);
+    const dofPass = new BokehPass(scene, camera, { focus: 40, aperture: 0.00025, maxblur: 0.01 });
+    dofPass.enabled = false;
+    composer.addPass(dofPass);
+    const bloomPass = new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 0.0, 0.7, 0.85); // day off
+    composer.addPass(bloomPass);
+    const fxaaPass = new ShaderPass(FXAAShader);
+    fxaaPass.material.uniforms['resolution'].value.set(1/innerWidth, 1/innerHeight);
+    composer.addPass(fxaaPass);
+    const vignettePass = new ShaderPass(VignetteShader);
+    vignettePass.uniforms[ 'offset' ].value = 1.0;
+    vignettePass.uniforms[ 'darkness' ].value = 1.2;
+    vignettePass.enabled = false;
+    composer.addPass(vignettePass);
+    // Ground (PBR asphalt with env)
+    const groundGeo = new THREE.PlaneGeometry(1200, 1200);
+    const asphaltTex = makeAsphaltTexture();
+    asphaltTex.wrapS = asphaltTex.wrapT = THREE.RepeatWrapping;
+    asphaltTex.repeat.set(60,60);
+    const groundMat = new THREE.MeshStandardMaterial({ color: 0xd5dbe6, metalness:0.05, roughness:0.95, map: asphaltTex, envMapIntensity: 0.3 });
+    const ground = new THREE.Mesh(groundGeo, groundMat);
+    ground.rotation.x = -Math.PI/2;
+    ground.receiveShadow = true;
+    scene.add(ground);
+    // City holders
+    const city = new THREE.Group();
+    const streetLayer = new THREE.Group();
+    const trafficLayer = new THREE.Group();
+    const peopleLayer = new THREE.Group();
+    const airportLayer = new THREE.Group();
+    const planeLayer = new THREE.Group();
+    scene.add(city, streetLayer, trafficLayer, peopleLayer, airportLayer, planeLayer);
+    // ---------- Procedural Textures ----------
+    // Color helpers
+    function hslHex(h, s, l){ return new THREE.Color().setHSL(h, s, l).getHex(); }
+    function pick(arr){ return arr[Math.floor(Math.random()*arr.length)]; }
+    // Diverse facade textures
+    function makeBrickTexture(hue=0.02){
+      const c=document.createElement('canvas'); c.width=256; c.height=256; const x=c.getContext('2d');
+      x.fillStyle='#c7b5a3'; x.fillRect(0,0,256,256);
+      const h = hue*360; // slight hue tint
+      for(let yy=0; yy<16; yy++){
+        for(let xx=0; xx<32; xx++){
+          const off=(yy%2)*4; const w=6, hgt=8; const x0=xx*8 - off; const y0=yy*16 + (Math.random()*2-1);
+          const l=45+Math.random()*15, s=25+Math.random()*20; // varied brick colors
+          x.fillStyle=`hsl(${h}, ${s}%, ${l}%)`; x.fillRect(x0, y0, w, hgt);
+          x.fillStyle='rgba(0,0,0,0.06)'; x.fillRect(x0, y0+hgt-1, w, 1);
+        }
+      }
+      const tex=new THREE.CanvasTexture(c); tex.wrapS=tex.wrapT=THREE.RepeatWrapping; tex.anisotropy=8; return tex;
+    }
+    function makeGlassTexture(hue=0.55){
+      const c=document.createElement('canvas'); c.width=256; c.height=256; const x=c.getContext('2d');
+      const grad=x.createLinearGradient(0,0,0,256); grad.addColorStop(0,`hsla(${hue*360},60%,88%,1)`); grad.addColorStop(1,'#cfe6ff');
+      x.fillStyle=grad; x.fillRect(0,0,256,256);
+      x.strokeStyle='rgba(255,255,255,0.35)'; x.lineWidth=2;
+      for(let i=0;i<256;i+=16){ x.beginPath(); x.moveTo(i,0); x.lineTo(i,256); x.stroke(); }
+      for(let j=0;j<256;j+=24){ x.beginPath(); x.moveTo(0,j); x.lineTo(256,j); x.stroke(); }
+      const tex=new THREE.CanvasTexture(c); tex.wrapS=tex.wrapT=THREE.RepeatWrapping; tex.anisotropy=8; return tex;
+    }
+    function makePaintTexture(hue=0.1){
+      const c=document.createElement('canvas'); c.width=256; c.height=256; const x=c.getContext('2d');
+      x.fillStyle=`hsl(${hue*360}, 55%, 78%)`; x.fillRect(0,0,256,256);
+      // subtle panels
+      x.fillStyle='rgba(255,255,255,0.15)';
+      for(let i=0;i<256;i+=24){ x.fillRect(i,0,2,256); }
+      for(let j=0;j<256;j+=32){ x.fillRect(0,j,256,2); }
+      const tex=new THREE.CanvasTexture(c); tex.wrapS=tex.wrapT=THREE.RepeatWrapping; tex.anisotropy=8; return tex;
+    }
+    function makeWindowMaskTexture(){
+      const c=document.createElement('canvas'); c.width=128; c.height=128; const x=c.getContext('2d');
+      x.clearRect(0,0,128,128);
+      for(let y=6;y<128;y+=10){ for(let x0=6;x0<128;x0+=12){ if(Math.random()>0.55){ x.fillStyle='rgba(255,255,255,0.9)'; x.fillRect(x0, y, 6, 6);} } }
+      const tex=new THREE.CanvasTexture(c); tex.wrapS=tex.wrapT=THREE.RepeatWrapping; tex.anisotropy=4; return tex;
+    }
+    function makeCrosswalkTexture(){
+      const c=document.createElement('canvas'); c.width=256; c.height=256; const x=c.getContext('2d');
+      x.fillStyle='#c9d4e6'; x.fillRect(0,0,256,256);
+      x.fillStyle='rgba(255,255,255,0.95)';
+      for(let i=0;i<256;i+=24){ x.fillRect(i,0,12,256); }
+      return new THREE.CanvasTexture(c);
+    }
+    function makeAsphaltTexture() {
+      const c = document.createElement('canvas'); c.width = 256; c.height = 256; const ctx = c.getContext('2d');
+      ctx.fillStyle = '#e2e7f1'; ctx.fillRect(0,0,256,256);
+      for(let i=0;i<1600;i++){ const a = 70+Math.random()*80; ctx.fillStyle = `rgba(${a},${a},${a},${Math.random()*0.05})`; ctx.fillRect(Math.random()*256, Math.random()*256, 1, 1); }
+      return new THREE.CanvasTexture(c);
+    }
+    function makeLaneTexture() { // road with dashed lines
+      const c = document.createElement('canvas'); c.width = 256; c.height = 256; const ctx = c.getContext('2d');
+      ctx.fillStyle = '#c9d4e6'; ctx.fillRect(0,0,256,256);
+      ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 6; ctx.setLineDash([18,18]);
+      ctx.beginPath(); ctx.moveTo(128,0); ctx.lineTo(128,256); ctx.stroke();
+      return new THREE.CanvasTexture(c);
+    }
+    function makeRunwayTexture() { // runway with centerline + side markings
+      const c = document.createElement('canvas'); c.width = 1024; c.height = 256; const ctx = c.getContext('2d');
+      ctx.fillStyle = '#bac8df'; ctx.fillRect(0,0,1024,256);
+      ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 10; ctx.setLineDash([40,40]);
+      ctx.beginPath(); ctx.moveTo(0,128); ctx.lineTo(1024,128); ctx.stroke();
+      ctx.setLineDash([]); ctx.lineWidth = 6;
+      ctx.beginPath(); ctx.moveTo(0,40); ctx.lineTo(1024,40); ctx.moveTo(0,216); ctx.lineTo(1024,216); ctx.stroke();
+      return new THREE.CanvasTexture(c);
+    }
+    function makeFacadeTexture() { // legacy (kept for fallback)
+      const c = document.createElement('canvas'); c.width = 128; c.height = 128; const ctx = c.getContext('2d');
+      ctx.fillStyle = '#d7e1f2'; ctx.fillRect(0,0,128,128);
+      for (let x=0; x<128; x+=8){ ctx.fillStyle = x%16===0? '#c8d4eb':'#e7edf8'; ctx.fillRect(x,0,2,128); }
+      for (let y = 6; y < 128; y += 10) { for (let x = 6; x < 128; x += 12) { ctx.fillStyle = '#cfd9ec'; ctx.fillRect(x, y, 6, 6); } }
+      const tex = new THREE.CanvasTexture(c);
+      tex.anisotropy = renderer.capabilities.getMaxAnisotropy();
+      tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+      return tex;
+    }
+    function buildingMaterial(style='paint', hue=Math.random()){
+      let map; let metal=0.2, rough=0.85, emissive=0x000000, emissiveMap=null, envI=0.6;
+      if(style==='brick'){ map = makeBrickTexture(hue); metal=0.05; rough=0.95; envI=0.25; }
+      else if(style==='glass'){ map = makeGlassTexture(hue); metal=0.75; rough=0.15; envI=1.2; }
+      else { map = makePaintTexture(hue); metal=0.25; rough=0.6; envI=0.6; }
+      // window mask for night glow
+      emissiveMap = makeWindowMaskTexture();
+      return new THREE.MeshStandardMaterial({ color: hslHex(hue, 0.35, style==='glass'?0.8:0.65), metalness:metal, roughness:rough, map, envMapIntensity: envI, emissive: emissive, emissiveMap, emissiveIntensity: 0.0 });
+    }
+    // ---------- UI ----------
+    const ui = {
+      count: document.getElementById('count'), countVal: document.getElementById('countVal'),
+      floors: document.getElementById('floors'), floorsVal: document.getElementById('floorsVal'),
+      variance: document.getElementById('variance'), varianceVal: document.getElementById('varianceVal'),
+      cars: document.getElementById('cars'), carsVal: document.getElementById('carsVal'),
+      people: document.getElementById('people'), peopleVal: document.getElementById('peopleVal'),
+      airportOn: document.getElementById('airportOn'), planes: document.getElementById('planes'), planesVal: document.getElementById('planesVal'),
+      streetsOn: document.getElementById('streetsOn'), night: document.getElementById('night'), bloom: document.getElementById('bloom'),
+      orbit: document.getElementById('orbit'), regen: document.getElementById('regen'), pause: document.getElementById('pause'),
+      runTests: document.getElementById('runTests'), testLog: document.getElementById('testLog'),
+      // dashboard
+      minimap: document.getElementById('minimap'),
+      fPlanes: document.getElementById('fPlanes'), fCars: document.getElementById('fCars'), fPeople: document.getElementById('fPeople'), fBuildings: document.getElementById('fBuildings'), fStreets: document.getElementById('fStreets'), fAirport: document.getElementById('fAirport'),
+      search: document.getElementById('search'), searchBtn: document.getElementById('searchBtn'),
+      info: document.getElementById('info'),
+      // UE-like controls
+      ssao: document.getElementById('ssao'), dof: document.getElementById('dof'), dofFocus: document.getElementById('dofFocus'), dofAperture: document.getElementById('dofAperture'),
+      dofFocusVal: document.getElementById('dofFocusVal'), dofApertureVal: document.getElementById('dofApertureVal'),
+      fxaa: document.getElementById('fxaa'), vignette: document.getElementById('vignette'),
+      exposure: document.getElementById('exposure'), exposureVal: document.getElementById('exposureVal'),
+      sunElev: document.getElementById('sunElev'), sunElevVal: document.getElementById('sunElevVal'),
+      sunAzi: document.getElementById('sunAzi'), sunAziVal: document.getElementById('sunAziVal')
+    };
+    function syncUI(){
+      ui.countVal.textContent = ui.count.value;
+      ui.floorsVal.textContent = ui.floors.value;
+      ui.varianceVal.textContent = (+ui.variance.value).toFixed(2);
+      ui.carsVal.textContent = ui.cars.value;
+      ui.peopleVal.textContent = ui.people.value;
+      ui.planesVal.textContent = ui.planes.value;
+      ui.dofFocusVal.textContent = ui.dofFocus.value;
+      ui.dofApertureVal.textContent = (+ui.dofAperture.value).toFixed(5);
+      ui.exposureVal.textContent = (+ui.exposure.value).toFixed(2);
+      ui.sunElevVal.textContent = ui.sunElev.value + '°';
+      ui.sunAziVal.textContent = ui.sunAzi.value + '°';
+    }
+    syncUI();
+    ['input','change'].forEach(ev => {
+      [ui.count, ui.floors, ui.variance, ui.cars, ui.people, ui.planes].forEach(el=> el.addEventListener(ev, syncUI));
+      [ui.fPlanes, ui.fCars, ui.fPeople, ui.fBuildings, ui.fStreets, ui.fAirport].forEach(el=> el.addEventListener(ev, updateFilters));
+      [ui.dofFocus, ui.dofAperture, ui.exposure, ui.sunElev, ui.sunAzi].forEach(el=> el.addEventListener(ev, ()=>{ syncUI(); applyUEControls(); }));
+      [ui.ssao, ui.dof, ui.fxaa, ui.vignette, ui.bloom].forEach(el=> el && el.addEventListener('change', applyUEControls));
+    });
+    // ---------- Generators ----------
+    const rng = (seed => () => (seed = (seed*9301 + 49297) % 233280) / 233280)(Math.random()*1e9);
+    const BUILDINGS = [];
+    function clearGroup(g){ while(g.children.length){ const ch=g.children.pop(); ch.traverse(o=>{ if(o.geometry) o.geometry.dispose(); if(o.material){ if(Array.isArray(o.material)) o.material.forEach(m=>m.map?.dispose()); o.material.map?.dispose(); o.material.dispose(); }}); } }
+    function clearAll(){ BUILDINGS.length=0; clearGroup(city); clearGroup(streetLayer); clearGroup(trafficLayer); clearGroup(peopleLayer); clearGroup(airportLayer); clearGroup(planeLayer); idCounters = { building:0, car:0, person:0, plane:0 }; idMap.clear(); }
+    function createBuilding(x, z, maxFloors, variance) {
+      const group = new THREE.Group(); group.position.set(x, 0, z);
+      const baseW = 2 + rng()*3; const baseD = 2 + rng()*3; const levels = 4 + Math.floor(rng()*maxFloors);
+      const steps = 1 + Math.floor(rng()*3);
+      const stepHeights = []; let remaining = levels;
+      for (let i=0;i<steps;i++) { const seg = i===steps-1 ? remaining : 1 + Math.floor(rng()*Math.max(1, remaining-1)); stepHeights.push(seg); remaining -= seg; }
+      let currentY = 0; let w = baseW, d = baseD;
+      const style = pick(['brick','glass','paint','paint','brick']);
+      const hue = Math.random();
+      const mat = buildingMaterial(style, hue);
+      const floorsMeshes = [];
+      for (let s=0; s<steps; s++) {
+        if (s>0) { w *= 0.9 + (rng()-0.5)*variance*0.4; d *= 0.9 + (rng()-0.5)*variance*0.4; }
+        const h = stepHeights[s] * 0.6;
+        const geo = new THREE.BoxGeometry(w, h, d);
+        const mesh = new THREE.Mesh(geo, mat.clone());
+        mesh.castShadow = true; mesh.receiveShadow = true;
+        mesh.position.y = currentY + h/2; mesh.userData._targetY = mesh.position.y; mesh.position.y = 0;
+        group.add(mesh); floorsMeshes.push(mesh); currentY += h;
+      }
+      // Rooftop detail
+      if (rng() > 0.4) {
+        if (rng() > 0.5) {
+          const dish = new THREE.Mesh(new THREE.ConeGeometry(0.4, 0.6, 16), new THREE.MeshStandardMaterial({color:0x7ea8ff, metalness:.6, roughness:.3, envMapIntensity:.6}));
+          dish.position.set( (rng()-.5)*w*0.5, currentY + 0.4, (rng()-.5)*d*0.5 ); dish.rotation.x = -Math.PI/2 * (0.6 + rng()*0.4); dish.castShadow = true; group.add(dish);
+        } else {
+          const tank = new THREE.Mesh(new THREE.CylinderGeometry(0.4,0.4,0.6,20), new THREE.MeshStandardMaterial({color:0x8aa1bf, metalness:.4, roughness:.5, envMapIntensity:.6}));
+          tank.position.set( (rng()-.5)*w*0.5, currentY + 0.35, (rng()-.5)*d*0.5 ); tank.castShadow = true; group.add(tank);
+        }
+      }
+      const id = nextId('building');
+      group.userData = { kind:'building', id, style, hue };
+      BUILDINGS.push({ group, floorsMeshes, progress:0 });
+      return group;
+    }
+    function generateStreets(grid, spacing){
+      const laneTex = makeLaneTexture(); laneTex.wrapS = laneTex.wrapT = THREE.RepeatWrapping; laneTex.repeat.set(1, 10);
+      const roadMat = new THREE.MeshStandardMaterial({ map: laneTex, roughness:0.9, metalness:0.05, envMapIntensity:0.2 });
+      for(let i=-(grid-1)/2;i<=(grid-1)/2;i++){
+        const roadZ = new THREE.Mesh(new THREE.PlaneGeometry(3.2, grid*spacing + 10), roadMat);
+        roadZ.rotation.x = -Math.PI/2; roadZ.position.set(i*spacing, 0.01, 0);
+        roadZ.receiveShadow = true; streetLayer.add(roadZ);
+        const roadX = new THREE.Mesh(new THREE.PlaneGeometry(grid*spacing + 10, 3.2), roadMat);
+        roadX.rotation.x = -Math.PI/2; roadX.position.set(0, 0.01, i*spacing);
+        roadX.receiveShadow = true; streetLayer.add(roadX);
+      }
+      // Add crosswalks at a few intersections for color/realism
+      const cwTex = makeCrosswalkTexture(); cwTex.wrapS=cwTex.wrapT=THREE.RepeatWrapping; cwTex.repeat.set(0.3,0.3);
+      const cwMat = new THREE.MeshStandardMaterial({ map:cwTex, transparent:true, opacity:0.85, roughness:0.9 });
+      for(let gx=-1; gx<=1; gx++){
+        for(let gz=-1; gz<=1; gz++){
+          if(Math.random()>0.6){
+            const m=new THREE.Mesh(new THREE.PlaneGeometry(6,6), cwMat);
+            m.rotation.x=-Math.PI/2; m.position.set(gx*spacing, 0.022, gz*spacing); m.receiveShadow=true; streetLayer.add(m);
+          }
+        }
+      }
+    }
+    // Airport (daylight look)
+    function generateAirport(grid, spacing){
+      const offsetX = grid*spacing*0.8;
+      const offsetZ = -grid*spacing*1.2;
+      const rwTex = makeRunwayTexture(); rwTex.wrapS = rwTex.wrapT = THREE.RepeatWrapping; rwTex.repeat.set(1, 2);
+      const runway = new THREE.Mesh(new THREE.PlaneGeometry(400, 40), new THREE.MeshStandardMaterial({ map: rwTex, roughness:0.9, envMapIntensity:0.2 }));
+      runway.rotation.x = -Math.PI/2; runway.position.set(offsetX, 0.02, offsetZ);
+      runway.receiveShadow = true; airportLayer.add(runway);
+      const taxi = new THREE.Mesh(new THREE.PlaneGeometry(400, 16), new THREE.MeshStandardMaterial({ color:0xb7c6de, roughness:0.92, envMapIntensity:0.2 }));
+      taxi.rotation.x = -Math.PI/2; taxi.position.set(offsetX, 0.021, offsetZ+36);
+      taxi.receiveShadow = true; airportLayer.add(taxi);
+      const termMat = new THREE.MeshStandardMaterial({ color:0xbcd6f5, metalness:0.3, roughness:0.35, envMapIntensity:0.6 });
+      const term = new THREE.Mesh(new THREE.BoxGeometry(60, 10, 24), termMat);
+      term.position.set(offsetX-140, 5, offsetZ+48); term.castShadow=true; term.receiveShadow=true; airportLayer.add(term);
+      for(let i=0;i<4;i++){
+        const jet = new THREE.Mesh(new THREE.BoxGeometry(6, 3, 12), new THREE.MeshStandardMaterial({ color:0x9fc3ff, metalness:.4, roughness:.35, envMapIntensity:.6 }));
+        jet.position.set(offsetX-110 + i*16, 2.2, offsetZ+40); jet.castShadow=true; airportLayer.add(jet);
+      }
+      const tower = new THREE.Mesh(new THREE.CylinderGeometry(1.6,1.6,24,12), new THREE.MeshStandardMaterial({ color:0xa7b6cc, metalness:.3, roughness:.6, envMapIntensity:.5 }));
+      tower.position.set(offsetX+170, 12, offsetZ+50); tower.castShadow=true; airportLayer.add(tower);
+      airportLayer.userData = { kind:'airport' };
+      return { offsetX, offsetZ };
+    }
+    // Simple cars
+    const carGeo = new THREE.BoxGeometry(0.9, 0.5, 1.6);
+    function randomCarMat(){ return new THREE.MeshStandardMaterial({ color: new THREE.Color().setHSL(Math.random(), 0.65, 0.55).getHex(), metalness:0.65, roughness:0.35, envMapIntensity:1.0 }); }
+    function spawnCars(count, grid, spacing){
+      trafficLayer.clear();
+      for(let i=0;i<count;i++){
+        const mesh = new THREE.Mesh(carGeo, randomCarMat());
+        mesh.castShadow = true; mesh.receiveShadow = true;
+        const laneIndex = Math.floor(Math.random()*grid) - (grid-1)/2;
+        const vertical = Math.random() > 0.5;
+        const id = nextId('car');
+        mesh.userData = { kind:'car', id, vertical, laneIndex, t: Math.random()*Math.PI*2, speed: 6 + Math.random()*8, offset: (Math.random()-.5)*1.0 };
+        idMap.set(`car:${id}`, mesh);
+        trafficLayer.add(mesh);
+      }
+    }
+    // People as capsules
+    const personGeo = new THREE.CapsuleGeometry(0.15, 0.4, 4, 8);
+    function spawnPeople(count, grid, spacing){
+      peopleLayer.clear();
+      for(let i=0;i<count;i++){
+        const mat = new THREE.MeshStandardMaterial({ color: new THREE.Color().setHSL(Math.random(),0.45,0.55).getHex(), roughness:0.6, metalness:0.1, envMapIntensity:0.3 });
+        const p = new THREE.Mesh(personGeo, mat);
+        p.castShadow = true; p.receiveShadow = true;
+        const side = Math.random() > 0.5 ? 1 : -1;
+        const laneIndex = Math.floor(Math.random()*grid) - (grid-1)/2;
+        const vertical = Math.random() > 0.5;
+        const id = nextId('person');
+        p.userData = { kind:'person', id, vertical, laneIndex, t: Math.random()*Math.PI*2, speed: 1 + Math.random()*1.5, side };
+        idMap.set(`person:${id}`, p);
+        peopleLayer.add(p);
+      }
+    }
+    // Planes (simple)
+    const wingGeo = new THREE.BoxGeometry(6, 0.2, 1.2);
+    const bodyGeo = new THREE.CylinderGeometry(0.6, 0.8, 8, 12);
+    function makePlaneMesh(){
+      const g = new THREE.Group();
+      const body = new THREE.Mesh(bodyGeo, new THREE.MeshStandardMaterial({ color:0xf4f7ff, metalness:.5, roughness:.35, envMapIntensity:0.8 }));
+      body.rotation.z = Math.PI/2; body.castShadow = true; g.add(body);
+      const wing = new THREE.Mesh(wingGeo, new THREE.MeshStandardMaterial({ color:0x9ec3ff, metalness:.4, roughness:.35, envMapIntensity:0.8 }));
+      wing.position.set(0,0,0); g.add(wing);
+      const tail = new THREE.Mesh(new THREE.BoxGeometry(2, 1.2, 0.2), new THREE.MeshStandardMaterial({ color:0x9ec3ff, metalness:.4, roughness:.35, envMapIntensity:0.8 }));
+      tail.position.set(-3,0,0); g.add(tail);
+      return g;
+    }
+    function spawnPlanes(count, airport){
+      planeLayer.clear();
+      if (!airport) return;
+      for(let i=0;i<count;i++){
+        const plane = makePlaneMesh();
+        const t0 = Math.random()*Math.PI*2;
+        const id = nextId('plane');
+        plane.userData = { kind:'plane', id, t: t0, phase: Math.random(), speed: 0.25 + Math.random()*0.35, ox: airport.offsetX, oz: airport.offsetZ };
+        plane.position.set(airport.offsetX-180 + Math.random()*360, 1.5, airport.offsetZ+ (Math.random()<0.5?-6:6));
+        plane.castShadow = true; plane.receiveShadow = true;
+        idMap.set(`plane:${id}`, plane);
+        planeLayer.add(plane);
+      }
+    }
+    function generateCity(){
+      clearAll();
+      const N = +ui.count.value; const maxFloors = +ui.floors.value; const variance = +ui.variance.value;
+      const spacing = 8; const grid = Math.ceil(Math.sqrt(N));
+      let placed = 0;
+      for (let gx=0; gx<grid && placed < N; gx++) {
+        for (let gz=0; gz<grid && placed < N; gz++) {
+          const jitterX = (rng()-.5)*2; const jitterZ = (rng()-.5)*2;
+          const x = (gx - (grid-1)/2) * spacing + jitterX;
+          const z = (gz - (grid-1)/2) * spacing + jitterZ;
+          const b = createBuilding(x, z, maxFloors, variance);
+          city.add(b); placed++;
+        }
+      }
+      if (ui.streetsOn.checked) generateStreets(grid, spacing);
+      const airport = ui.airportOn.checked ? generateAirport(grid, spacing) : null;
+      spawnCars(+ui.cars.value, grid, spacing);
+      spawnPeople(+ui.people.value, grid, spacing);
+      spawnPlanes(+ui.planes.value, airport);
+      updateFilters();
+    }
+    // Build animation state
+    let paused = false; function setPaused(v){ paused = v; ui.pause.textContent = v ? 'Resume Build' : 'Pause Build'; }
+    setPaused(false);
+    // ---- Interaction: filters / search / picking ----
+    function updateFilters(){
+      planeLayer.visible = ui.fPlanes.checked;
+      trafficLayer.visible = ui.fCars.checked;
+      peopleLayer.visible = ui.fPeople.checked;
+      city.visible = ui.fBuildings.checked;
+      streetLayer.visible = ui.fStreets.checked;
+      airportLayer.visible = ui.fAirport.checked;
+    }
+    const raycaster = new THREE.Raycaster();
+    const mouse = new THREE.Vector2();
+    renderer.domElement.addEventListener('click', (e)=>{
+      const rect = renderer.domElement.getBoundingClientRect();
+      mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+      mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+      raycaster.setFromCamera(mouse, camera);
+      const targets = [ ...planeLayer.children, ...trafficLayer.children, ...peopleLayer.children ];
+      city.children.forEach(g=> g.traverse(o=>{ if (o.isMesh) targets.push(o); }));
+      const hits = raycaster.intersectObjects(targets, true);
+      if (hits.length){
+        const obj = findRoot(hits[0].object);
+        showInfo(obj);
+      }
+    });
+    function findRoot(o){
+      while(o && !o.userData?.kind && o.parent) o = o.parent;
+      return o;
+    }
+    let idCounters = { building:0, car:0, person:0, plane:0 };
+    const idMap = new Map();
+    function nextId(kind){ idCounters[kind]++; return idCounters[kind]; }
+    ui.searchBtn.addEventListener('click', ()=> searchAndFocus(ui.search.value.trim()));
+    ui.search.addEventListener('keydown', (e)=>{ if(e.key==='Enter') searchAndFocus(ui.search.value.trim()); });
+    function searchAndFocus(q){
+      const m = q.match(/^(plane|car|person|building):\s*(\d+)$/i);
+      if(!m){ ui.info.textContent = 'Use format kind:id e.g. plane:2'; return; }
+      const key = `${m[1].toLowerCase()}:${+m[2]}`;
+      const target = idMap.get(key);
+      if(!target){ ui.info.textContent = `Not found: ${key}`; return; }
+      showInfo(target);
+      const pos = new THREE.Vector3(); target.getWorldPosition(pos);
+      controls.target.copy(pos);
+      camera.position.lerp(pos.clone().add(new THREE.Vector3(12,8,12)), 0.5);
+    }
+    function showInfo(obj){
+      if(!obj) return;
+      const k = obj.userData?.kind || 'mesh';
+      const id = obj.userData?.id ?? '—';
+      const pos = new THREE.Vector3(); obj.getWorldPosition(pos);
+      let text = `Kind: ${k}\nID: ${id}\nPosition: ${pos.x.toFixed(2)}, ${pos.y.toFixed(2)}, ${pos.z.toFixed(2)}`;
+      if(k==='plane'){ const d = obj.userData; text += `\nSpeed: ${(d.speed*100).toFixed(1)} kn (sim)\nPhase: ${d.t.toFixed(2)}`; }
+      if(k==='car'){ const d = obj.userData; text += `\nSpeed: ${(d.speed).toFixed(1)} m/s\nVertical lane: ${d.vertical}`; }
+      if(k==='person'){ const d = obj.userData; text += `\nWalk speed: ${d.speed.toFixed(2)} m/s`; }
+      if(k==='building'){ text += `\nFloors: ${obj.children?.length || 0}`; }
+      ui.info.textContent = text;
+    }
+    // Apply UE-like control changes
+    function applyUEControls(){
+      // post-process toggles
+      ssaoPass.enabled = ui.ssao.checked;
+      dofPass.enabled = ui.dof.checked;
+      vignettePass.enabled = ui.vignette.checked;
+      bloomPass.strength = (ui.bloom.checked ? (ui.night.checked ? 0.8 : 0.15) : 0);
+      fxaaPass.enabled = ui.fxaa.checked;
+      // dof params
+      dofPass.materialBokeh.uniforms[ 'focus' ].value = +ui.dofFocus.value;
+      dofPass.materialBokeh.uniforms[ 'aperture' ].value = +ui.dofAperture.value;
+      // exposure
+      renderer.toneMappingExposure = +ui.exposure.value;
+      // sky / sun
+      setSun(+ui.sunElev.value, +ui.sunAzi.value);
+    }
+    // UI events
+    document.getElementById('regen').addEventListener('click', generateCity);
+    document.getElementById('pause').addEventListener('click', () => setPaused(!paused));
+    document.getElementById('runTests').addEventListener('click', runTests);
+    document.getElementById('orbit').addEventListener('change', ()=>{});
+    document.getElementById('night').addEventListener('change', ()=>{
+      const isNight = ui.night.checked;
+      scene.background.set(isNight?0x070a12:0xcfe6ff);
+      scene.fog.color.set(isNight?0x070a12:0xdfeffd);
+      hemi.intensity = isNight?0.6:0.9;
+      renderer.toneMappingExposure = isNight?1.25: +ui.exposure.value;
+      updateNightMaterials(isNight);
+      applyUEControls();
+    });
+    function updateNightMaterials(isNight){
+      city.traverse(o=>{
+        if(o.isMesh && o.material){
+          if(isNight){ o.material.emissiveIntensity = (o.material.emissiveMap? (0.6+Math.random()*0.6):0.0); }
+          else { o.material.emissiveIntensity = 0.0; }
+          o.material.needsUpdate = true;
+        }
+      });
+    }
+    document.getElementById('bloom').addEventListener('change', applyUEControls);
+    document.getElementById('ssao').addEventListener('change', applyUEControls);
+    document.getElementById('dof').addEventListener('change', applyUEControls);
+    document.getElementById('fxaa').addEventListener('change', applyUEControls);
+    document.getElementById('vignette').addEventListener('change', applyUEControls);
+    window.addEventListener('keydown', (e)=>{ if (e.key.toLowerCase()==='r') generateCity(); if (e.key.toLowerCase()==='p') setPaused(!paused); });
+    // Initial gen & apply
+    generateCity();
+    applyUEControls();
+    // Resize
+    addEventListener('resize', ()=>{
+      camera.aspect = innerWidth/innerHeight; camera.updateProjectionMatrix();
+      renderer.setSize(innerWidth, innerHeight); composer.setSize(innerWidth, innerHeight);
+      bloomPass.setSize(innerWidth, innerHeight);
+      ssaoPass.setSize(innerWidth, innerHeight);
+      fxaaPass.material.uniforms['resolution'].value.set(1/innerWidth, 1/innerHeight);
+    });
+    // ---- Minimap ----
+    const mm = ui.minimap.getContext('2d');
+    function drawMinimap(){
+      const w = ui.minimap.width, h = ui.minimap.height;
+      mm.clearRect(0,0,w,h);
+      mm.fillStyle = '#f4f7ff'; mm.fillRect(0,0,w,h);
+      mm.strokeStyle = '#90a7d9'; mm.strokeRect(0,0,w,h);
+      const scale = 0.4; const cx = w/2, cz = h/2;
+      function p(x,z){ return [ cx + x*scale, cz + z*scale ]; }
+      if (planeLayer.visible){ mm.fillStyle = '#1a56db'; planeLayer.children.forEach(o=>{ const v=new THREE.Vector3(); o.getWorldPosition(v); const [x,z]=p(v.x,v.z); mm.fillRect(x-2,z-2,4,4); }); }
+      if (trafficLayer.visible){ mm.fillStyle = '#148a3b'; trafficLayer.children.forEach(o=>{ const v=new THREE.Vector3(); o.getWorldPosition(v); const [x,z]=p(v.x,v.z); mm.fillRect(x-2,z-2,4,4); }); }
+      if (peopleLayer.visible){ mm.fillStyle = '#c77d00'; peopleLayer.children.forEach(o=>{ const v=new THREE.Vector3(); o.getWorldPosition(v); const [x,z]=p(v.x,v.z); mm.fillRect(x-1,z-1,2,2); }); }
+      if (airportLayer.visible){ mm.strokeStyle = '#1a56db'; mm.beginPath(); mm.moveTo(p(80,-96)[0], p(80,-96)[1]); mm.lineTo(p(280,-96)[0], p(280,-96)[1]); mm.stroke(); }
+    }
+    // Animate
+    let t = 0; function animate(){ requestAnimationFrame(animate); t += 0.016;
+      if (ui.orbit.checked) { const r = 72; const speed = 0.07; camera.position.x = Math.cos(t*speed)*r; camera.position.z = Math.sin(t*speed)*r; camera.lookAt(controls.target); } else { controls.update(); }
+      if (!paused){ for(const b of BUILDINGS){ b.progress = Math.min(1, b.progress + 0.01 + Math.random()*0.01); const eased = b.progress < .5 ? 2*b.progress*b.progress : 1 - Math.pow(-2*b.progress+2, 2)/2; const n=b.floorsMeshes.length; const reveal=Math.floor(eased*n); for(let i=0;i<n;i++){ const m=b.floorsMeshes[i]; const targetY=m.userData._targetY; if(i<reveal){ m.position.y += (targetY - m.position.y)*0.2; } else if(i===reveal){ const phase = (eased*n)-reveal; m.position.y = targetY*phase; } else { m.position.y = 0; } } } }
+      const roadLen = 120; trafficLayer.children.forEach(car=>{ const d = car.userData; const L = roadLen; d.t = (d.t + d.speed*0.016/L) % (Math.PI*2); if (d.vertical) { car.position.set(d.laneIndex*8 + d.offset, 0.3, Math.sin(d.t)*L/2); car.rotation.y = d.t>Math.PI?0:Math.PI; } else { car.position.set(Math.sin(d.t)*L/2, 0.3, d.laneIndex*8 + d.offset); car.rotation.y = d.t>Math.PI?Math.PI/2:-Math.PI/2; } });
+      peopleLayer.children.forEach(p=>{ const d=p.userData; const L=60; d.t=(d.t + d.speed*0.016/L)%(Math.PI*2); if(d.vertical){ p.position.set(d.laneIndex*8 + 2.4*d.side, 0.55, Math.sin(d.t)*L/2); } else { p.position.set(Math.sin(d.t)*L/2, 0.55, d.laneIndex*8 + 2.4*d.side); } p.rotation.y += 0.02; });
+      planeLayer.children.forEach(plane=>{ const d = plane.userData; d.t = (d.t + d.speed*0.016) % (Math.PI*2); const phase = d.t; const ox = d.ox, oz = d.oz; const runwayX = ox - 180 + (phase/Math.PI*2)*360; if (phase < Math.PI*0.25) { plane.position.set(runwayX, 1.5, oz+16); plane.rotation.y = 0; plane.rotation.x = 0; } else if (phase < Math.PI*0.5) { const k = (phase - Math.PI*0.25)/(Math.PI*0.25); plane.position.set(runwayX, 1.5 + k*6, oz+10); plane.rotation.x = -0.25*k; plane.rotation.y = 0; } else if (phase < Math.PI*1.3) { const k = (phase - Math.PI*0.5)/(Math.PI*0.8); plane.position.set(ox-180 + 360 + k*120, 7.5 + Math.sin(k*Math.PI)*40, oz+10 - k*80); plane.rotation.x = -0.25 + 0.15*Math.sin(k*Math.PI*0.7); plane.rotation.y = 0.2; } else { const k = (phase - Math.PI*1.3)/(Math.PI*0.7); plane.position.set(ox+60 - k*300, 20 - Math.min(19.5, k*22), oz+10 + k*6); plane.rotation.x = -0.1 + 0.1*k; plane.rotation.y = Math.PI; } });
+      city.traverse(obj=>{ if(obj.isMesh && obj.material && obj.material.map){ const tex=obj.material.map; tex.offset.x = (tex.offset.x + 0.00025) % 1; } });
+      composer.render();
+      drawMinimap();
+    } animate();
+    // -----------------------------
+    // Tests (kept + added)
+    // -----------------------------
+    function log(msg, ok=true){ const div = document.createElement('div'); div.className = ok ? 'pass' : 'fail'; div.textContent = (ok ? '✔ ' : '✖ ') + msg; ui.testLog.appendChild(div); ui.testLog.scrollTop = ui.testLog.scrollHeight; console[(ok?'log':'error')](msg); }
+    function resetLog(){ ui.testLog.textContent=''; }
+    function runTests(){ resetLog(); try{
+      // Existing tests (unchanged)
+      log('Scene created', !!scene);
+      log('City group exists', city instanceof THREE.Group);
+      const want = +ui.count.value; generateCity(); log(`Generated BUILDINGS == slider (${want})`, BUILDINGS.length === want);
+      let allFloors = true, mapsOK = true; for (const b of BUILDINGS){ if(!b.floorsMeshes || b.floorsMeshes.length===0) allFloors=false; for(const m of b.floorsMeshes){ if(!m.material || !m.material.map) mapsOK=false; } }
+      log('Each building has at least one floor', allFloors);
+      log('Window material maps attached', mapsOK);
+      const before = ui.pause.textContent; ui.pause.click(); const toggled = ui.pause.textContent !== before; ui.pause.click(); log('Pause/Resume button toggles label', toggled);
+      log('Orbit checkbox present', ui.orbit instanceof HTMLInputElement);
+      // Airport tests
+      ui.airportOn.checked = true; generateCity();
+      log('Airport layer has content when enabled', airportLayer.children.length>0);
+      ui.planes.value = 3; syncUI(); generateCity();
+      log('Planes spawned > 0 when enabled', planeLayer.children.length>0);
+      // Post FX tests
+      ui.ssao.checked = true; applyUEControls(); log('SSAO enabled', ssaoPass.enabled);
+      ui.dof.checked = true; applyUEControls(); log('DOF enabled', dofPass.enabled);
+      ui.fxaa.checked = true; applyUEControls(); log('FXAA enabled', fxaaPass.enabled);
+      ui.vignette.checked = true; applyUEControls(); log('Vignette enabled', vignettePass.enabled);
+      // New tests we add now
+      const mat = buildingMaterial('brick', 0.1);
+      log('buildingMaterial returns MeshStandardMaterial', mat && mat.isMeshStandardMaterial === true);
+      const streetsBefore = streetLayer.children.length; generateStreets(3, 8); const streetsAfter = streetLayer.children.length; log('generateStreets adds meshes', streetsAfter > streetsBefore);
+      log('Dock element exists', !!document.getElementById('dock'));
+    } catch(e){ log('Tests crashed: '+e.message, false); } }
+    runTests();
+    // --- Panel show/hide logic ---
+    const dock = document.getElementById('dock');
+    if (dock) {
+      document.querySelectorAll('[data-hide]').forEach(btn=>{
+        btn.addEventListener('click', ()=>{
+          const id = btn.getAttribute('data-hide');
+          document.getElementById(id)?.classList.add('hidden');
+        });
+      });
+      dock.querySelectorAll('[data-show]').forEach(btn=>{
+        btn.addEventListener('click', ()=>{
+          const id = btn.getAttribute('data-show');
+          document.getElementById(id)?.classList.remove('hidden');
+        });
+      });
+      let allHidden = false;
+      function setAllHidden(v){
+        allHidden = v;
+        ['uiPanel','testsPanel','dashPanel','infoPanel'].forEach(id=>{
+          const el = document.getElementById(id);
+          if (!el) return;
+          if (v) el.classList.add('hidden'); else el.classList.remove('hidden');
+        });
+        document.getElementById('toggleAll').textContent = (v? 'Show All (H)' : 'Hide All (H)');
+      }
+      document.getElementById('toggleAll').addEventListener('click', ()=> setAllHidden(!allHidden));
+      window.addEventListener('keydown', (e)=>{
+        if (e.key.toLowerCase()==='h') setAllHidden(!allHidden);
+        if (e.key==='1') document.getElementById('uiPanel')?.classList.toggle('hidden');
+        if (e.key==='2') document.getElementById('testsPanel')?.classList.toggle('hidden');
+        if (e.key==='3') document.getElementById('dashPanel')?.classList.toggle('hidden');
+        if (e.key==='4') document.getElementById('infoPanel')?.classList.toggle('hidden');
+      });
+    } else {
+      console.warn('Dock element not found; panel toggles disabled');
+    }
+  </script>
+  <script>
+    if (!('importMap' in document.createElement('script'))) {
+      const el = document.getElementById('testLog'); if (el) { const warn = document.createElement('div'); warn.className = 'fail'; warn.textContent = 'Your browser may not support import maps. Please use a modern Chromium/Firefox/Safari.'; el.appendChild(warn); }
+    }
+  </script>
+</body>
+</html>