跳到正文
网页珍奇柜Web Curio

穿墙模式:游戏关卡珍奇柜

noclip.website,Jasper St. Pierre (magcius) and contributors,2016 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。为什么不直接展出原作:noclip 的代码虽是 MIT,但它展示的关卡、模型和贴图全部来自商业游戏,版权属于各游戏公司,无法收录;这里用种子程序化生成“90 年代主机风”关卡(噪声地形小岛、城堡庭院、塔楼、柱廊、树、火把、金币、悬浮水晶),配最近邻小贴图、平直着色和距离雾,并提供三张关卡“卡带”(白天庭院、熔岩要塞、月夜港湾)。WASD 自由飞行、拖拽转视角,闲置时自动导览。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步为每款游戏编写解析器,读取原版资源格式(模型、贴图、动画、关卡布局)
  2. 第 2 步自研 gfx 抽象层,后端可在 WebGL2 与 WebGPU 之间切换
  3. 第 3 步把原主机的固定管线或 TEV 组合器翻译成动态生成的着色器
  4. 第 4 步部分重型解析逻辑用 Rust 编译为 WebAssembly
  5. 第 5 步自由相机(WASD + 鼠标)让访客在关卡中无碰撞飞行

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Pick one game's documented level format and write a loader that parses meshes, textures and placement data into typed arrays. Build a thin rendering abstraction with render passes, pipelines and bind groups so the same scene code can run on WebGL2 or WebGPU. Translate the original material system into generated shader source per material, and render the level with a free-fly camera driven by WASD and pointer lock. Organise many levels in a searchable menu and load assets lazily.

档案

能不能拿来用

原作以 MIT (LICENSE file, with a note about reverse-engineered reimplementations) 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Opened https://noclip.website/ (200, title 'noclip'); repo magcius/noclip.website exists; read LICENSE (MIT, plus a NOTE about reverse-engineered code). Saw src/gfx/platform/GfxPlatformWebGL2.ts and GfxPlatformWebGPU.ts.