【笔记】《WebGL编程指南》学习-第1章WebGL概述

WebGL概述

WebGL，是一项用来在网页上绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。

从传统意义上来说，为了显示三维图形，开发者需要使用C或C++语言，辅以专门的计算机图形库，如OpenGL或Direct3D，来开发一个独立的应用程序。现在有了WebGL，我们只需要向已经熟悉的HTML和JS中添加一些额外的三维图形学的代码，就可以在网页上显示三维图形了。

WebGL是内嵌在浏览器中的，你不必安装插件和库就可以直接使用它。而且，因为它是基于浏览器的，你可以在多种平台上运行WebGL程序。

---

WebGL的优势

这些年，随着HTML的发展，网页变得越来越复杂。最初，HTML仅仅是静态的内容，后来引入了JS等脚本语言，HTML开始能提供一些动态的内容，并具有一定的交互性。
现在出现了更强大的HTML5，它可以使用canvas标签在网页上绘制二维图形，以呈现更丰富的内容，如跳舞的卡通小人，根据输入实时更新的地图等等。

WebGL则走的更远，它可以允许JS在网页上显示和操作三维图形。
有了WebGL的帮助，开发三维的客户界面，运行三维的网页游戏，对互联网上的海量数据进行三维可视化都成为了可能。虽然WebGL强大到令人惊叹，但这种技术进行开发却异常简单：

• 你只需要一个文本编辑器和一个浏览器，就可以开始编写三维图形程序了。
• 你可以使用通用的Web技术发布三维图形程序，展示给你的朋友和其他开发者。
• 你可以充分利用浏览器的功能。
• 互联网上有大量现成的资料，它们可以帮助你学习WebGL，编写三维程序等。

---

WebGL的起源

在个人计算机上使用最广泛的两种三维图形渲染技术是Direct3D和OpenGL。

Direct3D是微软DirectX技术的一部分，是一套由微软控制的编程接口API，主要用在Windows平台。
OpenGL由于其开发和免费的特性，在多种平台上都有广泛的使用。Windows对OpenGL也提供了良好的支持，开发者也可以用它来代替Direct3D。

OpenGL最初由SGI开发，并在1992年发布为开源标准。多年以来，OpenGL发展了数个版本，并对三维图形开发，软件产品开发，甚至电影制作产生了深远影响。
虽然WebGL根植于OpenGL，但它实际上是从OpenGL的一个特殊版本OpenGL ES中派生出来的，后者专用于嵌入式计算机、智能手机、家用游戏机等设备。
OpenGL ES于2003-2004年被首次提出，并在2007年（ES 2.0）和2012年（ES 3.0）进行了两次升级，WebGL是基于OpenGL ES 2.0的。

下图显示了OpenGL、OpenGL ES 1.1/2.0/3.0和WebGL的关系。

由于OpenGL本身已经从1.5发展到了2.0，再到4.3，所以OpenGL ES被标准化为特定版本OpenGL（OpenGL 1.5 和 OpenGL 2.0）的子集。

如图所示，从2.0版本开始，OpenGL支持了一项非常重要的特性，即可编程着色器方法（programmable shader functions）。该特性被OpenGL ES 2.0继承，并成为了WebGL 1.0 标准的核心部分。
着色器方法，或称着色器，使用一种类似于C的编程语言实现了精美的视觉效果。
编写着色器的语言又称为着色器语言（shading language），OpenGL ES 2.0基于OpenGL着色器语言（GLSL），因此后者又被称为OpenGL ES 着色器语言（GLSL ES）。WebGL基于OpenGL ES 2.0，也使用GLSL ES编写着色器。

---

WebGL程序的结构

在HTML中，动态网页包括HTML和JS两种语言。引入WebGL后，还需要加入着色器语言GLSL ES。
也就是说，WebGL页面包含了三种语言：

• HTML5（超文本标记语言）
• JS
• GLSL ES

下图显示了传统的动态网页和使用WebGL的网页的软件结构

然后，因为通常GLSL ES是（以字符串的形式）在JS中编写的，实际上WebGL程序也只需用到HTML文件和JS文件。所以虽然WebGL网页更加复杂了，但它仍然保持着于传统的动态网页相同的机构：只用HTML文件和JS文件。

---

总结

这一章主要介绍WebGL技术的若干关键特性和WebGL程序的结构。总之，这一章最重要的内容是，WebGL程序使用三种语言开发：HTML、JS和GLSL ES——然而，由于着色器代码GLSL ES内嵌在JS中，所以WebGL网页的文件结构和传统网页一样。