Postprocess Bloom

<!--
  说明：泛光把高亮区域向外扩散，模拟夜景里灯带与发光标识的光晕
  核心逻辑：UnrealBloomPass 先在多级降采样上提取亮部，再叠加回原图
  依赖：three.js 0.160.0、OrbitControls、UnrealBloomPass · 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:#05080d}
  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:12px;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:110px;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="sv">1.1</b></span>
  <label>strength <input type="range" id="s" min="0" max="3" step="0.1" value="1.1"></label>
  <span>半径 <b id="rv">0.5</b></span>
  <label>radius <input type="range" id="r" min="0" max="1" step="0.05" value="0.5"></label>
  <span>阈值 <b id="tv">0.55</b></span>
  <label>threshold <input type="range" id="t" min="0" max="1" step="0.05" value="0.55"></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';
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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

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

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x05080d);
scene.fog = new THREE.Fog(0x05080d, 30, 70);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(15, 9, 17);

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

scene.add(new THREE.HemisphereLight(0x3a4a5c, 0x080c11, 0.8));

const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(50, 50),
  new THREE.MeshStandardMaterial({ color: 0x10171e, roughness: 0.5, metalness: 0.4 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

/* 一组发光体：自发光强度足够高才会触发阈值 */
const PALETTE = [0x4fd6ff, 0xff5f8d, 0xffd166, 0x8affc1, 0xb48cff];

function hash(n) {
  const x = Math.sin(n * 29.3 + 2.7) * 43758.5453;
  return x - Math.floor(x);
}

const knots = [];
for (let i = 0; i < 16; i++) {
  const t = (i / 16) * Math.PI * 2;
  const r = 4.4 + (i % 3) * 1.5;
  const geo = i % 2 === 0
    ? new THREE.TorusKnotGeometry(0.42, 0.14, 64, 8)
    : new THREE.IcosahedronGeometry(0.5, 1);
  const mat = new THREE.MeshStandardMaterial({
    color: 0x101010,
    emissive: PALETTE[i % PALETTE.length],
    emissiveIntensity: 3.2,
    roughness: 0.3,
    metalness: 0.5
  });
  const m = new THREE.Mesh(geo, mat);
  m.position.set(Math.cos(t) * r, 1.6 + hash(i) * 3.2, Math.sin(t) * r);
  scene.add(m);
  knots.push(m);
}

const composer = new EffectComposer(renderer);
composer.setSize(stage.clientWidth, stage.clientHeight);
composer.addPass(new RenderPass(scene, camera));

const bloom = new UnrealBloomPass(
  new THREE.Vector2(stage.clientWidth, stage.clientHeight),
  1.1,
  0.5,
  0.55
);
composer.addPass(bloom);
composer.addPass(new OutputPass());

const sEl = document.getElementById('s');
const svEl = document.getElementById('sv');
const rEl = document.getElementById('r');
const rvEl = document.getElementById('rv');
const tEl = document.getElementById('t');
const tvEl = document.getElementById('tv');

sEl.addEventListener('input', function () {
  bloom.strength = Number(sEl.value);
  svEl.textContent = bloom.strength.toFixed(1);
});
rEl.addEventListener('input', function () {
  bloom.radius = Number(rEl.value);
  rvEl.textContent = bloom.radius.toFixed(2);
});
tEl.addEventListener('input', function () {
  bloom.threshold = Number(tEl.value);
  tvEl.textContent = bloom.threshold.toFixed(2);
});

renderer.setAnimationLoop(function () {
  const t = performance.now() * 0.001;
  knots.forEach(function (m, i) {
    m.rotation.y += 0.004 + i * 0.0004;
    m.rotation.x += 0.0016;
  });
  controls.update();
  composer.render();
});

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