WebGL 3D开发实战详解(第2版)
上QQ阅读APP看书,第一时间看更新

2.1 WebGL 2.0概述

随着OpenGL ES版本的发展,WebGL的版本也由原先的WebGL 1.0升级为WebGL 2.0。WebGL 2.0是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 3.0结合在一起。通过增加OpenGL ES 3.0的一个JavaScript绑定,WebGL 2.0可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。

WebGL 2.0标准已出现在Mozilla Firefox、Apple Safari及开发者预览版Google Chrome等浏览器中,这项技术支持Web开发人员借助系统显示芯片在浏览器中展示各种3D模型和场景。随着HTML5的兴起,WebGL 2.0的前景不可估量。

2.1.1 WebGL 2.0简介

WebGL 2.0和3D图形规范OpenGL、通用计算规范OpenCL都来自Khronos Group,同样免费开放。WebGL 2.0标准工作组的成员包括AMD、爱立信、Google、Mozilla、英伟达以及Opera等,这些成员与Khronos公司通力合作,创建了一种多平台环境可用的WebGL 2.0标准。

WebGL 2.0完美地解决了现有的Web交互式三维动画的3个问题。

❑ 通过HTML脚本本身实现Web交互式三维动画的制作,无须任何特定浏览器插件的支持。

❑ 利用底层图形硬件的加速功能进行3D图形渲染,效率很高。

❑ 通过统一、标准、跨平台的OpenGL ES接口来实现,免去了开发人员多次学习不同编程接口的麻烦。

说明

同样可以用于网页3D渲染的技术还有Adobe Flash Player 11、微软Silverlight 3.0等,但它们都是私有、不透明的。因此,作者认为采用开放、免费策略的WebGL 2.0在当下这个时代将更有发展前途。

WebGL目前有两个版本的标准,具体情况如下。

❑ WebGL 1.0。其提供的是JavaScript与OpenGL ES 2.0的绑定,目前除了微软的IE之外,大部分浏览器都能很好地支持它。

❑ WebGL 2.0。其提供的是JavaScript与OpenGL ES 3.0的绑定,目前已经发展完善,除了微软的IE之外,大部分浏览器都能很好地支持它。

说明

从上述内容可以看出,随着WebGL 2.0的完善,它开始逐渐取代WebGL 1.0,因此本章也是基于OpenGL ES 3.0来介绍WebGL 2.0的。好在OpenGL ES 3.0与OpenGL ES 2.0是兼容的,大部分知识可以直接使用,只是着色语言的一些语法细节有变化,读者不用担心。

随着HTML5的兴起,大量优秀的网页涌现出来。作为HTML5官方的Web 3D解决方案,WebGL 2.0立刻受到无数开发人员的追捧。由于其以网页形式进行展示,所以可以不受平台的限制,这也省去了在各种平台上移植的步骤。

随着微信平台兼容性的快速发展,进一步降低WebGL 2.0的推广成本。微信平台中,只需要单击项目所在链接即可运行,操作步骤十分简便。也省去了传统游戏安装客户端的麻烦,同时保证了项目代码不被泄露。相信在不久的将来,WebGL 2.0将会凸显出更大的优势和能力。

2.1.2 WebGL 2.0效果展示

2.1.1节介绍了WebGL 2.0的基本知识,相信读者已经对其有了一定的了解。随着HTML5标准的不断完善,为HTML 5 Canvas提供硬件3D加速渲染的WebGL 2.0已经被越来越多的开发人员所接受。市面上采用WebGL 2.0的网络游戏如雨后春笋般涌现出来。下面的几幅图(见图2-1、图2-2)就是作者看到的使用WebGL 2.0技术制作的精美网页截图。

图2-1 纹理贴图立方体

图2-2 行星动画

从图2-1、图2-2中可以看出,使用WebGL 2.0技术渲染出的3D场景与直接使用OpenGL ES技术在移动设备上开发出的场景效果基本是一致的。读者通过对前面章节的学习,再结合本章内容便可在Web端开发出与移动端一样绚丽流畅的3D场景。