从借呗双十一游戏看蚂蚁金服 Oasis 3D 工作流

写在最前：欢迎来到「花呗借呗前端团队」技术专栏，我们将与大家分享前端各领域的高质量技术文章，包括但不限于移动端、小程序、互动技术/数据可视化、Node.js 全栈/中后台、基础架构、个人思考，不限于原创与翻译。我们也欢迎优质文章的投稿。

这样的一款 3D 游戏，你觉得开发难度如何呢？

开发流程

整体结构

窗口 1：工具窗口，包括属性可视化操作工具（节点平移、旋转、缩放）、撤销、重做等功能。 窗口 2：场景节点树，可以可视化操作整个场景节点树，包括节点添加、删除、复制、拖拽移动等功能。 窗口 3：导航栏，展示一些项目级别的功能操作按钮，包括预览、发布功能按钮。 窗口 4：3D 场景操作视口，可视化 3D 场景操作界面，实时反馈节点以及其属性变化的渲染效果，也可通过鼠标和快捷键操作场景内容修改属性。 窗口 5：资源管理，可以添加上传资源、删除资源，供 3D 场景关联使用。 窗口 6：属性检查器，用于查看和修改节点属性、节点功能组件属性、资源属性。

场景树

飞船

上传资产

• 进入“我的项目”页面，创建一个新项目，然后点击"编辑"进入编辑页面。编辑器会默认创建好灯光、相机，以及一个立方体 model. 将默认创建的 model 删除，重新创建一个节点，重命名为 ship.
• 飞船的模型是一个 GLTF 文件，点击”资源“右侧的”+“号，上传 GLTF 文件。编辑器会自动解析并生成对应的材质。
• 为 ship 节点添加能力，选择 GLTF 模型。点击模型的 asset 属性，选择我们刚才上传的 GLTF 文件，这时候飞船模型就绑定到 ship 节点上了。
• 为了模拟真实的效果，我们先上传一些贴图供下文使用：三张飞船纹理贴图及六张立方体纹理贴图

上传视频封面

​

好的标题可以获得更多的推荐及关注者

编辑 PBR 材质

• metallicRoughnessTexture：金属粗糙度贴图
• baseColorTexture：基础颜色贴图
• normalTexture：法线贴图
• srgb：是否为 SRGB 色彩空间
• gamma：是否使用 Gamma 纠正
• baseColorFactor：基础颜色因子
• isMetallicWorkflow：是否使用金属粗糙度模式
• specularFactor：高光度因子

添加脚本

浮动

class CustomAbility extends o3.NodeAbility {
 	time = 0;
  tscale = 0.012;

  constructor(node, props) {
    super(node);

    // init code
  }

  onUpdate(deltaTime) {
    // update per frame
    let pos = this.node.position;
    const y = Math.sin(this.time * 0.2) * 0.1;
    this.time += deltaTime * this.tscale;
    pos[1] = y;
    this.node.position = pos;
  }
}

碰撞

// 设置包围盒碰撞体
setCollision() {
  const coinCollider = this.node.createAbility(o3.ABoxCollider);
  coinCollider.setBoxCenterSize([0, 0, 0], [1.4, 0.8, 1.2]);
  // 可视化碰撞体
  const mtl = new o3.LambertMaterial('cube_mtl', false);
  const renderer = this.node.createAbility(o3.AGeometryRenderer);
  renderer.geometry = new o3.CuboidGeometry(1.4, 1.0, 1.2);
  renderer.setMaterial(mtl);
}

// 监听碰撞事件
bindEvent() {
  let cd = this.node.createAbility(o3.ACollisionDetection);
  cd.addEventListener('begin_overlop', e => {
    const colliderNode = e.data.collider._ownerNode;
    const ev = new o3.Event('colliderCoin');
    colliderNode.trigger(ev);

		// ...
 
    // 撞击后，金币个数加一
    if(colliderNode.name === 'coin') {
      (this.node as any).coinNum++;
      this.engine.rootNode.trigger(ev);
    }
  });
}

辅助特效

尾焰

光束赛道

varying vec2 v_uv;
uniform sampler2D texturePrimary;
uniform float utime;
uniform float time;

void main() {    
    vec2 uv2 = vec2( v_uv.x, v_uv.y +  time );
    vec4 texSample 	= texture2D( texturePrimary, uv2 ).rgba;

    vec4 showAlpha = mix(vec4(0.0, 0.94, 1.0, 0.0), vec4(0.0, 0.86, 1.0, 0.60), v_uv.y - utime);
    
    gl_FragColor = vec4(texSample.rgb, showAlpha.a);    
}

