3D games on the Web

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

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

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

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

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

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

• 2D 碰撞检测
• 3D 碰撞检测

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

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

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

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

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

Babylon.js 是最受开发者欢迎的 3D 游戏引擎之一。与其他任何 3D 库一样，它提供了内置函数，帮助您更快地实现常见的 3D 功能。请参阅 Building up a basic demo with Babylon.js (en-US) 子页，其中包括建立一个开发环境，构建必要的 HTML，以及编写 JavaScript 代码。

PlayCanvas 是一个流行的 GitHub 开源 3D WebGL 游戏引擎，有在线编辑器和良好的文档。更多详细信息 请参阅Building up a basic demo with PlayCanvas (en-US) ，文章将进一步介绍如何使用 PlayCanvas 库和联机编辑器搭建例子。

Three.js，与任何其他库一样，它给了您一个巨大的便利：不必编写数百行 WebGL 代码来构建任何有趣的东西，您可以使用内置的 helper 函数来轻松、快速地完成任务。请参阅 Building up a basic demo with Three.js 子页 逐步创建 Demo。

Whitestorm.js 是一个基于 Three.js 技术上的框架。它的主要区别是内置的物理引擎和插件系统 基于 NPM。请参阅 Building up a basic demo with Whitestorm.js 了解更多信息、教程和例子制作基本的，甚至配合 Three.js 制作更复杂的应用程序或游戏。

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

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.

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

• Canvas API
• WebGL API
• WebVR API

• Three.js
• Whitestorm.js (based on Three.js)
• PlayCanvas
• Babylon.js
• A-Frame

• Building up a basic demo with Three.js
• Building up a basic demo with Whitestorm.js
• Building up a basic demo with PlayCanvas (en-US)
• Building up a basic demo with Babylon.js (en-US)
• Building up a basic demo with A-Frame (en-US)