space typo fix markdown webgl-how-it-works.md

Author: MariusBallot

webgl/lessons/webgl-how-it-works.md

@@ -2,12 +2,11 @@ Title: WebGL2 How It Works
 Description: What WebGL is really doing under the hood
 TOC: How It Works
 
-
 This is a continuation from [WebGL Fundamentals](webgl-fundamentals.html).
 Before we continue I think we need to discuss at a
-basic level what WebGL and your GPU actually do.  There are basically 2
-parts to this GPU thing.  The first part processes vertices (or streams of
-data) into clip space vertices.  The second part draws pixels based on the
+basic level what WebGL and your GPU actually do. There are basically 2
+parts to this GPU thing. The first part processes vertices (or streams of
+data) into clip space vertices. The second part draws pixels based on the
 first part.
 
 When you call
@@ -18,28 +17,28 @@ The 9 there means "process 9 vertices" so here are 9 vertices being processed.
 
 <div class="webgl_center"><img src="resources/vertex-shader-anim.gif" /></div>
 
-On the left is the data you provide.  The vertex shader is a function you
-write in [GLSL](webgl-shaders-and-glsl.html).  It gets called once for each vertex.
+On the left is the data you provide. The vertex shader is a function you
+write in [GLSL](webgl-shaders-and-glsl.html). It gets called once for each vertex.
 You do some math and set the special variable `gl_Position` with a clip space value
 for the current vertex. The GPU takes that value and stores it internally.
 
 Assuming you're drawing `TRIANGLES`, every time this first part generates 3
-vertices the GPU uses them to make a triangle.  It figures out which
+vertices the GPU uses them to make a triangle. It figures out which
 pixels the 3 points of the triangle correspond to, and then rasterizes the
-triangle which is a fancy word for “draws it with pixels”.  For each
+triangle which is a fancy word for “draws it with pixels”. For each
 pixel it will call your fragment shader asking you what color to make that
 pixel. Your fragment shader has output a vec4
 with the color it wants for that pixel.
 
 That’s all very interesting but as you can see in our examples up to
 this point the fragment shader has very little info per pixel.
-Fortunately we can pass it more info.  We define “varyings” for each
+Fortunately we can pass it more info. We define “varyings” for each
 value we want to pass from the vertex shader to the fragment shader.
 
 As a simple example, let's just pass the clip space coordinates we computed
 directly from the vertex shader to the fragment shader.
 
-We'll draw with a simple triangle.  Continuing from our
+We'll draw with a simple triangle. Continuing from our
 [previous example](webgl-2d-matrices.html) let's change our rectangle to a
 triangle.
 
@@ -63,7 +62,7 @@ And we have to only draw 3 vertices.
     *  gl.drawArrays(gl.TRIANGLES, 0, 3);
     }
 
-Then in our vertex shader we declare a *varying* by making an `out` to pass data to the
+Then in our vertex shader we declare a _varying_ by making an `out` to pass data to the
 fragment shader.
 
     out vec4 v_color;
@@ -78,7 +77,7 @@ fragment shader.
     *  v_color = gl_Position * 0.5 + 0.5;
     }
 
-And then we declare the same *varying* as an `in` in the fragment shader.
+And then we declare the same _varying_ as an `in` in the fragment shader.
 
     #version 300 es
 
@@ -99,17 +98,17 @@ Here's the working version.
 
 {{{example url="../webgl-2d-triangle-with-position-for-color.html" }}}
 
-Move, scale and rotate the triangle.  Notice that since the colors are
-computed from clip space they don't move with the triangle.  They are
+Move, scale and rotate the triangle. Notice that since the colors are
+computed from clip space they don't move with the triangle. They are
 relative to the background.
 
-Now think about it.  We only compute 3 vertices.  Our vertex shader only
+Now think about it. We only compute 3 vertices. Our vertex shader only
 gets called 3 times therefore it's only computing 3 colors yet our
-triangle is many colors.  This is why it's called a *varying*.
+triangle is many colors. This is why it's called a _varying_.
 
 WebGL takes the 3 values we computed for each vertex and as it rasterizes
 the triangle it interpolates between the values we computed for the
-vertices.  For each pixel it calls our fragment shader with the
+vertices. For each pixel it calls our fragment shader with the
 interpolated value for that pixel.
 
 In the example above we start out with the 3 vertices
