在Web 3D 游戏开发的前端如何快速上手进行

本文以「余额宝3D跑酷游戏」为例，介绍了前端如何快速上手 Web 3D 游戏的开发。跑酷游戏是余额宝七周年的主玩法，用户通过做任务来获取玩游戏的机会并且解锁游戏道具，从而在游戏中获得更多的金币，最终可以利用金币兑换一些权益，同时我们也在游戏中植入了一些礼包，先看看具体效果。

 

游戏设计

我们把游戏的3D场景分成了三大模块，分别是赛道、金币（道具）和人物。

赛道设计

赛道包含了楼房和地面，由于人物需要不停地往前跑，基于相对运动的原理，我们复制了两段楼房（如图1），并同时做逆时针旋转，当旋转至 -theta 角度的时候，把楼房的旋转角度置为0（如图2）。地面是一个静止的圆弧模型，通过改变纹理的 UV 值来实现地面滚动的效果。

 

图1 赛道结构图

 

 

图2 楼房运动轨迹

金币布局

由以上图1可知，我们以 theta 角度的圆弧为一个控制单元，我们希望能控制游戏的总时长、每段圆弧旋转的时间，以及每段圆弧摆放的金币行数，这些参数如何控制3D场景的运作呢？根据已知字段推导出以下几条公式（蓝色字段为可配参数）：

• 需要生成金币的总行数 = （游戏总时长 /圆弧旋转theta角度的时间 ）x 每段圆弧摆放的金币行数
• 每两行金币之间的时间间隔 = 游戏总时长 / 需要生成金币的总行数
• 每行金币出现的时间 = 每两行金币之间的时间间隔 x 金币索引

这里主要得出 游戏总时长 和 每行金币出现时间 之间的关系，而每行金币该如何摆放以及道具出现的时机由具体的业务逻辑控制，这里不展开来讲。最终我们得到了一个控制金币摆放的队列：

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      [
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
        {
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
    
      
      
      "index": 
      
      
      0, 
      
      
      // 索引，代表每一行
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
    
      
      
      "item": {
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
      
      
      
      "position": 
      
      
      "center", 
      
      
      // 摆放位置
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
      
      
      
      "type": 
      
      
      "coin" 
      
      
      // 应该摆放的模型类型
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
          },
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
    
      
      
      "time": 
      
      
      0 
      
      
      // 每行金币出现的时间
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
        },
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
        {
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
    
      
      
      "index": 
      
      
      1,
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
    
      
      
      "item": {
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
      
      
      
      "position": 
      
      
      "left",
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
      
      
      
      "type": 
      
      
      "coin"
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
          },
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
    
      
      
      "time": 
      
      
      0.25
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
        },
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
  
      
      
      // more......
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      ]
     
     
     
    
    
    
  
  
  
  

这个队列如何与我们的3D场景关联呢？

由以上图2可知，一共有两段圆弧在交替旋转，假设每段圆弧摆放的金币行数定义为 rowsPerPart，当前圆弧的索引定义为 index，那么每次旋转至0度的时候，取 [index * rowsPerPart, (index + 1), rowsPerPart] 区间的数据进行摆放。数组中 position 表示摆放位置，一共有左中右三条道，也可能三条道都摆放，根据配置创建金币节点，并设置好节点的 position。type 表示应该摆放的模型类型，除了金币还可能是道具、礼包、终点线等。

开发流程

设计好游戏思路之后，可以正式开始制作我们的游戏啦~

跑酷游戏是通过 Oasis Editor 开发的，这是一个 web 3D 内容在线开发平台，底层用的是 Oasis 3D（蚂蚁自研的3D引擎）。这时候你可能会问，为什么要用 Oasis Editor 开发呢？

接下来分为「场景搭建」、「逻辑开发」、「业务联动」来讲解整个3D工作流。

场景搭建

上传资产

在编排场景之前我们需要先上传好游戏资产，一般美术提供的模型文件格式为 fbx 或 gltf，纹理推荐使用 webp 格式，我们在资源区右侧点击上传。

在开发过程中，美术可能经常需要替换纹理，所以建议美术将纹理与模型解绑，通过手动上传的形式将纹理绑定到模型上，避免同时加载两个纹理。

如图，我们已经在资源区上传好楼房、道具、金币等模型和相应纹理。

 

场景编排

有了资产之后我们需要绑定到节点上，然后进行场景编排，如下视频以楼房和地面为例进行演示：

1. 创建场景树
2. 绑定GLTF模型
3. 编辑器PBR材质，绑定纹理
4. 调整编辑器相机，拷贝编辑视角
5. 转换相机视角，微调相机参数

 

按照同样的方法我们完成了整个场景的编排，某些节点需要通过脚本控制展示，可以点击场景树左边的小眼睛进行隐藏，场景效果如下：

 

粒子系统

游戏开发的时候，经常会用到粒子系统来帮助我们实现一些比较酷炫的效果，在我们这个项目中，在人物节点(person)下面有2个子节点，分别来负责吃到金币(coinParticle)和道具(toolParticle)时的粒子效果，游戏过程中效果如下：

 

 

当我们点击选中一个粒子节点的时候，编辑器右侧会出来对应的属性面板，属性面板中就能够看到我们的粒子组件以及相关参数，通过设置参数可以调整我们的粒子效果：

接下来一步就是来设置参数来控制我们的粒子效果了，下面给大家介绍下几个常用参数：

 

 

