GPT-5.2：从“会聊”升级到“能交付”

GPT-5.2 有没有吹，就看大家后面的实测了。反正 Sam 毫不掩饰夸：它是目前世界上最智能的通用模型，尤其擅长处理现实世界的知识工作任务。

OpenAI 这次发布 GPT-5.2^[1]，核心诉求很直接：不追求“更会聊天”，而是更像能交付成果的同事，面向专业知识工作与长时运行的代理（agentic）任务。它重点强化的是产出型能力：表格、演示、代码、视觉理解、长上下文与工具链流程——也就是那些最容易卡在“最后一公里”的活。

官方叙事可以压缩成一句：GPT-5.2 更擅长把复杂任务从头做到尾，减少中途断链。为了证明这一点，它把重点放在 GDPval^[2] 上：一个更贴近真实职场交付物的评测，覆盖 44 个职业，要求模型交付可直接使用的产物（artifact），比如销售演示、会计表格、排班表、流程图甚至短视频，而不是只给“看起来像正确答案”的文字。

📌 GDPval

GDPval（Gross Domestic Product value benchmark）是 Tejal Patwardhan 等人提出的评测基准，用来衡量模型在真实、具经济价值任务上的交付能力。它覆盖美国劳工统计局（BLS）的工作活动，横跨 44 个职业与对美国 GDP 贡献最大的 9 个行业部门，任务来自平均从业 14 年的行业专家代表性工作，核心评价维度是“可交付成果质量”。论文还指出，提高推理强度（reasoning effort）、提供更多任务上下文（task context）与更强的脚手架（scaffolding）能提升表现，并开源 220 个任务的黄金子集（gdpval datasets^[3]）及公开自动评分服务。

在 GDPval 上，GPT-5.2 的说法很“硬”：GPT-5.2 Thinking 被描述为首次达到人类专家水位，在与行业专业人士的对比里有 70.9% 的条目“赢或打平”，Pro 更高为 74.1%。它还给出一笔“经济账”：在历史口径下，完成同类任务的速度可达专家 11 倍以上、成本不到 1%，并强调这更适合“人工监督+模型出活”的协作方式（实际速度在 ChatGPT 中可能波动）。

额，blog 中还有大量基准与分项指标，这里就不截图了（我可能对测评有点去魅了，具体还是看实测表现吧）。在价格方面，也是略有提升。

特点

GPT-5.2 知识截止日期为 2025 年 8 月 31 日。这一点意义重大——GPT 5.1 和 5 的截止日期都是 2024 年 9 月 30 日，而 GPT-5 mini 的截止日期是 2024 年 5 月 31 日。

GPT-5.2 Thinking 评估也是出奇的高，再次领先！

抛开分数，核心功能性特征可以朴素地理解成五件事：更会产出成品、更能处理超长材料、更能看懂图和界面、更擅长把工具链跑通、更适合用不同档位来平衡速度和质量。

1. “成品交付物（artifact）”能力更强。它不是只写一段看起来对的文字，而是更像能给你一份可用的表格、一个能演示的 PPT、一段能跑的前端页面。你能明显感受到它更在乎结构、排版、格式、引用和一致性——这些都是现实工作里最耗人的部分。代价也很现实：生成复杂成品会更慢，有时要等几分钟，适合拿来做“第一版交付物”，再人工修。
2. 长材料处理更稳。这里的提升不是“能塞更长”，而是“能在很长的上下文里不乱串、不丢关键点”。对你这种经常要分析文档、代码仓库、会议转录、多文件项目的人来说，实际收益是：你可以把“完整材料”交给它做梳理、对照、抽取、归纳，最后输出一个结构化结论，而不是必须自己先手工切块、做摘要、拼来拼去还担心遗漏。
3. 视觉理解更可用，尤其是“图表 + 软件界面”。它在 blog 里说得很工程：看图不是玄学，但通常需要配合工具（比如 Python）才能跑到理想效果。落到实践，你可以更放心地让它读仪表盘截图、产品 UI 截图、技术图、报告里的图表，然后让它做解释、找异常、给操作路径、甚至按元素位置来描述界面组件。对做自动化/Agent 的产品尤其关键：它更像能“看懂你屏幕上发生了什么”。
4. 工具调用（tool calling）更像“流程控制器”。以前模型常见问题是：能想、能说，但一进多步骤就容易丢状态、漏步骤、卡在中间。这里强调的是“长链不掉线”：能分解任务、按顺序调用工具、读回结果、再继续下一步，最后给你一个能交差的闭环输出。你如果在做 AI 类浏览器/代理系统，这点意味着：更适合用它当“总控大脑”，把检索、抓取、解析、计算、生成、校验串起来。
5. 它更像有一个“速度/质量旋钮”。blog 反复提推理强度（reasoning effort）以及在低推理档位下也更能打，这对产品落地很重要：你可以把任务按成本分层——日常查询、路由、轻量总结用快档；要做规划、复杂推导、长链工具、产出成品时再切高档。这样用户体验才不会变成“每件事都等很久”，同时关键任务又能顶住。

