WebGL-PG Errata

Listing page for mistakes we've made

Chapter 2:

Page 11, second sentence: "Listing 2.1 shows DrawingTriangle.html." Should be: "Listing 2.1 shows DrawRectangle.html."

Page 15, last paragraph: "Line 15 then uses the fillStyle property..." should be "Line 14 then uses the fillStyle property..."

Page 21, footnote2, last sentence should read "errors ARE displayed by default. They can be DISABLED by specifying false as the second argument of getWebGLContext().

Page 31: Final para: Reference to Chapter 8 should actually refer to Chapter 9 where initShaders() is discussed.

Page 34, last paragraph: "...vec4 is a vector made up of three floats. ..." should be "...vec4 is a vector made up of four floats. ..."

Page 51, 54 In the listing for Clickedpoints.js, lines 56 and 57 have transposed height and width. This error is repeated when the code fragment is show again on page 54. The correct code is shown on page 55 when the transformation is explained and shows that x is calculated based on width and y based on height. Note the code in the example downloaded from this website is correct (Thanks to Robert Günczer for spotting this).

Page 57, second sentence: "...is incremented by 2 using the convenient + operator." should be "...is incremented by 2 using the convenient += operator."

Page 57, fourth paragraph: "...as shown in Figure 2.26" should be "...as shown in Figure 2.25".

Chapter 3:

Page 90: Figure 3.15, titled HelloQuad actually shows a screen shot of MultiPoint (figure 3.2), the correct figure should look like this (Thanks to Robert Günczer for spotting this).:

Page 71, Listing 3.2, line 65: "// Write date into the buffer object" should be "// Write data into the buffer object"

Page 94, Listing 3.4, line 63: "0.0.0, 0.5, -0.5, -0.5, 0.5, -0.5" should be "0.0, 0.5, -0.5, -0.5, 0.5, -0.5"

Chapter 3&4: There are several places where the code examples have been typeset wrong during printing

  • Page 111: the example code line 17 after the third paragraph should have a space between var and Tx, ie

    • 17 var Tx = 0.5, Ty = 0.5, Tz = 0.0;

  • Page 112: the example code line 17 at the bottom of the page should have a space between var and Sx, ie

    • 17 var Sx = 01.0, Sy = 1.5, Sz = 1.0;

  • Page 117: the code line 45 in the first block of code should have a space between var and cosB, ie

    • varcosB = Math.cos(radian), sinB = Math.sin(radian);

Page 106, last paragraph, second sentence: "...find the coefficient of each equation in Equation 3.9..." should be "...find the coefficient of each term in Equation 3.9..."

Page 115, last paragraph, second sentence: "To simply the task..." should be "To simplify the task..."

Chapter 4

Page 118, 1st line reads "As you will remember from Chapter 3 (figure 3.21) the angle is positive if performed in the clockwise direction around the rotation axis. This should read:

... if performed in the counterclockwise direction around the rotation axis

(Thanks to Robert Günczer for spotting this).

Page 122, Listing 4.2, line 45: "varTx = 0.5; // Translation distance" should be "var Tx = 0.5; // Translation distance"

Page 127, Listing 4.3 (also on page 129), line 54: "varcurrentAngle = 0.0;" should be "var currentAngle = 0.0;"

Page 128, Listing 4.3: Line 126 should be numbered 123.

Page 134, code example: varnewAngle should be var newAngle

Chapter 5:

Page 178: First line refers to code line 136, should read 137 - which is the code line then shown (Thanks to Doris Ecker for spotting this).

Note that in the latest version of the code examples for chapter 5 (Jan 2019) the shader compiler code no longer uses the 'ifdef' required in the original code and described in the book. So for example:

'#ifdef GL_ES\n' +

'precision mediump float;\n' +

'#endif GL_ES\n' +

now reads as follows:

'precision mediump float;\n' +

Chapter 8;

Page 299 & 300. Figure 8.7. The text underneath the right side figure should read "the normal (0, 0, -1)". On page 300 the text for the figure 8.8 (right side) is now correct, however the arrow is incorrect, it should face into the page.

(Thanks to Robert Günczer for spotting this).

Helper code libraries;

lib/cuon-matrix.js - this has been fixed in the latest version, please download the new code (Nov 2016)

multiplyVector3 contains:

result[0] = p[0] * e[0] + p[1] * e[4] + p[2] * e[ 8] + e[11];

result[1] = p[0] * e[1] + p[1] * e[5] + p[2] * e[ 9] + e[12];

result[2] = p[0] * e[2] + p[1] * e[6] + p[2] * e[10] + e[13];

which should be

result[0] = p[0] * e[0] + p[1] * e[4] + p[2] * e[ 8] + e[12];

result[1] = p[0] * e[1] + p[1] * e[5] + p[2] * e[ 9] + e[13];

result[2] = p[0] * e[2] + p[1] * e[6] + p[2] * e[10] + e[14];

(Thanks to one of Alex Pang's students for this)