Peer-to-Peer Networking

We haven’t seen the end of advanced networking in web applications either. With both HTTP and WebSocket, there is a client (the browser or other user agent) and a server (the host of the URL). Peer-to-peer (P2P) networking allows clients to communicate directly. This is often more efficient than sending all data through a
server. Efficiency, of course, reduces hosting costs and improves application performance.

Gestures

The next type of event supported by mobile devices is a high-level event known as the gesture. Consider gesture events as representing a multitouch change in size or rotation. This is usually performed when the user places two or more fingers on the screen simultaneously and pinches or twists. A twist represents a rotation, while a pinch in or out represents a zoom out or in, respectively. To receive gesture events, your code needs to register one of the handlers shown in Table

Event Handler	Description
ongesturestart	A user has placed multiple fingers on the screen and has begun a movement.
ongesturechange	The user is in the process of moving multiple fingers in a scale or rotation.
ongestureend	The user has completed the scale or rotation by removing fingers.

Touchscreen Device Events

As Web access shifts ever more from desktops and laptops to mobile phones and tablets, HTML 5 is also continuing to adapt with changes in interaction handling. When Apple introduced the iPhone, it also introduced into its browser a set of special events that could be used to handle multitouch inputs and device rotation. Although these events have not yet been standardized, they are being picked up by other vendors of mobile devices. 

Video Improvements

Earlier in this book, we described in detail the current capabilities of the <video> element. While there is still no required video codec specified in HTML 5, Google recently released WebM, a high-quality, royalty-free video codec for the Web. Although not all vendors have agreed to support WebM yet, there is significant momentum behind the format.

Audio Data API

Programmable audio APIs will do for <audio> what <canvas> did for <img>. Prior to the canvas tag, images on the Web were largely opaque to scripts. Image creation and manipulation had to occur on the sidelines—namely, on the server. Now, there are tools for creating and manipulating visual media based on the canvas element.

3D Shaders

WebGL is a binding for OpenGL ES 2 in JavaScript, so it uses the programmable graphics pipeline that is standardized in OpenGL, including shaders. Shaders allow highly flexible rendering effects to be applied to a 3D scene, increasing the realism of the display. WebGL shaders are written in GL Shading Language (GLSL). This adds yet another single-purpose language to the web stack. An HTML 5 application with WebGL consists of HTML for structure, CSS for style, JavaScript for logic, and GLSL for shaders. Developers can transfer their knowledge of OpenGL shaders to a similar API in a web environment.

HTML in Three Dimensions

WebGL, like the rest of HTML 5, will be an integral part of the web platform. Because WebGL renders to a canvas element, it is part of the document. You can position and transform 3D canvas elements, just as you can place images or 2D canvases on a page. In fact, you can do anything you can do with any other canvas element, including overlaying text and video and performing animations.

What is WebGL

WebGL is an API for 3D graphics on the Web. Historically, several browser vendors including Mozilla, Opera, and Google have worked on separate experimental 3D APIs for JavaScript. Today, WebGL is progressing along a path toward standardization and wide availability across HTML5 browsers. The standardization process is taking place with browser vendors and

The Khronos Group, the body responsible for OpenGL, a cross-platform 3D drawing standard created in 1992. OpenGL, currently at specification version 4.0, is widely used in gaming and computer-aided design applications as a counterpart and competitor to Microsoft’s Direct3D.