测评

GPT-5.2 除了能力全面提升外，似乎在 3D 场景构建方面也尤为出色。

我自己编写了一个 prompt 同时测试 GPT-5.2 Thinking、Gemini Thinking 3 Pro、DeepSeek 深度推理，让它们输出单个 HTML。先说结论（以下案例运行在 Mac M1 Pro (16G)）：三者在一次性交付结果方面都出现或多或少的问题，需要经过几次修复才能功能。我个人感觉呈现效果 GPT-5.2 最佳，细节处理丰富。

以下是 prompt，也欢迎大家自测：

GPT-5.2

首次给出的代码在静态资源引用方面出现错误（此问题几乎必现，我几次测试都出现了），在修复该问题后，又出现了一次代码逻辑错误。第三次给出完整代码运行通过。

以下是效果展示，从体验上来说，页面未出现明显卡顿，操作基本流畅，3D 效果也最接近设想（一定要看视频，效果惊艳）：

源代码：

<!doctype html>
<htmllang="zh">
<head>
<metacharset="utf-8" />
<metaname="viewport"content="width=device-width,initial-scale=1" />
<title>Glow Marbles in Glass Hex Tray</title>
<style>
html, body { margin:0; padding:0; height:100%; background:#05060a; overflow:hidden; }
canvas { display:block; }

.hud {
position: fixed;
left: 14px;
bottom: 14px;
display: flex;
gap: 10px;
align-items: center;
padding: 10px12px;
border-radius: 14px;
background: rgba(10,12,18,0.55);
border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
color: rgba(255,255,255,0.85);
font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC","Hiragino Sans GB","Noto Sans CJK SC", sans-serif;
      user-select: none;
    }
.hudbutton, .hud select {
      appearance: none;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.88);
padding: 7px10px;
border-radius: 10px;
cursor: pointer;
outline: none;
    }
.hudbutton:hover, .hud select:hover { background: rgba(255,255,255,0.10); }
.hudbutton:active { transform: translateY(1px); }

.hud.group { display:flex; align-items:center; gap:8px; }
.hud.label { opacity: 0.75; }
.hudinput[type="range"] { width: 120px; accent-color: rgba(255,255,255,0.75); }

.hint {
position: fixed;
right: 14px;
bottom: 14px;
padding: 8px10px;
border-radius: 12px;
background: rgba(10,12,18,0.38);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.55);
font: 11px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      user-select:none;
    }
.hintkbd{
font: 11px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
padding: 2px6px;
border-radius: 7px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.70);
    }
</style>

<!-- ✅ 关键：解决 examples/jsm 内部 `from "three"` 的裸模块导入 -->
<scriptasyncsrc="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<scripttype="importmap">
  {
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
  }
</script>
</head>

<body>
<divclass="hud"id="hud">
<buttonid="shakeBtn"title="像轻晃托盘一样扰动弹珠">摇一摇</button>

<divclass="group">
<spanclass="label">慢动作</span>
<selectid="timeScale">
<optionvalue="0.25">0.25x</option>
<optionvalue="1"selected>1x</option>
<optionvalue="2">2x</option>
</select>
</div>

<divclass="group">
<spanclass="label">相机</span>
<selectid="camMode">
<optionvalue="table"selected>桌面视角</option>
<optionvalue="top">俯视</option>
<optionvalue="orbit">轻微环绕</option>
</select>
</div>

