nothing-to-watch是一款实验性的WebGL 电影海报画廊，它能用 Voronoi（沃罗诺伊）图的形式，把数万张电影海报渲染成一幅可交互的力导向图。想亲手跑起这个本地开发环境？本文带你5 步完成：装好 Bun、克隆仓库、配置环境变量、安装依赖、启动 Vite 开发服务器，几分钟即可在浏览器里看到海报墙效果。

🧭 运行效果与项目一览

上图就是 nothing-to-watch 跑起来后的样子：无数张电影海报在黑色背景中聚合成一张会呼吸的 Voronoi 网格，支持缩放、平移、点选海报查看详情。

技术栈速览：

🎯 第 1 步：确认 Bun 已就绪（或准备 Node 环境）

项目推荐用 Bun 作为运行时兼包管理器，速度比 npm 快很多。验证是否已安装：

bun --version

若尚未安装，可执行curl -fsSL https://bun.sh/install | bash完成安装后重新打开终端。

💡没有 Bun 也能跑：项目同时兼容 Node.js 18+，仓库根目录的 .nvmrc 锁定的是v20.18.1。用 nvm 执行nvm use即可对齐版本。

🎯 第 2 步：克隆仓库到本地

git clone https://gitcode.com/gh_mirrors/no/nothing-to-watch.git cd nothing-to-watch

进入目录后，你会看到两个核心目录：app/（React 应用层）和 voroforce/（独立渲染引擎），这就是后面代码结构部分的主角。

🎯 第 3 步：一键复制环境变量文件

cp .env.local.example .env.local

这一步不能跳过：应用依赖VITE_前缀的变量来定位海报图片与影片数据。示例文件 .env.local.example 的关键项如下：

VITE_TEXTURES_BASE_URL=/media # 海报图片目录（public/media/） VITE_FILM_INFO_BASE_URL=/json # 影片元数据目录（public/json/） VITE_MEDIA_VERSION_0_LAYERS=1 # 各分辨率层的加载开关 VITE_MEDIA_VERSION_1_LAYERS=1 VITE_MEDIA_VERSION_2_LAYERS=1 VITE_EXPERIMENTAL_MEDIA_VERSION_3_ENABLED=1 # 实验性高分辨率开关 VITE_COMPRESS_GLSL= # 是否压缩 GLSL 着色器 VITE_ANALYZE_BUNDLE= # 是否输出打包分析报告

默认值直接可用，想关掉某些高分辨率层以提速，把对应LAYERS改成0即可。

🎯 第 4 步：一条命令安装全部依赖

bun install

Bun 会根据 bun.lock 锁定版本安装所有依赖（React、OGL、Zustand、Vite 等）。package.json 中的trustedDependencies字段已放行需要执行安装脚本的包（esbuild、@swc/core等），Bun 会自动处理，无需额外操作。

若使用 npm / pnpm / yarn，直接npm install也完全可以。

🎯 第 5 步：启动 Vite 开发服务器并访问

bun dev

Vite 启动后，终端会输出本地地址。打开浏览器访问：

http://localhost:3000

等海报墙缓缓展开，就成功了 🎉。

为什么服务器能自动支持 WebGL 多线程？

关键配置写在 vite.config.ts 里：

server: { host: '0.0.0.0', port: 3000, headers: { 'Cross-Origin-Embedder-Policy': 'credentialless', 'Cross-Origin-Opener-Policy': 'same-origin', }, }

• host: '0.0.0.0'：监听所有网卡，手机连同一局域网也能通过http://你的电脑IP:3000访问；
• 两个Cross-Origin-*响应头：WebGL 多线程模拟（SharedArrayBuffer）的硬性前提，Vite 已替你自动注入，不需要手动配置。

另外，app/main.tsx 支持一个隐藏彩蛋：在地址后加?disableUI参数，可跳过 React 界面、只保留纯 WebGL 画布，方便调试引擎本身。

📦 常用开发命令速查

🗂️ 项目结构导航

🩺 常见问题排查（FAQ）

Q1：启动后端口 3000 被占用？bun dev对应脚本写死了--port 3000，先停掉占用 3000 端口的进程，或lsof -i:3000查出是谁占用。

Q2：页面白屏 / 控制台报 CORS 错误？确认响应头里存在Cross-Origin-Embedder-Policy与Cross-Origin-Opener-Policy（由 Vite 自动添加）。不要直接用file://打开index.html，必须走开发服务器。

Q3：浏览器要求什么版本？需要支持WebGL 2.0的现代浏览器：Chrome 70+、Firefox 78+、Safari 14+、Edge 79+。显卡最好是独立显卡，大内存（2GB+）体验更佳。

Q4：装 Bun 还是用 npm？都能跑。Bun 是推荐方案（安装与启动更快）；已有 Node 环境的同学，把上面命令里的bun换成npm run即可，例如npm run dev。

Q5：环境变量不复制可以吗？不建议。缺少VITE_TEXTURES_BASE_URL等变量时，海报与影片数据将无法定位，页面会一片空白。一条cp命令的事，别省。

✅ 小结

整套流程就 5 步：装 Bun → 克隆仓库 → 复制.env.local.example→bun install→bun dev，全程不超过 5 分钟。跑起来后，建议打开 docs/ 里的文档、翻翻 voroforce/ 引擎源码，深入理解这张「会呼吸的海报墙」背后的力导向模拟与 WebGL 渲染原理。

祝折腾愉快，海报管够 🍿