Orillusion入门心得系列（一. 学前准备）

betty

引言

说起WebGPU 3D引擎，我自己在学习之前是一个纯小白懵懵的概念，只感觉3D引擎是一个很深奥的东西，完全不知道如何上手。简单查阅一些资料，会发现它涉及WebGPU机制、图形学、线代等很广很深的知识，自己在短时间内很难去掌握。这时候，我就希望能通过一些简单的示例，去了解整个引擎都有哪些功能，自己能够利用引擎去实现哪些东西。这个系列文章就是想分享一下自己的学习心得，希望让和我一样的零基础同学可以快速上手使用引擎，并了解想要深入学习的话，可以查阅哪些方面的资料。

第一期分享主要聊聊上手 Orillusion 引擎的学前准备。万事开头难，在懵懂的情况下有一个大致的知识体系梳理，和开发环境搭建，能够帮助新手快速入门。

我们主要从三个角度出发：环境搭建，前端基础，以及引擎帮助开发者做了什么。希望通过这些简单的介绍，让新入门的朋友可以对使用引擎开发实战项目有一个大体的概念和准备。

1. 环境搭建

1.1 安装Chrome Canary浏览器

WebGPU还没有正式发布，对于大家比较常用的Chrome浏览器，目前只在Canary中支持，所以我们需要下载并安装Chrome Canary版本。

安装完成后，我们还需要开启浏览器的webgpu特性，步骤如下：
1）打开Chrome Canary，在上方搜索栏里输入chrome://flags/
2）搜索 Unsafe WebGPU 选项
3）将其设置为 Enabled

1.2 挑选一款喜欢的编辑器

开发项目需要一个编辑器来编辑代码源文件。
除了提供编写环境，编辑器通常还可以帮助开发者提供语法高亮、语法检查等功能。
前端开发常用的编辑器/IDE有 VSCode、Sublime、Atom、WebStorm等。
在这里我非常推荐使用 VSCode 作为实战项目的编辑器。相较于 Sublime 的插件化，VSCode 集成了更多的类似于IDE的功能，同时也提供了非常多的插件可供功能扩展。Atom 是一款基于HTML的开源编辑器，其本身就带有类似浏览器的调试功能，感兴趣的同学可以尝试使用。WebStorm 则是一款集成式的IDE，也有其特定用户群。

1.3 创建基本的引擎程序

完成这两步，就可以创建基本的引擎程序了。
首先，在VSCode里新建一个index.html文件，然后通过script标签引入 Orillusion 引擎库。方式有两种：
1）全局引入

<script src="https://unpkg.com/@orillusion/core/dist/orillusion.umd.js"></script>

通过以下任一方式引入类：

<script>
  const { Engine3D, Camera3D } = Orillusion
</script>

或

<script>
  Orillusion.Engine3D ...
</script>

2）以 ES Module 的方式导入

全局引入js变量的加载方式，存在很多缺陷，比如容易造成全局作用域变量命名冲突等。随着ES6的发展，ES Module 的概念被官方提出，用以模块管理。Module允许每个js文件以模块的形式 export 变量或 import 来自其他模块的输出变量。以script标签形式载入ES Module，需要添加 type="importmap" 并使用 imports 引入的对应的 js 库，示例如下：

<script type="importmap">
{
  "imports": {
    "Orillusion": "https://unpkg.com/@orillusion/core/dist/orillusion.es.js"
  }
}
</script>

加载js库后，与全局引入的方式类似，我们需要引入开发时所用到的类。
我们可以通过以下任一方式引入类：

<script type="module">
  import { Engine3D, Camera3D } from 'Orillusion'
</script>

或

<script type="module">
  import * as Orillusion from 'Orillusion'
</script>

接下来，我们就可以进行开发了，写好代码后，只需要在Canary浏览器中打开index.html，就可以看到运行效果。

1.4 进阶：Node.js与前端构建工具