<divclass="group">
<spanclass="label">灯光感觉</span>
<spanclass="label"title="Bloom 强度">柔光</span>
<inputid="bloom"type="range"min="0"max="2.2"step="0.01"value="1.15"/>
<spanclass="label"title="色彩饱和度">饱和</span>
<inputid="sat"type="range"min="0.6"max="1.6"step="0.01"value="1.15"/>
<spanclass="label"title="拖影/余辉">余辉</span>
<inputid="trail"type="range"min="0"max="1"step="0.01"value="0.22"/>
</div>
</div>
<divclass="hint">按 <kbd>D</kbd> 显示/隐藏调试叠加</div>

<scripttype="module">
import * asTHREEfrom"three";
import { RoomEnvironment } from"three/addons/environments/RoomEnvironment.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 { AfterimagePass } from"three/addons/postprocessing/AfterimagePass.js";
import { ShaderPass } from"three/addons/postprocessing/ShaderPass.js";

/* ----------------------------- Scene setup ----------------------------- */
const renderer = newTHREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
    renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.05;
    renderer.physicallyCorrectLights = true;
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

const scene = newTHREE.Scene();
    scene.background = newTHREE.Color(0x05060a);

// Soft room environment for believable reflections
const pmrem = newTHREE.PMREMGenerator(renderer);
const envTex = pmrem.fromScene(newRoomEnvironment(renderer), 0.04).texture;
    scene.environment = envTex;

// Camera
const camera = newTHREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.02, 20);
const camTarget = newTHREE.Vector3(0, 0.08, 0);
let camMode = "table";

functionapplyCameraMode(mode, immediate=false) {
      camMode = mode;
if (mode === "table") {
const p = newTHREE.Vector3(1.05, 0.68, 1.15);
if (immediate) camera.position.copy(p);
        camera.userData._goalPos = p;
        camera.userData._goalFov = 42;
      } elseif (mode === "top") {
const p = newTHREE.Vector3(0.001, 1.50, 0.001);
if (immediate) camera.position.copy(p);
        camera.userData._goalPos = p;
        camera.userData._goalFov = 50;
      } else { // orbit
const p = newTHREE.Vector3(1.10, 0.72, 1.05);
if (immediate) camera.position.copy(p);
        camera.userData._goalPos = p;
        camera.userData._goalFov = 42;
      }
    }
applyCameraMode("table", true);

/* ------------------------------- Lighting ------------------------------ */
const hemi = newTHREE.HemisphereLight(0x0b1022, 0x030407, 0.25);
    scene.add(hemi);

const key = newTHREE.SpotLight(0xbfd3ff, 2.2, 6, Math.PI * 0.22, 0.8, 1.0);
    key.position.set(1.5, 1.8, 1.0);
    key.target.position.set(0, 0.1, 0);
    key.castShadow = true;
    key.shadow.mapSize.set(1024, 1024);
    key.shadow.bias = -0.0002;
    scene.add(key, key.target);

const rim = newTHREE.DirectionalLight(0x8b7bff, 0.18);
    rim.position.set(-1.2, 1.0, -1.0);
    scene.add(rim);

// “Color bleeding” proxy lights (few point lights updated from marbles)
const bleedLights = [];
constBLEED_COUNT = 6;
for (let i = 0; i < BLEED_COUNT; i++) {
const L = newTHREE.PointLight(0xffffff, 0.35, 1.6, 2);
      bleedLights.push(L);
      scene.add(L);
    }

/* ------------------------------- Table -------------------------------- */
functionmakeTableTexture(size=512) {
const c = document.createElement("canvas");
      c.width = c.height = size;
const ctx = c.getContext("2d");

      ctx.fillStyle = "#0a0c12";
      ctx.fillRect(0, 0, size, size);

const img = ctx.getImageData(0, 0, size, size);
for (let i = 0; i < img.data.length; i += 4) {
const n = (Math.random() * 2 - 1);
const v = 18 + n * 10;
        img.data[i] = v;
        img.data[i+1] = v;
        img.data[i+2] = v + 2;
        img.data[i+3] = 255;
      }
      ctx.putImageData(img, 0, 0);

      ctx.globalAlpha = 0.10;
      ctx.strokeStyle = "rgba(255,255,255,0.22)";
for (let k = 0; k < 250; k++) {
const x = Math.random() * size;
const y = Math.random() * size;
const len = 20 + Math.random() * 80;
const ang = (Math.random() * Math.PI) * 0.8 + 0.2;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + Math.cos(ang) * len, y + Math.sin(ang) * len);
        ctx.stroke();
      }
      ctx.globalAlpha = 1;

