wip

toc.hanson

@@ -58,7 +58,8 @@
     'webgpu-resizing-the-canvas.md',
     'webgpu-multiple-canvases.md',
     'webgpu-points.md',
-    'webgpu-from-webgl.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,6 +1409,14 @@ 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 and optimize how you draw. 
+See [this article on WebGPU optimization](webgpu-optimization.html) for
+ideas.
+
 ---
 
 If you were already familiar with WebGL then I hope this article was useful.

webgpu/lessons/webgpu-optimizating.md

@@ -0,0 +1,47 @@
+Title: WebGPU Speed and Optimization
+Description: How to go faster in WebGPU
+TOC: Speed and Optimization
+
+Most of the examples on this site are written to be as understandable
+as possible. That means they work, and they're correct, but they don't
+necessarily show the most efficient way to do something in WebGPU.
+Further, depending on what you need to do, there are a myriad of possible
+optimizations.
+
+In this article will cover some of the most basic optimizations and
+discuss a few others.
+
+The basics: The less work you do, and the less work you ask WebGPU to do
+the faster things will go.
+
+In pretty much all of the examples to date, if we draw multiple shapes
+we've done the following steps
+
+```
+* At Init time:
+   * for each thing we want to draw
+      * create a uniform buffer
+      * create a bindGroup that references that buffer
+
+* At Render time:
+   * for each thing we want to draw
+      * update a typed array with our uniform values for this object
+      * copy the typed array to the uniform buffer for this object
+      * bind the bindGroup for this object
+      * draw
+```
+
+
+
+Let's make an example we can optimize
+
+* Pack your vertices
+* Use mappedOnCreation for initial data
+* Split uniform buffer (shared, material, per model)
+
+* Texture Atlas or 2D-array
+* GPU Occlusion culling
+* GPU Scene graph matrix calculation
+* GPU Frustum culling
+* Indirect Drawing
+* Render Bundles