实时交互粒子系统

两个独立的浏览器实时渲染实验，探索同一件事：把摄像头的视觉输入变成可感知的空间交互。 摄像头画面经 MediaPipe 提取手部关键点，驱动 GPU 上的粒子场；另一件作品用 Instanced 绘制单次提交 15 万粒子，纹理全部由 GLSL 程序化生成。全部为纯前端实现，无服务端、无构建步骤，打开即用。

MediaPipe Three.js WebGL Shader Post-processing Zero build
01  /  GESTURE PARTICLES

手势驱动 3D 粒子场 →

前置摄像头捕捉手部 21 个关键点，实时映射为粒子场的引力中心与形态切换开关。 粒子在 UnrealBloom 泛光后处理下渲染，支持吸管工具从屏幕任意位置拾取粒子配色。

需摄像头 MediaPipe Hands Three.js r128 UnrealBloomPass
02  /  SATURN SYSTEM

程序化土星系统渲染 →

基于 Three.js r160 的 Instanced 渲染管线：土星本体、光环与卫星轨道全部由 Shader 程序化生成，噪声函数驱动大气与环带纹理，单次 draw call 提交 15 万粒子。

零贴图 Three.js r160 GLSL Instancing
关于摄像头权限 — 作品 01 需要调用 getUserMedia。 浏览器只在安全上下文（HTTPS 或 localhost）下开放摄像头， 因此直接双击本地 HTML 文件（file://）会取不到画面。 本地调试请起一个静态服务器，线上部署到 GitHub Pages 后为 HTTPS，可正常使用。