对于大一些的项目，开发者通常需要用到多个库，文件结构也比较复杂，仅用传统html/js文件进行编辑开发显得效率不足，甚至有时候不启用本地服务器，在资源加载时还可能出现跨域的问题。这时候，Node.js 是帮助用户开发的一大利器。

Node.js 是一个基于javascript的运行环境，与我们常在浏览器中运行的js脚本不同，Node.js提供了许多服务器端的功能。Node.js还有一个配套的包管理工具，NPM （Node Package Manager）。js库打包发布到npm上，开发者可以利用npm命令进行包的下载安装，并利用脚本实现项目的构建与启动。在开发模式下，npm管理的前端项目可以利用Node.js启动本地服务器，以托管html/js/css以及资源文件，开发者只需在浏览器中打开本地服务器地址，即可看到程序运行效果。

Node.js 需要在官网 https://nodejs.org/ 下载，下载时会自动安装 npm。
Node.js 版本在不断更新，有时新老版本会不兼容，如果需要进行版本管理，需要另行安装 nvm

安装完Node.js, 我们即可以新建npm项目。
打开命令行，进入项目目录，可以通过如下指令安装Orillusion库：

npm install @Orillusion/core --save

安装好Node.js之后，我们还需要选择一款前端构建工具，帮助我们构建前端项目。构建流程包括编译、打包、压缩资源等环节，简而言之，即以自动化的方式帮助开发者整合项目资源。目前常用的前端构建工具有 vite 和 webpack。这里我们选择 vite 进行详细一些的介绍：

在命令行中输入如下指令，可以快速构建一个 vite 项目：

npm create vite@latest

对于初学者，我们无需选择任何框架，可以选择基于原生的 Vanilla (香草 - 原生JS) 模版进行开发学习:

Screen Shot 2022-09-11 at 21.42.14.png

创建后，我们可以看到在项目根目录下有一个vite.config.js 文件，它包含 vite 的配置信息，包括本地服务器端口信息，插件配置等等，是比较关键的文件。

在 package.json 中，我们可以定义简单的启动、打包脚本，vite 脚手架会帮助我们自动创建这个文件：

