做了很多年的应用开发想要在技术上有些突破，是时候学点真正的技术了，我选择了3D技术，经过一番搜索，Orillusion 着实让我感动，满足了我所有的要求，并且国产引擎能提供全面的中文资料支持和更小的交流成本
为什么选择Orillusion
没有专业的对比，仅凭我个人的好恶盲目来选择，简单从这两个方面来考虑
Native or Web?
如果您是专业人士建议详细对比两种类型的发展历史和原理再做出判断，对于我一个3D新手来说，有一个简单粗暴的判断思路，那就是在应用系统上，CS架构仍在某些特定领域仍然存在，但是能够迁移到BS的，几乎都在大规模的迁移到了BS架构上，所以我挺Web渲染架构。
足够新
新人就要有新人的觉悟，老牌的各路引擎已经有无数高手浸淫其中多年了，冒然投入进去会被沉重的历史信息淹没，作技术还是要有点野心的新手终有一天会成老鸟，所以要选择最新推出的面向最新技术架构的引擎，那么有多新呢，标准还没正式应用的够新吧，那就是以面向WebGPU为第一图形标准实现功能，至于WebGPU是什么，我的理解是更新、更快、更强，至于具体如何做到，相信以后我们会知道的。
准备工作
唯一必须的的准备工作是做好心理建设，不要想一口吃成个胖子，不要过早深究原理，我们的目标是借助引擎的能力来实现3D效果，除此以外还有两件小事需要留意。
开发环境
理论可以不借助任何第三方库运行Orillusion框架，所以我们先体验一下最简化的版本。
但是随着功能的增多，推荐node+vite+vue这套工具链，当然可以用其它任何熟悉的开发工具完全可以，所以建议请安装好nodejs，并配置好环境变量，同时假设vue3已经可以正常使用。这里我使用vite作为项目创建工具，使用vscode做编辑器，没有其它的前置条件，轻装上阵。如果这一步有什么疑问，请自行查找资料，相信聪明的你不会被难住。
运行环境
由于WebGPU标准并未正式推出，需要使用开发浏览器，这里推荐 Chrome Canary ，下载后在在Canary中运行效果，由于Canary仍然在变动中，需要在地址栏中输入 chrome://flags/#enable-unsafe-webgpu，然后开启 Unsafe WebGPU 选项。
如果无法开启或者没有效果，需要搜索最新的开启方法，相信不久的将来在正式版就可以附带WebGPU支持了，不需要这么繁琐了。
同时为了做两手准备，也可以考虑用 Edge Canary 来应个急，下载后正常安装，启动后在地址栏中输入edge://flags/#enable-unsafe-webgpu，开启WebGPU支持。
在浏览器正式版本支持WebGPU之前，关于浏览器的支持情况会经常变化，如果不能正确访问，建议多寻找一下当下的信息。
Hello 3D
参照官方文档，使用CDN直接引用Orullision引擎库是最简单的方式，为了做最简单的体验不引用任何第三方。创建一个html文件，使用任何一款支持资源加载的服务软件都可以直接运行。比如nginx、tomcat、live Server等。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello Orillusion</title> <script src="https://cdn.orillusion.com/orillusion.umd.js"></script></head> <body> <script type="importmap"> { "imports": { "@orillusion/core": "https://cdn.orillusion.com/orillusion.es.js" } } </script> <script type="module"> import { Engine3D, Camera3D, Object3D, Scene3D, HoverCameraController, MeshRenderer, BoxGeometry, LitMaterial, ForwardRenderJob } from "@orillusion/core" // 初始化引擎 await Engine3D.init(); // 创建场景对象 let scene = new Scene3D(); //创建相机对象 let cameraObj = new Object3D(); //创建相机组件 let camera = cameraObj.addComponent(Camera3D); // 设置相机类型 camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0); //创建控制器 let controller = cameraObj.addComponent(HoverCameraController); controller.setCamera(20, -20, 25); // 添加相机对象至场景 scene.addChild(cameraObj); // 创建一个实体对象 let boxObj = new Object3D(); // 创建渲染组件 let mr = boxObj.addComponent(MeshRenderer); // 创建几何体，并添加至网格 mr.geometry = new BoxGeometry(5, 5, 5); // 创建一个物理材质并添加至 mr.material = new LitMaterial(); // 将实体对象添加到场景 scene.addChild(boxObj); // 创建前向渲染 let renderJob = new ForwardRenderJob(scene); // 开始渲染 Engine3D.startRender(renderJob); </script></body> </html>
运行后可以在浏览器直接查看效果，如果出现问题请查看控制台日志，比较容易出错的是WebGPU支持问题，请注意查看准备工作部分。
创建项目
以一个用户数比较多的vue3作为示例(当然用react或完全不用框架完全可行)，使用从头开始搭建一个Orillusion项目。
这里我们先创建一个普通的vue3项目，再将引擎引入项目，操练起来吧，很快就能看到我们在做什么了。
1 创建根目录
a. 选择一个文件夹，创建orillusion目录
b. 进入orillusion，并在该目录下打开命令提示行
2 创建项目
a. 执行命令 npm create vite@latest
b. Project name 下输入 hello3d 作为项目名并回车
c. 使用键盘方向键选择 vue 作为框架，并回车
d. 仍然使用键盘方向键选择 vue-ts 作为项目类型，并回车，已经创建了 hello3d 项目目录结构
e. 输入 cd hello3d 进入项目目录
f. 输入 npm install 安装依赖包，至此，基本的vue3项目已经创建完成
3 安装Orillusion
a. 输入 npm install @orillusion/core --save 安装 orillusion 开发包(如果安装失败，请注意分辨网络原因或安装权限)
b. 输入 npm run dev ，可以看到在5173端口启动了服务
c. 打开 canary 浏览器，输入完整地址可以看到显示了vue3的欢迎页，至此项目已经安装完成，后面进行开发。
Orillusion是基于浏览器的Web渲染引擎，采用了最新的WebGPU标准来提供底层的图形能力。引擎的整体框架采用了现代引擎遵循的ECS组件式架构，以更为严谨的TypeScript作为开发语言。通过集群前向渲染和动态全局光照，使得整体的3D场景计算效率和渲染效果得到了质的提升。目前，Orillusion引擎还处于快速迭代升级阶段，很多桌面级的图形能力，都将因为WebGPU标准的出现而迁移到Web端。同时，基于浏览器的Web环境，天然地赋予了我们很多应用层面的优势，比如易分享、易协作、易上手、跨平台等等。因此，Web3D领域孕育着巨大的想象空间。
编写代码
1.在 vscode 中打开 hello3d 目录
2.在 src 目录下新建目录 demo
3.在 demo 目录下创建文件 hello.ts
import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 } from "@orillusion/core";
export default class Hello {
async run() {
console.log('hello 3d');
// 初始化引擎
await Engine3D.init();
// 创建一个场景
let scene3D: Scene3D = new Scene3D();
// 创建一个相机
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// 设置相机类型
camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
// 设置相机控制器
let controller = cameraObj.addComponent(HoverCameraController);
controller.setCamera(20, -20, 25);
// 添加相机至场景
scene3D.addChild(cameraObj);
// 创建一个对象
const obj: Object3D = new Object3D();
// 创建渲染组件
let mr: MeshRenderer = obj.addComponent(MeshRenderer);
// 设置形状
mr.geometry = new BoxGeometry(5, 5, 5);
// 设置材质
mr.material = new LitMaterial();
// 添加到场景
scene3D.addChild(obj);
// 创建前向渲染
let renderJob: ForwardRenderJob = new ForwardRenderJob(scene3D);
// 开始渲染
Engine3D.startRender(renderJob);
}
}
可以看到核心代码和cdn引入方式基本相同，这里请允许有一些冗余的存在，以便对与我一样的小白更友好一些。
完成项目
可以看到，创建完一个项目后，只添加了hello.ts文件和修改了App.vue。这样一个真正的3D项目开发完成了，再在浏览器里面看一下运行效果(不要忘记在Canary)。
3D示例
你得到了一个可以用鼠标操作的立方体，按住左键拖拽可以任意旋转，滑动滚动可以调整距离，按住右键拖拽可以快速调整立方体位置，可以多操作一下熟悉一下这种最常见的操作方式。
回忆我刚运行这一步时还是有点激动的，终于迈进了3D技术的大门，尽管是借用了引擎的助力，不过我们程序员就要擅长找到适合自己的工具。
代码解析
作为3D小白，我的目标是始于Orillusion但不会止于某一引擎，通过充分熟悉一个引擎的用法来积累3D知识。可以看到每一个类都对应着3D世界的基础概念，在这里做一个简单的对应，顺便看看一个3D世界由哪些部分组成的，当然这里只有一个基础印象即可，不必深究。
立方体：我们看到的立方体，是一个基础几何体，由类BoxGeometry来创建，实例化这个类在构造函数中指定长 宽 高，引擎就会为我们绘制出一个立方体，就像我们看到的这样。
相机：相机是一个比较抽象但是在3D中无处不在，可以理解成我们的眼睛，我们是通过相机来观察3D内景物的，比如前面的立方体要在相机的可视范围内我们才能看到，在这里用组件Camera3D来定义。
场景：是一个容器，前面的立方体、相机等等还有其它的对象、组件都是要添加到场景内才能被引擎组织和使用的，我们创建一个3D程序必须有一个场景，我们可以通过Scene3D类创建场景
这里只介绍了三个最基础的组成部分，几何体、相机、场景，这三个部分在每一个3D程序中都是最基础的不可少的，以后我们会逐渐深入了解他们，也将会慢慢知道更多的工具。
小结
这篇文章是个开篇，快速上手了一个入门级别的3D示例，主要的作用并不是学习3D的基本技能，可以说更重要的是消除疑惑，最简单的上手3D项目。不得不说Orillusion没有让我失望，以我目前这么简单的诉求也不会让我失望吧。
作为3D新手，后续会不断的记录学习过程，期待与你一起学习一起飞！
基金会的数量和种类很多，每个基金会的领域、特点、优势也不尽相同。开源基金会在开源的发展中发挥着举足轻重的作用。Orillusion也希望通过自己的努力，为开源社区做出自己的贡献！
Orillusion致力于打造全世界第一款完全开源基于WebGPU标准的一种轻量级渲染引擎,目标是在浏览器中实现桌面级的渲染效果，支持超大复杂场景的3D呈现。易上手，易分享，易迭代，易协作、成本低，跨平台是我们的核心优势，我们将为3D场景爆发时代提供引擎基础工具。
未来我们将会持续把最干货最前沿的WebGPU技术分享给每一位社区成员，也欢迎大家为Orillusion开源社区做出自己的贡献。我们一直坚信，开源社区的技术留痕是每一位技术人员最崇高的追求！因此，我们尊重，我们认可，我们更期待，加入Orillusion，让我们共同进步！
——Link uncharted, 链接未来世界
原文链接：https://juejin.cn/post/7334755783752695844 作者：Orillusion