const tex = newTHREE.CanvasTexture(c);
      tex.colorSpace = THREE.SRGBColorSpace;
      tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
      tex.repeat.set(2.2, 2.2);
      tex.anisotropy = Math.min(8, renderer.capabilities.getMaxAnisotropy());
return tex;
    }

const tableTex = makeTableTexture(512);
const table = newTHREE.Mesh(
newTHREE.PlaneGeometry(8, 8),
newTHREE.MeshStandardMaterial({
map: tableTex,
roughness: 0.92,
metalness: 0.08,
envMapIntensity: 0.55
      })
    );
    table.rotation.x = -Math.PI / 2;
    table.receiveShadow = true;
    scene.add(table);

/* ----------------------------- Hex glass tray -------------------------- */
// Inner region for physics (marbles roll inside this hex)
constINNER_APOTHEM = 0.58;  // distance center->side (physics boundary)
constWALL_THICKNESS = 0.07; // glass wall thickness (visual)
constTRAY_FLOOR_T = 0.045;
constTRAY_WALL_H = 0.14;

functionhexVertices(apothem) {
const R = apothem / Math.cos(Math.PI / 6); // vertex radius
const verts = [];
for (let i = 0; i < 6; i++) {
const a = (Math.PI / 3) * i + Math.PI / 6;
        verts.push(newTHREE.Vector2(Math.cos(a) * R, Math.sin(a) * R)); // (x,z) as (x,y)
      }
return verts;
    }

functionshapeFromVerts(verts) {
const s = newTHREE.Shape();
      s.moveTo(verts[0].x, verts[0].y);
for (let i = 1; i < verts.length; i++) s.lineTo(verts[i].x, verts[i].y);
      s.closePath();
return s;
    }

const outerVerts = hexVertices(INNER_APOTHEM + WALL_THICKNESS);
const innerVerts = hexVertices(INNER_APOTHEM);

const outerShape = shapeFromVerts(outerVerts);
const holePath = newTHREE.Path();
    holePath.moveTo(innerVerts[0].x, innerVerts[0].y);
for (let i = 1; i < innerVerts.length; i++) holePath.lineTo(innerVerts[i].x, innerVerts[i].y);
    holePath.closePath();
    outerShape.holes.push(holePath);

const glassMat = newTHREE.MeshPhysicalMaterial({
color: newTHREE.Color(0x0c1222),
transmission: 1.0,
thickness: 0.22,
ior: 1.52,
roughness: 0.06,
metalness: 0.0,
specularIntensity: 1.0,
specularColor: newTHREE.Color(0xffffff),
envMapIntensity: 1.25,
transparent: true,
opacity: 1.0,
clearcoat: 0.2,
clearcoatRoughness: 0.15
    });

const wallGeo = newTHREE.ExtrudeGeometry(outerShape, {
depth: TRAY_WALL_H,
bevelEnabled: true,
bevelSegments: 2,
steps: 1,
bevelSize: 0.014,
bevelThickness: 0.012
    });
    wallGeo.rotateX(-Math.PI / 2);
    wallGeo.translate(0, TRAY_FLOOR_T, 0);

const trayWalls = newTHREE.Mesh(wallGeo, glassMat);
    trayWalls.castShadow = true;
    trayWalls.receiveShadow = true;
    scene.add(trayWalls);

const innerShape = shapeFromVerts(innerVerts);
const floorGeo = newTHREE.ExtrudeGeometry(innerShape, {
depth: TRAY_FLOOR_T,
bevelEnabled: true,
bevelSegments: 1,
steps: 1,
bevelSize: 0.010,
bevelThickness: 0.010
    });
    floorGeo.rotateX(-Math.PI / 2);
const trayFloor = newTHREE.Mesh(floorGeo, glassMat);
    trayFloor.castShadow = true;
    trayFloor.receiveShadow = true;
    scene.add(trayFloor);

