零、简介

webGL(基于 Web 的图形语言)是一种令人兴奋的新技术，它可以让你在 Web 浏览器中创建强大的 3D 图形。实现这一点的方法是使用与图形处理单元(GPU)交互的 JavaScript API。这本书将很快让你了解着色器和渲染现实场景。为了确保愉快的开发，我们将展示如何使用调试工具和调查库来最大化生产力。

观众

面向 HTML5 的入门 WebGL 面向具有计算机图形技术基础知识的图形爱好者。了解 OpenGL，尤其是使用可编程管道的版本，如 OpenGL ES，是有益的，但不是必需的。我们将浏览所有相关材料。JavaScript 背景肯定会有帮助。

写这种性质的书时，我们很遗憾不能涵盖所有的先决材料。需要做出关于读者的基本假设。我所做的假设是，读者对 2D 和 3D 计算机图形概念有基本的了解，如像素、颜色、图元和变换。附录 B 快速更新了这些概念。还假设读者熟悉 HTML、CSS 和 JavaScript(尽管不一定是专家)。尽管这本书的大部分内容使用了普通的“香草”JavaScript，我们还是会使用一些 jQuery。附录 A 讨论了较新的 HTML5 概念和一个快速 jQuery 速成班，这对正确理解本文是必不可少的。附录 D 为整本书中出现的主题的进一步阅读提供了完整的参考。

你将学到什么

这本书在必要的时候提供理论，在可能的时候提供例子。您将对 WebGL 有一个很好的了解。您将学到以下内容:

  • 了解模型视图矩阵并设置场景
  • 渲染和操纵图元
  • 了解着色器，热爱它们的强大功能和灵活性
  • 探索创造真实场景的技巧
  • 用基础物理来模拟互动
  • 使用数学模型渲染粒子系统、地形和分形
  • 提高现有模型、着色器和库的工作效率
  • 使用 Three.js 框架
  • 了解 GLGE 和 philoGL 框架以及其他可用框架的调查
  • 调试和性能提示
  • 了解着色器的其他用途，如图像处理和非真实感渲染
  • 使用备用帧缓冲区实现拾取和阴影贴图
  • 了解当前的浏览器和移动支持以及 WebGL 的未来

页状构造

建议您先阅读前两章，然后再阅读本书的其他部分。即使这本书遵循了一个相当自然的进程，你也可以选择按顺序阅读或者随意跳过。例如，第 9 章的调试部分严格来说并不是必不可少的，但却是尽快了解的非常有用的信息。

第一章:场景设置

我们将介绍使用 WebGL 渲染图像的所有步骤，包括使用顶点缓冲对象(vbo)和基本着色器测试浏览器支持和设置 WebGL 环境。我们从创建一个单色的静态 2D 图像开始，到本章结束时，我们有了一个多种颜色的移动三维网格。

第二章:着色器 101

着色器将深入介绍。我们展示了图形管道(固定和可编程)的概述，给出了 GL 着色语言(GLSL)的背景，并解释了顶点和片段着色器的作用。接下来，我们将介绍 GLSL 的基本类型和语言细节，以及我们的 WebGL 应用将如何与我们的着色器进行交互。最后，我们展示几个 GLSL 用法的例子。

第三章:纹理和照明

我们展示了如何应用纹理和简单的照明。我们解释了纹理对象以及如何设置和配置它们，并在我们的着色器中将纹理查找与光照模型相结合。

第四章:增强现实主义

解释并实现了一个更真实的光照模型——Phong 照明。我们讨论平面和平滑着色以及顶点和片段计算之间的区别。我们展示了如何添加雾和混合对象；并讨论阴影、全局照明、反射和折射。

第五章:物理

本章展示了如何对重力、弹性和摩擦力建模。我们探测碰撞并对其做出反应，模拟射弹并探索动量守恒、势能守恒和动能守恒。

第六章:分形、高度图和粒子系统

在这一章中，我们将展示如何直接使用 GPU 进行绘画，讨论分形，并对 Mandlebrot 和 Julia 集进行建模。我们还展示了如何从一个纹理生成一个高度图，并生成地形。我们也探索粒子系统。

