Orillusion：基于 WebGPU 标准的纯 Web3D 渲染引擎
Orillusion 是一个完全基于 WebGPU 标准开发的纯 Web3D 渲染引擎，目标是实现桌面级渲染效果，并支持在浏览器中进行复杂场景的 3D 渲染。当前为 Beta 版本，官方明确不推荐用于任何商业应用。项目采用 MIT 许可证，提供 NPM 与 CDN 两种接入方式，支持 Chrome 113+/Edge 113+ 等已支持 WebGPU 的浏览器。
社区作者 · zZz
它解决什么问题
Orillusion 是一个纯 Web3D 渲染引擎，完全基于 WebGPU 标准开发，旨在实现桌面级渲染效果，并支持在浏览器中渲染复杂 3D 场景。项目封面（配图 1）为其 Cover Art/Logo，配图 2 至配图 12 为官方示例场景的效果图。
项目定位与背景
- WebGPU 是 Web 领域的最新技术，官方认为它将在 3D 渲染以及 AI/LLM 场景中发挥关键作用。
- 项目目标是创建一个专注于 WebGPU 领域的技术社区，汇聚优秀开发者。
- 官方希望越来越多前端开发者能够跟进最新 Web 技术，而不仅仅是做网页设计的图片切片。
- 官方将持续更新开源贡献者提供的优秀示例，让社区看到更好的作品，并希望帮助社区中才华横溢的个人开发者获得更多关注。
技术要点
- 纯 Web3D 渲染引擎，基于 WebGPU 标准开发。
- 支持浏览器内复杂场景的 3D 渲染，追求桌面级渲染效果。
- 提供 NPM 包 @orillusion/core，同时支持原生 <script> 标签通过官方 CDN 引入，共有全局构建（UMD）、ESModule 构建和 Import Maps 三种引入方式。
- Engine3D.init() 为异步方法，每次调用返回一个独立引擎实例，可在同一页面并行运行多个引擎。
版本状态提醒
- 当前为 Beta 版本，官方明确表示不推荐用于任何商业应用。
适用平台
- Windows/Mac/Linux：Chrome 113+、Edge 113+。
- Android：需在开启 enable-unsafe-webgpu flag 的情况下使用 Chrome Canary 113+ 或 Edge Canary 113+。
相关链接
- 官方网站（Official Web Site）
- 文档（Documentation）
- 论坛（Forum）
- 贡献指南（Contributing Guide）
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
一、环境准备
- 浏览器要求（WebGPU 支持）：
- Windows/Mac/Linux：Chrome 113+ 或 Edge 113+。
- Android：需在开启 enable-unsafe-webgpu flag 的前提下使用 Chrome Canary 113+ 或 Edge Canary 113+。
- 开发方式：官方推荐使用前端构建工具（如 Vite 或 Webpack）来开发 Web3D 应用。
- 版本提醒：当前为 Beta 版本，官方不推荐用于任何商业应用。
二、安装方式一
NPM- 安装依赖：
npm install @orillusion/core --saveimport { Engine3D, Camera3D } from '@orillusion/core'
import * as Orillusion from '@orillusion/core'
- 按需引入：
- 全局引入：
三、安装方式二
CDN 为了更便捷地使用引擎，官方支持用原生 <script> 标签引入 Orillusion，官方 CDN 链接共有三种引入方式：
<script src="https://unpkg.com/@orillusion/core/dist/orillusion.umd.js"></script> <script> const { Engine3D, Camera3D } = Orillusion </script> 上述链接加载的是 Orillusion 的全局构建版本，所有顶层 API 都作为全局 Orillusion 对象上的属性暴露。
- 全局构建（Global Build）——可直接通过 CDN 用 script 标签使用 Orillusion：
<script type="module"> import { Engine3D, Camera3D } from "https://unpkg.com/@orillusion/core/dist/orillusion.es.js" </script>
<!-- 定义 ES Module 的名称或地址 --> <script type="importmap"> { "imports": { "@orillusion/core": "https://unpkg.com/@orillusion/core/dist/orillusion.es.js" } } </script> <!-- 可以按自定义名称导入 --> <script type="module"> import { Engine3D, Camera3D } from "@orillusion/core" </script>
- ESModule 构建——官方推荐使用 ESModule 方式进行开发。由于大多数浏览器已支持 ES module，只需引入 ES 构建版本的 orillusion.es.js：
- Import Maps——为了管理依赖名称，官方推荐使用 Import Maps：
四、首次运行
创建 Engine3D 实例
import { Engine3D } from '@orillusion/core' Engine3D.init().then((engine) => { // Next })
import { Engine3D } from '@orillusion/core' async function demo() { const engine = await Engine3D.init(); // Next } demo()
- 使用 Engine3D.init() 创建新的引擎实例。每次调用都会返回一个独立实例——你可以在同一个页面中并行运行多个引擎。
- 由于 Engine3D.init() 是异步的，官方推荐在代码中使用 async/await：
五、首次运行
创建 canvas
- 默认情况下，Engine3D.init() 会创建一个与窗口同尺寸的 canvas。
<canvas id="canvas" width="800" height="500" />
import { Engine3D } from '@orillusion/core'; let canvas = document.getElementById('canvas')
- 也可以手动使用带 id 的 <canvas> 创建画布：
- 然后通过 id 获取该 <canvas>，并通过 canvasConfig 传给 Engine3D.init()：
const engine = await Engine3D.init({ canvasConfig: { canvas } })
- 更多内容请阅读官方 Docs 文档。
六、常见问题
- 能否用于商业项目？当前为 Beta 版本，官方明确不推荐用于任何商业应用。
- 浏览器运行不起来？请确认浏览器满足 WebGPU 要求：Windows/Mac/Linux 使用 Chrome 113+ 或 Edge 113+；Android 需开启 enable-unsafe-webgpu flag 并使用 Canary 版本。
- 能否在同一页面运行多个引擎？可以，每次调用 Engine3D.init() 都返回独立实例，支持并行运行。
- 开发或提交 Pull Request 前，请务必先阅读官方 Contributing Guide。
- 遇到问题可查阅官方文档（Documentation）、官方网站与论坛（Forum）。
