一、介绍在本文中，我们将使用WebGL技术开发一款移动端游戏。该游戏可以以60FPS的帧率在移动设备上运行。这款游戏的风格类似于FlappyBird和TempleRun，名为WinterRush。本文重点介绍游戏开发过程中使用的WebGL相关的three.js技术。下图显示了游戏开始时的快照。游戏过程中，玩家可以使用左右方向键（或点击屏幕左右键）进行左右移动。2.为什么60FPS很重要帧率越高，游戏内容的渲染就越流畅。对于一款游戏产品来说，动作效果的流畅性和操控的及时响应尤为重要。计算机屏幕通常以60hz刷新，因此这是我们的绝对限制。请注意，60FPS只是一个理想目标，但实际上任何超过30FPS的帧速率看起来都不错。PaulLewis深入探讨了这一方面。为此，他专门开了一个网站来讨论相关技术，网站地址是http://jankfree.org/。我很自豪地告诉你，本文提供的示例项目可以在/iPad4thGent和Nexus4手机上以60FPS运行。为了达到我想要的FPS目标，我采用了如下方案。3.简化3D场景几何体：通过减少网格数量和每个网格的顶点数量来简化场景中的几何体。请记住：“低聚”总是很酷！在这个游戏中，树木效果实际上只使用了两个圆柱体：一个用于树叶，一个用于树干。游戏中，在跑道上奔跑时，跑道上实际只放置了10棵树。材质：3D引擎的很大一部分计算成本都花在计算场景中各个几何表面的光照效果上。场景中的灯光越少，计算成本越低。Three.js引擎中材质的计算开销从低到高分为：(1)基础材质：这是最好的材质，不需要计算光照，可以使用基础材质和图像纹理来做很多事情。(2)Lambert材料：使用这种材料可以呈现出不那么有光泽的外观。(3)Phong材料：使用这种材料可以获得非常有光泽的外观。在我的测试中，事实证明Phong材料比Lambert材料贵得多。例如，在本文提供的示例中，如果您从Lambert材质切换到Phong材质，则FPS值在iOS平台上将从60下降到15。4.对象重用这可能是实现高性能网络体验所要遵循的最重要的规则。在初始化阶段创建对象后，尽量不要在游戏运行时创建新对象。这将避免内存“颠簸”——这会导致浏览器“窒息”。网站http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/提供了一篇关于使用JS对象池的优秀文章，你可以参考。在这个游戏中，我重用3D对象（例如树木）的方式是在它们位于相机后面时重置它们的位置。在每一帧中，都会检查对象是否在相机后面。如果物体在相机后面，请将其位置重新设置为远离轨道。另外需要注意的是，在这个游戏中，我使用了THREE.Fog技术来达到遮挡树木的目的。当然另一方面，因为这也是一个相当流行的解决方案。5.移动版赛道游戏中的赛道雪地为平面网格。我们使用Perlin噪声算法来生成地形高度（例如顶点的Y坐标）。这种方法可以实现随机但平滑变化的坑洼。为了使轨道看起来自然移动，我们使用了以下技术：(1)在每一帧中，我们将整个地板向摄像机移动一小段距离，移动的速度取决于玩家的操作速度。(2)在程序中，我们将检查地板是否已经移动到摄像头后面并超过预定义的STRIP_WIDTH量。如果是这样，我们沿着轨道将地板STRIP_WIDTH的位置重置回来。然后，我们重新计算地形高度-这是通过将Perlin噪声位置增加STRIP_WIDTH值来完成的。在游戏中，大概的效果如下图所示。6.简化碰撞检测在Three.js编程中，可以使用Raycasters方法对每个表面实现非常精确的碰撞检测。LeeStemkoski提供了这种方法的一个很好的例子(http://stemkoski.github.io/Three.js/Collision-Detection.html)。然而，这种方法可能很昂贵，需要对每对可能发生碰撞的物体进行计算。在许多情况下，您可以完全简化碰撞检测；通过假设每个物体都是一个球体，您只需测量这些物体之间的距离。请注意，您可能需要手动调整碰撞距离和碰撞框位置以获得更具可玩性的感觉。不过也存在一个问题，就是在扫射时，玩家可能会撞到关闭摄像头的物体。解决这个问题的方法是将玩家射击箱移离相机一点距离。七、实现阴影效果在Three.js编程中，EffectComposer类允许你依次执行多个后处理着色器（post-processingshader）。这种方法需要使用多个屏幕外缓冲区来将一个着色器的结果传递给下一个着色器。在移动设备上，这种方法提供了次优的性能。解决方案是：将我们编写的多个着色器组合成一个超级着色器（SuperShader）。当然，实现这一点只是复制和粘贴每个着色器代码的问题，但还需要考虑正确的顺序。对于我们的WinterRust游戏，我们将Vignette、Brightness/Contrast和Hue/Saturation着色器组合到一个大着色器中。此外，请注意，某些效果对于移动设备而言过于占用GPU，尤其是与模糊相关的技术。8.时间控制在动画循环方面，我们应该使用requestAnimationFrame方法并为动画应用时间偏移。这使动画速度独立于游戏帧速率。行进距离应取决于实际经过的时间而不是帧数。此技术不会增加游戏的FPS，但会在FPS过低时提高玩家对速度的感知。请参考以下相关代码：//kickoffanimationvarclock=newTHREE.Clock();clock.start();gameLoop();functiongameLoop(){requestAnimationFrame(gameLoop);vardelta=clock.getDelta();//usedeltatodeterminealldistancestravelledmovePlayer(MOVE_SPEED*delta);}九、在目标设备上运行一旦确定了目标设备，接下来就要在这些设备上继续测试，并时刻关注FPS值。OSX中的iOS模拟器是在桌面上开发时调试iOS问题的绝佳工具；但是，请注意模拟器并不能反映实际设备的性能。Adobe的EdgeInspect(https://creative.adobe.com/products/inspect)是另一个出色的工具，可让您轻松地将多个移动设备连接到本地网页。它会在页面发生变化时自动重新加载页面，它还允许您访问Android控制台以查找错误。10.用于移动开发的JS库这部分给出了我开发游戏时使用的几个著名的js库。它们是：Three.js：不用多说；Zepto.js：这是jQuery的优秀替代品总大小为25K，在移动设备上速度非常快；Howler.js：这是一个优秀的音效库，可以应对各种移动设备的声音问题；TweenLite：使用这个库可以轻松实现缓动，在移动设备上效果不错。11.哪些设备可以运行WebGL支持WebGL的设备数量正在迅速增长。除了可以在所有主要桌面浏览器上运行之外，WebGL内容现在可以在iOS和Android设备上运行而不会出现重大问题。然而，并非所有支持WebGL的设备生而平等。WebGL是一项要求很高的技术，因此建议在一些相对较旧的设备上运行时，以最基本的方式运行。例如，2011年推出的iPad2能够运行WebGL，但非常有限。WebGL通常在不到两年的移动设备上运行良好。我的主要移动测试设备是第4代iPad（2013年）和Nexus4（2012年），它们是相对较好的基准测试。12.有待改进的地方。建议有兴趣的朋友在学习本文提供的示例项目的过程中，在该项目中添加以下项目：移动设备上的倾斜控制。我选择在移动设备上使用点击方法进行倾斜移动，因为它更符合桌面体验。请注意：使用倾斜加速度计是一种完全不同的控制系统，欢迎读者尝试这种替代方案。开发桌面版的发烧友类型。因为我想尝试让这款游戏在较慢的设备上运行良好，所以我不得不放弃使用一些不错的效果和几何图形。因此，在构建具有更丰富图形的桌面版本时，它应该工作得更好。使用Android全屏API将程序中使用的HTML菜单技术浮动到WebGL场景上，也许添加一些漂亮的着色器摆动过渡等。十三。总结本文简要介绍了使用Three.js开发移动设备3D游戏的要点。***，衷心希望广大读者能够开发出在移动设备上性能良好的WegGL游戏产品。附：本文示例游戏WinterRush的下载地址为https://github.com/felixturner/winter-rush。【.com独家翻译，合作网站转载请注明出处】