第七章:Three.js 框架

Three.js WebGL 框架介绍。我们提供了该库的背景和示例用法，包括如何在必要时返回到 2D 渲染上下文，API 调用来轻松创建相机、对象和照明。我们将早期的书籍示例与等效的 Three.js API 调用进行比较，并介绍 tQuery，这是一个结合了 Three.js 和 jQuery 选择器的库。

第八章:生产力工具

我们首先讨论使用框架的好处和学习核心 WebGL 的好处。讨论了几种可用的框架，并给出了 GLGE 和 philoGL 框架的例子。我们展示了如何加载现有的网格和寻找其他资源。我们列出了可用的物理库，并以一个使用 physi.js 库的例子结束了本章。

第九章:调试和性能

这是一个重要的章节，通过遵循已知的 WebGL 最佳实践，帮助识别和修复错误代码并提高性能。

第十章:效果、技巧和诀窍

讨论并实现了图像处理和非真实感着色器。我们展示了如何使用屏幕外帧缓冲区，使我们能够从画布上拾取对象并实现阴影贴图。

后记:WebGL 的未来

在后记中，我们将推测 WebGL 的光明前景，当前在浏览器和移动设备中对它的采用以及接下来将添加哪些功能。

附录 A:基本 HTML5 和 JavaScript

我们讨论了 HTML 4 和 5 之间的一些变化，比如更短的标签、增加的语义文档结构、

元素以及基本的 JavaScript 和 jQuery 用法。

附录 B:图形刷新程序

这个附录是一个图形复习，包括坐标系，初等变换和其他基本主题。

附录 C: WebGL 规范零零碎碎

包含 WebGL 规范的一部分，可在http://www.khronos.org/registry/webgl/specs/latest/获得，这本书没有涉及到，但仍然很重要。

附录 D:附加资源

一个参考列表，用于进一步阅读书中的主题，如 HTML5、WebGL、WebGLSL、JavaScript、jQuery、服务器堆栈、框架、演示等等。

WebGL 原点

WebGL 的起源始于 20 年前，当时 OpenGL 的 1.0 版本是作为 Silicon Graphics 的 Iris GL 的非专有替代品发布的。直到 2004 年，OpenGL 一直使用固定功能管道(在第 2 章中有解释)。那年发布了 OpenGL 2.0 版本，引入了 OpenGL 着色语言(GLSL)，让你可以对流水线的顶点和片段着色部分进行编程。OpenGL 的当前版本是 4.2，但是 WebGL 是基于 OpenGL 嵌入式系统(ES) 2.0 的，后者于 2007 年发布，是 OpenGL 2.0 的微调版。

因为 OpenGL ES 是为在嵌入式设备(如移动电话)中使用而构建的，与台式计算机相比，移动电话具有较低的处理能力和较少的功能，所以它比 OpenGL 具有更大的限制性和更小的 API。例如，使用 OpenGL，您可以使用 glBegin…glEnd 截面或 VBOs 来绘制顶点。OpenGL ES 只使用 VBOs，这是性能最友好的选项。大多数在 OpenGL 中可以完成的事情在 OpenGL ES 中也可以完成。

2006 年，Vladimar Vukic evic 开发了一个 Canvas 3D 原型，它使用了 OpenGL。2009 年，Khronos 小组创建了 WebGL 工作组，并开发了一个中央规范，有助于确保跨浏览器的实现相互接近。3D 上下文被修改为 WebGL，规范的 1.0 版本于 2011 年春完成。WebGL 规范的开发正在积极进行中，最新版本可在http://www.khronos.org/registry/webgl/specs/latest/找到。

WebGL 是如何工作的？

WebGL 是一个从 CPU 绑定到计算机显卡 GPU 的 JavaScript API。API 上下文从 HTML5

元素获得，这意味着不需要浏览器插件。着色器程序使用 GLSL，这是一种类似 C++的语言，在运行时编译。

