为了在网络上获得丰富的游戏体验，webGL 是一个很好的武器，它可以在 HTML 元素上渲染。 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 理论的文章，了解您需要的所有信息。
借助 WebGL，您可以做更多事情。 您应该深入研究一些高级概念，例如着色器、碰撞检测或最新的热门话题：网络虚拟现实。
值得一提的是着色器，它有很多值得讨论的地方。 着色器使用特殊的OpenGL着色语言——GLSL，其语法类似于C语言，直接由图形管道执行。 着色器可分为顶点着色器（将形状位置转换为真实的 3D 绘图坐标）和片段着色器（或像素着色器），计算渲染颜色和其他属性。 您绝对应该查看 GLSL 着色器文章以了解有关它们的更多信息。
很难想象一款没有碰撞检测的游戏——我们总是需要弄清楚一个物体何时与另一个物体碰撞。 我们有相关资料供您学习：
虚拟现实的概念并不新鲜，但由于 Meta Quest 和 WebXR API（目前处于实验阶段）等硬件进步，它正在网络上掀起风暴游戏开发，WebXR API 用于从 XR 硬件捕获信息并将其提供给用户。 JavaScript 应用程序。 有关更多信息，请阅读 WebXR - 网络虚拟现实和增强现实。
还有一篇关于使用 A-Frame 构建基本演示的文章，向您展示了使用 A-Frame 框架构建虚拟现实的 3D 环境是多么简单。
编码原生 WebGL 相当复杂，从长远来看，随着您深入项目，您将希望掌握它（请参阅我们的 WebGL 文档以开始）。 在实际项目中，您还可以使用框架来加快开发速度并帮助您管理正在进行的项目。 在 3D 游戏中使用框架还有助于优化性能，因为所使用的工具可以解决许多问题，让您能够专注于构建游戏本身。
最流行的 JavaScript 3D 库是 Three.js，它是一个多功能工具，可以使常见的 3D 技术更容易实现。 还有一些其他流行的游戏开发库和框架值得一试。 A-Frame、PlayCanvas 和 Babylon.js 是其中最著名的一些，拥有丰富的文档、在线编辑器和活跃的社区。
A-Frame 是一个用于构建 3D 和 VR 体验的 Web 框架。 在内部，它是一个带有声明的实体组件模式的 Three.js 框架硬件设备，这意味着我们可以仅使用 HTML 构建场景。 有关创建演示的步骤，请参阅使用 A 框架构建基本演示子页面。
Babylon.js 是最受开发者欢迎的 3D 游戏引擎之一。 与任何其他 3D 库一样，它提供内置函数来帮助您更快地实现常见的 3D 功能。 请参阅使用 Babylon.js 构建基本演示子页面，其中包括设置开发环境、构建必要的 HTML 和编写 JavaScript 代码。
PlayCanvas 是一个流行的 GitHub 开源 3D WebGL 游戏引擎，具有在线编辑器和良好的文档。 有关更多详细信息，请参阅使用 PlayCanvas 构建基本演示文稿，其中进一步说明了如何使用 PlayCanvas 库和在线编辑器构建演示文稿。
与其他库一样，Three.js 提供了巨大的优势：您可以使用内置的辅助函数来更轻松、更快地完成工作，而无需编写数百行 WebGL 代码来构建任何有趣的内容。 请参阅使用 Three.js 构建基本演示子页面，了解创建演示的分步过程。
Unity 和 Unreal Engine 可以通过 asm.js 将您的游戏导出到 WebGL，因此您可以自由地使用这些工具和技术来构建可以导出到 Web 的游戏。
在本文中，我们只是了解了当前可用技术的可能性。 使用 WebGL 以及构建在其之上的库和框架，您可以在 Web 上构建身临其境、美观且快速的 3D 游戏。
您可以在 GitHub 上找到本系列的所有源代码演示。
文章来源:https://developer.mozilla.org/zh-CN/docs/Games/Techniques/3D_on_the_web
