★ FEATURED ARTICLE 【免费下载链接】nfsu2-web项目地址https://gitcode.com/gh_mirrors/nf/nfsu2-web点击查看免费下载nfsu2-web 是一个开源粉丝项目它把 2004 年的经典赛车游戏《极品飞车地下狂飙 2》Need for Speed: Underground 2搬进了 Chrome 和 Firefox。项目的核心正是把游戏原生的Direct3D 9 渲染管线完整移植到 WebGPU让这款老游戏在浏览器里以流畅帧率运行。一、为什么老游戏需要一次图形引擎搬家2004 年的 NFSU2 是为 Windows 编写的画面全靠Direct3D 9驱动声音靠 DirectSound输入靠 DirectInput。而浏览器里没有 Direct3D只有 WebGPU、Web Audio 和 Gamepad。要让游戏真正跑起来nfsu2-web 同时做了三件事代码搬家x86 机器码 → C → WebAssembly图形搬家Direct3D 9 → WebGPU本文重点声音搬家DirectSound → Web Audio其中图形搬家直接决定了画面的性能与质量也是最难的一环。二、整体架构四层各司其职nfsu2-web 的渲染链路横跨四个目录分工清晰目录角色关键文件tools/x86 → C 静态反编译器lift.pyruntime/重实现的 Windows / Direct3D 9 / DirectSound / DirectInputcom.cruntime/web/浏览器端图形桥接游戏侧gpu_web.cweb/src/页面WebGPU 编码、绘制、音频gpu/index.ts这里有一条铁律游戏线程在 WebAssembly 里运行它碰不到 WebGPU那些 GPU 对象属于页面。所以两端之间必须有一座桥这正是后文要拆解的核心设计。三、关键设计录制 → 编码 → 呈现3.1 游戏端把 D3D9 调用录下来并去重游戏每画一帧都会调用成百上千次IDirect3DDevice9的方法。runtime/com.c 把这些 COM 对象用原生实现接管逐条记录设备状态。但单纯记录还不够还要省。开发者实测发现一帧里约 48% 的 CPU 时间都耗在 D3DX Effect 的BeginPass上而其中大部分并非真正的 D3D 调用而是 CPU 在解释状态表达式。于是 runtime/d3dx_hle.c 用多级 memo缓存跳过重复的 pass 应用并配合 dxrec.h 的重放时是否为空操作检查把这部分 CPU 开销大幅削减。3.2 共享内存双缓冲帧记录游戏线程把每帧的绘制指令GwDraw、顶点数据、顶点着色器常量、像素着色器常量全部写进一块共享内存并采用双缓冲一个缓冲正在被写入另一个已移交给页面。runtime/web/gpu_web.c游戏端负责写入帧记录与一条有序资源队列纹理创建 / 上传 / 释放、顶点索引池、着色器文本每帧都携带资源队列的位置保证它永远不会看到在自己之后才被记录的上传3.3 页面端零拷贝编码为 WebGPU 工作页面侧的 web/src/gpu/encoder.ts 是核心编码器。它零拷贝地直接从 wasm 内存里读取这些记录把移交的帧编码成 WebGPU 的 render pass纹理按 GPU 能力自动选路、顶点支持翻译后的着色器或 CPU 顶点路径、最终 aspect-fit 合成到画布。四、纹理压缩一份贴图三种命运NFSU2 的贴图是DXT1 (BC1)格式而不同 GPU 的支持能力各不相同。web/src/gpu/ 为此准备了三条路有texture-compression-bc直接用 BC最快只有 ASTC如 Apple 设备astc.ts 把每个 DXT1 块逐块改写成 ASTC 4×4体积从解压缩的 8 倍降到 2 倍两者都没有dxt.ts 在 CPU 上解包成 BGRA8同一段游戏数据因此能在高端桌面 GPU、iPhone 和老手机上分别以各自最省内存的方式跑起来。五、着色器游戏原片 内建兜底游戏自身的像素 / 顶点着色器来自翻译器走的是 web/src/gpu/wgsl.ts 里同一套 WGSL 绑定纹理槽t0..t3、采样器s0..s3、阶段间数据块VOut。在翻译器着色器尚未注册前wgsl.ts 提供内建的固定功能片段着色器与复制 / 合成 pass 作为兜底保证任何时刻都有内容可画。六、对齐显示时钟流畅的最后一环绘制完还不够还得对齐显示器刷新率。页面通过requestAnimationFrame发布一个显示时钟GwVsync游戏端的帧率控制器锁相到它实现 framerate.c 的 vsync 同步与NFSU2_FPSauto。呈现握手则用Atomics notify / wait完成——主线程自始至终不阻塞。七、怎么跑起来 准备你自己的 NFSU2 v1.2北美版正版游戏然后在支持 WebGPU 的浏览器中启动# 把游戏代码翻译成 C生成 gen/ web/gen.sh /path/to/Need for Speed Underground 2/SPEED2.EXE # 编译到 WebAssembly web/build.sh # 启动本地服务并游玩 web/start.sh --data /path/to/Need for Speed Underground 2打开 http://localhost:8080/按Play即可。玩家指南见 docs/web/PLAYING.md含 HTTPS 多人在线的部署方案见 web/deploy/。结语nfsu2-web 把老游戏上浏览器最难的一环——Direct3D 9 到 WebGPU 的移植——拆成了录制 → 共享内存 → 零拷贝编码 → 时钟同步四个可独立理解的环节。它的价值不止于跑通一款游戏更提供了一套清晰的参考如何用 WebGPU 承载一段历史悠久的固定功能图形管线并在不同硬件上自适应纹理格式与帧率。赞分享【免费下载链接】nfsu2-web项目地址https://gitcode.com/gh_mirrors/nf/nfsu2-web点击查看免费下载相关推荐GoGoGo无需ROOT的Android虚拟定位终极指南摇杆控制轻松修改GPS位置GoGoGo无需ROOT的Android虚拟定位终极指南摇杆控制轻松修改GPS位置 在移动应用开发和隐私保护领域精准控制设备位置一直是一个关键需求。GoG移动开发原生移动2004 年的 x86 游戏如何跑进浏览器nfsu2-web「x86 转 C 再编译 WASM」技术全景拆解2004 年的 x86 游戏如何跑进浏览器nfsu2 web「x86 转 C 再编译 WASM」技术全景拆解 ️ nfsu2 web 是一个开源粉丝项目2025年浏览器性能终极指南如何让老旧电脑也能流畅上网还在为浏览器卡顿、页面加载慢而烦恼吗本文将为你揭秘浏览器性能优化的核心技巧通过实测对比和深度分析帮助你找到最适合自己的轻量浏览器解决方案。 一、性能痛点解桌面应用上一篇jsGB图形渲染揭秘GPU.js如何在浏览器中模拟GameBoy屏幕下一篇Pygmy开源URL短链接平台10分钟快速搭建自己的短链接服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
