WebGL编程指南.docVIP

第1章 WebGL概述 2007年，软件工程师Vladimir Vukicevic针对HTML canvas——即后来的canvas 3D着手制定相关标准。2011年3月，Vladimir Vukicevic与Kronos Group（OpenGL幕后的一家非营利组织）联手推出了WebGL标准，该规范使得互联网浏览器可对图形处理单元（GPU）予以访问。 WebGL源自OpenGL ES 2.0（ES是指嵌入式系统），即某些移动设备上的OpenGL规范，如Apple公司所研制的iPhone和iPad。在随后的发展过程中，该规范逐渐脱离于最初的既定目标，即提供不同操作系统以及设备之间的可移植性。对于3D?Web环境，如视频游戏、专业的可视化领域以及医学成像，基于Web的实时渲染理念则提供了更为广阔的天地。除此之外，考虑到Web浏览器的普及性，移动设备也可视为一类重要的应用平台，其中包括智能手机和平板电脑。若计划打造一款Web视频游戏、构建虚拟3D可视环境、实现数据可视化操作，或者是生成想象中的3D应用程序，则需要首先了解开发环境是否可满足当前的需求。 本章内容包含以下要点： 理解Web应用程序结构。 设置绘制区域（即canvas）。 理解WebGL的状态机机制。 调整WebGL变量以修改当前场景环境。 加载并检测全功能场景环境。 1.1 系 统 需 求 WebGL可视为一类3D Web图形API，因而无须执行安装步骤，但应提供以下一种互联网浏览器。 Firefox 4.0浏览器（或以上版本）。 Google Chrome 11浏览器（或以上版本）。 Safari浏览器（OSX?10.6或以上版本）。默认状态下，Safari禁用WebGL，读者可查看Developer菜单并选取WebGL选项。 Opera 12浏览器（或以上版本）。 为了获得WebGL所支持的互联网Web浏览器更新列表，读者可访问Khronos Group网站，对应网址为/webgl/wiki/Getting_a_WebGL_Implementation。/以获取WebGL所支持的环境配置。 1.2 WebGL提供的渲染类型 WebGL定义为一个3D图形库，并以标准、高效的方式支持互联网浏览器的3D场景渲染操作。根据维基百科中所描述的内容，渲染操作可视为源自模型的图像生成过程，并通过计算机程序予以实现。由于该过程可表示为计算机处理行为，因而存在多种方式生成此类图像。 差别一体现于是否需要使用特定的图形硬件。对于软件渲染，3D场景所需计算均在CPU中执行；相应地，硬件渲染则是指图形处理单元（GPU）以实时方式执行3D图形计算。从技术视角来看，由于硬件负责某些专属操作，因而与软件渲染相比，其行为更加高效。鉴于独立于硬件支持，因而软件渲染方案应用范围较大。 差别二是指渲染处理过程出现于本地端或远程端。若渲染图像过于复杂，则渲染器通常位于远程一端，如3D动画电影，复杂图像通常由配以大量硬件资源的服务器负责渲染，即服务器渲染。相反，若渲染过程出现于本地，则该过程称作客户端渲染。 WebGL采用了客户端渲染方案，3D场景素材通过服务器下载，但图像处理过程依赖于客户端的图形硬件并在本地予以执行。 与其他技术相比（如Java 3D、Flash以及Unity Web Player Plugin），WebGL具有以下优点。 JavaScript编程机制。对于Web开发人员以及互联网Web浏览器，JavaScript可视为相对自然的程序设计语言，并支持DOM访问。除此之外，JavaScript还可方便地在各元素间进行通信。由于WebGL在JavaScript中进行编程，因而可方便地与其他JavaScript库以及HTML 5技术进行整合。 自动内存管理。在OpenGL以及其他相关技术中，读者需手工分配或释放内存空间，而WebGL无须执行此项操作。WebGL遵循变量作用域规则，并在必要时自动释放内存空间。这简化了程序设计过程，并降低了代码的书写量，进而使程序易于理解。 性能问题。WebGL程序的性能可与独立的应用程序相媲美，这一切均归功于WebGL的本地图形硬件访问能力。当前，多数3D Web渲染技术均采用软件渲染方案。 零编译。由于WebGL于JavaScript中实现，因而在运行前无须进行编译，并可实现即时调整。据此，读者可尝试观察此类变化对3D?Web应用程序所带来的影响。尽管如此，当讨论着色器程序时，编译过程依然不可或缺，但该过程出现于图形硬件中，而非浏览器。 1.3 WebGL应用程序结构 类似于其他3D图形库，WebGL同样需要特定组件的支持，进而构造3D场景环境。本书第1~4章将讨论此类基本要素，并于随后探讨3D场景之外的其他元素，如颜色和纹理。最后，本书还将对某些高