太幸运,第一次被蚂蚁技术团队邀请做分享-一一网

嗨，大家好，我是扫地盲僧，一个懂点技术会点设计的产品经理。目前就担任UU跑腿-效率工程负责人。

很荣幸被蚂蚁集团Oasis团队邀请分享关于《提升美术到前端的产出效率》课题。此行收获颇丰，也结识了很多行业大佬，同时个人未来的发展规划也更加坚定和清晰。

由于过于兴奋导致忘记了写总结?…

缘由

去年底接到一个项目，做一个网页游戏方式的应用，目的是让大家通过小游戏的方式参与公司的文化活动，研发周期大概是2周。当时我团队是没有图形设计和游戏开发的，DDDD图形前端和Web前端差距蛮大的。一直在思考如何快速应用游戏引擎的能力，让开发专注业务。

没有资源只能带着团队一边学一遍做了，于是把图形相关的理念和架构都了解一遍。下载了Blender、C4D、各种模型库，买了一堆教程跟着做一些简单的骨骼、动效、光影、材质、纹理。当然，我要关注ROI的。所以，我们一直在有限时间内寻找快速出模型，解决业务的点。最终，我们成功探索出了一个解决方案，攻克了技术难点，也就有了这次邀请的机会。

我的分享

所有大佬和我的PPT都有下载链接：朴总这边请。

因为要做轻游戏模式的应用，所以调研一番选择了”移动端优先，前端友好”的Oasis Engine，支付宝五福也是出自它手。

最开始我们也遇到了还原度的问题，为了短时间内达到高还原标准，选择了烘焙贴图的方式，并且在一定程度上做到了极致。

下面是我们基于烘焙实现的效果,无法播放视频？

尽管烘焙能够解决还原问题，但是整个流程比较耗时，PS的二次调优也存在很大的时间和沟通成本。1.0以后我们梳理出来了一些问题。

那么通过什么样的方式来提升美术到前端效率呢？是做编辑器？还是做建模软件的插件？我们团队内部也进行了深度思考和讨论。

我们采用的是实时渲染方案，服务的用户不仅是技术，还应包括UI，交互设计师等。通过方案尽可能降低技术门槛，达到快速产出的目标。输出侧是便于Web前端使用的代码片段或URL。我们内部暂定的代号是3DTuning-调教三弟的意思。

左侧为模型库，也可以自己上传。部件部分为单个模型的组件，支持选中和定制材质。

中间是引擎实时渲染区，仅支持预览、拖拽，这里不涉及编辑器的功能，因为编辑器的工程量是很庞大的，没有精力。

右侧是场景和材质，主要是材质部分支持上传和预览。值得一提的是我们做一些预设交互脚本，可以直接使用。

  /**选中部件逻辑*/
  const handleObj = (obj: { component: MeshRenderer; mesh?: any }) => {
    const { component, mesh } = obj;
      (
        component.entity.getComponent(Twinkle) ||
        component.entity.addComponent(Twinkle)
      ).start();
      this.engine.dispatch(IO.PICK_PART, {
        name: component.entity.name,
        index: this.renderers_in_modelGltf.indexOf(component),
      });
  };

// 预设微交互脚本之鼠标经过播发动画
class Action4 extends Script {
  constructor(entity: Entity) {
    super(entity);
    document
      .querySelector("#" + canvasDomId)
      ?.addEventListener("mouseover", this.onmouseover);
    document
      .querySelector("#" + canvasDomId)
      ?.addEventListener("mouseout", this.onmouseout);
  }
  private onmouseover() {
    let { animations } = modelGltf;
    const animator = modelGltf.defaultSceneRoot.getComponent(Animator);
    if (animations && animations?.length > 0 && animator) {
      animations?.forEach((clip: AnimationClip, index) => {
        animator.speed = 1;
      });
    }
  }
  private onmouseout() {
    let { animations } = modelGltf;
    const animator = modelGltf.defaultSceneRoot.getComponent(Animator);
    animations?.forEach((clip: AnimationClip, index) => {
      animator.speed = 0;
    });
  }
  onDestroy(): void {
    document
      .querySelector("#" + canvasDomId)
      ?.removeEventListener("mouseover", this.onmouseover);
    document
      .querySelector("#" + canvasDomId)
      ?.removeEventListener("mouseout", this.onmouseout);
    this.onmouseover();
  }
}

复制代码