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 捉猫的环境。这个不是 web 渲染，因为当时移动端的 web 还不具备获取摄像头数据的能力，所以当时 AR 只能用 Native 的 3D 引擎渲染，叫 T3D ，顾名思义 Taobao 3D。另外还有一个比较有趣的 AR 场景，叫“黄金猫” 。黄金猫在双十一前后三天会出现在银泰或者苏宁的商场上方，你只要抢到了这只猫至少有一百块钱的红包奖励。
难点一：建筑模型的制作，我们的设计师是个平面设计师，不会做 3D ，他当时给我的图是这样的，你看着办吧，我当时花了整整一天时间做模型。
**
难点二：地面算法** ，这个地面是六边型的结构，要把地面从地球坐标系转换成 3D 世界里的场景，会分几步。我们小时候都看过世界地图，怎样把一个球形的面投射到平面上呢？
这种投影叫做墨卡托投影（Mercator projection）。这个投影算法的代码是服务端拷给我的，因为要保持前后端算法一致，我复制了后端的投影算法。相比墨卡托投影，这是简化的算法，因为要求看到周围的猫是在五十米左右，所以精度并不是特别高，简单的算法就能够满足了。
当时的视角是这样的，以用户当前的位置经纬度为中心，辐射一圈就可以看到周围有多少只猫。
这里的六边型地面如果用 X、Y 两个轴的算法去计算其实是比较慢的，我当时看了一篇论文，这是一个斯坦福的同学花了二十年研究六边型的算法，他本质上是以夹角为 120 度的 X、Y、Z 三个轴为坐标轴算，相比算 X、Y 两个轴的算法快很多。上面还有很多基于这个基础算法拓展的算法如寻路等。