3d手机游戏开发(3d游戏开发编程基础)、本站经过数据分析整理出3d手机游戏开发(3d游戏开发编程基础)相关信息，仅供参考！

导读：本文是淘宝前端技术专家——徐(烧鹅)分享的一篇淘宝Web 3D的实际应用和游戏开发。业内很少讨论这个话题。今天我就从移动、3D、游戏三个交叉话题和大家探讨一下。接下来就从三个部分和边肖一起了解一下吧：第一次尝试Web 3D，使用WebGL，和工作流相关的游戏编辑器~

讲师介绍

徐(烧鹅)——淘宝前端技术专家，来自淘宝虚拟互动团队，专注于3D/游戏/VR/AR。其中我们有一个小团队叫Slash Lab，专注于Web方向的动画和3D技术。

我们为什么要在这个交叉领域做一些事情？去年双十一淘宝的交易额是多少？超过1000亿，其中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乘以一个神奇的叫做矩阵的东西(矩阵是数学家发明的)，就是一个33的旋转矩阵。把每个点相乘，画在屏幕上，结果是这样的。

你们看起来都很傻吗~

如何用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，顾名思义，淘宝3D。还有一个有趣的AR场景叫“金猫”。双十一前后三天银泰或者苏宁的商场上面都会出现黄金。你要做的就是从这只猫身上抢到至少一百块钱的红包奖励。

难点一：建筑模型制作。我们的设计师是平面设计师，不会做3D。他当时给我的图是这样的。你可以酌情做这件事。我花了一整天做这个模型。

**

难点二：地面算法* *，这个地面是六边形结构。要将地面从地球坐标系转换到3D世界中的场景，需要几个步骤。当我们还是孩子的时候，我们都看过世界地图。我们怎样才能把球面投影到平面上呢？

这种投影叫做墨卡托投影。这个投影算法的代码是服务器复制给我的，因为我复制了后端的投影算法来保持前端算法的一致。相对于墨卡托投影，这是一个简化的算法，因为要求看到50米左右的猫，所以精度不是特别高，简单的算法就能满足。

当时的视角是这样的。以用户当前位置的经纬度为中心，辐射一次就能看到周围有多少只猫。

这里的六边形地面，如果用x轴和y轴的算法计算，其实是慢的。当时看了一篇论文。这是一个斯坦福的同学，花了20年研究六边形的算法。本质上，他是用夹角为120度的x、y、z轴作为坐标轴来计算的，比计算x、y轴的算法要快很多。基于这个基础算法还有很多算法，比如寻路。

很难跨过双十一这道坎。我们已经看到Canvas 2d方案在模型输入和渲染性能上非常弱。

如何继续开发3D游戏？你可能会问，WebGL在PC上不行，但是在手机上不行。我告诉你，现在完全没问题了。我们已经在数亿台同时在线的设备上进行了测试，前提是我们进行了WebGL能力测试。PC中也有一些古董浏览器不支持WebGL。相反，手机的发展速度比PC快得多。

我们之前已经理解了3D的概念。3D不是绘图引擎的功能，而是数学的概念。CPU画图和GPU画图有什么区别？GPU并行处理每个像素。

一开始我们小心翼翼的试用WebGL，因为怕对淘宝造成冲击。其实也造成了大崩盘。

2016年圣诞节，市场部的同学说手锅里不会下雪，所以会。稍后我会告诉你这场雪的代价。我们也尝试做类似右边模型的粒子动画，这是一个天猫的模型。两者都是粒子系统，因为一开始不知道怎么做复杂的3D渲染，所以只能从最基本的画图“点”开始尝试。

我们团队有一个技术叫PopLayer，可以随时在当前原生视图之上弹出一层Web视图。比如之前搜索鹿晗的弹幕，明星打电话，都是通过PopLayer的技术实现的。

如前所述，淘宝首页Poplayer中的雪导致客户端大面积崩溃。原因是当iOS下的UIWebView被webgl渲染时，WebCore会调用OpenGL ES进行渲染，而苹果发现后台调用OpenGL ES时会直接结束App。

