前言

随着3D技术在Web领域的应用，带来了用户体验质量的飞跃。 后端是业务的主力军，3D技术的进步也在不断创造后端业务的新形态。 精细的3D仿真模型展示，让用户即使不在现场也能了解产品细节。 AR/VR技术在家居乃至医疗诊断中的广泛应用，让虚拟试衣、远程诊断成为我们日常使用的功能。

web3D 简介

网页图形API开发

正是因为Web图形API的发展，我们才有了在Web端操作图形的能力，才能做出这么多有趣、新颖的交互产品。

传统的HTML和CSS可以说是应用最广泛的图形技术sketch engine类似应用，而对于复杂的图形来说，其维护成本和性能开销都很高。 SVG在不增加质量的情况下进行放大和缩小，这在一定程度上填补了HTML+CSS的不足，但其最小单位是图形而不是像素，处理细节的能力不足。 这就是我们今天所熟悉的标签。 它调用绘图命令直接在页面上绘制图形，表现力深入到像素级别。 但这里仅限于二维世界，直到 2011 年 WebGL 1.0 标准规范发布。

相比之下，WebGL不仅降低了z轴，而且是一种越来越低级的图形编程技术。 WebGL基于浏览器的实现，借助GPU的并行处理特性，可以渲染各种复杂的2D和3D图形。 这也使得在处理大量数据时比以前要好很多。

去年我们可能或多或少听说过它可以被视为下一代WebGL。 WebGL是基于浏览器实现的。 在GPU的世界里，它可以说是一个老古董了，现代GPU硬件技术的飞速进步并没有在它身上得到体现。 为此苹果提出了基于Metal和12的版本，去年就有消息称要推出1.0版本。

简单回顾一下，我们可以看到，与传统游戏图形开发相比，Web端更多的是技术栈上的差异，图形底层套接字和实现技术是相同的。

引擎

有了这个图形API，后端就已经具备了操作图形的能力了。 也许你读过《WebGL编程手册》，打开第一章，发现需要180多行代码才能勾勒出一个三角形。 由此可见，普通开发者直接通过图形库进行开发是非常困难的。 这时候就需要用到发动机了。 就像我们后端会调用的各种库一样，引擎可以看作是图形的库，它提供了各种工具让图形变得更好、更高效，并为下层开发团队提供了开发平台。

通用发动机

目前市场上流行的引擎可以分为两类：端端和Web端。

最后，Unity是我们比较熟悉的老式游戏引擎； -3D主要用于小游戏，可以说是国外2D小游戏的首选； Laya专注于3D小游戏。 目前，陌陌小游戏的游戏引擎主要是Laya和Cocos。

Web端比较常见的是Three.js。 它面向前端，最早的Momo小游戏中的跳跃在Three.js中使用。 但它缺乏处理复杂游戏场景的能力，更接近于3D渲染框架。 对于 2D，有 pixi.js，它是一个轻量级渲染框架。 还有绿洲，它面向前方，交互功能齐全。

绿洲

Oasis现已在互联网开源三年，star数接近3k，并通过了上亿的商业测试。 去年年初，支付宝五福的空中书写和AR年兽就是在绿洲的支持下开发的。

绿洲面向中国联通业务，面向前端工程师。 随着中国联通业务的爆发，出现了许多新的交互需求，但旧的框架无法满足这些需求。 市场上面向Web的图形引擎的交互功能比较缺乏，在不优化后端性能的情况下，很难跨平台运行。

针对以上痛点，Oasis定位为全功能引擎。 架构采用组件化，可以提供多种交互功能，应对业务复杂性。 为了一次开发，到处跑。

构建静态场景

了解了3D技术和后端的由来，以及引擎的概念之后，我们先来构建一个简单的场景。

模型

在搭建场景的时候，首先会想到需要一个模型，就像我们后端也需要美术来提供素材，才有图片可以裁剪。 工作模型通常由艺术家在建模软件中制作和导入。 我们可以先下载一个现成的模型。

类似于图片世界的主流传输格式是png/jpg，web3D的主流格式是glTF（GL）。 这是由制定开放行业标准的行业商会发布的能够高效传输和加载3D场景的规范。 其功能包括FBX（动漫）、OBJ（模型）等传统模型格式，基本支持3D场景中的所有功能。 。

