WebGL编程读书笔记

发布时间 2023-07-17 12:41:10作者: CD、小月

WebGL概述

WebGL起源

在个人计算机上使用最广泛的两种三维图形渲染技术是 Direct3D 和 OpenGL。Direct3D 是微软 DirectX 技术的一部分,是一套由微软控制的编程接口(API),主要用在 Windows 平台;而 OpenGL 由于其开放和免费的特性,在多种平台上都有广泛地使用:它可以在 Macintosh 或 Linux 系统的计算机、智能手机、平板电脑、家用游戏机(如PlayStation和 Nintendo)等各种电子设备上使用。Windows对 OpenGL 也提供了良好的支持,开发者也可以用它来代替Direct3D。

OpenGL 最初由 SGI (Silicon Graphics Inc)开发,并在1992 年发布为开源标准。多年以来,OpenGL 发展了数个版本,并对三维图形开发、软件产品开发,甚至电影制作产生了深远的影响。写这本书时,OpenGL 桌面版的最新版本为 4.3。虽然 WebGL 根植于 OpenGL,但它实际上是从 OpenGL 的一个特殊版本 OpenGL ES 中派生出来的,后者专用于嵌入式计算机、智能手机、家用游戏机等设备。OpenGL ES 于 2003 ~ 2004 年被首次提出,并在 2007 年 (ES 2.0) 和 2012年 (ES 3.0) 进行了两次升级,WebGL 是基于 OpenGL ES 2.0 的。这几年,采用 OpenGL ES 技术的电子设备的数量大幅增长,如智能手机 (iPhone 和安卓)、平板电脑、游戏机等。OpenGL ES 成功被这些设备采用的部分原因是,它在添加新特性的同时从 OpenGL 中移除了许多陈旧无用的旧特性,这使它在保持轻量级的同时,仍具有足够的能力来渲染出精美的三维图形。

下图显示了 OpenGL、OpenGL ES 1.1/2.0/3.0和 WebGL 的关系。由于 OpenGL 本身已经从 1.5 发展到了2.0,再到 4.3,所以 OpenGL ES 被标准化为特定版本 OpenGI(OpenGL 1.5 和 OpenGL 2.0) 的子集。

如图所示,从 2.0 版本开始OpenGL 支持了一项非常重要的特性,即可编程着色器方法(programmable shader functions)。该特性被 OpenGL ES 2.0 继承,并成为了WebGL 1.0 标准的核心部分。

着色器方法,或称着色器,使用一种类似于 C 的编程语言实现了精美的视觉效果本书将一步步阐述着色器,帮助你快速掌握 WebGL。编写着色器的语言又称为着色器语言(shading language),OpenGL ES 2.0 基于 OpenGL 着色器语言(GLSL),因此后者又被称为 OpenGL ES 着色器语言(GLSL ES)WebGL 基于 OpenGL ES 2.0,也使用 GLSLES 编写着色器。

OpenGL 规范的更新和标准化由 Khronos 组织 (一个非盈利的行业协会,专注于制定发布、推广多种开放标准)负责。2009 年,Khronos 建立了 WebGL 工作小组,开始基于OpenGL ES 着手建立 WebGL 规范,并于 2011 年发布了 WebGL 规范的第1个版本。本书主要基于第1版的 WebGL 规范编写,后续更新目前都是以草案的形式发布,如有需要也可参考。

WebGL程序的结构

在 HTML 中,动态网页包括 HTML 和 JavaScript 两种语言引人 WebGL 后,还需也就是说,WebGL 页面包含了三种语言:HTML5 (超文要加入着色器语言 GLSL ES(左侧)和使用传统的动态网页本标记语言)、JavaScript,和 GLSL ES.WebGL 的网页 (右侧) 的软件结构。

然而,因为通常 GLSL ES 是 (以字符串的形式)在 JavaScript 中编写的实际上WebGL 程序也只需用到 HTML 文件和 JavaScript 文件。所以,虽然 WebGL 网页更加复杂了,但它仍然保持着与传统的动态网页相同的结构:只用到 HTML 文件和 JavaScript文件。