文章目录
- PlayCanvas：浏览器里跑 3D 游戏的开源引擎
PlayCanvas：浏览器里跑 3D 游戏的开源引擎
PlayCanvas 是一款开源游戏引擎，基于 WebGL2 和 WebGPU 构建，Star 数超过 16k。用它可以在浏览器中创建 3D 应用、游戏和可视化项目，支持桌面和移动设备。
能做什么
PlayCanvas 的图形引擎支持 2D 和 3D 渲染，底层走 WebGL2 和 WebGPU。渲染管线支持实时光照、阴影、后处理等常见的 3D 图形特性。它还内置了高斯溅射（Gaussian Splatting）的支持，可以加载和渲染 3D 高斯点云数据，这在同类 Web 引擎中并不多见。
XR 方面，引擎集成了 WebXR，能直接做沉浸式的 AR 和 VR 体验，不需要额外插件。物理引擎用的是 ammo.js，支持刚体物理模拟，可以做碰撞检测、重力和关节。动画系统基于状态机，可以控制角色骨骼动画和场景属性的变化，支持混合和过渡。
输入方面覆盖了鼠标、键盘、触控和手柄，API 统一。音频基于 Web Audio API，支持 3D 空间音效，声音会随距离和方向变化。资源系统支持 glTF 2.0 格式，配合 Draco 和 Basis 压缩，实现异步流式加载，大场景不用等全部资源下载完就能开始渲染。脚本用 TypeScript 或 JavaScript 编写，对前端开发者来说没有额外的学习门槛。
安装
通过 npm 直接安装：
npm install playcanvas也可以用脚手架工具快速创建项目：
npm create playcanvas@latest快速上手
一个旋转立方体的例子，几十行代码就能跑起来：创建 Application 实例、给 Entity 添加 render 组件设置形状、配置相机和灯光，然后在 update 回调里每帧旋转物体。整个流程没有黑盒，每一步都是显式的 API 调用。引擎提供了 CodePen 在线示例，浏览器里就能改代码看效果，不用装任何东西。
生态
PlayCanvas 不只是一个引擎核心。它有 React 渲染器@playcanvas/react，可以用 React 的方式写 3D 场景，组件化管理实体和属性。Web Components 支持通过@playcanvas/web-components实现声明式的 3D 开发，直接在 HTML 里写标签就能渲染 3D 内容。还有create-playcanvas脚手架工具，一行命令初始化项目结构。浏览器端的可视化编辑器可以在网页上直接拖拽搭建场景，适合设计师和非程序员参与。
谁在用
PlayCanvas 的用户包括 BMW、Disney、Samsung、Zynga、King、Nickelodeon 这些公司，应用场景覆盖游戏、广告和可视化。
对于想在浏览器里做 3D 内容的开发者来说，PlayCanvas 是一个成熟的选择。它省去了安装原生引擎的步骤，打开网页就能运行，跨平台也没有额外成本。
是一个成熟的选择。它省去了安装原生引擎的步骤，打开网页就能运行，跨平台也没有额外成本。