const edgeLine = newTHREE.LineLoop(
newTHREE.BufferGeometry().setFromPoints(outerVerts.map(v =>newTHREE.Vector3(v.x, TRAY_FLOOR_T + TRAY_WALL_H + 0.001, v.y))),
newTHREE.LineBasicMaterial({ color: 0x9fb6ff, transparent:true, opacity: 0.10 })
    );
    scene.add(edgeLine);

/* --------------------------- Hex boundary math -------------------------- */
// ✅ 必须在 randInHex / balls 初始化之前创建 planes
const hex2 = hexVertices(INNER_APOTHEM); // Vector2(x,z)
const planes = [];
for (let i = 0; i < 6; i++) {
const a = hex2[i];
const b = hex2[(i + 1) % 6];
const ex = b.x - a.x;
const ez = b.y - a.y;
// outward normal for CCW edge: (ez, -ex)
let nx = ez, nz = -ex;
const invLen = 1 / Math.hypot(nx, nz);
      nx *= invLen; nz *= invLen;
      planes.push({ ax: a.x, az: a.y, nx, nz });
    }

functionpointInsideHex(x, z, margin=0) {
for (const pl of planes) {
const d = pl.nx * (x - pl.ax) + pl.nz * (z - pl.az);
if (d > -margin) returnfalse;
      }
returntrue;
    }

/* ------------------------------ Post FX -------------------------------- */
const composer = newEffectComposer(renderer);
    composer.addPass(newRenderPass(scene, camera));

const bloomPass = newUnrealBloomPass(
newTHREE.Vector2(window.innerWidth, window.innerHeight),
1.15,  // strength
0.7,   // radius
0.25// threshold
    );
    composer.addPass(bloomPass);

const afterPass = newAfterimagePass();
    afterPass.uniforms["damp"].value = 0.88;
    composer.addPass(afterPass);

constSaturationShader = {
uniforms: { tDiffuse: { value: null }, saturation: { value: 1.15 } },
vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
fragmentShader: `
        uniform sampler2D tDiffuse;
        uniform float saturation;
        varying vec2 vUv;
        void main() {
          vec4 c = texture2D(tDiffuse, vUv);
          float l = dot(c.rgb, vec3(0.2126, 0.7152, 0.0722));
          vec3 gray = vec3(l);
          c.rgb = mix(gray, c.rgb, saturation);
          gl_FragColor = c;
        }
      `
    };
const satPass = newShaderPass(SaturationShader);
    composer.addPass(satPass);

/* ------------------------------ Marbles -------------------------------- */
constBALL_COUNT = 32;                 // 20~40
const R = 0.038;                       // radius
constY0 = TRAY_FLOOR_T + R + 0.002;    // sit on floor

functionmakeHaloTexture(size=256) {
const c = document.createElement("canvas");
      c.width = c.height = size;
const ctx = c.getContext("2d");
const g = ctx.createRadialGradient(size/2, size/2, 0, size/2, size/2, size/2);
      g.addColorStop(0.00, "rgba(255,255,255,0.95)");
      g.addColorStop(0.18, "rgba(255,255,255,0.55)");
      g.addColorStop(0.45, "rgba(255,255,255,0.18)");
      g.addColorStop(1.00, "rgba(255,255,255,0.00)");
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, size, size);
const tex = newTHREE.CanvasTexture(c);
      tex.colorSpace = THREE.SRGBColorSpace;
      tex.minFilter = THREE.LinearFilter;
      tex.magFilter = THREE.LinearFilter;
return tex;
    }
const haloTex = makeHaloTexture(256);

functionrandInHex() {
constRv = INNER_APOTHEM / Math.cos(Math.PI/6);
for (let tries = 0; tries < 2000; tries++) {
const x = (Math.random() * 2 - 1) * Rv * 0.95;
const z = (Math.random() * 2 - 1) * Rv * 0.95;
if (pointInsideHex(x, z, R)) return { x, z };
      }
return { x: 0, z: 0 };
    }

functionniceGlowColor() {
const h = Math.random();
const s = 0.70 + Math.random()*0.15;
const l = 0.52 + Math.random()*0.10;
returnnewTHREE.Color().setHSL(h, s, l);
    }

const ballGeo = newTHREE.SphereGeometry(R, 32, 20);
const balls = [];

