PixiJS 发布 3D 引擎，2D 与 3D 共享同一舞台

2026年11月12日 · 阅读时长13分钟 隆重推出 PixiJS 3D ZyiePixiJS 管理员 PixiJS 3D 来了，今天起进入公开测试阶段。 PixiJS 现在同时是一个完整的 2D 引擎和一个完整的 3D 引擎。两者共享同一个舞台，而且默认都很快。 如果你已经在用 PixiJS 开发，只需在项目中添加一个 View3D，就进入了 3D 世界，用的还是你熟悉的 addChild、Assets 和指针事件。如果你是 PixiJS 新手，这里也是一个不错的起点。 你不需要移植任何东西，也不需要在 PixiJS 旁边再跑一个引擎。3D 场景本身就是一个显示对象。加载模型，用它创建一个 View3D，然后添加到舞台上： import { View3D } from '@pixi/3d'; import { Assets } from 'pixi.js'; const source = await Assets.load('helmet.glb'); const view3d = View3D.from(source); app.stage.addChild(view3d); 这个视图会与你绘制的其他内容一起分层，所以用多少 3D 由你决定。你可以保留常规的 2D 工作流，在需要的地方放一个 3D 元素，比如菜单里旋转的奖杯，或者商店界面里的角色。或者让一个 View3D 铺满屏幕，在里面构建完整的 3D 游戏，再把 UI 作为常规 2D 容器盖在上面。 介于两者之间的做法也都可行。滤镜和遮罩可以作用于 3D 视图。3D 对象和精灵一样接收指针事件。glTF 模型通过 Assets 加载。你的 2D 可以跟随 3D，比如角色头顶的血条。 View3D 是一个显示对象，所以你可以在一个 2D 场景里放任意多个。每个都有自己的场景和相机，你可以像摆放精灵一样放置和调整每个的大小。 3D 也能看到周围的 2D。这个 logo 是 3D 玻璃，它会折射背后绘制的 2D 海报。拖动 logo 可以转动它： CodePlayground 反过来也行。你可以把任意 2D 容器实时绘制到 3D 表面上。这里，一个带有弹跳字标和时钟的 2D 场景运行在 3D 显示器的屏幕上： CodePlayground 而且由于 View3D 是一个显示对象，那个 2D 容器也可以持有自己的 View3D。所以两者可以嵌套，深度随你。一个 3D 场景可以显示一个 2D 容器，而这个容器里又装着另一个 3D 场景。 goodstuff.pixijs.io 上的演示货架就是这样构建的。它的每个屏幕都是一幅 2D 场景，绘制在一块弯曲的 3D 面板上。 View3D 和 2D 内容展示了这两者能融合到什么程度。 PixiJS 一直致力于让默认的使用方式就是快的方式，3D 也不例外。你按最直观的方式写场景，它就是快的。 添加五个共享几何体和材质的立方体，它们会在一次实例化调用中绘制。你没有要求这样做，也不应该需要要求。引擎能看出这些立方体可以合批，所以就把它们合批了。 不过，渲染器不只是实例数量。真实的场景包含许多不同的东西：不同的模型和材质、会动画的角色、投射阴影的灯光，以及覆盖在上面的 HUD，而且其中很多内容逐帧都在变化。这才是我们花时间打磨的场景类型，所以 PixiJS 3D 不仅在基准测试中快，在真实游戏中同样快。 部分原因在于承认：没有哪一种绘制场景的方式在所有情况下都是最快的。在桌面 GPU 上最快的方式不一定在 iPhone 上最快，小场景和大场景也需要不同的处理方式。所以我们针对不同的渲染方式做了基准测试，引擎会为你的设备、浏览器和场景选择最佳路径。 剔除（culling）就体现了这一点。在大多数 WebGPU 浏览器上，它运行在计算着色器中。在 Safari 以及任何 iPhone 或 iPad 上，典型场景下它运行在 CPU 上，当批次足够大时再切换到计算着色器。无论哪种方式，你写的代码都一样，你永远看不到这个切换。 引擎还只更新发生变化的网格，所以静止的场景对 CPU 的开销很小。这 100 个颜色各异的箱子只占一次 draw call，代码里没有任何地方要求这样做： import { CubeGeometry, Material3D, Mesh3D } from '@pixi/3d'; const geometry = new CubeGeometry(); for (let i = 0; i < 100; i++) { const crate = new Mesh3D({ geometry, // one geometry for every crate material: new Material3D({ baseColor: Math.random() * 0xffffff, roughness: 0.6 }), }); crate.position.set((i % 10) * 1.5, 0.5, Math.floor(i / 10) * 1.5); view3d.root.addChild(crate); 当你需要大数字时，它就在那里。对于森林或人群，BatchedMesh3D 可以从一个节点绘制数万个副本。这是 100,000 个带阴影的对象，全部 60 fps： CodePlayground 性能指南里有详细说明。 WebGPU 是 Web 的发展方向，所以我们围绕它设计了 PixiJS 3D。我们起步较早。我们构建 PixiJS v8 时就考虑到了这一点，所以大部分基础工作已经完成，3D 在此基础上加入了更新的技术。 它使用了 render bundle、间接绘制以及计算着色器中的剔除。我们只在测量到确实更快且浏览器已经支持的情况下才采用某项技术。 在 WebGPU 之前，计算着色器剔除是不可能的。它加速了大场景，并让 CPU 腾出资源给你的游戏。 WebGL2 也得到了同样的重视。我们对引擎的这一侧做了同样强度的优化，所以当 Web 向 WebGPU 迁移时，每个游戏都能正常工作。 相同的场景代码在两个后端上都能运行，每个浏览器只下载它使用的后端。在启动应用时请求 WebGPU，PixiJS 会在缺失时回退到 WebGL2： await app.init({ preference: 'webgpu' }); 核心功能内置 你对 3D 引擎的期望，这里都有。 你可以获得带蒙皮、变形目标、动画和压缩纹理的 glTF 模型。材质支持 PBR、Phong、平面或卡通，你也可以自己编写，包括多 pass 材质。有渲染图、HDR、色调映射、后处理、粒子、阴影和级联阴影。我们为每一项都做了速度调优。 开启某个功能只需设置一个选项。这是一个投射级联阴影的太阳光： const sun = new DirectionalLight({ intensity: 3, castShadow: true, shadow: { cascades: 3 }, // sharp shadows near the camera, however big the world is });

（原文较长，此处译出前 6000 字，完整内容请点「打开原文」。）