PlayCanvas Engine：浏览器中的高性能 3D 引擎

PlayCanvas Engine 介绍

GitHub 地址

PlayCanvas Engine 是一个开源的、高性能的 Web 3D 引擎，由 PlayCanvas 公司维护。它使用 JavaScript 编写，运行于浏览器环境，基于 WebGL、WebGPU、WebXR 等现代标准，并且在 GitHub 上以 MIT 协议开源。

它既可以作为一个 独立引擎 (runtime) 使用，也可以配合 PlayCanvas 的在线 Editor 来构建复杂的 3D 应用。

核心特点

  1. 轻量且高性能
    引擎小巧，启动快，适合浏览器运行的高性能 3D 内容。

  2. 现代图形渲染

    • 支持 WebGL2 / WebGPU
    • 物理基础渲染 (PBR)
    • GPU 实例化 (instancing)、粒子系统、blend shape 动画
    • 自定义着色器 (shader chunk system)

  3. 实体-组件系统 (ECS)

    • 使用实体 + 组件架构
    • 可添加模型、摄像机、光源、物理等组件

  4. 物理引擎

    • 集成刚体物理 (Ammo.js)

  5. 动画系统

    • 状态图动画、Blend Shape、GPU Skinning

  6. 输入与音频

    • 支持鼠标、键盘、触摸、游戏手柄、VR 控制器
    • 支持 3D 声音 (positional sound)

  7. 资源加载

    • 异步加载模型、贴图、音频
    • 支持 glTF 2.0、Draco 压缩模型

  8. WebXR 支持
    可用于 VR / AR 网页体验

  9. 实时开发与迭代

    • 零编译 (Zero compile time)
    • 热加载脚本，快速迭代

  10. 开源 & 社区

    • MIT 协议开源
    • 完整 API 文档与示例
    • 社区活跃，支持贡献

适用场景

  • Web 游戏：轻量 3D 游戏、休闲游戏、多人即时世界
  • 交互式可视化：产品展示、建筑、工业仿真、科研教育
  • Web AR / VR 应用
  • 动画 / 演示：角色、场景动画、企业演示
  • 多人协作平台：虚拟世界、教学、虚拟活动
  • 实时 3D Web 应用：3D 仪表板、可视化数据展示

最小可行性 Demo（Hello Cube）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>PlayCanvas Hello Cube</title>
    <style>
      html,
      body,
      canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="application-canvas"></canvas>
    <script src="https://code.playcanvas.com/playcanvas-stable.min.js"></script>
    <script>
      const canvas = document.getElementById("application-canvas");
      const app = new pc.Application(canvas, {
        mouse: new pc.Mouse(canvas),
        touch: new pc.TouchDevice(canvas),
      });
      app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
      app.setCanvasResolution(pc.RESOLUTION_AUTO);
      window.addEventListener("resize", () => app.resizeCanvas());

      const box = new pc.Entity("cube");
      box.addComponent("model", { type: "box" });
      app.root.addChild(box);

      const camera = new pc.Entity("camera");
      camera.addComponent("camera", {
        clearColor: new pc.Color(0.1, 0.2, 0.3),
      });
      app.root.addChild(camera);
      camera.setPosition(0, 0, 3);

      const light = new pc.Entity("light");
      light.addComponent("light");
      app.root.addChild(light);
      light.setEulerAngles(45, 0, 0);

      app.on("update", function (dt) {
        box.rotate(10 * dt, 20 * dt, 30 * dt);
      });
      app.start();
    </script>
  </body>
</html>