for (let i = 0; i < BALL_COUNT; i++) {
const c = niceGlowColor();
const mat = newTHREE.MeshPhysicalMaterial({
color: newTHREE.Color(0x101225),
transmission: 0.22,
thickness: 0.12,
ior: 1.45,
roughness: 0.08,
metalness: 0.0,
envMapIntensity: 0.85,
emissive: c.clone(),
emissiveIntensity: 2.3
      });

const m = newTHREE.Mesh(ballGeo, mat);
      m.castShadow = true;

const haloMat = newTHREE.SpriteMaterial({
map: haloTex,
color: c.clone(),
transparent: true,
opacity: 0.22,
depthWrite: false,
blending: THREE.AdditiveBlending
      });
const halo = newTHREE.Sprite(haloMat);
      halo.scale.setScalar(R * 7.0);

const p = randInHex();
      m.position.set(0, Y0, 0);
      halo.position.set(0, Y0, 0);

const ang = Math.random() * Math.PI * 2;
const sp = 0.55 + Math.random() * 0.35;
const v = newTHREE.Vector2(Math.cos(ang) * sp, Math.sin(ang) * sp);

const g = newTHREE.Group();
      g.position.set(p.x, 0, p.z);
      g.add(m);
      g.add(halo);
      scene.add(g);

      balls.push({ group: g, mesh: m, halo, col: c, p: newTHREE.Vector2(p.x, p.z), v, pulse: 0 });
    }

/* --------------------------- Physics: walls & balls --------------------- */
functionresolveWall(ball, debugHit=false) {
let bestPen = 0;
let best = null;

for (const pl of planes) {
const d = pl.nx * (ball.p.x - pl.ax) + pl.nz * (ball.p.y - pl.az);
const pen = d + R; // circle radius constraint
if (pen > bestPen) { bestPen = pen; best = pl; }
      }

if (best && bestPen > 0) {
        ball.p.x -= best.nx * bestPen;
        ball.p.y -= best.nz * bestPen;

const vn = ball.v.x * best.nx + ball.v.y * best.nz;
if (vn > 0) {
          ball.v.x -= 2 * vn * best.nx;
          ball.v.y -= 2 * vn * best.nz;
if (debugHit) addCollisionPoint(ball.p.x, Y0, ball.p.y);
          ball.pulse = Math.min(1, ball.pulse + Math.min(0.35, vn * 0.18 + bestPen * 1.8));
        }
      }
    }

functionresolveBalls(debugHit=false) {
const e = 0.98; // slightly soft
for (let i = 0; i < balls.length; i++) {
for (let j = i + 1; j < balls.length; j++) {
const A = balls[i], B = balls[j];
const dx = B.p.x - A.p.x;
const dz = B.p.y - A.p.y;
const d2 = dx*dx + dz*dz;
const minD = 2*R;

if (d2 < (minD*minD) && d2 > 1e-10) {
const d = Math.sqrt(d2);
const nx = dx / d;
const nz = dz / d;
const pen = (minD - d);

const corr = pen * 0.52;
            A.p.x -= nx * corr; A.p.y -= nz * corr;
            B.p.x += nx * corr; B.p.y += nz * corr;

const rvx = B.v.x - A.v.x;
const rvz = B.v.y - A.v.y;
const velN = rvx * nx + rvz * nz;

if (velN < 0) {
const jimp = -(1 + e) * velN / 2;
const ix = jimp * nx;
const iz = jimp * nz;
              A.v.x -= ix; A.v.y -= iz;
              B.v.x += ix; B.v.y += iz;

const impulseMag = Math.abs(jimp);
              A.pulse = Math.min(1, A.pulse + Math.min(0.35, impulseMag * 0.12 + pen * 2.5));
              B.pulse = Math.min(1, B.pulse + Math.min(0.35, impulseMag * 0.12 + pen * 2.5));
if (debugHit) addCollisionPoint((A.p.x+B.p.x)*0.5, Y0, (A.p.y+B.p.y)*0.5);
            }
          }
        }
      }
    }

/* ------------------------------ Debug ---------------------------------- */
let debug = false;
const debugGroup = newTHREE.Group();
    scene.add(debugGroup);