知道RequestAnimationFrame API吗？解决方法是监控当当前用户退出后台或者当前页面不可见时，RequestAnimationFrame会被停止。

萧乾还提到了页面可见性的API。我们发现Android支持这个API，但是IOS还是需要调整Js Bridge接口来监控App是否退出后台。然后，我停止了游戏的主循环(或者动画的主循环)，发现有些用户可以崩溃。最后我发现了一个很神奇的事情~这个代码大家都知道，它是用来获取Canvas的WebGL上下文的。为什么这行代码会崩溃？我们翻看了Webkit的源代码，发现它有一个reshape功能。reshape会通过GPU获取当前画布的高度和宽度，所以还是会崩溃。

接下来，我们将分享我们在3D旅程中的心情以及我的思维是如何演变的。

2017年造物节，我们做了一个真正的3D应用。当时我们和一家叫FRAMESTORE的英国设计公司合作。如你所知，这部电影(《奇异博士》)就是他们设计制作的。

当时FRAMESTORE给我的是这样的，俯视图是这样的，灯光是这样的。虽然他们在影视特效领域很优秀，但是从来没有做过Web应用。当时不知道怎么和设计团队合作，还是我手写代码的老方法。他们给我的模型，我当时不知道其他高级格式，只知道Obj Mtl。如果发现WebGL渲染有问题，我们会去代码里找原因。模型引用的素材对吗，图对吗？我们将检查代码，看看是否引用错误。工作流问题在这个项目中没有得到解决，但它促使我开始寻找解决问题的方法。

这个项目还有一个表现问题，广告牌灯光效果。我首先想到的是后期处理。如果你不了解，你可以把它作为一个实时过滤器。如果你手机屏幕上的Bloom滤镜那么大，就会卡。我当时的计划是在每个广告牌上写一个独立的着色器，这样至少可以在iphone6上流畅渲染。

游戏编辑器

上面说了这么多，痛苦和迷茫。其实我之前做的也不能称之为真正的游戏，只是一个营销互动游戏。

我们还是认为制作游戏应该更接近行业标准的方案，所以游戏编辑器是必须的。虽然我今天没有做游戏编辑器，但我还是和大家分享一下为什么要做游戏编辑器(我现在已经在做了)。中间的凸起是今天讲的重点。

和英国队合作后我很难过。他们的设计太酷了，但我只能这样实现。我在国内看了看，没有看到更好的Web 3D游戏解决方案，因为国内做WebGL的人很少。

2017年，我去澳大利亚参加Web 3D大会。当时他们使用X3dom，用HTML这样的标签来描述3D世界。

这是很老的技术了，虽然也是基于WebGL渲染。这个方案推了十几年了，老外也不知道为什么这么执着。几十篇论文都在谈这个。他们讲的东西很学术，我觉得对我们帮助不大。

然后我就去行业找解决办法。这是前索尼PlayStation的一个同学做的应用。你可能会对他使用的技术感到惊讶。他利用了团结。第一次看到Unity和Web嫁接，我很震惊。我当时用的是iphone6，运行这个演示是60 fps的全画幅。他是怎么做到的？我检查了它的代码。虽然代码是压缩的，但是为了突破这个技术难关，我看了压缩后的代码，了解了背后的实现。

我在里面发现了各种新奇的技术。例如，Unity可以合并3D模型的地图。

合并地图是非常重要的。前端的同学都知道雪碧。为什么要做雪碧？大家都知道是为了减少网络请求的数量，但实际上合并地图对运行时性能影响很大。

GPU读一张图快还是读十张图快？电脑资源非常宝贵，图片要适当组合，尽量压缩。一张200K的图片可能会占用3-4倍的显存。半年减少30K的JS，减少几兆的图像批量压缩是可能的，所以要把时间花在能见效快的事情上。

下图中的纹理烘焙器是用来烘焙合并图片的。这是ITween Path，Unity的路径动画插件。

Unity还有一个插件叫Collada Exporter。Collada是一种标准的3D模型格式。看到这里，我们已经抛弃了之前Obj Mtl的老方案。Runtime根据我以前的开发经验封装了一套MVC方案。

