3D应用与游戏开发实战_开发网页游戏( 三 )

2017 年我去澳洲参加了 Web 3D 大会，他们当时用了 X3dom 像 HTML 一样用标签地描述 3D 世界。
这是一种非常陈旧的技术，虽然也是基于 WebGL 渲染。这个方案已经推了十几年了，老外也不知道为什么这么执着，有几十个 Paper 都是讲这个的。他们讲的东西都非常学术，我觉得对我们的帮助并不是很大。
然后我又去工业界寻找解决方案。这是前索尼 PlayStation 的一位同学做的应用，他用的技术大家可能会大吃一惊，他用了Unity 。第一次看到 Unity 和 Web 嫁接起来是非常令我震惊的。我当时用的是 iphone6 ，运行这个 demo 都是 60 fps 满帧，他是怎么做到的呢？我去查了一下它的代码，虽然代码是压缩过的，但是为了突破这个技术难关，我阅读了压缩后的代码并且理解了它背后的实现。
我发现里面有各种各样的新颖的技术。比如， Unity 可以合并 3D 模型的贴图。
合并贴图这件事情是很重要的。做前端的同学都知道雪碧图，为什么做雪碧图？大家都知道是为了减少网络请求数，但是其实合并贴图对运行时的性能有很大影响。
GPU 读一张图快还是读十张图快？计算机资源是非常宝贵的，图片要适度合并尽量压缩。一张 200K 的图片，可能占用 3-4 倍的显存。JS 优化半年减少 30K ，图片批量压缩减少个几兆都是有可能的，所以要把时间花在能够快速见效的事情上面。
下图的 Texture Baker 就是用来烘培并且合并图片。这个是 ITween Path 是 Unity 做路径动画的插件。
Unity还有一个插件叫 Collada Exporter。Collada 是标准的 3D 模型格式，看到这里我们已经抛弃了之前 Obj+Mtl 的老方案。而Runtime根据我之前的开发经验封装了一套 MVC 的方案。
基于这套工作流，我们做了 2017 年双十一切红包项目。我们经常调侃：腾讯做游戏和阿里做有戏有什么区别？腾讯做游戏是收钱，我们做游戏是发钱。用 Unity 带来的好处是能够直接导入设计师给的源文件，如 Maya 源文件、 Photoshop 源文件。这里我们看到，红包模型是预先切开的，大家知道切水果也是这样做的，即使你竖着切菠萝它还是横着裂开的。
至于红包的特效，我会经常逛一些国外的网站，这是某个游戏开发者写的 Shader 特效，我就照着他的思路来写了一个类似的。
大家看到一个红包在天上飞，上面有光在流动，其实整个场景中一盏灯都没有打。光照计算，特别是点光源的计算是非常耗性能的。所以大家做 3D 应用的时候尽量要少放光源。这种效果其实只要在像素着色器中写一行代码就解决了。
红包是怎么切中的呢？Picking 这个话题对没有开发过游戏的人也许比较陌生，切红包的游戏里我当时做了两种方案：一种叫做 CPU Picker ，另一种是 GPU Picker。
CPU Picker：在每个红包上面套上一个包围盒，计算射线有没有击中这个包围盒，因为 CPU Picker 的计算成本和场景的复杂度正相关，用包围盒会比较快；
GPU Picker：通过拾取离屏画布上面的颜色值就行了。
虽然感觉 GPU Picker 性能会特别好，但在移动端性能表现却不佳，因为拾取颜色的过程实际上是 CPU 和 GPU 通信的过程，这个过程会比较慢。所以， CPU Picker 性能会更好一点。
还有一点就是 Dom 操作，在 Web 游戏开发中， Dom 操作就是魔鬼。我抓了比较慢的一帧花了 25 毫秒（约 40 帧）。
游戏逻辑加上 Web GL 渲染就花了那么几毫秒，而 DOM 操作却耗掉很长的时间，而且还引发了重绘（紫色部分）。
所以 Dom在游戏里是不合适的， GUI 部分需要用 2D 的 Canvas 或者 Web GL 渲染去解决。
最后讲一下音效，我个人非常喜欢游戏中声音给我带来的奖励。我做切红包的时候注意到了上面几点，这也是我上周去北京 Unity 大会上听到关于 CRIWare 的声音中间件的内容：
背景音乐要有渐有渐出，这样用户体验比较好；用户做一些操作或者比较重要操作的时候，当前声音要强调一下，背景音乐减弱一下；声音要有变化，比如说很多射击的游戏，如果枪声都一样，用户听觉会疲劳的，我们切红包时左切和右切都是不一样的。这个软件叫 bfxr ，是一款制作游戏音效的小软件，在线和客户端版本都有，人人都可以设计音效。