{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

在命令行中输入如下指令，即可启动本地开发服务器：

npm install
npm run dev

Vite 会帮我们启动一个开发服务器，管理所有模块加载和依赖，在程序中，我们即可通过以下方式导入 Orillusion 的引擎模块：

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

或

import * as Orillusion from '@Orillusion/core'

2. 前端基础

基于WebGPU的3D引擎同其他前端项目一样，是运行在浏览器环境中的程序，使用引擎开发实际项目，也需要了解一些前端基础概念。

2.1 JavaScript, CSS, HTML

在浏览器中运行的前端项目，通常由三部分构成：
html文件负责页面结构与组件渲染，js负责交互与逻辑程序的编写，css负责样式展示。

在前端3D项目中，通常来讲，逻辑程序占据主要的地位，所以先来讲讲 js。js，全称 JavaScript, 是一种可以运行于浏览器中的脚本语言。类似大多数编程语言，js拥有条件、循环等基础语法以实现常用算法逻辑，与此同时，js提供了大量与网页交互api，可以用来创建动态更新的内容，控制多媒体，制作图像动画等。详细介绍见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript。

另外，值得一提的是，Orillusion 引擎是用 ts（typescript）来编写的。Typescript 可以理解为js的超集，除了支持js语法外，还增加了类型定义的句法。我们推荐开发者尝试使用ts来开发程序，使用ts在编译时即可检查类型传递是否一致，可以有效避免在传统js中因弱类型而出现的许多坑。

HTML，全称 HyperText Markup Language，是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。HTML提供了大量标签供用户定义网页构成，比如div，span，button等。更多HTML介绍见 https://developer.mozilla.org/zh-CN/docs/Web/HTML。

CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。css可以通过id、类、标签来选择元素，并为所选元素设置相应的样式。使用CSS可以方便地定义文档中同类节点的样式，而无需额外的工作。同时css也支持动画的设定。更多CSS介绍见https://developer.mozilla.org/zh-CN/docs/Web/CSS。

2.2 Canvas, WebGL, WebGPU

上一小节中我们介绍了传统前端项目的“三件套”，但很多同学可能会感觉，这些内容与3D项目开发，关系似乎不是很大。这一小节中我们就详细介绍一下和3D开发息息相关的前端知识。

canvas，顾名思义，是一个由HTML定义的画布标签，该标签可以在浏览器页面中创建一张画布，而我们的3D画面，就是渲染在这张画布上的。

创建 canvas 标签很容易，比如，可以在HTML文件中定义：

<canvas id="canvas" width="150" height="150"></canvas>

也可以通过js的方式添加：

let canvas = document.createElement('canvas');
document.body.appendChild(canvas);

我们可以通过如下方式获取指定id的canvas：

let canvas = document.getElementById('canvas');

canvas的绘制或渲染是在其上下文中进行的，我们可以由 getContext 方法获取 canvas 对应的上下文，进而对画布进行绘制。

let ctx = canvas.getContext(contextType, contextAttributes);

其中，contextType决定了该上下文对应的类型，而我们常说的webgl，webgpu，在这里都是单独的上下文类型，也就是说，只有获取到特定类型的上下文，才能使用该上下文提供的绘制、渲染api。
比如说，获取 webgpu 上下文，可以通过如下方法：

const context = canvas.getContext('webgpu');

对于上下文获取的介绍可以见 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext
特别地，对于 WebGPU 上下文获取的介绍可以见 https://www.w3.org/TR/webgpu/#gpucanvascontext

目前大多数前端3D项目都是以webgl标准进行渲染的。而webgpu则是W3C正在编写的新一代基于GPU渲染的Web图形api，目前还在试验性阶段。webgpu与webgl类似，都定义了一套web端的图形API，并暴露了GPU硬件的功能。

有关webgpu与webgl更详细的介绍可以参考如下网站：
WebGPU: https://www.w3.org/TR/webgpu/#intro
WebGL: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

3. 引擎帮助开发者做了些什么

将话题回到引擎本身：为什么开发者通常喜欢使用一个引擎来帮助其开发项目呢？
很直观的答案是，从底层从零到一的搭建3D项目是一件很复杂的事，其技术门槛与耗时都使大多数开发者更倾向于使用封装好的引擎来实现开发，帮助提升开发效率。
这么说多少有些抽象，那么我们来看看引擎到底帮助开发者做了哪些工作：

一. 图形流水线的封装

底层图形API包含一系列图形流水线的逻辑编写，比如编写顶点着色器、片元着色器等，其中通常包含物体的模型变换、透视变换等复杂数学计算，以及实现材质效果的复杂光照计算。引擎将这些内容抽象出来，为开发者写好了底层逻辑，提供易于理解的api及通用参数供开发者调用修改。

二. 3D项目中常用功能的封装

引擎提供了3D项目中常用的功能模块，比如资源加载，物理，动画等等。这些功能每一个模块的编写都非常耗时，且需要更底层的专业知识。将这些内容封装成通用模块，有利于开发者更专注于程序逻辑本身的编写，而不用再费时费力写一些例如模型解析的底层功能。

三. 基础库的封装

引擎同样提供了许多3D开发中常用的基础方法，例如数学库等。

可以说，引擎帮助开发者做了大量繁复的底层工作，可以让开发者更专注于上层用户逻辑的编写，从而提升开发效率。

shuangliu

Orillusion 目前仍然在内测中，相应的 @orillusion/core 和 unpkg 链接无法直接访问，我们正在积极准备文档，稍后开放

lightgm

有没有类似pixijs的2d封装?我本来打算用pixijs渲染我的项目,不知道orillusion会不会提供?或者已经提供了类似的基本2d图形+文字的渲染方法封装?

shuangliu

@lightgm 目前还没有2d相关封装，后续会扩充相关生态