Details

Professional WebGL Programming


Professional WebGL Programming

Developing 3D Graphics for the Web
1. Aufl.

von: Andreas Anyuru

25,99 €

Verlag: Wiley
Format: PDF
Veröffentl.: 23.04.2012
ISBN/EAN: 9781119940586
Sprache: englisch
Anzahl Seiten: 360

DRM-geschütztes eBook, Sie benötigen z.B. Adobe Digital Editions und eine Adobe ID zum Lesen.

Beschreibungen

<b>Everything you need to know about developing hardware-accelerated 3D graphics with WebGL!</b> <br /> <br /> <p>As the newest technology for creating 3D graphics on the web, in both games, applications, and on regular websites, WebGL gives web developers the capability to produce eye-popping graphics. This book teaches you how to use WebGL to create stunning cross-platform apps. The book features several detailed examples that show you how to develop 3D graphics with WebGL, including explanations of code snippets that help you understand the why behind the how.</p> <p>You will also develop a stronger understanding of WebGL development from coverage that:</p> <p>•Provides a comprehensive overview of WebGL and shows how it relates to other graphics-related technologies<br /> •Addresses important topics such as the WebGL graphics pipeline, 3D transformations, texturing and lighting<br /> •Teaches you how to write vertex shaders and fragment shaders for WebGL<br /> •Includes a lot of useful guidelines, tips, and tricks for WebGL performance optimizations</p> <p><b>Professional WebGL Programming</b> is the first book on the market to delve into this fascinating topic and it puts you on your way to mastering the possibilities that exist with WebGL.</p> <p> </p> <p> </p>
<p>Introduction xxl</p> <p><b>CHAPTER 1: INTRODUCING WEBGL 1</b></p> <p>The Basics of WebGL 1</p> <p>So Why Is WebGL So Great? 2</p> <p>Designing a Graphics API 3</p> <p>An Immediate-Mode API 3</p> <p>A Retained-Mode API 4</p> <p>An Overview of Graphics Hardware 4</p> <p>GPU 5</p> <p>FrameBuffer 5</p> <p>Texture Memory 7</p> <p>Video Controller 7</p> <p>Understanding the WebGL Graphics Pipeline 7</p> <p>Vertex Shader 8</p> <p>Primitive Assembly 12</p> <p>Rasterization 14</p> <p>Fragment Shader 14</p> <p>Per Fragment Operations 17</p> <p>Comparing WebGL to Other Graphics Technologies 19</p> <p>OpenGL 19</p> <p>OpenGL ES 2.0 21</p> <p>Direct3D 23</p> <p>HTML5 Canvas 24</p> <p>Scalable Vector Graphics 28</p> <p>VRML and X3D 30</p> <p>Linear Algebra for 3D Graphics 31</p> <p>Coordinate System 31</p> <p>Points or Vertices 31</p> <p>Vectors 32</p> <p>Dot Product or Scalar Product 33</p> <p>Cross Product 34</p> <p>Homogeneous Coordinates 35</p> <p>Matrices 35</p> <p>Affine Transformations 38</p> <p>Summary 44</p> <p><b>CHAPTER 2: CREATING BASIC WEBGL EXAMPLES 45</b></p> <p>Drawing a Triangle 46</p> <p>Creating the WebGL Context 49</p> <p>Creating the Vertex Shader and the Fragment Shader 51</p> <p>Compiling the Shaders 52</p> <p>Creating the Program Object and Linking the Shaders 53</p> <p>Setting Up the Buffers 54</p> <p>Drawing the Scene 56</p> <p>Understanding the WebGL Coding Style 57</p> <p>Debugging Your WebGL Application 58</p> <p>Using Chrome Developer Tools 58</p> <p>Using Firebug 65</p> <p>WebGL Error Handling and Error Codes 67</p> <p>WebGL Inspector 70</p> <p>Troubleshooting WebGL 76</p> <p>Using the DOM API to Load Your Shaders 78</p> <p>Putting It Together in a Slightly More Advanced Example 80</p> <p>Experimenting with Code 83</p> <p>Summary 84</p> <p><b>CHAPTER 3: DRAWING 85</b></p> <p>WebGL Drawing Primitives and Drawing Methods 86</p> <p>Primitives 86</p> <p>Understanding the Importance of Winding Order 91</p> <p>WebGL’s Drawing Methods 93</p> <p>Typed Arrays 99</p> <p>Buffer and View 100</p> <p>Supported View Types 101</p> <p>Exploring Different Ways to Draw 102</p> <p>gl.drawArrays() and gl.TRIANGLES 103</p> <p>gl.drawArrays() and gl.TRIANGLE_STRIP 105</p> <p>gl.drawElements() and gl.TRIANGLES 106</p> <p>gl.drawElements() and gl.TRIANGLE_STRIP 108</p> <p>Conclusions of the Comparison 111</p> <p>Pre-Transform Vertex Cache and Post-Transform Vertex Cache 111</p> <p>Interleaving Your Vertex Data for Improved Performance 114</p> <p>Using an Array of Structures 115</p> <p>Using a Vertex Array or Constant Vertex Data 123</p> <p>A Last Example to Wind Things Up 124</p> <p>Some Things to Experiment With 134</p> <p>Summary 134</p> <p><b>CHAPTER 4: COMPACT JAVASCRIPT LIBRARIES AND TRANSFORMATIONS 137</b></p> <p>Working with Matrices and Vectors in JavaScript 138</p> <p>Sylvester 139</p> <p>WebGL-mjs 142</p> <p>glMatrix 146</p> <p>Using Transformations 150</p> <p>How Transformations Are Used 150</p> <p>Understanding the Complete Transformation Pipeline 157</p> <p>Getting Practical with Transformations 158</p> <p>Setting Up Buffers with Object Coordinates 159</p> <p>Creating Transformation Matrices with JavaScript and Uploading Them to the Shader 160</p> <p>Uploading the Transformation Matrices to the Vertex Shader in the GPU 161</p> <p>Calling Your Drawing Methods 162</p> <p>Understanding the Importance of Transformation Order 162</p> <p>Using a Grand, Fixed Coordinate System 163</p> <p>Using a Moving, Local Coordinate System 165</p> <p>Pushing and Popping Transformation Matrices 167</p> <p>A Complete Example: Drawing Several Transformed Objects 171</p> <p>Creating a Cube with WebGL 173</p> <p>Organization of the View Transformation and the Model Transformation 175</p> <p>Summary 176</p> <p><b>CHAPTER 5: TEXTURING 177</b></p> <p>Understanding Lost Context 178</p> <p>Understanding the Setup Required to Handle Lost Context 179</p> <p>Factors to Consider When Handling Lost Context 181</p> <p>Introducing 2D Textures and Cubemap Textures 183</p> <p>Loading Your Textures 185</p> <p>Creating a WebGLTexture Object 185</p> <p>Binding Your Texture 185</p> <p>Loading the Image Data 186</p> <p>Uploading the Texture to the GPU 187</p> <p>Specifying Texture Parameters 189</p> <p>Understanding the Complete Procedure of Loading a Texture 190</p> <p>Defi ning Your Texture Coordinates 193</p> <p>Using Your Textures in Shaders 195</p> <p>Working with Texture Image Units 197</p> <p>Working with Texture Filtering 198</p> <p>Understanding Magnifi cation 199</p> <p>Understanding Minifi cation 200</p> <p>Understanding Mipmapping 200</p> <p>Understanding Texture Coordinate Wrapping 203</p> <p>Using the gl.REPEAT Wrap Mode 203</p> <p>Using the gl.MIRRORED_REPEAT Wrap Mode 205</p> <p>Using the gl.CLAMP_TO_EDGE Wrap Mode 206</p> <p>A Complete Texture Example 207</p> <p>Using Images for Your Textures 210</p> <p>Downloading Free Textures 210</p> <p>Basing Textures on Your Own Photos 211</p> <p>Drawing Images 211</p> <p>Buying Textures 211</p> <p>Understanding Same-Origin Policy and Cross-Origin Resource Sharing 212</p> <p>Understanding Same-Origin Policy for Images in General 212</p> <p>Understanding Same-Origin Policy for Textures 214</p> <p>Understanding Cross-Origin Resource Sharing 215</p> <p>Summary 217</p> <p><b>CHAPTER 6: ANIMATIONS AND USER INPUT 219</b></p> <p>Animating the Scene 219</p> <p>Using setInterval() and setTimeout() 221</p> <p>Using requestAnimationFrame() 222</p> <p>Compensating Movement for Different Frame Rates 225</p> <p>Creating an FPS Counter to Measure the Smoothness of Your Animation 226</p> <p>Understanding the Disadvantages of Using FPS as a Measurement 228</p> <p>Event Handling for User Interaction 230</p> <p>Basic Event Handling with DOM Level 0 231</p> <p>Advanced Event Handling with DOM Level 2 232</p> <p>Key Input 234</p> <p>Mouse Input 239</p> <p>Applying Your New Knowledge 240</p> <p>Summary 246</p> <p><b>CHAPTER 7: LIGHTING 249</b></p> <p>Understanding Light 249</p> <p>Working with a Local Lighting Model 250</p> <p>Understanding the Phong Reflection Model 251</p> <p>Ambient Reflection 252</p> <p>Diff use Reflection 253</p> <p>Specular Reflection 255</p> <p>Understanding the Complete Equation and Shaders for the Phong Reflection Model 259</p> <p>Using Lighting with Texturing 263</p> <p>Understanding the JavaScript Code Needed for WebGL Lighting 267</p> <p>Setting Up Buffers with Vertex Normals 268</p> <p>Calculating and Uploading the Normal Matrix to the Shader 270</p> <p>Uploading the Light Information to the Shader 270</p> <p>Using Different Interpolation Techniques for Shading 271</p> <p>Flat Shading 272</p> <p>Gouraud Shading 273</p> <p>Phong Shading 274</p> <p>Understanding the Vectors That Must Be Normalized 278</p> <p>Normalization in the Vertex Shader 278</p> <p>Normalization in the Fragment Shader 279</p> <p>Using Different Types of Lights 279</p> <p>Directional Lights 280</p> <p>Point Lights 280</p> <p>Spot Lights 281</p> <p>Understanding the Attenuation of Light 284</p> <p>Understanding Light Mapping 288</p> <p>Summary 289</p> <p><b>CHAPTER 8: WEBGL PERFORMANCE OPTIMIZATIONS 291</b></p> <p>WebGL under the Hood 292</p> <p>Hardware that Powers WebGL 292</p> <p>Key Software Components 294</p> <p>WebGL Performance Optimizations 296</p> <p>Avoiding a Typical Beginner’s Mistake 296</p> <p>Locating the Bottleneck 298</p> <p>General Performance Advice 302</p> <p>Performance Advice for CPU-Limited WebGL 305</p> <p>Performance Advice for Vertex-Limited WebGL 307</p> <p>Performance Advice for Pixel-Limited WebGL 308</p> <p>A Closer Look at Blending 310</p> <p>Introducing Blending 310</p> <p>Setting the Blending Functions 311</p> <p>Understanding Drawing Order and the Depth Buffer 314</p> <p>Drawing a Scene with Both Opaque and Semi-Transparent Objects 315</p> <p>Changing the Default Operator for the Blend Equation 315</p> <p>Using Premultiplied Alpha 316</p> <p>Taking WebGL Further 317</p> <p>Using WebGL Frameworks 317</p> <p>Publishing to the Google Chrome Web Store 318</p> <p>Using Additional Resources 318</p> <p>Summary 319</p> <p>Index 321</p> <p> </p>
<p><b>Andreas Anyuru</b> is a Senior Member of Technical Staff at ST-Ericsson, specializing in Web Technologies. He is experienced in developing web graphics and has worked with implementation and optimization of WebGL and many other web technologies for Linux-based mobile platforms. <p><b>Wrox Professional</b> guides are written by working developers to address everyday needs. They provide examples, practical solutions, and expert education in new technologies, all designed to help programmers do a better job.
<p><b>Everything you need to know to develop web games and applications with superb hardware-accelerated 3D graphics</b> <p>Ready to develop web games and applications with the same high-quality, real-time 3D graphics featured in the most popular native apps? <i>Professional WebGL Programming</i> shows you how, getting you up and running in no time with the knowledge and skills you need to create stunning, graphically sophisticated games and web apps that run on most web browsers. Featuring clear, step-by-step guidance, expert tips and skill-building exercises, supplemented with detailed, hands-on development examples, it covers all the bases, including: <ul> <li>WebGL basics</li> <li>WebGL versus other graphics technologies</li> <li>Relevant linear algebra</li> <li>Troubleshooting and debugging techniques</li> <li>Drawing with the WebGL API</li> <li>Compact JavaScript<sup>®</sup> Libraries and 3D Transformations</li> <li>Writing vertex shaders and fragment shaders</li> <li>Texturing and lighting</li> <li>Animation and user input</li> <li>OpenGL<sup>®</sup> ES Shading Language</li> <li>WebGL performance optimisation</li> </ul> <p>From WebGL basics to building stunning 3D graphics and animations from the ground up, <i>Professional WebGL Programming</i> is your total guide to taking full advantage of this powerful web development technology.

Diese Produkte könnten Sie auch interessieren:

AutoCAD 2013 For Dummies
AutoCAD 2013 For Dummies
von: Bill Fane, David Byrnes
PDF ebook
23,99 €
IBM Workplace Services Express For Dummies
IBM Workplace Services Express For Dummies
von: Stephen R. Londergan, Michael Loria
PDF ebook
16,99 €
Building Flash Web Sites For Dummies
Building Flash Web Sites For Dummies
von: Doug Sahlin
PDF ebook
18,99 €