场景实体组件

在网页上显示glTF模型之前，我们先介绍一下3D领域的一些通用概念。

在基于组件的系统中，组合优先于继承。 例如，如果你想让一个实体发光并发出声音，你可以通过添加光组件和声音组件来实现。 这些方法非常适合与这些高复杂度的业务进行交互——特定的功能只需减少一个组件即可进行扩展。

那么如何在网页上显示这个模型呢？ 我们需要先激活引擎，添加场景，然后调用引擎的资源管理器直接加载glTF模型。

// 初始化引擎
const engine = new WebGLEngine(“canvas");

// 激活场景
const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity();

// 加载模型
engine.resourceManager
.load(
  “*.gltf"
)
.then((gltf) => {
  const { defaultSceneRoot } = gltf;
  rootEntity.addChild(defaultSceneRoot);
})

engine.run();

此时场景仍然一片漆黑，因为一些重要的组件仍然缺失 - 我们还没有给场景提供观察的眼睛。

单反

就像基于组件的架构一样，我们可以将一个实体降低到场景中，为该实体添加一个SLR组件，调整SLR实体的位置和方向，模型就会出现在屏幕上。

// 添加相机
const cameraEntity = rootEntity.createChild("camera");
const camera = cameraEntity.addComponent(Camera);
cameraEntity.transform.setPosition(15, 9, 15);
cameraEntity.transform.lookAt(new Vector3(0, 0, 0));

其实单反是一个具体的概念。 将三维空间中的场景变换到屏幕画布的三维投影的过程具体称为单反。

想象一下，三维空间中有一个点是单反，从这个点辐射出来的面积就是我们能看到的到远裁剪面的最远距离，到近裁剪面的最短距离。 两者之间的形状就是所谓的视图。 圆锥体，我们在屏幕上看到的是圆锥体范围内的物体，不在圆锥体范围内的物体会被裁剪掉，不会呈现在屏幕上。 影响视角FOV的不仅仅是近平面和远平面，还有视锥体的形状，即垂直方向的倾角； 以及图像屏幕的纵横比。

有正投影单反和透视投影单反两种。 透视投影与人眼看到的世界一样，近侧大，远侧小； 昨天的视锥也是以此为基础的。 正投影是指远近大小相同，三维空间中的平行线投影到二维空间中一定是平行的。 透视单反适合大多数场景。

光

与之前类似，我们直接在场景中创建实体，为实体添加灯光组件，并调整灯光颜色和强度等参数。 这样就有光了。

// 添加方向光
const lightEntity = rootEntity.createChild("Light");
const directLight = lightEntity.addComponent(DirectLight);
directLight.color.set(0.8, 0.8, 1, 1);
directLight.intensity = 2;
lightEntity.transform.setRotation(-45, 0, 0);

// 设置环境光
const ambientLight = scene.ambientLight;
ambientLight.diffuseSolidColor.set(0.8, 0.8, 1, 1);
ambientLight.diffuseIntensity = 0.5;

照明可分为两类，一类是直接照明，有平行光、点光源、聚光灯三种。 另一种是间接照明——环境光。

通常场景只需要使用默认的环境光即可。 如果环境光不满足要求，可以添加平行光和点光来补充照明细节。 出于性能原因，尽量不要使用超过 4 个直射灯。

转换

一般来说，场景中的模型不止一个，那么如何排列多个模型才能达到目标效果呢？

为了描述这个模型的位置，引入了坐标系，我们使用左手坐标系。 坐标系的原点位于渲染画布的几何中心。 对物体位置的描述是指物体的几何中心的位置。 我们可以简单的将空间单位理解为1=1m，这是为了与建模软件统一，而不是屏幕上的实际尺寸。

对于每个实体，我们需要知道它的位置。 一般来说，当创建一个新的实体时，我们会手动为这个实体添加转换组件。 变换组件可以对实体进行位移、旋转、缩放等操作，完成所需的几何变换。 经过这一系列的操作，我们已经将模型连接到了想要的位置。

这个时候看起来还是不够生动，所以我们不仅可以调整灯光，还可以考虑物体与光线的关系，也就是模型的材质。

网状材料

模型由两部分组成：网格和材质。 引擎中的网格渲染器组件很好地解释了这一点。 如果想要达到目标形状，需要创建一个实体，添加一个网格渲染器，并指定这个渲染器的形状和材质。

const unlitEntity = rootEntity.createChild("unlit");
const unlitRenderer = unlitEntity.addComponent(MeshRenderer);
const unlitMaterial = new UnlitMaterial(engine);
unlitRenderer.mesh = PrimitiveMesh.createSphere(engine, 1, 64);
unlitRenderer.setMaterial(unlitMaterial);

引擎提供了常见的几何形状，如球体、圆锥体、胶囊等。引擎中还有三种经典材质：Unlit、Blinn-Phong 和 PBR。

材质决定了物体与光的关系。 纹理作为材质的一个重要属性，决定了模型头上的图案。 图像、画布、原始数据、视频等都可以用作纹理。

对于目前的场景，从平衡整体功效和性能的角度来看，可以局部使用PBR材质，大部分可以使用Unlit材质。

场景背景

视觉效果的另一大变化是场景的背景。

背景可以是黑色或天空模式，天空可以是由6张纹理组成的六面体纹理生成的天空盒，也可以是HDR全景图。

环境光照信息存储在天空盒纹理和全景图中。 如果读取环境光信息并将其分配给场景，则打开 IBL 模式。 通常在使用PBR（基于图像）材质时，我们不会使用黑色模式，而是使用HDR纹理作为环境反射，以更好地展示PBR材质的功效。

概括

经过以上步骤，一个场景已经快速搭建完成。

在展示项目中，在展品周围滑动屏幕的需求是非常典型的。 根据基于组件的架构的思想，可以推断，可以降低带有SLR的实体的组件来控制实体的位置。 如图，就是常见的单反控件。 我们降低了这个组件，让单反实体具备这个功能。

让它动起来吧！卡通

场面怎么能上移呢？ 首先想到的是模型带有动画。

在导出的glTF模型中添加动画组件，选择要播放的动画片段名称，模型就可以移动了。 您可以指定它是只播放一次还是循环播放； 改变播放的速率等。

  engine.resourceManager
    .load("*.gltf")
    .then((asset) => {
      const { defaultSceneRoot } = asset;
      rootEntity.addChild(defaultSceneRoot);
      const animator = defaultSceneRoot.getComponent(Animator);
      animator.play("run");
  })

3D开发中会遇到的动画基本上可以分为两类：2D动画和3D动画。 2D包括脊柱，3D动画又可以分为骨骼动画和变形动画两种。

骨骼动画，又称纵梁动画，是游戏和电影中最常用的动画技术。 它包括骨骼和纵梁的数据。 相互连接的骨骼形成骨架结构，通过改变骨骼的方向和位置来创建动画。 变形动画是指几何对象在变化过程中拓扑关系保持不变的动画。 目前广泛应用于数字人捏脸颊。

以上动画支持在引擎中播放。 如果一个模型上有多个动画，还可以通过状态机来排列动画片段，以实现更灵活、丰富的动画效果。

脚本

除了默认的动画播放之外，如果想让场景中的人物能够交流，该怎么办呢？

这时候就需要用到脚本组件了。 像往常一样，我们将创建自己的脚本组件，编写交互逻辑，并将其添加到角色实体中。

脚本组件非常强大sketch engine类似应用，它是由引擎提供的子类扩展而来的，通过它可以编写任何想要的功能。 它提供了非常丰富的生命周期钩子函数，只要调用特定的反弹函数，引擎就会在特定的周期内手动执行相关脚本，无需手动调用。 可以类比React的生命周期来理解。

以最常用的生命周期反弹函数为例，它在每帧渲染之前调用。 如果你希望对象的行为、状态和方向每一帧都更新，那么这个操作可以放在中间。

class HeroScript extends Script {
  /**
  * The main loop, called frame by frame.
  * @param deltaTime - The deltaTime when the script update.
  */
  onUpdate(deltaTime: number): void {
    this.entity.transform.translate(0.1,0,0.1)
  }
}

heroEntity.addComponent(HeroScript)

除了这种涉及实体状态变化的生命周期弹跳功能之外，还有与键盘按键输入相关的弹跳，以及与场景相关的弹跳。 使用时可以查看官方文档，里面有非常详细的说明。

化学系统

脚本组件让我们拥有了操控三维世界的强大能力，而实体依然在自己进行通讯，与我们没有任何交互。 如果我们希望角色跟随我们在屏幕上的点击并从一个地方移动到另一个地方怎么办？

这里有必要了解与交互密不可分的引擎组件——物理系统。 引入数学系统的最大用处就是让场景中的物体有数学响应。 可能说得具体一点，翻译成代码就是引入引擎提供的化学系统，将碰撞器组件降到想要产生化学反应的实体上，并指定这个组件的形状。

import { LitePhysics } from "@oasis-engine/physics-lite";

const engine = new WebGLEngine("canvas");
engine.physicsManager.initialize(LitePhysics);

const boxCollider = boxEntity.addComponent(StaticCollider);
boxCollider.addShape(physicsBox);

当两个带有碰撞组件的实体接触时，两者会根据数学定理改变原来的运动。 比如图中的沙发掉落后撞到其他桌子，它们弹开、翻滚等，改变了原来运动的方向和速度。 还可以在脚本中触发反弹功能，例如指定两者碰撞时改变颜色，碰撞结束时恢复颜色。

该引擎提供PhysX和两个化学系统。 PhysX功能强大，但体积也相应较大； 重量轻，功能简单，可根据需要进行选择交互

如果你想让角色跟随屏幕上的点击，点击那里并移动到那里，你该怎么办？

这是最常见的人机交互需求之一，可以简化为两个步骤。 第 1 步：屏幕上的点击将转换为 3D 空间中的点。 步骤2：对象连接到该目标点。 相信通过对脚本的理解，第二步已经可以轻松完成了。 这样的二维点如何转化为三维空间呢？

主要采用射线检测的方法，即调用SLR组件将屏幕接收到的坐标信息转换为三维空间中的射线的方法。 当它穿过带有碰撞体组件的实体时，可以通过射线的方向和到碰撞体的距离得到两者的交点，然后转换成三维空间中的点。

对于这个场景来说，就是给地面实体一个平面形状的碰撞体，监听点击风暴，获取射线在地面上的交点，然后让它到达撞击的地方。

概括

对于这个搭建好的场景，如果想要改变实体的位置，比如金币道具还在旋转，那么可以给金币所在的实体添加一个脚本组件，让它以一定的角度旋转每帧角度； 你想让主角到达屏幕并点击地点的位置可以借助射线检查和化学系统中的碰撞体来实现； 如果你想让主角到达该位置，就会有一个特效，此时可以播放模型中的动画。

在此基础上，已经可以扩展出一个完整的互动游戏了。 该游戏有三个关键状态：待机、游戏中、游戏结束。 不同的状态下，场景中的人物、道具的状态以及可以触发的风暴都是不同的。 这是用于对游戏逻辑进行编程的简单状态机的概念。 比如游戏中，角色在奔跑，待机和结局都非常到位。 金币一开始是不连接的，但在游戏过程中会产生，可以吞掉。

工作流程

后面多次提到美术，那么我们后端和美术的职责是什么，整个3D开发的工作流程是怎样的呢？

工作流程

工作流程的起点通常从原画开始，原画是指描述角色关键形状和动作的手绘绘画。

经过处理后，它就成为用于构建场景的材质。 2D输出材质通常是2D精灵，3D输出材质通常是各种3D模型。

根据是否有编辑器，材料的使用方法会有所不同。 如果引擎有支持的编辑器，比如Unity，那么可以直接导出编辑器进行可视化编辑。 如果没有编辑器，需要将资源上传到CDN，通过代码组装场景。

将各种素材组合成场景后，添加脚本来编译游戏逻辑。 当一切都完成后，项目就会被发布。

编辑

Oasis 有一个配套编辑器。 它是一个在线网页编辑器，可以根据所见即所得，用低代码方法快速构建场景并编辑交互逻辑。 预计今年年初对外开发，欢迎使用。

结语

我们了解了3D的起源和后端，了解了3D开发的共同核心概念，通过多种方式构建场景和移动场景。 掌握了这些之后，普通的交互服务就已经可以完成了。 对web3D、交互开发感兴趣的朋友可以浏览Oasis官网，和我们一起探索图形的世界。

如何联系我们的绿洲开源社区群（钉钉）：

绿洲开源社区群（Momo）：

如有侵权请联系删除！