const dbgHexLine = newTHREE.LineLoop(
newTHREE.BufferGeometry().setFromPoints(hex2.map(v =>newTHREE.Vector3(v.x, Y0 + 0.001, v.y))),
newTHREE.LineBasicMaterial({ color: 0x66aaff, transparent:true, opacity: 0.65 })
    );
    debugGroup.add(dbgHexLine);

const arrows = balls.map(() => {
const a = newTHREE.ArrowHelper(newTHREE.Vector3(1,0,0), newTHREE.Vector3(0, Y0, 0), 0.15, 0xffcc66, 0.05, 0.03);
      a.cone.material.transparent = true;
      a.line.material.transparent = true;
      a.cone.material.opacity = 0.8;
      a.line.material.opacity = 0.55;
      debugGroup.add(a);
return a;
    });

constHIT_MAX = 36;
const hitGeo = newTHREE.SphereGeometry(0.008, 10, 8);
const hitMat = newTHREE.MeshBasicMaterial({ color: 0xffffff, transparent:true, opacity: 0.85 });
const hitInst = newTHREE.InstancedMesh(hitGeo, hitMat, HIT_MAX);
    hitInst.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
    debugGroup.add(hitInst);

let hitIdx = 0;
const _m4 = newTHREE.Matrix4();
functionaddCollisionPoint(x,y,z) {
      _m4.makeTranslation(x, y + 0.004, z);
      hitInst.setMatrixAt(hitIdx % HIT_MAX, _m4);
      hitInst.instanceMatrix.needsUpdate = true;
      hitIdx++;
    }

functionsetDebug(on) {
      debug = on;
      debugGroup.visible = !!on;
    }
setDebug(false);

window.addEventListener("keydown", (e) => {
if (e.key === "d" || e.key === "D") setDebug(!debug);
    });

/* ------------------------------- UI ------------------------------------ */
const shakeBtn = document.getElementById("shakeBtn");
const timeScaleSel = document.getElementById("timeScale");
const camModeSel = document.getElementById("camMode");
const bloomSlider = document.getElementById("bloom");
const satSlider = document.getElementById("sat");
const trailSlider = document.getElementById("trail");

let timeScale = 1.0;
    timeScaleSel.addEventListener("change", () => { timeScale = parseFloat(timeScaleSel.value || "1"); });
    camModeSel.addEventListener("change", () =>applyCameraMode(camModeSel.value, false));

    bloomSlider.addEventListener("input", () => { bloomPass.strength = parseFloat(bloomSlider.value); });
    satSlider.addEventListener("input", () => { satPass.uniforms.saturation.value = parseFloat(satSlider.value); });
    trailSlider.addEventListener("input", () => {
const t = parseFloat(trailSlider.value);
      afterPass.uniforms["damp"].value = 0.65 + t * 0.28;
      afterPass.enabled = (t > 0.001);
    });
    bloomPass.strength = parseFloat(bloomSlider.value);
    satPass.uniforms.saturation.value = parseFloat(satSlider.value);
    trailSlider.dispatchEvent(newEvent("input"));

/* -------------------------- “Shake” dynamics --------------------------- */
let shakeT = 0;
const shakeForce = newTHREE.Vector2(0,0);

    shakeBtn.addEventListener("click", () => {
      shakeT = 0.7;
const a = Math.random() * Math.PI * 2;
const mag = 2.2 + Math.random() * 1.0;
      shakeForce.set(Math.cos(a) * mag, Math.sin(a) * mag);

for (const b of balls) {
        b.v.x += (Math.random()*2-1) * 0.35;
        b.v.y += (Math.random()*2-1) * 0.35;
        b.pulse = Math.min(1, b.pulse + 0.2);
      }
    });

/* ------------------------- Energy stabilization ------------------------- */
functioncomputeK() {
let k = 0;
for (const b of balls) k += (b.v.x*b.v.x + b.v.y*b.v.y);
return k / balls.length;
    }
let targetK = computeK();

functiongentleEnergyCorrect() {
const k = computeK();
if (k < 1e-6) return;
const ratio = Math.sqrt(targetK / k);
const blend = 0.025;
const s = 1 + (ratio - 1) * blend;
for (const b of balls) b.v.multiplyScalar(s);
    }

