Web 上的 3D 游戏
为了在 Web 上实现丰富的游戏体验，首选的工具是 WebGL，它渲染在 HTML 的 <canvas> 元素上。WebGL 本质上是 Web 的 OpenGL ES 2.0——它是一个 JavaScript API，提供构建丰富交互式动画和当然，也包括游戏的工具。你可以使用硬件加速的 JavaScript 来生成和渲染动态 3D 图形。
文档和浏览器支持
WebGL 项目的文档和规范由 Khronos Group 维护，而不是像大多数 Web API 那样由 W3C 维护。现代浏览器，包括移动设备，都提供了非常好的支持，所以你不用太担心这个问题。主流浏览器都支持 WebGL，你只需要专注于在你使用的设备上优化性能。
目前正在努力在不久的将来发布 WebGL 2.0（基于 OpenGL ES 3.0），这将带来许多改进，并帮助开发者使用当前强大的硬件为现代 Web 构建游戏。
解释基础 3D 理论
3D 理论的基础围绕着在 3D 空间中表示的形状，并使用坐标系来计算它们的位置。请参阅我们的 解释基础 3D 理论 文章，获取所有你需要的信息。
高级概念
你可以用 WebGL 做更多的事情。有一些高级概念你应该深入学习——例如着色器、碰撞检测，或者当前热门话题：Web 上的虚拟现实。
着色器
值得一提的是着色器，它们本身就是一个独立的话题。着色器使用 GLSL，一种特殊的 OpenGL 着色语言，语法类似于 C，直接由图形管线执行。它们可以分为顶点着色器和片段着色器（或像素着色器）——前者将形状位置转换为真实的 3D 绘制坐标，后者计算渲染颜色和其他属性。你绝对应该查看 GLSL 着色器 文章，了解更多关于它们的信息。
碰撞检测
没有碰撞检测很难想象游戏——我们总是需要弄清楚什么时候一个物体撞上了另一个物体。我们有可供你学习的信息
WebXR
虚拟现实的概念并不新鲜，但由于硬件的进步，如 Meta Quest，以及（目前仍在实验中的）WebXR API，用于捕获 XR 硬件的信息并使其可用于 JavaScript 应用程序，虚拟现实正在风靡 Web。欲了解更多，请阅读 WebXR — 虚拟与增强现实的 Web。
还有 使用 A-Frame 构建一个基本演示 文章，向你展示使用 A-Frame 框架构建虚拟现实 3D 环境有多么容易。
库和框架的兴起
编写原始的 WebGL 代码相当复杂，但如果你想长远来看掌握它，因为你的项目会变得越来越高级（请参阅我们的 WebGL 文档 入门）。对于实际项目，你可能还会使用一个框架来加速开发并帮助你管理正在进行的项目。使用 3D 游戏框架也有助于优化性能，因为很多工作都由你使用的工具处理，这样你就可以专注于构建游戏本身。
最流行的 JavaScript 3D 库是 Three.js，它是一个多功能工具，可以更简单地实现常见的 3D 技术。还有其他流行的游戏开发库和框架值得了解；A-Frame、PlayCanvas 和 Babylon.js 是其中最知名的，它们拥有丰富的文档、在线编辑器和活跃的社区。
使用 A-Frame 构建基本演示
A-Frame 是一个用于构建 3D 和 VR 体验的 Web 框架。它的底层是 Three.js 框架，并采用了声明式的实体-组件模式，这意味着我们只需要使用 HTML 就可以构建场景。请参阅 使用 A-Frame 构建一个基本演示 子页面，了解创建演示的分步过程。
使用 Babylon.js 构建基本演示
Babylon.js 是开发者使用的最流行的 3D 游戏引擎之一。与其他 3D 库一样，它提供了内置函数，可以帮助你更快地实现常见的 3D 功能。请参阅 使用 Babylon.js 构建一个基本演示 子页面，了解使用 Babylon.js 的基础知识，包括设置开发环境、构建必要的 HTML 和编写 JavaScript 代码。
使用 PlayCanvas 构建基本演示
PlayCanvas 是一个流行的 3D WebGL 游戏引擎，开源在 GitHub 上，并提供在线编辑器和良好的文档。请参阅 使用 PlayCanvas 构建一个基本演示 子页面，了解更高级别的细节，以及其他展示如何使用 PlayCanvas 库和在线编辑器创建演示的文章。
使用 Three.js 构建基本演示
与其他任何库一样，Three.js 给你带来了巨大的优势：与其编写数百行 WebGL 代码来构建任何有趣的东西，不如使用内置的辅助函数来更轻松、更快速地完成。请参阅 使用 Three.js 构建一个基本演示 子页面，了解创建演示的分步过程。
其他工具
Unity 和 Unreal 都可以使用 asm.js 将你的游戏导出到 WebGL，因此你可以自由地使用它们的工具和技术来构建将被导出到 Web 的游戏。
下一步
通过这篇文章，我们只是触及了当前可用技术可能性的表面。你可以使用 WebGL 以及在其基础上构建的库和框架，在 Web 上构建沉浸式、精美且快速的 3D 游戏。