Peter Lubbers - Pro HTML 5 Programming

Recommendations

Info

260 CHAPTER 11 ■ THE FUTURE OF HTML5 will be incremental, with specific features and their specifications evolving individually, rather than as a consolidated effort. Browsers will take up features as they gain consensus, and the upcoming features might even be widely available in browsers well before HTML5 is set in stone. The community responsible for driving the Web forward is committed to evolving the platform to meet the needs of users and developers. 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 As you saw in Chapter 2, you get a 2D drawing context from a canvas element by calling getContext("2d") on the element. Unsurprisingly, this leaves the door open for additional types of drawing contexts. WebGL also uses the canvas element, but through a 3D context. Current implementations use experimental vendor prefixes (moz-webgl, webkit-3d, etc.) as the arguments to the getContext() call. In a WebGL-enabled build of Firefox, for example, you can get a 3D context by calling getContext("moz-webgl") on a canvas element. The API of the object returned by such a call to getContext() is different from the 2D canvas equivalent, as this one provides OpenGL bindings instead of drawing operations. Rather than making calls to draw lines and fill shapes, the WebGL version of the canvas context manages textures and vertex buffers. HTML in Three Dimensions WebGL, like the rest of HTML5, 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. Combining other document elements and a 3D canvas will make heads-up displays (HUDs) and mixed 2D and 3D interfaces much simpler to develop when compared to pure 3D display technologies. Imagine taking a 3D scene and using HTML markup to overlay a simple web user interface on it. Quite unlike the nonnative menus and controls found in many OpenGL applications, WebGL software will incorporate nicely styled HTML5 form elements with ease. The existing network architecture of the Web will also complement WebGL. WebGL applications will be able to fetch resources such as textures and models from URLs. Multiplayer games can communicate with WebSockets. For example, Figure 11-1 shows an example of this in action. Google recently ported the classic 3D game Quake II to the Web using HTML5 WebSocket, Audio, and WebGL, complete with multiplayer competition. Game logic and graphics were implemented in JavaScript, making calls to a WebGL canvas for rendering. Communication to the server to coordinate player movement was achieved using a persistent WebSocket connection.
Figure 11-1. Quake II 3D Shaders CHAPTER 11 ■ THE FUTURE OF HTML5 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 HTML5 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. WebGL is likely to be a foundational layer for 3D graphics on the Web. Just as JavaScript libraries have abstracted over DOM and provided powerful high-level constructs, there are libraries providing additional functionality on top of WebGL. Libraries are currently under development for scene graphs, 3D file formats such as COLLADA, and complete engines for game development. Figure 11-2 shows Shader Toy—a WebGL shader workbench built by Inigo Quilez that comes with shaders by nine other demoscene artists. This particular screenshot shows Leizex by Rgba. We can expect an explosion of highlevel rendering libraries that bring 3D scene creation power to novice Web programmers in the near future. 261
Page 1 and 2:
THE EXPERT’S VOICE ® IN WEB DEVE
Page 3 and 4:
■ ■ ■ Pro HTML5 Programming P
Page 5 and 6:
For my beautiful wife, Vittoria, an
Page 7 and 8:
Contents ■Foreword ..............
Page 9 and 10:
■ CONTENTS Implementing Canvas Se
Page 11 and 12:
■ CONTENTS Summary ..............
Page 13 and 14:
■ CONTENTS Setting and Retrieving
Page 15 and 16:
Foreword In June 2004, representati
Page 17 and 18:
About the Technical Reviewer � Pa
Page 19 and 20:
Introduction HTML5 is brand new. In
Page 21 and 22:
C H A P T E R 1 ■ ■ ■ Overvie
Page 23 and 24:
CHAPTER 1 ■ OVERVIEW OF HTML5 wit
Page 25 and 26:
Interoperability Simplification CHA
Page 27 and 28:
• MathML • Microdata • Server
Page 29 and 30:
Figure 1-1. A page rendered in stan
Page 31 and 32:
Table 1-2. New sectioning HTML5 ele
Page 33 and 34:
CHAPTER 1 ■ OVERVIEW OF HTML5 Wit
Page 35 and 36:
article { background-color: #eee; d
Page 37 and 38:
Figure 1-2. An HTML5 page with all
Page 39 and 40:
CHAPTER 1 ■ OVERVIEW OF HTML5 The
Page 41 and 42:
Figure 1-3. Developer Tools view in
Page 43:
CHAPTER 1 ■ OVERVIEW OF HTML5 All
Page 46 and 47:
26 CHAPTER 2 ■ USING THE HTML5 CA
Page 48 and 49:
Page 50 and 51:
Page 52 and 53:
Download from Wow! eBook 32 CHAPTE
Page 54 and 55:
Page 56 and 57:
Page 58 and 59:
Page 60 and 61:
Page 62 and 63:
Page 64 and 65:
Page 66 and 67:
Page 68 and 69:
Page 70 and 71:
Page 72 and 73:
Page 74 and 75:
Page 76 and 77:
Page 78 and 79:
Page 80 and 81:
Page 82 and 83:
Page 85 and 86:
C H A P T E R 3 ■ ■ ■ Working
Page 87 and 88:
Audio and Video Codecs CHAPTER 3
Page 89 and 90:
Table 3-1. Browser support for HTML
Page 91 and 92:
MEDIA FOR EVERYONE CHAPTER 3 ■ WO
Page 93 and 94:
CHAPTER 3 ■ WORKING WITH HTML5 AU
Page 95 and 96:
Table 3-4 shows a few of the read-o
Page 97 and 98:
Page 99 and 100:
Page 101 and 102:
Page 103 and 104:
find the actual frame since the vid
Page 105 and 106:
LOSING VIEWERS IN THE OF AN EYE CH
Page 107 and 108:
C H A P T E R 4 ■ ■ ■ Using t
Page 109 and 110:
A device can use any of the followi
Page 111 and 112:
Table 4-4. Pros and cons of cell ph
Page 113 and 114:
Figure 4-1. HTML5 Geolocation brows
Page 115 and 116:
CHAPTER 4 ■ USING THE HTML5 GEOLO
Page 117 and 118:
Page 119 and 120:
Page 121 and 122:
Page 123 and 124:
Listing 4-6. The Haversine formula
Page 125 and 126:
Listing 4-9. Adding the loadDemo()
Page 127 and 128:
THE EASIEST WAY TO TRAVEL CHAPTER 4
Page 129 and 130:
var deltaLatitude = toRadians(latit
Page 131 and 132:
Practical Extras CHAPTER 4 ■ USIN
Page 133 and 134:
Show Me on a Google Map CHAPTER 4
Page 135 and 136:
Page 137 and 138:
CHAPTER 5 ■ USING THE COMMUNICATI
Page 139 and 140:
Page 141 and 142:
Page 143 and 144:
var defaultTitle = "Portal [http://
Page 145 and 146:
Send Notification CHAPTER 5 ■ U
Page 147 and 148:
Figure 5-4. Difference between clie
Page 149 and 150:
“SEEMINGLY ARBITRARY” TIMES CHA
Page 151 and 152:
crossOriginRequest.upload.onprogres
Page 153 and 154:
Page 155 and 156:
Page 157 and 158:
Page 159 and 160:
Figure 6-1. The complexity of real-
Page 161 and 162:
Listing 6-2. The WebSocket interfac
Page 163 and 164:
Listing 6-4. HTTP response header H
Page 165 and 166:
Figure 6-4. Latency comparison betw
Page 167 and 168:
EXISTING WEBSOCKET SERVERS CHAPTER
Page 169 and 170:
CHAPTER 6 ■ USING THE HTML5 WEBSO
Page 171 and 172:
def terminate(self): self.ready_sta
Page 173 and 174:
self.sessions = [] self.port = port
Page 175 and 176:
Basic API Usage CHAPTER 6 ■ USING
Page 177 and 178:
Page 179 and 180:
Page 181 and 182:
Page 183 and 184:
Page 185 and 186:
HTML5 WebSocket / Geolocation Track
Page 187:
} } Summary incomingRow = docume
Page 190 and 191:
170 CHAPTER 7 ■ USING THE HTML5 F
Page 192 and 193:
Download from Wow! eBook 172 CHAPT
Page 194 and 195:
Page 196 and 197:
Page 198 and 199:
Page 200 and 201:
Page 202 and 203:
Page 204 and 205:
Page 206 and 207:
Page 208 and 209:
Page 210 and 211:
Page 212 and 213:
Download from Wow! eBook
Page 214 and 215:
194 CHAPTER 8 ■ USING THE HTML5 W
Page 216 and 217:
Page 218 and 219:
Page 220 and 221:
Page 222 and 223:
Page 224 and 225:
Page 226 and 227:
Page 228 and 229:
Page 230 and 231: 210 CHAPTER 8 ■ USING THE HTML5 W
Page 232 and 233: Download from Wow! eBook 212 CHAPT
Page 262 and 263: Download from Wow! eBook
Page 264 and 265: 244 CHAPTER 10 ■ CREATING HTML5 O
Page 279: C H A P T E R 11 ■ ■ ■ The Fu
Page 283 and 284: CHAPTER 11 ■ THE FUTURE OF HTML5
Page 285 and 286: CHAPTER 11 ■ THE FUTURE OF HTML5
Page 287: CHAPTER 11 ■ THE FUTURE OF HTML5
Page 290 and 291: 270 ■ INDEX unsupported, 68 using
Page 292 and 293: Download from Wow! eBook 272 ■ I
Page 294 and 295: 274 ■ INDEX Web SQL database supp
Page 296 and 297: 276 ■ INDEX HTML5 page CSS file f
Page 298 and 299: 278 ■ INDEX media elements. See a
Page 300 and 301: 280 ■ INDEX building application
Page 302 and 303: Download from Wow! eBook 282 ■ I
Page 304: 284 ■ INDEX stopping Web Workers,
show all

Peter Lubbers - Pro HTML 5 Programming

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?