Orillusion正式公测开启，这份指南请收好！

Orillusion开放公测来啦~

大家期待的新一代完全开源的轻量级的基于 WebGPU 标准的渲染引擎终于要闪亮登场啦！

Orillusion是基于浏览器的Web渲染引擎，采用了最新的WebGPU标准来提供底层的图形能力。引擎的整体框架采用了现代引擎遵循的ECS组件式架构，以更为严谨的TypeScript作为开发语言。通过集群前向渲染和动态全局光照，使得整体的3D场景计算效率和渲染效果得到了质的提升。目前，Orillusion引擎还处于快速迭代升级阶段，很多桌面级的图形能力，都将因为WebGPU标准的出现而迁移到Web端。同时，基于浏览器的Web环境，天然地赋予了我们很多应用层面的优势，比如易分享、易协作、易上手、跨平台等等。因此，Web3D领域孕育着巨大的想象空间。

现在是不是摩拳擦掌想试试啦，简单三步教你轻松上手~

温馨Tips

针对浏览器版本：Chrome Canay 113

此次更新面对广大开发者，非开发者用户不建议申请。

Orillusion 0.5 版本仅是一个公测版本，尚不稳定，不建议进行商业应用开发。

此次仅开放NPM安装包，源代码会在后续优化过程中，择日开放。
希望大家遇到问题和Bug，积极反馈，我们会全力第一时间修复。

步骤一：构建Web3D应用

配合Vite 或 Webpack 等前端生态框架，来构建前端项目。(如果在现有的项目中使用，可以跳过此步骤)
Orillusion正式公测开启，这份指南请收好！

步骤二：安装Orillusion引擎

通过 NPM 安装（更多的安装方式请参考教程文档）

我们可以通过任何熟悉的IDE来完成Orillusion引擎的安装，我们推荐小白用户直接无脑安装VScode。后续我们也会在VScode环境中开发插件，来辅助大家更灵活便捷的使用Orillusion引擎。

a. 在构建好的项目中使用 npm 命令，在提示行中安装引擎依赖：

npm install @orillusion/core --save

b. 可以按需求引入指定模块，或引入全局模块：


import { Engine3D, Camera3D } from '@orillusion/core'


import * as Orillusion from '@orillusion/core'

步骤三：使用Orillusion引擎

创建 Engine3D 实例

在使用引擎前，必须通过 Engine3D.init() 方法进行初始化，引擎会自动创建一个 Engine3D实例


import { Engine3D } from '@orillusion/core';

Engine3D.init().then(()=>{
  // 进行后续操作
})

创建 Canvas画布

默认参数下，Engine3D.init() 实例会自动生成一个以屏幕大小为宽高的 canvas 画布。如果不想使用引擎自动创建的画布，用户也可以手动创建画布。


import { Engine3D } from '@orillusion/core';

let canvas = document.getElementById('canvas')//需要在HTML内自行创建ID为canvas的元素
await Engine3D.init({
  canvasConfig: { canvas }
});