基于这个工作流程，我们做了2017年双十一红包切割项目。我们经常调侃：腾讯做游戏和阿里做游戏有什么区别？腾讯做游戏收钱，我们做游戏给钱。Unity的好处是可以直接导入设计师给的源文件，比如Maya源文件，Photoshop源文件。在这里，我们看到红包模型是预先裁剪好的。众所周知，这也是切水果的方法。即使你把菠萝竖着切，它还是会横着裂开。

关于红包的特效，我经常去国外的一些网站看看。这是一个游戏开发者写的Shader特效，所以我按照他的思路写了一个类似的。

大家看到天上飞着一个红包，上面有光在流动。事实上，整个场景没有灯光。光照计算，尤其是点光源计算，非常耗费性能。所以做3D应用的时候，尽量少放光源。事实上，这种效果可以通过在像素着色器中编写一行代码来解决。

红包是怎么切的？采摘对于没有开发过游戏的人来说，可能是一个比较陌生的话题。在剪红包的游戏中，我当时做了两个方案：一个叫CPU Picker，一个叫GPU Picker。

CPU Picker:在每个红包上放一个包围盒，计算光线是否命中这个包围盒。因为CPU Picker的计算开销与场景的复杂程度成正相关，所以使用包围盒会更快；

GPU Picker:只需拾取屏幕外画布上的颜色值。

虽然感觉GPU Picker的性能会特别好，但是在移动端并不好，因为颜色拾取的过程其实就是CPU和GPU通信的过程，这个过程会比较慢。所以CPU Picker的性能会更好。

还有一点就是Dom操作。在网页游戏开发中，Dom操作是魔鬼。我花了25毫秒(大约40帧)才捕捉到较慢的帧。

游戏的逻辑加上Web GL渲染花了几个毫秒，而DOM操作花了很长时间，还造成了重绘(紫色部分)。

所以游戏中不适合用Dom，GUI部分需要用2D Canvas或者Web GL渲染。

最后说说音效。个人比较喜欢游戏中声音带来的奖励。我在剪红包的时候注意到了以上几点。这也是我上周去北京参加Unity大会时听到的关于CRIWare的声音中间件的情况：

背景要淡入淡出，这样用户体验更好；当用户进行一些操作或更重要的操作时，应强调当前声音，弱化背景音乐；如果声音发生变化，比如在很多射击游戏中，如果枪声是一样的，用户的听觉会很累。我们剪红包的时候，左剪和右剪是不一样的。这个软件叫bfxr，是一个制作游戏音频的小软件。有网络版和客户端版，每个人都可以设计音效。

说了这么多技术点，我们总要看看业内真正做游戏的人是怎么做的。我探索了大概一两年，发现Playcanvas引擎是Web世界里最健全的游戏引擎。它的引擎代码是开源的，但它的编辑器不是。我分析了它的引擎源代码，大概由几个部分组成：

ECS，Unity的架构也采用了这种设计模式。PBR，一个基于物理的渲染模型，看起来更像真实世界的渲染。物理引擎也很重要，还有输入设备，比如你的游戏手柄和手机。Playcanvas和Threejs有什么区别？

Threejs只是一个3D渲染库。游戏里还有一个很重要的东西叫编辑器，就是Playcanvas online的编辑器。看完这场比赛，我觉得我一定是个编辑，因为编辑是引擎的载体。没有编辑，我们每开发一款游戏都要关注太多的工程技术问题。

编辑器架构

最后说一下我们团队思考的编辑器的架构。现在只是一个工程架构图。

游戏的最后一个版本是什么？就是图片、模型、音频、脚本等一堆资源，在Web开发环境下会发送到CDN。

游戏中的音频、全景、模型等大部分资源都是第三方软件输入的。我们可能暂时不做模型资源的序列化、还原、合并、烘焙(或者交给Unity)。中间的GUI部分是编辑器的面板操作。最后，脚本组件和着色器可以由Vscode编辑。这张图是我一两年的经历。可以在留言区交流哦~

作者：徐(烧鹅)

更多关于3d手机游戏开发(3d游戏开发编程基础)的请关注本站。