Camera Logdepth

<!--
  说明：同样的近远平面跨度，开启对数深度缓冲后远处物体不再闪烁
  核心逻辑：WebGLRenderer 构造时传 logarithmicDepthBuffer，片元深度按对数分布
  依赖：three.js 0.160.0、OrbitControls · jsDelivr CDN（ESM + importmap）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>对数深度缓冲</title>
<style>
  html,body{height:100%;margin:0;background:#0a1017}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600;font-variant-numeric:tabular-nums}
  .bar input[type=range]{width:170px;accent-color:#4f9ef8}
  .bar .sp{flex:1 1 auto}
  #stage{flex:1 1 auto;min-height:0;position:relative}
  #stage canvas{display:block}
</style>
</head>
<body>
<div class="bar">
  <span>近平面 <b id="nearv">0.5</b></span>
  <span>远平面 <b>5,000,000</b></span>
  <label>相机后撤 <input type="range" id="dist" min="0" max="100" step="1" value="10"></label>
  <span class="sp"></span>
  <span>对数深度：开启 · 拖拽旋转</span>
</div>
<div id="stage"></div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const stage = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  logarithmicDepthBuffer: true
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a1017);

const NEAR = 0.5;
const FAR = 5000000;
const camera = new THREE.PerspectiveCamera(50, stage.clientWidth / stage.clientHeight, NEAR, FAR);
camera.position.set(0, 400, 2600);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, -20000);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI * 0.495;
controls.update();

scene.add(new THREE.HemisphereLight(0xb4d2f0, 0x0d151c, 1.5));
const sun = new THREE.DirectionalLight(0xffeccd, 2.0);
sun.position.set(-3000, 6000, 2000);
scene.add(sun);

/* 一条按数量级排开的标尺：每站间距是上一站的十倍 */
const STATIONS = [
  { z: -500, size: 60, color: 0x5ad1ff },
  { z: -5000, size: 300, color: 0x6ee7a8 },
  { z: -50000, size: 1800, color: 0xffc857 },
  { z: -500000, size: 11000, color: 0xff8a7a },
  { z: -2000000, size: 40000, color: 0xb69bff }
];

const stations = new THREE.Group();
scene.add(stations);

STATIONS.forEach(function (s, i) {
  const box = new THREE.Mesh(
    new THREE.BoxGeometry(s.size, s.size * 2.2, s.size),
    new THREE.MeshStandardMaterial({ color: s.color, roughness: 0.5, metalness: 0.25 })
  );
  box.position.set(0, s.size * 1.1, s.z);
  stations.add(box);

  /* 每站下方放一块薄板，深度冲突会在这种大面积薄板上先暴露 */
  const pad = new THREE.Mesh(
    new THREE.PlaneGeometry(s.size * 6, s.size * 6),
    new THREE.MeshStandardMaterial({ color: 0x1d2a35, roughness: 1 })
  );
  pad.rotation.x = -Math.PI / 2;
  pad.position.set(0, 0.1, s.z);
  stations.add(pad);

  const lineGeo = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(0, 1, s.z),
    new THREE.Vector3(0, s.size * 2.1, s.z)
  ]);
  stations.add(new THREE.Line(lineGeo, new THREE.LineBasicMaterial({ color: 0x9fb4c8 })));
});

/* 近处的网格：与远处的薄板一起构成深度跨度 */
const grid = new THREE.GridHelper(4000, 80, 0x243444, 0x18232e);
grid.position.y = 0.2;
scene.add(grid);

const distEl = document.getElementById('dist');
const nearvEl = document.getElementById('nearv');
let baseZ = 2600;

distEl.addEventListener('input', function () {
  const k = Number(distEl.value) / 10;
  const z = baseZ * (1 + k * 120);
  camera.position.set(0, 400 * (1 + k * 60), z);
  camera.near = 0.5 * (1 + k * 10);
  camera.updateProjectionMatrix();
  nearvEl.textContent = camera.near.toFixed(1);
  controls.update();
});

renderer.setAnimationLoop(function () {
  controls.update();
  renderer.render(scene, camera);
});

window.addEventListener('resize', function () {
  const w = stage.clientWidth;
  const h = stage.clientHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
});
</script>
</body>
</html>