Optimization Article (webgpu#125)

toc.hanson

@@ -59,6 +59,7 @@
     'webgpu-multiple-canvases.md',
     'webgpu-points.md',
     'webgpu-from-webgl.md',
+    'webgpu-optimization.md',
     'webgpu-resources.md',
     'webgpu-wgsl-function-reference.md',
     'webgpu-wgsl-offset-computer.md',

webgpu/lessons/webgpu-from-webgl.md

@@ -1366,9 +1366,8 @@ WebGPU
 
 {{{example url="../webgpu-cube-multiple.html"}}}
 
-The important part to take away is that unlike WebGL, you'll need unique uniform buffers for
-any uniforms that are object specific (like a world matrix), and, because of that you also
-need a unique  bind group per object.
+The important part to take away is that unlike WebGL, you'll need uniform buffers for
+any uniforms that are object specific (like a world matrix), and, because of that you also may need a unique bind group per object.
 
 ## Other random differences
 
@@ -1387,7 +1386,7 @@ corner in both WebGL and WebGPU. On the other hand, setting the viewport or scis
 ### WGSL uses `@builtin(???)` for GLSL's `gl_XXX` variables.
 
 `gl_FragCoord` is `@builtin(position) myVarOrField: vec4f` and unlike
-WebGL goes down the screen instead of up so 0,0 is the top left vs WebGL where 0,0 is the bottom left.
+WebGL, goes down the screen instead of up so 0,0 is the top left vs WebGL where 0,0 is the bottom left.
 
 `gl_VertexID` is `@builtin(vertex_index) myVarOrField: u32`
 
@@ -1410,10 +1409,24 @@ different GPU would clip or not clip based on the center of the point. So, it's
 a good thing WebGPU doesn't support points of sizes other than 1. 
 This forces you to implement a portable point solution.
 
+### WebGPU optimizations are different than WebGL
+
+If you take a WebGL app and directly convert it to WebGPU you might find
+it runs slower. To get the benefits of WebGPU you'll need to change the
+way you organize data and optimize how you draw. 
+See [this article on WebGPU optimization](webgpu-optimization.html) for
+ideas.
+
+Note: If you are comparing WebGL to WebGPU in [the article on optimization](webgpu-optimization.html)
+here are 2 WebGL samples you can use to compare
+
+* [Drawing up to 20000 objects in WebGL using standard WebGL uniforms](../webgl-optimization-none.html)
+* [Drawing up to 20000 objects in WebGL using uniform blocks](../webgl-optimization-none-uniform-buffers.html)
+
+Another article, if you're comparing performance of WebGL vs WebGPU see
+[this article](https://toji.dev/webgpu-best-practices/webgl-performance-comparison).
+
 ---
 
 If you were already familiar with WebGL then I hope this article was useful.
 
-If you're comparing performance of WebGL vs WebGPU see
-[this article](https://toji.dev/webgpu-best-practices/webgl-performance-comparison) to make sure you are comparing similar things.
-

webgpu/lessons/webgpu-lighting-point.md

@@ -211,6 +211,8 @@ And here it is
 
 {{{example url="../webgpu-lighting-point.html" }}}
 
+# <a id="a-specular"></a> Specular Highlighting
+
 Now that we have a point we can add something called specular highlighting.
 
 If you look at on object in the real world, if it's remotely shiny, then if it happens