@@ -145,9 +144,9 @@ table.vertex_table td {
 </div>
 
 Our vertex shader applies a matrix to translate, rotate, scale and convert
-to clip space.  The defaults for translation, rotation and scale are
+to clip space. The defaults for translation, rotation and scale are
 translation = 200, 150, rotation = 0, scale = 1,1 so that's really only
-translation.  Given our backbuffer is 400x300 our vertex shader applies
+translation. Given our backbuffer is 400x300 our vertex shader applies
 the matrix and then computes the following 3 clip space vertices.
 
 <div class="hcenter">
@@ -159,7 +158,7 @@ the matrix and then computes the following 3 clip space vertices.
 </table>
 </div>
 
-It also converts those to color space and writes them to the *varying*
+It also converts those to color space and writes them to the _varying_
 v_color that we declared.
 
 <div class="hcenter">
@@ -177,8 +176,8 @@ fragment shader for each pixel.
 {{{diagram url="resources/fragment-shader-anim.html" width="600" height="400" caption="v_color is interpolated between v0, v1 and v2" }}}
 
 We can also pass in more data to the vertex shader which we can then pass
-on to the fragment shader.  So for example let's draw a rectangle, that
-consists of 2 triangles, in 2 colors.  To do this we'll add another
+on to the fragment shader. So for example let's draw a rectangle, that
+consists of 2 triangles, in 2 colors. To do this we'll add another
 attribute to the vertex shader so we can pass it more data and we'll pass
 that data directly to the fragment shader.
 
@@ -247,10 +246,10 @@ And here's the result.
 
 {{{example url="../webgl-2d-rectangle-with-2-colors.html" }}}
 
-Notice that we have 2 solid color triangles.  Yet we're passing the values
-in a *varying* so they are being varied or interpolated across the
-triangle.  It's just that we used the same color on each of the 3 vertices
-of each triangle.  If we make each color different we'll see the
+Notice that we have 2 solid color triangles. Yet we're passing the values
+in a _varying_ so they are being varied or interpolated across the
+triangle. It's just that we used the same color on each of the 3 vertices
+of each triangle. If we make each color different we'll see the
 interpolation.
 
     // Fill the buffer with colors for the 2 triangles
@@ -269,27 +268,27 @@ interpolation.
           gl.STATIC_DRAW);
     }
 
-And now we see the interpolated *varying*.
+And now we see the interpolated _varying_.
 
 {{{example url="../webgl-2d-rectangle-with-random-colors.html" }}}
 
 Not very exciting I suppose but it does demonstrate using more than one
-attribute and passing data from a vertex shader to a fragment shader.  If
+attribute and passing data from a vertex shader to a fragment shader. If
 you check out [the image processing examples](webgl-image-processing.html)
 you'll see they also use an extra attribute to pass in texture coordinates.
 
-##What do these buffer and attribute commands do?
+## What do these buffer and attribute commands do?
 
 Buffers are the way of getting vertex and other per vertex data onto the
-GPU.  `gl.createBuffer` creates a buffer.
+GPU. `gl.createBuffer` creates a buffer.
 `gl.bindBuffer` sets that buffer as the buffer to be worked on.
 `gl.bufferData` copies data into the current buffer.
 
 Once the data is in the buffer we need to tell WebGL how to get data out
 of it and provide it to the vertex shader's attributes.
 
 To do this, first we ask WebGL what locations it assigned to the
-attributes.  For example in the code above we have
+attributes. For example in the code above we have
 
     // look up where the vertex data needs to go.
     var positionLocation = gl.getAttribLocation(program, "a_position");
@@ -318,8 +317,8 @@ next piece of data, and an offset for how far into the buffer our data is.
 Number of components is always 1 to 4.
 
 If you are using 1 buffer per type of data then both stride and offset can
-always be 0.  0 for stride means "use a stride that matches the type and
-size".  0 for offset means start at the beginning of the buffer.  Setting
+always be 0. 0 for stride means "use a stride that matches the type and
+size". 0 for offset means start at the beginning of the buffer. Setting
 them to values other than 0 is more complicated and though it might have some
 benefits in terms of performance it's not worth the complication unless
 you are trying to push WebGL to its absolute limits.
@@ -373,23 +372,23 @@ function setColors(gl) {
   var b2 = Math.random() * 256; // Uint8Array
   var g2 = Math.random() * 256;
 
-  gl.bufferData(
-      gl.ARRAY_BUFFER,
-      new Uint8Array(   // Uint8Array
-        [ r1, b1, g1, 255,
-          r1, b1, g1, 255,
-          r1, b1, g1, 255,
-          r2, b2, g2, 255,
-          r2, b2, g2, 255,
-          r2, b2, g2, 255]),
-      gl.STATIC_DRAW);
+gl.bufferData(
+gl.ARRAY_BUFFER,
+new Uint8Array( // Uint8Array
+[ r1, b1, g1, 255,
+r1, b1, g1, 255,
+r1, b1, g1, 255,
+r2, b2, g2, 255,
+r2, b2, g2, 255,
+r2, b2, g2, 255]),
+gl.STATIC_DRAW);
 }
+
 </pre>
 <p>
 Here's that sample.
 </p>
 
 {{{example url="../webgl-2d-rectangle-with-2-byte-colors.html" }}}
-</div>
-
 
+</div>