| Introduction |
|
xxl | |
|
Chapter 1 Introducing Webgl |
|
|
1 | (44) |
|
|
|
1 | (1) |
|
So Why Is WebGL So Great? |
|
|
2 | (1) |
|
|
|
3 | (1) |
|
|
|
3 | (1) |
|
|
|
4 | (1) |
|
An Overview of Graphics Hardware |
|
|
4 | (3) |
|
|
|
5 | (1) |
|
|
|
5 | (2) |
|
|
|
7 | (1) |
|
|
|
7 | (1) |
|
Understanding the WebGL Graphics Pipeline |
|
|
7 | (12) |
|
|
|
8 | (4) |
|
|
|
12 | (2) |
|
|
|
14 | (1) |
|
|
|
14 | (3) |
|
|
|
17 | (2) |
|
Comparing WebGL to Other Graphics Technologies |
|
|
19 | (12) |
|
|
|
19 | (2) |
|
|
|
21 | (2) |
|
|
|
23 | (1) |
|
|
|
24 | (4) |
|
|
|
28 | (2) |
|
|
|
30 | (1) |
|
Linear Algebra for 3D Graphics |
|
|
31 | (13) |
|
|
|
31 | (1) |
|
|
|
31 | (1) |
|
|
|
32 | (1) |
|
Dot Product or Scalar Product |
|
|
33 | (1) |
|
|
|
34 | (1) |
|
|
|
35 | (1) |
|
|
|
35 | (3) |
|
|
|
38 | (6) |
|
|
|
44 | (1) |
|
Chapter 2 Creating Basic Webgl Examples |
|
|
45 | (40) |
|
|
|
46 | (11) |
|
Creating the WebGL Context |
|
|
49 | (2) |
|
Creating the Vertex Shader and the Fragment Shader |
|
|
51 | (1) |
|
|
|
52 | (1) |
|
Creating the Program Object and Linking the Shaders |
|
|
53 | (1) |
|
|
|
54 | (2) |
|
|
|
56 | (1) |
|
Understanding the WebGL Coding Style |
|
|
57 | (1) |
|
Debugging Your WebGL Application |
|
|
58 | (20) |
|
Using Chrome Developer Tools |
|
|
58 | (7) |
|
|
|
65 | (2) |
|
WebGL Error Handling and Error Codes |
|
|
67 | (3) |
|
|
|
70 | (6) |
|
|
|
76 | (2) |
|
Using the DOM API to Load Your Shaders |
|
|
78 | (2) |
|
Putting It Together in a Slightly More Advanced Example |
|
|
80 | (4) |
|
|
|
83 | (1) |
|
|
|
84 | (1) |
|
|
|
85 | (52) |
|
WebGL Drawing Primitives and Drawing Methods |
|
|
86 | (13) |
|
|
|
86 | (5) |
|
Understanding the Importance of Winding Order |
|
|
91 | (2) |
|
|
|
93 | (6) |
|
|
|
99 | (3) |
|
|
|
100 | (1) |
|
|
|
101 | (1) |
|
Exploring Different Ways to Draw |
|
|
102 | (12) |
|
gl.drawArrays() and gl.TRIANGLES |
|
|
103 | (2) |
|
gl.drawArrays() and gl.TRIANGLE_STRIP |
|
|
105 | (1) |
|
gl.drawElements() and gl.TRIANGLES |
|
|
106 | (2) |
|
gl.drawElements() and gl.TRIANGLE_STRIP |
|
|
108 | (3) |
|
Conclusions of the Comparison |
|
|
111 | (1) |
|
Pre-Transform Vertex Cache and Post-Transform Vertex Cache |
|
|
111 | (3) |
|
Interleaving Your Vertex Data for Improved Performance |
|
|
114 | (9) |
|
Using an Array of Structures |
|
|
115 | (8) |
|
Using a Vertex Array or Constant Vertex Data |
|
|
123 | (1) |
|
A Last Example to Wind Things Up |
|
|
124 | (10) |
|
Some Things to Experiment With |
|
|
134 | (1) |
|
|
|
134 | (3) |
|
Chapter 4 Compact Javascript Libraries And Transformations |
|
|
137 | (40) |
|
Working with Matrices and Vectors in JavaScript |
|
|
138 | (12) |
|
|
|
139 | (3) |
|
|
|
142 | (4) |
|
|
|
146 | (4) |
|
|
|
150 | (7) |
|
How Transformations Are Used |
|
|
150 | (7) |
|
Understanding the Complete Transformation Pipeline |
|
|
157 | (1) |
|
Getting Practical with Transformations |
|
|
158 | (4) |
|
Setting Up Buffers with Object Coordinates |
|
|
159 | (1) |
|
Creating Transformation Matrices with JavaScript and Uploading Them to the Shader |
|
|
160 | (1) |
|
Uploading the Transformation Matrices to the Vertex Shader in the GPU |
|
|
161 | (1) |
|
Calling Your Drawing Methods |
|
|
162 | (1) |
|
Understanding the Importance of Transformation Order |
|
|
162 | (9) |
|
Using a Grand, Fixed Coordinate System |
|
|
163 | (2) |
|
Using a Moving, Local Coordinate System |
|
|
165 | (2) |
|
Pushing and Popping Transformation Matrices |
|
|
167 | (4) |
|
A Complete Example: Drawing Several Transformed Objects |
|
|
171 | (5) |
|
Creating a Cube with WebGL |
|
|
173 | (2) |
|
Organization of the View Transformation and the Model Transformation |
|
|
175 | (1) |
|
|
|
176 | (1) |
|
|
|
177 | (42) |
|
Understanding Lost Context |
|
|
178 | (5) |
|
Understanding the Setup Required to Handle Lost Context |
|
|
179 | (2) |
|
Factors to Consider When Handling Lost Context |
|
|
181 | (2) |
|
Introducing 2D Textures and Cubemap Textures |
|
|
183 | (2) |
|
|
|
185 | (8) |
|
Creating a WebGLTexture Object |
|
|
185 | (1) |
|
|
|
185 | (1) |
|
|
|
186 | (1) |
|
Uploading the Texture to the GPU |
|
|
187 | (2) |
|
Specifying Texture Parameters |
|
|
189 | (1) |
|
Understanding the Complete Procedure of Loading a Texture |
|
|
190 | (3) |
|
Defining Your Texture Coordinates |
|
|
193 | (2) |
|
Using Your Textures in Shaders |
|
|
195 | (3) |
|
Working with Texture Image Units |
|
|
197 | (1) |
|
Working with Texture Filtering |
|
|
198 | (5) |
|
Understanding Magnification |
|
|
199 | (1) |
|
Understanding Minification |
|
|
200 | (1) |
|
|
|
200 | (3) |
|
Understanding Texture Coordinate Wrapping |
|
|
203 | (4) |
|
Using the gl.REPEAT Wrap Mode |
|
|
203 | (2) |
|
Using the gl.MIRRORED_REPEAT Wrap Mode |
|
|
205 | (1) |
|
Using the gl.CLAMP_TO_EDGE Wrap Mode |
|
|
206 | (1) |
|
A Complete Texture Example |
|
|
207 | (3) |
|
Using Images for Your Textures |
|
|
210 | (2) |
|
Downloading Free Textures |
|
|
210 | (1) |
|
Basing Textures on Your Own Photos |
|
|
211 | (1) |
|
|
|
211 | (1) |
|
|
|
211 | (1) |
|
Understanding Same-Origin Policy and Cross-Origin Resource Sharing |
|
|
212 | (5) |
|
Understanding Same-Origin Policy for Images in General |
|
|
212 | (2) |
|
Understanding Same-Origin Policy for Textures |
|
|
214 | (1) |
|
Understanding Cross-Origin Resource Sharing |
|
|
215 | (2) |
|
|
|
217 | (2) |
|
Chapter 6 Animations And User Input |
|
|
219 | (30) |
|
|
|
219 | (11) |
|
Using setInterval() and setTimeout() |
|
|
221 | (1) |
|
Using requestAnimationFrame() |
|
|
222 | (3) |
|
Compensating Movement for Different Frame Rates |
|
|
225 | (1) |
|
Creating an FPS Counter to Measure the Smoothness of Your Animation |
|
|
226 | (2) |
|
Understanding the Disadvantages of Using FPS as a Measurement |
|
|
228 | (2) |
|
Event Handling for User Interaction |
|
|
230 | (10) |
|
Basic Event Handling with DOM Level 0 |
|
|
231 | (1) |
|
Advanced Event Handling with DOM Level 2 |
|
|
232 | (2) |
|
|
|
234 | (5) |
|
|
|
239 | (1) |
|
Applying Your New Knowledge |
|
|
240 | (6) |
|
|
|
246 | (3) |
|
|
|
249 | (42) |
|
|
|
249 | (1) |
|
Working with a Local Lighting Model |
|
|
250 | (1) |
|
Understanding the Phong Reflection Model |
|
|
251 | (16) |
|
|
|
252 | (1) |
|
|
|
253 | (2) |
|
|
|
255 | (4) |
|
Understanding the Complete Equation and Shaders for the Phong Reflection Model |
|
|
259 | (4) |
|
Using Lighting with Texturing |
|
|
263 | (4) |
|
Understanding the JavaScript Code Needed for WebGL Lighting |
|
|
267 | (4) |
|
Setting Up Buffers with Vertex Normals |
|
|
268 | (2) |
|
Calculating and Uploading the Normal Matrix to the Shader |
|
|
270 | (1) |
|
Uploading the Light Information to the Shader |
|
|
270 | (1) |
|
Using Different Interpolation Techniques for Shading |
|
|
271 | (7) |
|
|
|
272 | (1) |
|
|
|
273 | (1) |
|
|
|
274 | (4) |
|
Understanding the Vectors That Must Be Normalized |
|
|
278 | (1) |
|
Normalization in the Vertex Shader |
|
|
278 | (1) |
|
Normalization in the Fragment Shader |
|
|
279 | (1) |
|
Using Different Types of Lights |
|
|
279 | (5) |
|
|
|
280 | (1) |
|
|
|
280 | (1) |
|
|
|
281 | (3) |
|
Understanding the Attenuation of Light |
|
|
284 | (4) |
|
Understanding Light Mapping |
|
|
288 | (1) |
|
|
|
289 | (2) |
|
Chapter 8 Webgl Performance Optimizations |
|
|
291 | (30) |
|
|
|
292 | (4) |
|
Hardware that Powers WebGL |
|
|
292 | (2) |
|
|
|
294 | (2) |
|
WebGL Performance Optimizations |
|
|
296 | (14) |
|
Avoiding a Typical Beginner's Mistake |
|
|
296 | (2) |
|
|
|
298 | (4) |
|
General Performance Advice |
|
|
302 | (3) |
|
Performance Advice for CPU-Limited WebGL |
|
|
305 | (2) |
|
Performance Advice for Vertex-Limited WebGL |
|
|
307 | (1) |
|
Performance Advice for Pixel-Limited WebGL |
|
|
308 | (2) |
|
A Closer Look at Blending |
|
|
310 | (7) |
|
|
|
310 | (1) |
|
Setting the Blending Functions |
|
|
311 | (3) |
|
Understanding Drawing Order and the Depth Buffer |
|
|
314 | (1) |
|
Drawing a Scene with Both Opaque and Semi-Transparent Objects |
|
|
315 | (1) |
|
Changing the Default Operator for the Blend Equation |
|
|
315 | (1) |
|
Using Premultiplied Alpha |
|
|
316 | (1) |
|
|
|
317 | (2) |
|
|
|
317 | (1) |
|
Publishing to the Google Chrome Web Store |
|
|
318 | (1) |
|
Using Additional Resources |
|
|
318 | (1) |
|
|
|
319 | (2) |
| Index |
|
321 | |