3D games on the Web

为了web上丰富的游戏体验,一个好武器是webGL, 并呈现在HTML的 <canvas>元素上。WebGL基本上是Web的OpenGL ES 2.0版本 — 作为一个JavaScript API,它提供了能构建丰富的交互式动画和游戏的工具。你可以使用硬件加速的JavaScript 生成和呈现动态3D图像。

文档和浏览器支持

 WebGL项目的文档和规范由Khronos Group维护,而非大部分Web APIs采用的W3C。它很好地支持了现代浏览器甚至是移动手机,由此你无需担心太多。主流浏览器均支持WebGL,你需要关注的仅仅是在你使用的设备上进行优化。

目前进行的尝试是在不久的将来促成WebGL 2.0版本(基于OpenGL ES 3.0版本)的发布,WebGL 2.0版本将会带来许多改进,并且将会帮助开发者使用现在强大的硬件,为现代Web开发游戏。

对基本3D理论的解释

基本3D理论的核心围绕在3D空间的形状呈现上,通过使用坐标系计算出它们的位置。寻找你所要的信息,请参考我们的文章 Explaining basic 3D theory

预先概念

你可以使用 WebGL 做很多事情。你需要深入了解和学习一些预先的理念——像着色器、碰撞检测或最新的热门话题——Web上的虚拟现实。

着色器

值得提及的是着色器,着色器本身就是一个独立的故事。着色器使用GLSL,一个特殊的和C语言相似的 OpenGL 着色语言,但C语言直接通过图像管道执行。

碰撞检测

很难想象没有碰撞检测的游戏——我们总是需要计算出一个物体什么时候会撞击到另一个物体。我们有一些可利用的信息供你学习:

Web虚拟现实

虚拟现实这一概念并不新鲜,但由于硬件的进步,它大有席卷网络之势,如Oculus Rift和(目前实验性的) WebVR API,它们从VR硬件中捕获信息并使其可在JavaScript中应用。有关的详细信息请阅读 WebVR-Web 虚拟现实

还有一篇用A-Frame构建基本demo的文章,向您展示了使用A-Frame框架构建3D环境的虚拟现实是多么的简单。

库和框架的兴起

编码原生WebGL是相当复杂的,但从长远来看,您需要了解它,如果您的项目变得更加先进(请从参阅我们的WebGL文档开始)。对于现实世界中的项目,您可能还会使用框架来加快开发,并帮助您管理正在处理的项目。使用3D游戏框架还有助于优化性能,因为您使用的工具会处理很多问题,因此您可以专注于构建游戏本身。

最流行的JavaScript 3D库是Three.js,这是一个多用途工具,它使常见的3D技术更易于实现。还有其他流行的游戏开发库和框架值得检查。A-FramePlayCanvasBabylon.js是最容易辨认的,拥有丰富的文档、在线编辑器和活跃的社区。

使用 A-Frame 搭建一个基础Demo

A-Frame是一个用于搭建3D和VR体验的Web框架。在内部,它是一个具有已声明的实体组件模式的three.js框架,也就是说我们只需借助HTML即可搭建场景。请参阅Building up a basic demo with A-Frame子页面来了解创建Demo的步骤。

Building up a basic demo with Babylon.js

Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the Building up a basic demo with Babylon.js subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.

Building up a basic demo with PlayCanvas

PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the Building up a basic demo with PlayCanvas subpage for high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.

Building up a basic demo with Three.js

Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the Building up a basic demo with Three.js subpage for the step-by-step process of creating the demo.

Building up a basic demo with Whitestorm.js

Whitestorm.js is a framework built on the top of Three.js technology. It's main distinction is existance of built-in Physics engine and Plugin system based on NPM. See Building up a basic demo with Whitestorm.js for further reading, tutorials and examples of making basic and even complex apps or games using this framework in pair with Three.js.

其它工具

Unity 和 Unreal 可以将你的游戏通过 asm.js 输出到WebGL,因此你可以自由地使用这些工具与技术来构建可被输出到Web上的游戏。

Where to go next

With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.

Source code

You can find all the source code for this series demos on GitHub.

APIs

Frameworks

Tutorials