网络上的 3D 游戏
为了在网络上获得丰富的游戏体验，首选武器是 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），它将带来许多改进，并将帮助开发人员使用当前强大的硬件为现代网络构建游戏。
解释基本的 3D 理论
3D 理论的基础围绕着 3D 空间中表示的形状，使用坐标系来计算它们的位置。请参阅我们的 解释基本的 3D 理论 文章，以获取您需要的所有信息。
高级概念
您可以使用 WebGL 做更多的事情。有一些高级概念，您应该深入研究并了解更多信息——比如着色器、碰撞检测，或者最新的热门话题：网络虚拟现实。
着色器
值得一提的是着色器，它们是一个独立的故事。着色器使用 GLSL，一种特殊的 OpenGL 着色语言，其语法类似于 C，由图形管道直接执行。它们可以分为顶点着色器和片段着色器（或像素着色器）——前者将形状位置转换为真实的 3D 绘制坐标，而后者计算渲染颜色和其他属性。您一定要查看 GLSL 着色器 文章，以了解更多信息。
碰撞检测
WebXR
虚拟现实的概念并不新鲜，但由于 Meta Quest 等硬件的进步，以及用于捕获 XR 硬件信息并将其提供给 JavaScript 应用程序使用的（目前为实验性的）WebXR API，它正在席卷网络。有关更多信息，请阅读 WebXR - 网络虚拟现实和增强现实。
还有 使用 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 是一个在 GitHub 上开源的流行 3D WebGL 游戏引擎，它有一个在线编辑器和良好的文档。请参阅 使用 PlayCanvas 构建基本演示 子页面，了解更高级别的详细信息，以及展示如何使用 PlayCanvas 库和在线编辑器创建演示的其他文章。
使用 Three.js 构建基本演示
Three.js 与任何其他库一样，为您带来了巨大优势：您可以使用内置辅助函数来更轻松、更快速地完成任务，而不是编写数百行 WebGL 代码来构建任何有趣的东西。请参阅 使用 Three.js 构建基本演示 子页面，了解创建演示的分步过程。
其他工具
下一步去哪里
通过本文，我们仅仅触及了目前可用技术所能实现的表面。您可以使用 WebGL 以及构建在其之上的库和框架在网络上构建身临其境、精美且快速的 3D 游戏。
源代码
您可以在 GitHub 上找到此系列演示的所有源代码。