从踩坑到填坑|淘宝Web 3D应用与游戏开发实战

导读：本文是淘宝前端技术专家——徐乾伟（烧鹅）分享的淘宝 Web 3D 应用与游戏开发实战，这个话题在业界被谈及得比较少。今天将会从移动、3D、游戏三种交叉的话题来和大家探讨。接下来和小编一起从初试 Web 3D、使用 WebGL、工作流相关的游戏编辑器三个部分来了解吧~

讲师介绍

徐乾伟（烧鹅）-淘宝前端技术专家，来自淘宝虚拟互动团队，这个团队主攻 3D /游戏/ VR / AR 。其中，我们有一个小团队叫斜杠实验室，主攻 Web 方向上的动画和 3D 技术。

为什么我们会在这样交叉领域去发力做一些事情？去年的双十一淘宝去年交易额多少？一千多亿，其中有 80% 的 GMV 是来自移动端的，简单地理解就是说我们公司在电商领域 80% 的钱是通过手机客户端赚取的，而不是 PC 。这就是为什么在我们要在移动端做 3D/VR/AR 的应用。

初试Web 3D

有一句话叫：给我一个支点，我就能撬动地球。

很多人都做过 2D 游戏， 3D 最大的区别就是多了一根 Z 轴，而给我一个 Z 轴我就能创造 3D 世界。很多做前端的同学对 3D 这个事情是有误解的，比如说 HTML5 中的 Canvas 有两个上下文，大家认为 2d Context 只能画 2D，WebGL context 才能画 3D ，这是一种误解。

其实 3D 和 2D 并不是由绘图引擎来决定的，而是由数学家决定的。假如我们要画这样的曲面会怎么画呢？

首先有描述这个面的公式，这个公式根据 X、Y 入参算出 Z 的坐标值，假设 Z 越大颜色越红，Z 越小颜色越绿，画出来是这样的。如果 X、Y、Z 乘以一种神奇的东西叫矩阵（矩阵是数学家发明的），这是 3×3 的旋转矩阵，把每个点都乘一下，然后画到屏幕上得到的结果就是这样的。

大家是不是一脸懵逼呀~

关于如何用 Canvas 2d 绘制 3D 曲面，以后再详细讲解，我有一段时间写过 CSS3D 的库，就是用 glMatrix 数学库做出非常酷炫的效果。

使用 Web GL

2016 年双十一我们做过一个小游戏，不知道大家有没有玩过？

这个游戏是用 Canvas 2d 绘制，就是用的 glMatrix 数学库画实现 3D 效果。当时为什么用 Canvas 2d 呢？我们淘宝市场部的同学说我们要做 3D ，因为 pokemongo 做了一个 3D 的，但是你这个东西最后要给我搞到 iPhone 4 上去。大家知道 iPhone 4是不支持 WebGL 的，而当时开发时间非常紧张，我只能用 Canvas 2d 的方案。

如果点了主场景中的猫，就会进入一个 AR 捉猫的环境