逻辑开发

以上场景可由前端协助美术同学进行搭建，接下来这一步就正式进入编程阶段了。

脚本能力

1、cli
Oasis Cli 是连接业务和 Oasis 3D 编辑器的桥梁，在使用我们引擎的时候，建议提前安装好 Cli 的环境：

tnpm i @alipay/oasis-cli -g
  
  
  

安装好 Cli 之后，我们就可以将场景导出到我们的本地项目，并且随时将最新的场景编排同步至本地。首先，我们进入跑酷项目根目录，并执行如下命令，将我们已经建好的3D场景和当前项目连接：

oasis pull sceneId
  
  
  

上面的 pull 命令中，sceneId是我们的场景id，执行完该命令后，会在根目录下自动添加了1个目录和1个文件，如下：

当我们需要对场景进行编辑，并且将最新修改同步至本地，我们只需要执行如下命令即可：

oasis dev
  
  
  

2、金币转动
这里以金币转动为例演示如何添加脚本控制，首先在资源面板添加一个脚本，然后在将脚本挂在节点上：

 

完成这一步后，我们就可以在coinAni的脚本中实现对coin节点的控制了，金币一直旋转我们在脚本的onUpdate 中处理即可：

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      onUpdate() {
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
  
      
      
      const { node } = 
      
      
      this;
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
 
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
        TWEEN.update();
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
 
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
  
      
      
      if (
      
      
      this._isRotate && node.parentNode.isActive) {
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
          node.setRotationAngles(
      
      
      0, globalVal.coinAngle % 
      
      
      360, 
      
      
      0);
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
        }
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      }
     
     
     
    
    
    
  
  
  
  

碰撞检测

利用碰撞检测来反应人物与金币之间的碰撞，首先需要给人物和金币都加上碰撞体包围盒。Oasis Editor 提供了立方体碰撞体和球型碰撞体，引擎会在每帧更新时计算本节点的 collider 与其他 collider 的相交情况，球型碰撞体之间只需要比较球心距离与两个半径之间的大小关系，而立方体碰撞体需要计算八个顶点的位置关系，所以使用球型碰撞体性能上会好一些。

如下图，我们给人物添加了一个球型碰撞体，可以调节它的球心和半径。可视化包围盒只是编辑器运行时的插件，因此不会出现在我们的 H5 场景中。

编辑完碰撞体包围盒之后，我们需要在脚本中进行碰撞检测，监听 collision 事件：

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      let cd = node.createAbility(o3.ACollisionDetection);
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      cd.addEventListener(
      
      
      'collision', 
      
      
      e => {
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
  
      
      
      const colliderNode = e.data.collider.node; 
      
      
      // 拿到被碰撞的节点
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
 
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
  
      
      
      const name = colliderNode.name;
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     
  
      
      
      // do something...
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      });
     
     
     
    
    
    
  
  
  
  

Shader

嘿嘿，看到 Shader 别急着划走，掌握了 Shader 你就可以：

• 自定义光照、物理等模型，可以开发更多酷炫的效果
• 能够优化渲染性能
• 能够帮助我们排查渲染上的问题

列举几个 Shader 的效果，更多效果可以前往shadertoy：

 

 

 

1、 什么是 Shader
Shader（着色器）是运行在 GPU 上的小程序，这些小程序为图形渲染管线的某个特定部分而运行，它用于告诉图形硬件如何计算和输出图像。为了更深入了解 Shader 的原理，我们需要了解 OpenGL 的渲染流水线，这里以渲染跑酷游戏的地面模型为例：

CPU 应用阶段

我们在3.1.1中上传了地面的 fbx 模型文件，其中包含了顶点位置、UV、法线、切线等信息，CPU 将这些信息加载到显存中，然后设置渲染状态，告诉 GPU 如何进行渲染工作。最后 CPU 会发出渲染命令（Drawcall），由GPU 接收并进行渲染。

GPU 渲染管线

GPU 渲染管线包含了几何阶段和光栅化阶段，顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）分别位于这两个阶段中。

几何阶段：顶点着色器接收 CPU 传过来的顶点数据，通常在这个阶段做一些空间变换、顶点着色等操作。接着会经过裁剪，把不在相机视野中的顶点裁剪掉，并剔除某些图元，然后将物体坐标系转换到屏幕坐标系。

光栅化阶段：两个顶点之间有很多个像素，片元着色器会对像素进行处理，除了进行纹理采样，还会将像素与灯光进行计算，产生反射、折射等效果。同一个屏幕像素点可能会有多个物体，这时候需要通过 alpha 测试、深度测试、模板测试、混合（blend）等处理，把同一位置的像素进行过滤或合并，最终渲染到屏幕上。
2、如何编写Shader
Oasis Editor 中写 Shader 需要经过这几个步骤：
（1）、在资源区中添加“Shader 材质”，然后绑定到模型上

 

（2）、编辑 Shader 材质，属性面板中提供了常见的渲染状态配置，也可以直接编辑着色器定义（ShaderDefine）。

整个 ShaderDefine 结构如下，其中 vertexShader 和 fragmentShader 分别存放顶点着色器和片元着色器代码，采用 GLSL ( OpenGL 着色语言，OpenGL Shading Language )编写。states 用来定义渲染状态控制对象，对应上文提到的合并阶段。

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      export 
      
      
      const ShaderMaterial = {