WebGL 入门指南
0/5 (0投票)
WebGL 在做什么？我为什么应该关心？
WebGL（Web 图形库）是一个 JavaScript API，用于在任何兼容的网页浏览器中渲染交互式 3D 计算机图形和 2D 图形，而无需使用插件。你经常会发现开发者用它来制作游戏，但它最终在网络上获得了广泛的关注，现在被用于地图 可视化、图表数据，甚至是 演示文稿。
它于 2011 年初首次推出，类似于 OpenGL ES（OpenGL 的移动版本），但内置于浏览器中。桌面浏览器和移动浏览器现在都开始大力支持它。我曾写过关于它当前状态（截至 2014 年 11 月）的 文章。
有多少人在使用 WebGL？
Reddit 用户 pyalot 向我推荐了一个跟踪 WebGL 使用情况的优秀网站，以及
统计数据： http://webglstats.com/。WebGL Stats 使用嵌入在其他网站中的跟踪器收集数据。你也可以帮忙，只需将下面的代码嵌入你的页面。
<script src="//cdn.webglstats.com" defer="defer" async="async"></script>
WebGL 在做什么？我为什么应该关心？
与直接操作 DOM 的代码相比，WebGL 具有三个明显的优势
- 任务。绘制反射材料或复杂的光照会产生大量的开销，考虑到 JavaScript 是单线程且 CPU 绑定的，为什么不将其中一些工作卸载到你设备上的 GPU 来处理繁重的工作呢？
- 性能。利用硬件加速（你设备内置的 GPU），WebGL 非常适合游戏或复杂的视觉效果。
- 着色器。可以通过称为“着色器”的小程序产生复杂的视觉效果。这可能很简单，比如产生棕褐色调效果，或者更复杂的模拟，如水或火焰。请访问 Shadertoy 查看一些真正突显这一点的示例。
asm.js 和 emscripten
Unity 和 Epic 的 Unreal Engine，这些游戏开发者常用的流行中间件工具并不局限于创建作为可执行文件的编译应用程序。
Unity 以前有一个 Web Player，这是一个使用 ActiveX 的可下载插件。Chrome 已经停止支持 NPAP（Netscape 插件 API），但 一年前就已宣布停用。
在 4 月份 Chrome 42 稳定版发布时，他们终于将其废弃了。原因有很多，但最值得注意的是他们提到“卡顿、崩溃、安全事件和代码复杂性”。Google 建议改用 Web 标准，例如 WebGL，我将在下面解释。
微软也在效仿，并且正在 弃用 ActiveX、VBScript、attachEvent 以及其他遗留技术，转而支持 Web 标准。HTML5 时代的功能已经大大减少了对 ActiveX 控件的需求，这些功能还能生成跨浏览器兼容的代码。
随着 WebGL 和 asm.js 的出现，开发人员现在可以利用他们计算设备的许多强大功能，并在以前无法访问的市场中进行访问。
JavaScript 是唯一在所有网页浏览器中都适用的语言。虽然浏览器中只能运行 JavaScript，但你仍然可以用其他语言编写，然后编译成 JavaScript，从而使其也能在浏览器中运行。这项技术被称为 emscripten。
Emscripten 是一个基于 LLVM 的项目，它将 C 和 C++ 编译成高度优化的 asm.js 格式的 JavaScript。简而言之：使用 C 和 C++，在浏览器中获得近乎原生的速度。更好的是，emscripten 将桌面图形 API OpenGL 转换为 WebGL，也就是该 API 的 Web 版本。
我有一篇关于如何使用 emscripten 的深度教程，以及对 asm.js 的清晰解释。
使用 asm.js 将 Unity 游戏导出到 WebGL
WebGL 演示
Score Rush – Xona Games
这款 2D 俯视角射击游戏 将登陆 PlayStation 4，但这并未阻止它首先通过 Turbulenz 的 WebGL 框架出现在 Xbox 360 甚至浏览器中。这款 Xona Games 的作品以每秒 60 帧的速度运行，并且一次可以绘制数万个粒子。此外，还支持 4 人同时合作，并且可以随时加入。谁说浏览器里没有主机级别的游戏？
Dolby Audio Room
Dolby Audio Room 使用 WebGL 构建，提供了一个交互式环境，用户可以在其中探索和播放各种媒体设备（媒体 PC、桌面、笔记本电脑和平板电脑）上的内容。每台设备都通过不同的流媒体视频（MPEG DASH H.264 或 HLS）演示 Dolby Audio。该演示目前需要 Microsoft Edge，因为它是第一个内置 Dolby Audio 原生支持的浏览器。
World Flights
此演示由 Sencha Labs 提供，用于展示 PhiloGL，并且是展示如何使用 WebGL 可视化数据的绝佳示例。在这种情况下，它是全球范围内的实时航班。
Monopoly – PlayCanvas
如果你发现有人不喜欢 Monopoly，请告诉我，因为他们是例外。
WebGlSamples.org
该网站有一些很棒的集合可以玩。我不确定是谁制作了这个页面，但他们有一些很棒的演示，例如 书（布料模拟）和 Electric Flower。
如何开始？
以下是创建第一个 WebGL 项目的必备步骤
- 创建 <canvas> 元素
- 获取绘图上下文
- 初始化视口
- 创建缓冲区
- 创建矩阵
- 创建着色器
- 初始化着色器
- 绘制图元
我知道你在想：“这听起来要做很多工作。肯定有更好的办法”，确实有！看看下面的引擎。
引擎/框架
BabylonJS
Babylon 是一个开源且免费的框架，由微软的几位开发者作为有趣的副项目创建。它几乎每天都在更新，甚至提供了一个 沙盒 来玩耍和测试你的代码。这是一门视频课程，分为几个部分，帮助你开始学习 BabylonJS 和 WebGL。
PlayCanvas
PlayCanvas 是一个开源引擎，包含大量选项，包括一个编辑器，可以帮助你实时可视化更改。他们强调的一些有用体验包括用于查看高性能汽车的品牌体验，以及可以注入应用程序的可玩广告。它还用于 制作有史以来最大的《太空侵略者》游戏！
Turbulenz
Turbulenz 为开发人员提供了一个 2D 和 3D 引擎，用于在其平台构建、发布和盈利游戏。该工具由前 Electronic Arts 的开发人员创立，根据 MIT 许可证也是开源的。直接从 Github 公共仓库下载并构建最新的 Turbulenz Engine。这包括从渲染效果和粒子到物理、动画、音频、输入和网络的所有内容。他们的 开发者页面 提供了大量入门信息。
Turbulenz 的首席执行官 James Austin 在 Gamasutra 上 对该引擎进行了精彩的介绍。
Pixi.js
Pixi.js 是一个专门的渲染引擎。还有许多其他引擎涵盖游戏、声音和物理等方面，它们都与 Pixi 完美配合。它还具有一些附加优势，包括渲染自动检测（必要时回退到 Canvas）、通过位图（精灵）或 Web 字体支持文本，以及资产加载器。
Phaser.io
Phaser 也是开源的 (在 GitHub 上fork它)，甚至提供 TypeScript 支持，这是 JavaScript 的强类型版本。我发现这在与熟悉 C 风格语言的开发人员合作时非常有用。它还提供了一些深度指南，以及 Phaser 制作的游戏展示。
Construct 2
这是我在与从未编写过游戏的高中生或大学生合作时最常使用的框架，这很大程度上归功于出色的编辑器。开发人员可以轻松地将所有资产拖放到场景中，并在易于查看的窗格中查看属性。更好的是，它还附带了大量模板和示例供你开始。Ashley Gullen 在 关于 WebGL 如何与该程序配合工作的文章中进行了很好的介绍。
Three.js
ThreeJS 是一个比较流行的框架，包含了运行所需的一切：渲染器、场景、相机、动画和灯光。虽然这对大多数事情来说都很好，但它缺少一个物理引擎，这在创建游戏时会很有用。Three.js 是根据 MIT 许可证提供的。它甚至有一个 编辑器（beta 版）供你玩耍！
PhiloGL
PhiloGL 是 Sencha Labs 的团队为数据可视化、创意编码和游戏开发提供的 WebGL 框架。Learning WebGL 的所有课程都已移植到 PhiloGL 框架中。这是想要学习 PhiloGL 和/或 WebGL 的一个很好的起点。它也根据 MIT 许可证授权。
它会在游戏机上运行吗？
微软项目经理 David Rousset (@davrous)，他正在与 Edge 合作，本周发布了一篇很棒的博文，其中展示了 BabylonJS 在 Xbox One 上的运行情况。
截至 11 月 12 日，Xbox One 上有新的更新。作为一名 Web 开发人员，我非常高兴现在我的 游戏机上运行 Microsoft Edge！这意味着你现在可以在 Xbox One 浏览器中运行非常现代的内容！
你还可以使用 VorlonJS 进行远程调试。 Vorlon.js 是一个开源的跨平台远程调试工具，旨在轻松地远程调试运行在任何设备上的任何网页。
WebGL 也可以在 PlayStation 4 上运行。事实上，其 用户界面很大程度上由 WebGL 提供支持。来自索尼的一位首席架构师 Don Olmstead 表示：
当你登录到你的 PS4 时，你正在运行 #WebGL 代码。PlayStation Store、音乐和视频应用程序以及大部分用户界面都在浏览器中渲染。
我花了很多时间来优化我们的 WebGL 渲染引擎，我将在 +SFHTML5 上发表演讲，介绍如何在该工作的背景下优化 WebGL 的使用。将有很多关于如何加速你自己的 WebGL 应用程序的技巧，所以请尽快预定你的席位。
来自 Google Developers 的这场演讲提供了关于其平台工作原理的精彩概述。 Silicon Angle 也有关于该主题的一篇精彩文章。
播客
如果播客是你的菜，我和几位开发人员也聊过 WebGL。
我在芝加哥的同事 David Giard 有一个名为“Technology and Friends”的视频播客。几个月前在费城举行的 MVP 公开日活动中，我有机会 加入并谈论 WebGL，此外，我们还讨论了 asm.js，以及 Unity 和 Unreal Engine 等中间件工具如何使用 asm 来让他们的应用程序在浏览器中运行。
在我自己的播客 The Indie Dev Podcast 中，我采访了我的同事 David Catuhe (@DeltaKosh)，他是微软 Redmond TED 团队的一名首席项目经理。他是 BabylonJS WebGL 框架的 幕后功臣之一。
想了解更多？
以下是我在互联网上找到的一些学习 WebGL 的优秀资源
本文是微软技术传道士和工程师关于实用 JavaScript 学习、开源项目以及互操作性最佳实践的 Web 开发系列文章的一部分，包括 Microsoft Edge 浏览器和新的 EdgeHTML 渲染引擎。
我们鼓励你使用 dev.microsoftedge.com 上的免费工具，包括 F12 开发人员工具 — 七个独立、完全文档化的工具，可帮助你调试、测试和加速网页，跨浏览器和设备（包括 Windows 10 的默认浏览器 Microsoft Edge）进行测试。此外，请 访问 Edge 博客，随时了解来自微软开发人员和专家的最新信息。