onUpdate(deltaTime) {
  this._runtime += 0.005;
  this._runtime %= 1.0;
  this._trackMaterial.setValue('time', this._runtime);
}

金币

金币结构

金币运动

onUpdate(deltaTime) {
  if (!this._isMove) return;

  const turn = this._turn === 'left' ? -1 : 1;
  const x = Math.sin(this._time * 0.02) * 1.6 * turn;
  this._time += deltaTime * this._tscale;
  let pos = this.node.position;
  pos[0] = x;
  this.node.position = pos;
}

金币克隆

金币的泡泡在某些安卓机上变黑

• GL_NEAREST：在 mip 基层上使用最邻近过滤
• GL_LINEAR：在 mip 基层上使用线性过滤
• GL_NEAREST_MIPMAP_NEAREST：选择最邻近的 mip 层，并使用最邻近过滤
• GL_NEAREST_MIPMAP_LINEAR：在 mip 层之间使用线性插值和最邻近过滤
• GL_LINEAR_MIPMAP_NEAREST：选择最邻近的 mip 层，使用线性过滤
• GL_LINEAR_MIPMAP_LINEAR：在 mip 层之间使用线性插值和使用线性过滤，又称三线性 mip map

速度线

uniform float u_time;
uniform sampler2D u_texture;
varying vec2 v_uv;
const float PI = 3.1415926535897932384626433832795;

void main(void) {
  vec2 q = -1.0 + 2.0 * v_uv;
  q.y += 0.3;

  float len = length(q);
  float angle = atan(q.y, q.x);
  float u = fract((angle + PI) / (PI * 2.0) + u_time * 0.001);	
  float v = 0.3 / len + u_time * 0.5 - 0.5;

  vec4 tex = texture2D(u_texture, vec2(u, v));
  gl_FragColor = vec4(tex.xyz * len, 1.0);
}

陀螺仪

bindOrientation() {
  this._shipOrientation = new Orientation({
    sensor: env.os.isIOS ? 'native' : 'web',
    interval: 20,
    frictionX: 0.1,
    frictionY: 0.1,
    limitX: 40,
    limitY: 10,
    tick: (data: any) => {
      let { x, y } = data;
      this.node.setRotationAngles( -y, 0, -x / 2);
    }
  })
}

业务联动

// oasis/main.ts
import './scripts'
import { config } from './schema.json'
import * as o3 from '@alipay/o3-plus'

let scene

async function loadScene(sceneConfig:any) {
  scene = await o3.loadScene({
    local: true,
    config,
    ...sceneConfig
  })
}

export {config, o3, loadScene, scene}

// gameController.ts
import { loadScene, scene } from '@oasis/main';
import * as o3 from '@alipay/o3-plus';
let rootNode;

// 游戏初始化
async function initGame(canvas) {
  await loadScene({
    canvas,
    rhiAttr: {
      enableCollect: false
    }
  });
  rootNode = scene.scenes[0].root.findChildByName('root');

  // 触发场景加载完的事件
  const event = new o3.Event('loadFinish');
  const coinNum = window.$config.coinNum;
  event.data = { coinNum };
  rootNode.trigger(event);
}

// 启动飞船
function startupShip() {
  if (!rootNode) return;

  const event = new o3.Event('startupShip');
  rootNode.trigger(event);
}

// ...

export {
  scene,
  rootNode,
  initGame,
  startupShip,
}

// Oasis.vue
<template>
	<canvas ref="canvas" class="canvas" :class="{ show: pageShow }" />
</template>

<script>
import { initGame } from '../gameController.ts'
import { detectWebGLContext } from '@common/utils/downGrade'

export default {
  methods: {
    async handle3D() {
      const canvas = this.$refs.canvas
      try {
        await initGame(canvas)
        if (!detectWebGLContext()) {
          throw new Error('不支持WebGL')
        }
      } catch (e) {
        this.change({
          mode3D: false
        })
        this.handle2D()
        return
      }
    },
  }
}
</script>
 

降级

上传视频封面

​

好的标题可以获得更多的推荐及关注者

• 机型黑名单
• IOS 版本
• 安卓版本
• 不支持 WebGL 的机型降级
• 初始化场景报错直接降级

总结