在没有框架的情况下，设置 WebGL 场景确实需要相当多的工作:处理 WebGL 上下文、设置缓冲区、与着色器交互、加载纹理等等。使用 WebGL 的好处是它比 2D 画布环境快得多，并且能够产生一定程度的真实感和可配置性，这在使用 WebGL 之外是不可能的。

使用

WebGL 的一些用途是查看和操纵模型和设计、虚拟旅游、地图绘制、游戏、艺术、数据可视化、创建视频、操纵和处理数据和图像。

示范

WebGL 有许多演示，包括:

支持的环境

你的浏览器支持 WebGL 吗？重要的是要知道，目前并非所有浏览器、计算机和/或操作系统(OS)都支持 WebGL。浏览器支持是最容易满足的要求，只需升级到新版本的浏览器，或者在必要时切换到支持 WebGL 的不同浏览器即可。最低要求如下:

  • 火狐 4+
  • Safari 5.1+(仅限 OS X)
  • 铬 9+
  • Opera 阿尔法+
  • internet Explorer(IE)—无本地支持

虽然 IE 目前没有内置支持，但是插件是有的；比如 JebGL(在http://code.google.com/p/jebgl/有售)、Chrome Frame(在http://www.google.com/chromeframe有售)、ie webgl(http://iewebgl.com/)。JebGL 将 WebGL 转换为 Java applet，用于有缺陷的浏览器；Chrome Frame 允许在 IE 上使用 WebGL，但要求用户在客户端安装它。同样，IEWebGL 是一个 IE 插件。

除了当前的浏览器，您还需要支持的操作系统和更新的显卡。还有一些显卡和操作系统组合存在已知的安全漏洞，或者非常容易出现严重的系统崩溃，因此默认情况下会被浏览器列入黑名单。

Chrome 在以下操作系统上支持 WebGL(根据谷歌 Chrome 帮助(http://www.google.com/support/chrome/bin/answer.py?答案=1220892)::)

  • Windows Vista 和 Windows 7(推荐)没有 2009 年 1 月之前的驱动程序
  • Mac OS 10.5 和 Mac OS 10.6(推荐)
  • Linux 操作系统

通常，将图形驱动程序更新到最新版本会启用 WebGL。回想一下，OpenGL ES 2.0 是基于 OpenGL 2.0 的，所以这是您的显卡应该支持 WebGL 使用的 OpenGL 版本。还有一个叫 ANGLE(几乎是原生图形层引擎)的项目，讽刺的是用微软 Direct X 来增强一个图形驱动，通过转换成 Direct X 9 API 调用来支持 OpenGL ES 2.0 API 调用。结果就是只支持 OpenGL 1.5 (OpenGL ES 1.0)的显卡依然可以运行 WebGL。当然，对 WebGL 的支持在接下来的几年里应该会有很大的提高。

测试 WebGL 支持

检查浏览器对 WebGL 的支持。有几个网站如http://get.webgl.org/，在成功上显示一个旋转的立方体；和 http://doesmybrowsersupportwebgl.com/的，如果支持 webgl 上下文，它会给出一个很大的“是”或“否”以及具体的细节。我们还可以使用 modernizr(【http://www.modernizr.com】)以编程方式检查 WebGL 支持。

伙伴网站

除了 http://www.apress.com/9781430239963 的 press 网页，这本书在 http://www.beginningwebgl.com 的还有一个伙伴网站。这个网站展示了书中的例子，并提供了一个直接向作者提出评论和建议的地方。我们欢迎并感谢您的建设性反馈。

下载代码

本书中所示示例的代码可从 Apress 网站http://www.apress.com获得。在这本书的信息页上可以找到链接，在源代码/下载标签下的【http://www.apress.com/9781430239963】的。该选项卡位于页面相关标题部分的下方。更新后的代码也将在 https://github.com/bdanchilla/beginningwebgl的 github 上发布。

联系作者

如果你有任何问题或意见——或者甚至发现了你认为我应该知道的错误——你可以直接通过bdanchilla@gmail.com联系作者，或者通过http://www.beginningwebgl.com/contact的联系表格联系作者。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/2456.html