我们在本节讨论的几项激动人心的功能很可能在不久的将来就会出现在浏览器中。这些功能的实现可能也无需等到2022年。将来很可能没有HTML6规范,因为WHATWG曾暗示未来的规范将被统一简称为“HTML”。HTML将以增量的形式发展而非一蹴而就,其中特定的功能及其对应规范会单独发展。大家就这些功能达成共识之后,浏览器才会采纳并加以实现。在HTML5稳定之前,一些即将发布的功能很可能已经在浏览器中大规模使用了。负责推动Web发展的组织为了满足用户和开发人员的需求,一直致力于Web平台的开发升级。

WebGL

WebGL是针对Web上 3D图像的API。历史上,Mozilla、Opera、Google等浏览器厂商曾分别提供了试验性的JavaScript 3D API。今天,WebGL正向规范化方向迈进,而越来越多的HTML5浏览器加入了支持它的阵营。WebGL的规范化进程由浏览器厂商和The Khronos Group(负责OpenGL的组织,OpenGL是1992年创建的跨平台3D绘图标准)共同推进。OpenGL规范的当前版本为第4版,它已被广泛应用于游戏和计算机辅助设计中,并成为了微软Direct3D的有力竞争对手。

我们在第2章看到了在canvas元素中调用getContext("2d"),可以获得2D绘图的上下文。毫无疑问,这为其他类型的绘图上下文提供了方便之门。WebGL使用的同样是canvas元素,只不过获取的是3D上下文。由于还在试验期,所以调用getContext()时,传入的参数需要使用浏览器厂商指定的名称作为前缀(moz-webgl、webkit-3d等)。例如,在支持WebGL的Firefox版本中,可以在canvas元素中调用getContext("moz-webgl")来获取3D上下文。这里调用getContext()返回的API对象与2D canvas的有所不同,因为它提供的是OpenGL绑定,而非绘图操作。WebGL版本的canvas上下文管理的是纹理和顶点缓冲区,而不是调用函数来绘制线条和填充形状。

3D HTML

与其他HTML5元素一样,WebGL将会成为Web平台不可或缺的一部分。因为WebGL通过canvas元素来渲染,所以它属于document对象。你可以像操作图像或2D canvas那样,在页面3D canvas元素中应用定位和变换。实际上,任何在2D canvas上能做的事情,在3D canvas上都能做,比如叠放文本和视频、执行动画等。与纯粹的3D显示技术相比,结合其他文档元素,3D canvas不仅可以用于创建HUD(Heads-Up Display,平视显示器),而且使得2D与3D的混合界面变得更易于开发了。想象一下,在3D场景中利用HTML标签构造一个Web用户界面会是怎样的效果。许多OpenGL应用程序使用了非原生的菜单和控件,而WebGL则可以使用原生的样式美观的HTML5表单元素。

现有的Web网络架构也为WebGL的开发提供了便利。WebGL应用程序可以通过URL加载纹理、模型等资源。多人游戏可以基于WebSocket进行通信。例如,Google最近使用HTML5 WebSocket、Audio、WebGL等技术将经典的3D游戏Quake II移植到了Web上,并加入了多人竞争机制,如图13-1所示。游戏逻辑和图形使用JavaScript实现,页面呈现通过调用WebGL canvas完成。游戏使用持久化的WebSocket连接来保持与服务器间的通信,从而实现对不同玩家位置的调整。

3D着色器

WebGL是OpenGL ES 2与JavaScript的结合,因此,它可以使用OpenGL中标准化的编程图形管道,包括着色器(shader)。着色器可将高度灵活的渲染效果应用于3D场景,让显示效果更真实。WebGL 着色器是用GLSL(GL Shading Language,GL着色语言)编写的,这是Web中又一种新的专用语言。HTML5的WebGL应用程序使用HTML搭建框架,用CSS控制样式,用JavaScript处理逻辑,用GLSL进行着色。开发人员可以借鉴在OpenGL着色器方面的开发经验,按照类似的方式使用WebGL API。

enter image description here

WebGL可以当做是Web 3D图形的基础层。与对DOM进行抽象并提供若干强大功能的JavaScript库类似,有一些库以WebGL为基础,提供了若干额外功能。正在开发的库涵盖了多个方面,有场景图,有3D文件格式(如COLLADA),还有游戏开发的完整引擎。图13-2显示的是Shader Toy,它是由Inigo Quilez搭建的WebGL着色工作台,其上提供的场景渲染效果是他与其他9名场景渲染艺术家一起设计的。这张截图显示的是Rgba的Leizex。我们希望在不久的将来,随着高级渲染库的蓬勃发展,即便是Web编程新手也能轻松地创建出3D场景来。

enter image description here

设备

Web应用很可能需访问多媒体硬件,如网络摄像头、麦克风或是已连接的存储设备。为此,HTML5设计了device元素,以便让应用程序访问所连接硬件的数据流。当然,对于隐私的保护是非常严格的,所以不是每段脚本都可以随意使用用户的摄像头。如同Geolocation和Storage API一样,当应用程序请求提升权限时,浏览器就会弹出提示,并请求用户确认。与网络摄像头相关的应用主要是视频会议, 不过还有许多其他令人惊奇的Web应用功能,比如增强现实(augmented- reality)和头部跟踪。

音频数据API

