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

好不容易跨过了双十一的坎，我们已经看到 Canvas 2d 的方案在模型输入和绘制性能方面都是非常弱的。
如何继续开发 3D 类的游戏呢？可能大家会问， WebGL 在 PC 上都不行，在手机上行不行呀？我跟大家说，现在完全没问题，我们在上亿台同时在线的设备上都试过了，前提是要做一下 WebGL 能力检测。PC 还有一些古董浏览器不支持 WebGL ，反而手机比 PC 发展快得太多。
大家之前理解了 3D 的概念， 3D 不是绘图引擎的功能， 3D 是数学的概念。那 CPU 绘图与 GPU 绘图有什么区别呢？GPU 是并行处理每一个像素的。
我们刚开始尝试 WebGL 小心翼翼，因为怕给手淘带来影响，事实上也造成比较大的 Crash。
2016 年的圣诞节，市场部同学说要不在手淘里下一场雪吧，那就下了。后面我会和大家介绍下这场雪的代价。我们还尝试做类似于右边这种模型粒子动画，这是一只天猫的模型。这两个都是粒子系统，因为我们刚开始不知道怎么做复杂的 3D 渲染，我们只能从最基础的绘制“点”出发去尝试。
我们团队有一种叫 PopLayer 的技术，可以在当前 Native View 上面随时弹出一层 Web View 。比如之前搜一下鹿晗出弹幕，还有明星打电话，都是通过 PopLayer 技术实现的。
上文提到，在淘宝首页的 Poplayer 里下一场雪导致了大面积的客户端Crash。原因是 iOS 下的 UIWebView 使用 webgl 渲染时， WebCore 会调用到 OpenGL ES 进行渲染，而苹果发现有在后台调用 OpenGL ES ，就会直接结束 App 。
知道 RequestAnimationFrame API 吗？解法就是监测当前用户退出后台或当前页面不可见时，会把 RequestAnimationFrame 停止。
小倩也提到过 Page Visibility 方面的 API ，我们发现安卓是支持这个 API 的，但 IOS 还是需要调 Js Bridge接口来监听 App 的是否退后台的状态。接着，我把游戏主循环（或者动画主循环）停下来之后还发现一些用户会 Crash。最后我发现一件非常神奇的事情~这个代码大家都知道，它是用来获取Canvas的WebGL context ，这行代码为什么Crash呢？我们翻了 Webkit 的源码发现它有一个 reshape 函数， reshape 会通过 GPU 获取当前画布的高宽，所以它还是会 Crash。
接下来将会分享 3D 之旅我们的心情，以及我的思维是如何进化的。
2017 年的造物节时我们做了真正意义上的 3D 应用，当时跟英国一家设计公司合作叫 FRAMESTORE ，这个电影（《奇异博士》）大家知道吧，特效就是他们设计制作的。
FRAMESTORE 当时给我的东西是这样的，俯视图是这样的，灯光是这样打的。虽然他们在影视特效领域非常牛逼，但是他们也没做过 Web 应用。而我当时也不知道怎么和设计团队合作，还是我的老方法手写代码。他们给我的模型，我当时也不知道其他高级的格式，只知道 Obj + Mtl。如果发现 WebGL 渲染有问题，我们就去代码里找原因，模型引用的材质对不对，贴图对不对。我们要翻代码看一下是不是引用错了。工作流的问题在这个项目中没有解决，但是促使我开始寻找问题的解法。
这个项目还有一个性能问题，广告牌发光效果，我第一个想到的是后处理（Post Processing），大家不理解的话，可以把它当作实时滤镜，如果在手机屏幕这么大的 Bloom 滤镜是会卡死的。我当时的方案是在每块广告牌上写一个独立的 Shader ，这样在iphone6上至少是可以流畅渲染的。
游戏编辑器
上面讲了这么多，痛苦和迷茫。其实我之前做的东西也不能称之为真正的游戏，只能算是营销互动类游戏。
我们还是觉得做游戏要向业界规范的方案靠拢，所以游戏编辑器是必须要做的。虽然我今天并没有做出一款游戏编辑器，我会跟大家分享为什么我要做游戏编辑器（现在已经正在做了），这中间的坎坷是今天要讲的重点。
和英国团队合作之后我非常难过，他们的设计做得那么酷，而我只能实现成这样。我在中国环顾一圈，没有看到 Web 3D 游戏方面比较好的方案，因为在中国做 WebGL 的都凤毛麟角。