/* ------------------------ Bleed lights update -------------------------- */
for (let i = 0; i < BLEED_COUNT; i++) {
const v = outerVerts[i];
      bleedLights[i].position.set(v.x * 0.85, 0.22, v.y * 0.85);
    }

functionupdateBleedLights() {
for (let i = 0; i < BLEED_COUNT; i++) {
const L = bleedLights[i];
const lp = L.position;
let r=0,g=0,b=0,wSum=0;

for (const ball of balls) {
const dx = ball.p.x - lp.x;
const dz = ball.p.y - lp.z;
const d2 = dx*dx + dz*dz + 0.05;
const w = 1.0 / d2;
          r += ball.col.r * w;
          g += ball.col.g * w;
          b += ball.col.b * w;
          wSum += w;
        }
if (wSum > 0) {
          r/=wSum; g/=wSum; b/=wSum;
          L.color.setRGB(r, g, b);
          L.intensity = 0.26;
        }
      }
    }

/* ------------------------------- Loop ---------------------------------- */
const clock = newTHREE.Clock();
let accumulator = 0;

constFIXED_DT = 1/120;
constSOLVER_ITERS = 2;

let orbitPhase = 0;

functiontick() {
requestAnimationFrame(tick);

const dt = Math.min(0.05, clock.getDelta());
      accumulator += dt * timeScale;

if (camera.userData._goalPos) {
        camera.position.lerp(camera.userData._goalPos, 0.06);
        camera.fov += (camera.userData._goalFov - camera.fov) * 0.06;
        camera.updateProjectionMatrix();
      }

if (camMode === "orbit") {
        orbitPhase += dt * 0.18;
const r = 1.25;
const y = 0.70;
const x = Math.cos(orbitPhase) * r;
const z = Math.sin(orbitPhase) * r;
        camera.position.lerp(newTHREE.Vector3(x, y, z), 0.03);
      }

      camera.lookAt(camTarget);

while (accumulator >= FIXED_DT) {
        accumulator -= FIXED_DT;

if (shakeT > 0) {
          shakeT -= FIXED_DT;
const decay = Math.exp(-FIXED_DT * 3.2);
          shakeForce.multiplyScalar(decay);
        } else {
          shakeForce.set(0,0);
        }

for (const b of balls) {
          b.v.x += shakeForce.x * FIXED_DT;
          b.v.y += shakeForce.y * FIXED_DT;

          b.v.x += (Math.random()*2-1) * 0.0007;
          b.v.y += (Math.random()*2-1) * 0.0007;

          b.p.x += b.v.x * FIXED_DT;
          b.p.y += b.v.y * FIXED_DT;
        }

for (let it = 0; it < SOLVER_ITERS; it++) {
for (const b of balls) resolveWall(b, debug);
resolveBalls(debug);
for (const b of balls) resolveWall(b, false);
        }

gentleEnergyCorrect();
      }

for (let i = 0; i < balls.length; i++) {
const b = balls[i];
        b.pulse = Math.max(0, b.pulse - dt * 1.7);

        b.group.position.set(b.p.x, 0, b.p.y);

const glow = 0.22 + b.pulse * 0.38;
        b.halo.material.opacity = glow;

const haloScale = (R * 7.0) * (1 + b.pulse * 0.55);
        b.halo.scale.setScalar(haloScale);

const meshScale = 1 + b.pulse * 0.05;
        b.mesh.scale.setScalar(meshScale);
        b.mesh.material.emissiveIntensity = 2.1 + b.pulse * 1.2;

if (debug) {
const a = arrows[i];
const speed = Math.hypot(b.v.x, b.v.y);
const dir = newTHREE.Vector3(b.v.x, 0, b.v.y).normalize();
          a.position.set(b.p.x, Y0 + 0.01, b.p.y);
          a.setDirection(dir);
          a.setLength(THREE.MathUtils.clamp(speed * 0.22, 0.05, 0.22), 0.045, 0.028);
        }
      }

if ((performance.now() | 0) % 3 === 0) updateBleedLights();
      composer.render();
    }

/* ------------------------------ Resize --------------------------------- */
functiononResize() {
const w = window.innerWidth, h = window.innerHeight;
      renderer.setSize(w, h);
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      composer.setSize(w, h);
      bloomPass.setSize(w, h);
    }
window.addEventListener("resize", onResize);

tick();
</script>
</body>
</html>