可编程的音频API与的关系类似于与间的关系。在canvas标签出现之前,Web图像对脚本而言基本是不透明的。图像的创建和操作只能发生在服务器端。如今,已经有工具可以基于canvas元素来创建和操作可视化媒体了。同样地,在HTML5应用中可以使用音频数据API创建音乐。这将有助于丰富Web应用程序的内容创建能力,推进媒体创作工具与消费平台一体化(self-hosting)时代的到来。可以想象,将来会有一天,用户仅仅通过浏览器就能完成音频的创建和编辑。

简单的音频播放功能可使用元素来实现。但是,应用程序对音频的操作、分析或联机创建都需要底层API。若无法访问音频数据,那么诸如文本到语音的转换、语音到语音的转换、合成器、音乐可视化等功能都是空谈。

将来,标准音频API不仅有望操作数据元素中的麦克风输入,而且还有可能操作标签内引入的文件。通过和音频数据API,可以构建一个允许用户在页面内录制和编辑声音的HTML5应用程序。音频片段可存储在本地浏览器缓存中以便重用,还可与基于canvas的编辑工具相结合。 对此,目前Mozilla的每夜构建版本中有一种试验性的实现方式。Mozilla音频数据API可被当做实现标准跨浏览器音频编程功能的基础。

触摸屏设备事件

Web访问方式越来越多地从台式机和笔记本电脑转换到了手机和平板电脑上,因此HTML5的交互处理方式也在逐渐发生变化。Apple在推出iPhone的同时,也将一系列特殊事件引入到了其浏览器当中,这些事件用来处理多点触摸输入和设备旋转。尽管还未被标准化,但这些事件已被其他移动设备厂商选用。学会此类事件,就可以针对当今最先进的设备开发出合适的Web应用程序。

1. 方向事件

方向事件是移动设备中最简单的事件,它可以加入到页面body标签中:

在方向事件处理程序中,可以引用window.orientation属性。该属性可选的值如表13-1所示,它们以页面首次加载时设备的方向为基准。

enter image description here

获得方向值后,就可对设备的内容显示进行相应的调整了。

2. 手势事件

移动设备支持的另一种事件相对高级一些,称为手势事件。手势事件可以理解为通过多点触摸引发的缩放或旋转。当用户有两个或多个手指同时在触摸屏上挤压(pinch)或扭转(twist)时,就会触发手势事件。扭转表示旋转,挤压(pinch in)和伸展(pinch out)分别表示缩小和放大。为了接收到手势事件,代码需要注册表13-2中所示的事件处理程序。

enter image description here

在用户做手势的过程中,事件处理程序会灵活检测事件的缩放或旋转属性,并对显示效果进行相应更新。代码清单13-1是手势处理函数的示例。

enter image description here

在需要操作物件或者以显示为主的应用程序(如绘图工具和导航工具等)中,经常需要用到手势事件。

3. 触摸事件

如果需要在低层次上处理设备事件,可以通过触摸事件获取所需信息。表13-3所示为不同的触摸事件。

enter image description here

与其他移动设备事件不同,触摸事件需要考虑多点数据(多个手指可能会同时触摸)同时出现的情况。因此,用于处理触摸事件的API会相对复杂一些,如代码清单13-2所示。

P2P网络

在Web应用程序中,高级网络技术始终在向前发展。不论是HTTP还是WebSocket,都有客户端(浏览器或其他用户代理)和服务器端(URL主机)。P2P网络允许客户端之间直接通信。通常情况下,这比从服务器发送数据更高效,而且有助于降低托管成本,提高应用的性能。要想开发更快的多人游戏和协作软件,P2P技术是不二之选。

在HTML5中,P2P结合device元素可以构建高效视频聊天应用。在P2P视频聊天应用中,对话双方能够直接互传数据,无需通过中心服务器。在HTML5之外,P2P视频聊天已广泛应用于诸如Skype等应用程序中。由于流媒体视频对带宽要求比较高,如果没有P2P通信技术的话,很可能那些流媒体应用程序一个都无法实现。

针对P2P网络,浏览器厂商也进行了一些试验,例如Opera的Unite技术,该技术会直接在浏览器中部署一个简易的Web服务器。Opera Unite允许用户为别人创建和提供服务,从而实现聊天、文件共享和文档协作等功能。

当然,面向Web的P2P网络不仅需要考虑如何为开发人员提供编程API,还需要引入一个兼顾安全和网络媒介的协议。

最终方向

到目前为止,我们一直着眼于如何让开发人员构建强大的HTML5应用程序。我们考虑到的另一种视角是基于HTML5的Web应用如何能让用户获得上佳的体验。许多HTML5功能旨在消除或降低脚本的复杂性,提供之前需要插件才能实现的功能。拿HTML5的video元素来说,无需任何JavaScript即可指定控制界面、自动播放、缓冲行为和生成并显示缩略图。而通过CSS3可以直接在样式文件中实现以前用脚本才能实现的动画效果。这些声明式代码让应用程序更容易被用户理解,并最终让使用你的应用的用户获得强大的功能。

前面的章节中,你已经见过Firefox和WebKit的开发工具是怎样揭示HTML5各种功能信息的,包括存储功能,以及至关重要的JavaScrpt调试、性能分析、命令行求值等功能。因此,简单的声明性代码、浏览器内置或Web应用程序自带的轻量级工具将是HTML5未来的发展方向。

Google显然对HTML的未来发展充满信心——它宣布即将发布Google Chrome操作系统。这是一种围绕浏览器和媒体播放器开发的精简版操作系统。到2010年年底,Google操作系统的目标是包含丰富的基于HTML API实现的功能,以提供完美的用户体验,同时使其上运行的应用程序完全符合标准的Web体系架构。

enter image description here