社区分享 | Orillusion 引擎入门系列 —— 如何创建一个简单的 3D 示例

2023-04-06
北京
本文字数：4668 字
阅读完需：约 15 分钟

做了很多年的应用开发想要在技术上有些突破，是时候学点真正的技术了，我选择了 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 小白，我的目标是始于 Orillusion 但不会止于某一引擎，通过充分熟悉一个引擎的用法来积累 3D 知识。可以看到每一个类都对应着 3D 世界的基础概念，在这里做一个简单的对应，顺便看看一个 3D 世界由哪些部分组成的，当然这里只有一个基础印象即可，不必深究。

立方体：我们看到的立方体，是一个基础几何体，由类 BoxGeometry 来创建，实例化这个类在构造函数中指定长宽高，引擎就会为我们绘制出一个立方体，就像我们看到的这样。

相机：相机是一个比较抽象但是在 3D 中无处不在，可以理解成我们的眼睛，我们是通过相机来观察 3D 内景物的，比如前面的立方体要在相机的可视范围内我们才能看到，在这里用组件 Camera3D 来定义。

场景：是一个容器，前面的立方体、相机等等还有其它的对象、组件都是要添加到场景内才能被引擎组织和使用的，我们创建一个 3D 程序必须有一个场景，我们可以通过 Scene3D 类创建场景

这里只介绍了三个最基础的组成部分，几何体、相机、场景，这三个部分在每一个 3D 程序中都是最基础的不可少的，以后我们会逐渐深入了解他们，也将会慢慢知道更多的工具。

小结

这篇文章是个开篇，快速上手了一个入门级别的 3D 示例，主要的作用并不是学习 3D 的基本技能，可以说更重要的是消除疑惑，最简单的上手 3D 项目。不得不说 Orillusion 没有让我失望，以我目前这么简单的诉求也不会让我失望吧。

作为 3D 新手，后续会不断的记录学习过程，期待与你一起学习一起飞！

欢迎大家关注我们官号，加入 Orillusion 开发者社群，陪我们一起见证 WebGPU 的发展。快来成为 Orillusion 社区第一批“源”住民吧！让一起打造有价值、有活力、有温度的共创社区！

Orillusion 致力于打造全世界第一款完全开源基于 WebGPU 标准的一种轻量级渲染引擎,目标是在浏览器中实现桌面级的渲染效果，支持超大复杂场景的 3D 呈现。易上手，易分享，易迭代，易协作、成本低，跨平台是我们的核心优势，我们将为 3D 场景爆发时代提供引擎基础工具。

未来我们将会持续把最干货最前沿的 WebGPU 技术分享给每一位社区成员，也欢迎大家为 Orillusion 开源社区做出自己的贡献。我们一直坚信，开源社区的技术留痕是每一位技术人员最崇高的追求！因此，我们尊重，我们认可，我们更期待，加入 Orillusion，让我们共同进步！

——Link uncharted, 链接未来世界

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/fb619c84a513743ff496e3ab7】。文章转载请联系作者。

Orillusion

关注

打造完全开源WebGPU轻量级渲染引擎~ 2021-12-20 加入

全世界第一款完全开源基于WebGPU标准的轻量级渲染引擎，在浏览器中实现桌面级渲染效果，支持超大复杂场景3D呈现。易上手，易分享，易迭代，易协作、成本低，跨平台是核心优势，将为3D场景爆发时代提供引擎基础工具。

发布

暂无评论

创作场景