typos

Author: greggman

webgl/lessons/webgl-qna-can-anyone-explain-what-this-glsl-fragment-shader-is-doing-.md

@@ -131,14 +131,14 @@ As long as we convert the value to something from 0 to 1 we can see the result
 
 for example going down to line 14
 
- d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
+    d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
 
 Since we know it goes from 200 +/- 18 +/- 7 that's 175 + 225 so convert that to 0 to 1 with
 
- d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
-        float tmp = (d - 175.0) / 50.0;
-        gl_FragColor = vec4(tmp, 0, 0, 1);
-        return;
+    d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
+    float tmp = (d - 175.0) / 50.0;
+    gl_FragColor = vec4(tmp, 0, 0, 1);
+    return;
 
 will give you some idea what it's doing.
 

webgl/lessons/webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect.md

@@ -47,15 +47,15 @@ Following the [image processing tutorials](https://webglfundamentals.org/webgl/l
 
 First you need the original image
 
-![original image](https://i.imgur.com/xKYRSwu.jpg)
+<div class="webgl_center"><img src="https://i.imgur.com/xKYRSwu.jpg" style="width: 600px;"></div>
 
 and you then apply a sine wave distortion.
 
 {{{example url="../webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect-example-1.html"}}}
 
 Then they also load a texture of multiple maps. This texture was created by hand in photoshop (or other image editing program). The green channel is how much to multiply the distortion by. The greener the more distortion.
 
-![](http://i.imgur.com/W9QazjL.jpg)
+<div class="webgl_center"><img src="http://i.imgur.com/W9QazjL.jpg" style="width: 600px;"></div>
 
 {{{example url="../webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect-example-2.html"}}}
 
@@ -65,7 +65,7 @@ Next there's an offset for the mouse multplied by another hand drawn map. This m
 
 Finally, (not in the tutorial but in the sample) it loads a blurred version of the original image (blurred in some image editing program like photoshop)
 
-![](http://i.imgur.com/Zw7mMLX.jpg)
+<div class="webgl_center"><img src="http://i.imgur.com/Zw7mMLX.jpg" style="width: 600px;"></div>
 
 It might be hard to see it's blurred since the blurring is subtle.
 

webgl/lessons/webgl-qna-glsl-shader-to-support-coloring-and-texturing.md

@@ -14,8 +14,9 @@ get location:
 
 when drawing I change the value like this:
 
-  var uUseTexture=false;
-  gl.uniform1f(shaderProgram.useTextureUniform, uUseTexture);
+    var uUseTexture=false;
+    gl.uniform1f(shaderProgram.useTextureUniform, uUseTexture);
+
 And the GLSL itself:
 
 fragment:
@@ -28,36 +29,37 @@ fragment:
     void main(void) {
         vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
         vec4 texColor = vec4(textureColor.rgb, textureColor.a);
-  vec4 vertexColor = vColor; 
-  if (!uUseTexture){
-   gl_FragColor = vertexColor;
-  }
-  else{
-   gl_FragColor = texColor; 
-  }
+        vec4 vertexColor = vColor; 
+        if (!uUseTexture){
+           gl_FragColor = vertexColor;
+        }
+        else {
+         gl_FragColor = texColor; 
+        }
     }
 
 vertex:
 
 
-        attribute vec3 aVertexPosition;
-        attribute vec3 aVertexNormal;
-        attribute vec2 aTextureCoord;
-     attribute vec4 aVertexColor;
+    attribute vec3 aVertexPosition;
+    attribute vec3 aVertexNormal;
+    attribute vec2 aTextureCoord;
+    attribute vec4 aVertexColor;
      
-        uniform mat4 uMVMatrix;
-        uniform mat4 uPMatrix;
-        uniform mat3 uNMatrix;
+    uniform mat4 uMVMatrix;
+    uniform mat4 uPMatrix;
+    uniform mat3 uNMatrix;
 
-        varying vec2 vTextureCoord;
-     varying vec4 vColor;
+    varying vec2 vTextureCoord;
+    varying vec4 vColor;
      
      
-        void main(void){
-            vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
-            gl_Position = uPMatrix * mvPosition;
-            vTextureCoord = aTextureCoord;
-      vColor = aVertexColor;}
+    void main(void) {
+      vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
+      gl_Position = uPMatrix * mvPosition;
+      vTextureCoord = aTextureCoord;
+      vColor = aVertexColor;
+    }
 
 ## Answer: