From 4d63b5513958d695dd195e392cd0e654d2e8273d Mon Sep 17 00:00:00 2001
From: Greggman <github@greggman.com>
Date: Wed, 26 Jun 2024 18:22:27 -0700
Subject: [PATCH] Consider making optimal WebGL versions (#132)

1. Add more textures to all examples

2. Optimize WebGL examples
---
 3rdparty/twgl-full.module.js                  |  72 +-
 webgpu/lessons/webgpu-from-webgl.md           |   6 +-
 webgpu/lessons/webgpu-optimization.md         |  12 +-
 ...l-material-per-object-uniform-buffers.html | 537 +++++++++++++++
 ...bgl-optimization-none-uniform-buffers.html |  84 ++-
 webgpu/webgl-optimization-none.html           |  42 +-
 ...ptimization-uniform-buffers-one-large.html | 548 ++++++++++++++++
 webgpu/webgpu-optimization-all.html           | 603 -----------------
 webgpu/webgpu-optimization-none.html          |   2 +-
 ...n-step3-global-vs-per-object-uniforms.html |   2 +-
 ...-optimization-step4-material-uniforms.html |   2 +-
 ...ly-updated-uniform-buffers-pre-submit.html | 615 -----------------
 ...er-frequently-updated-uniform-buffers.html | 615 -----------------
 ...optimization-step5-use-buffer-offsets.html |   4 +-
 ...-use-mapped-buffers-2-command-buffers.html | 619 ------------------
 ...p6-use-mapped-buffers-dyanmic-offsets.html |   2 +-
 ...ep6-use-mapped-buffers-math-w-offsets.html |   2 +-
 ...optimization-step6-use-mapped-buffers.html |   4 +-
 ...mization-step7-double-buffer-2-submit.html |   2 +-
 ...on-step7-double-buffer-typedarray-set.html |   2 +-
 ...bgpu-optimization-step7-double-buffer.html |   2 +-
 21 files changed, 1251 insertions(+), 2526 deletions(-)
 create mode 100644 webgpu/webgl-optimization-global-material-per-object-uniform-buffers.html
 create mode 100644 webgpu/webgl-optimization-uniform-buffers-one-large.html
 delete mode 100644 webgpu/webgpu-optimization-all.html
 delete mode 100644 webgpu/webgpu-optimization-step5-double-buffer-frequently-updated-uniform-buffers-pre-submit.html
 delete mode 100644 webgpu/webgpu-optimization-step5-double-buffer-frequently-updated-uniform-buffers.html
 delete mode 100644 webgpu/webgpu-optimization-step6-use-mapped-buffers-2-command-buffers.html

diff --git a/3rdparty/twgl-full.module.js b/3rdparty/twgl-full.module.js
index 9702f31a..d7338867 100644
--- a/3rdparty/twgl-full.module.js
+++ b/3rdparty/twgl-full.module.js
@@ -1,4 +1,4 @@
-/* @license twgl.js 5.3.1 Copyright (c) 2015, Gregg Tavares All Rights Reserved.
+/* @license twgl.js 5.6.0 Copyright (c) 2015, Gregg Tavares All Rights Reserved.
 Available via the MIT license.
 see: http://github.com/greggman/twgl.js for details */
 /*
@@ -5104,7 +5104,8 @@ const TEXTURE_MIN_LOD                = 0x813a;
 const TEXTURE_MAX_LOD                = 0x813b;
 const TEXTURE_BASE_LEVEL             = 0x813c;
 const TEXTURE_MAX_LEVEL              = 0x813d;
-
+const TEXTURE_COMPARE_MODE           = 0x884C;
+const TEXTURE_COMPARE_FUNC           = 0x884D;
 
 /* Pixel store */
 const UNPACK_ALIGNMENT                   = 0x0cf5;
@@ -5526,6 +5527,8 @@ function setDefaults$1(newDefaults) {
  * @property {number} [maxLod] TEXTURE_MAX_LOD setting
  * @property {number} [baseLevel] TEXTURE_BASE_LEVEL setting
  * @property {number} [maxLevel] TEXTURE_MAX_LEVEL setting
+ * @property {number} [compareFunc] TEXTURE_COMPARE_FUNC setting
+ * @property {number} [compareMode] TEXTURE_COMPARE_MODE setting
  * @property {number} [unpackAlignment] The `gl.UNPACK_ALIGNMENT` used when uploading an array. Defaults to 1.
  * @property {number[]|ArrayBufferView} [color] Color to initialize this texture with if loading an image asynchronously.
  *     The default use a blue 1x1 pixel texture. You can set another default by calling `twgl.setDefaults`
@@ -5661,18 +5664,24 @@ function setTextureSamplerParameters(gl, target, parameteriFn, options) {
   if (options.wrapT) {
     parameteriFn.call(gl, target, TEXTURE_WRAP_T, options.wrapT);
   }
-  if (options.minLod) {
+  if (options.minLod !== undefined) {
     parameteriFn.call(gl, target, TEXTURE_MIN_LOD, options.minLod);
   }
-  if (options.maxLod) {
+  if (options.maxLod !== undefined) {
     parameteriFn.call(gl, target, TEXTURE_MAX_LOD, options.maxLod);
   }
-  if (options.baseLevel) {
+  if (options.baseLevel !== undefined) {
     parameteriFn.call(gl, target, TEXTURE_BASE_LEVEL, options.baseLevel);
   }
-  if (options.maxLevel) {
+  if (options.maxLevel !== undefined) {
     parameteriFn.call(gl, target, TEXTURE_MAX_LEVEL, options.maxLevel);
   }
+  if (options.compareFunc !== undefined) {
+    parameteriFn.call(gl, target, TEXTURE_COMPARE_FUNC, options.compareFunc);
+  }
+  if (options.compareMode !== undefined) {
+    parameteriFn.call(gl, target, TEXTURE_COMPARE_MODE, options.compareMode);
+  }
 }
 
 /**
@@ -7554,7 +7563,7 @@ function createProgramNoCheck(gl, shaders, programOptions) {
  * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
  * @param {WebGLShader[]|string[]} shaders The shaders to attach, or element ids for their source, or strings that contain their source
  * @param {module:twgl.ProgramOptions|string[]|module:twgl.ErrorCallback} [opt_attribs] Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
- * @param {number[]} [opt_locations|module:twgl.ErrorCallback] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
+ * @param {number[]|module:twgl.ErrorCallback} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
  * @param {module:twgl.ErrorCallback} [opt_errorCallback] callback for errors. By default it just prints an error to the console
  *        on error. If you want something else pass an callback. It's passed an error message.
  * @return {WebGLProgram?} the created program or null if error of a callback was provided.
@@ -7622,7 +7631,7 @@ function wrapCallbackFnToAsyncFn(fn) {
  * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
  * @param {WebGLShader[]|string[]} shaders The shaders to attach, or element ids for their source, or strings that contain their source
  * @param {module:twgl.ProgramOptions|string[]|module:twgl.ErrorCallback} [opt_attribs] Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
- * @param {number[]} [opt_locations|module:twgl.ErrorCallback] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
+ * @param {number[]|module:twgl.ErrorCallback} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
  * @param {module:twgl.ErrorCallback} [opt_errorCallback] callback for errors. By default it just prints an error to the console
  *        on error. If you want something else pass an callback. It's passed an error message.
  * @return {Promise<WebGLProgram>} The created program
@@ -7639,7 +7648,7 @@ const createProgramAsync = wrapCallbackFnToAsyncFn(createProgram);
  *        shaders or ids. The first is assumed to be the vertex shader,
  *        the second the fragment shader.
  * @param {module:twgl.ProgramOptions|string[]|module:twgl.ErrorCallback} [opt_attribs] Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
- * @param {number[]} [opt_locations|module:twgl.ErrorCallback] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
+ * @param {number[]|module:twgl.ErrorCallback} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
  * @param {module:twgl.ErrorCallback} [opt_errorCallback] callback for errors. By default it just prints an error to the console
  *        on error. If you want something else pass an callback. It's passed an error message.
  * @return {Promise<module:twgl.ProgramInfo>} The created ProgramInfo
@@ -7706,7 +7715,7 @@ function getProgramErrors(gl, program, errFn) {
  *        tags for the shaders. The first is assumed to be the
  *        vertex shader, the second the fragment shader.
  * @param {module:twgl.ProgramOptions|string[]|module:twgl.ErrorCallback} [opt_attribs] Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
- * @param {number[]} [opt_locations|module:twgl.ErrorCallback] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
+ * @param {number[]|module:twgl.ErrorCallback} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
  * @param {module:twgl.ErrorCallback} [opt_errorCallback] callback for errors. By default it just prints an error to the console
  *        on error. If you want something else pass an callback. It's passed an error message.
  * @return {WebGLProgram?} the created program or null if error or a callback was provided.
@@ -7742,7 +7751,7 @@ function createProgramFromScripts(
  *        shaders. The first is assumed to be the vertex shader,
  *        the second the fragment shader.
  * @param {module:twgl.ProgramOptions|string[]|module:twgl.ErrorCallback} [opt_attribs] Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
- * @param {number[]} [opt_locations|module:twgl.ErrorCallback] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
+ * @param {number[]|module:twgl.ErrorCallback} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
  * @param {module:twgl.ErrorCallback} [opt_errorCallback] callback for errors. By default it just prints an error to the console
  *        on error. If you want something else pass an callback. It's passed an error message.
  * @return {WebGLProgram?} the created program or null if error or a callback was provided.
@@ -8092,6 +8101,7 @@ function createUniformBlockUniformSetter(view, isArray, rows, cols) {
  * @property {ArrayBuffer} array The array buffer that contains the uniform values
  * @property {Float32Array} asFloat A float view on the array buffer. This is useful
  *    inspecting the contents of the buffer in the debugger.
+ * @property {Uint8Array} asUint8t A uint8 view on the array buffer.
  * @property {WebGLBuffer} buffer A WebGL buffer that will hold a copy of the uniform values for rendering.
  * @property {number} [offset] offset into buffer
  * @property {Object<string, ArrayBufferView>} uniforms A uniform name to ArrayBufferView map.
@@ -8110,6 +8120,15 @@ function createUniformBlockUniformSetter(view, isArray, rows, cols) {
  * @memberOf module:twgl
  */
 
+/**
+ * Options to allow createUniformBlockInfo to use an existing buffer and arrayBuffer at an offset
+ * @typedef {Object} UniformBlockInfoOptions
+ * @property {ArrayBuffer} [array] an existing array buffer to use for values
+ * @property {number} [offset] the offset in bytes to use in the array buffer (default = 0)
+ * @property {WebGLBuffer} [buffer] the buffer to use for this uniform block info
+ * @property {number} [bufferOffset] the offset in bytes in the buffer to use (default = use offset above)
+ */
+
 /**
  * Creates a `UniformBlockInfo` for the specified block
  *
@@ -8124,10 +8143,11 @@ function createUniformBlockUniformSetter(view, isArray, rows, cols) {
  * @param {module:twgl.UniformBlockSpec} uniformBlockSpec. A UniformBlockSpec as returned
  *     from {@link module:twgl.createUniformBlockSpecFromProgram}.
  * @param {string} blockName The name of the block.
+ * @param {module:twgl.UniformBlockInfoOptions} [options] Optional options for using existing an existing buffer and arrayBuffer
  * @return {module:twgl.UniformBlockInfo} The created UniformBlockInfo
  * @memberOf module:twgl/programs
  */
-function createUniformBlockInfoFromProgram(gl, program, uniformBlockSpec, blockName) {
+function createUniformBlockInfoFromProgram(gl, program, uniformBlockSpec, blockName, options = {}) {
   const blockSpecs = uniformBlockSpec.blockSpecs;
   const uniformData = uniformBlockSpec.uniformData;
   const blockSpec = blockSpecs[blockName];
@@ -8138,10 +8158,14 @@ function createUniformBlockInfoFromProgram(gl, program, uniformBlockSpec, blockN
       uniforms: {},
     };
   }
-  const array = new ArrayBuffer(blockSpec.size);
-  const buffer = gl.createBuffer();
+  const offset = options.offset ?? 0;
+  const array = options.array ?? new ArrayBuffer(blockSpec.size);
+  const buffer = options.buffer ?? gl.createBuffer();
   const uniformBufferIndex = blockSpec.index;
   gl.bindBuffer(UNIFORM_BUFFER, buffer);
+  if (!options.buffer) {
+    gl.bufferData(UNIFORM_BUFFER, array.byteLength, DYNAMIC_DRAW);
+  }
   gl.uniformBlockBinding(program, blockSpec.index, uniformBufferIndex);
 
   let prefix = blockName + ".";
@@ -8166,7 +8190,7 @@ function createUniformBlockInfoFromProgram(gl, program, uniformBlockSpec, blockN
     const byteLength = isArray
         ? pad(typeInfo.size, 16) * data.size
         : typeInfo.size * data.size;
-    const uniformView = new Type(array, data.offset, byteLength / Type.BYTES_PER_ELEMENT);
+    const uniformView = new Type(array, offset + data.offset, byteLength / Type.BYTES_PER_ELEMENT);
     uniforms[name] = uniformView;
     // Note: I'm not sure what to do here. The original
     // idea was to create TypedArray views into each part
@@ -8201,9 +8225,12 @@ function createUniformBlockInfoFromProgram(gl, program, uniformBlockSpec, blockN
     name: blockName,
     array,
     asFloat: new Float32Array(array),  // for debugging
+    asUint8: new Uint8Array(array),  // needed for gl.bufferSubData because it doesn't take an array buffer
     buffer,
     uniforms,
     setters,
+    offset: options.bufferOffset ?? offset,
+    size: blockSpec.size,
   };
 }
 
@@ -8220,11 +8247,12 @@ function createUniformBlockInfoFromProgram(gl, program, uniformBlockSpec, blockN
  * @param {module:twgl.ProgramInfo} programInfo a `ProgramInfo`
  *     as returned from {@link module:twgl.createProgramInfo}
  * @param {string} blockName The name of the block.
+ * @param {module:twgl.UniformBlockInfoOptions} [options] Optional options for using existing an existing buffer and arrayBuffer
  * @return {module:twgl.UniformBlockInfo} The created UniformBlockInfo
  * @memberOf module:twgl/programs
  */
-function createUniformBlockInfo(gl, programInfo, blockName) {
-  return createUniformBlockInfoFromProgram(gl, programInfo.program, programInfo.uniformBlockSpec, blockName);
+function createUniformBlockInfo(gl, programInfo, blockName, options = {}) {
+  return createUniformBlockInfoFromProgram(gl, programInfo.program, programInfo.uniformBlockSpec, blockName, options);
 }
 
 /**
@@ -8250,7 +8278,7 @@ function bindUniformBlock(gl, programInfo, uniformBlockInfo) {
   const blockSpec = uniformBlockSpec.blockSpecs[uniformBlockInfo.name];
   if (blockSpec) {
     const bufferBindIndex = blockSpec.index;
-    gl.bindBufferRange(UNIFORM_BUFFER, bufferBindIndex, uniformBlockInfo.buffer, uniformBlockInfo.offset || 0, uniformBlockInfo.array.byteLength);
+    gl.bindBufferRange(UNIFORM_BUFFER, bufferBindIndex, uniformBlockInfo.buffer, uniformBlockInfo.offset || 0, uniformBlockInfo.size ?? uniformBlockInfo.array.byteLength);
     return true;
   }
   return false;
@@ -8273,7 +8301,7 @@ function bindUniformBlock(gl, programInfo, uniformBlockInfo) {
  */
 function setUniformBlock(gl, programInfo, uniformBlockInfo) {
   if (bindUniformBlock(gl, programInfo, uniformBlockInfo)) {
-    gl.bufferData(UNIFORM_BUFFER, uniformBlockInfo.array, DYNAMIC_DRAW);
+    gl.bufferSubData(UNIFORM_BUFFER, 0, uniformBlockInfo.asUint8, uniformBlockInfo.offset || 0, uniformBlockInfo.size || 0);
   }
 }
 
@@ -8718,6 +8746,8 @@ function setBuffersAndAttributes(gl, programInfo, buffers) {
 /**
  * @typedef {Object} ProgramInfo
  * @property {WebGLProgram} program A shader program
+ * @property {Object<string, WebGLUniformLocation>} uniformLocations The uniform locations of each uniform
+ * @property {Object<string, number>} attribLocations The locations of each attribute
  * @property {Object<string, function>} uniformSetters object of setters as returned from createUniformSetters,
  * @property {Object<string, function>} attribSetters object of setters as returned from createAttribSetters,
  * @property {module:twgl.UniformBlockSpec} [uniformBlockSpec] a uniform block spec for making UniformBlockInfos with createUniformBlockInfo etc..
@@ -8749,6 +8779,8 @@ function createProgramInfoFromProgram(gl, program) {
     program,
     uniformSetters,
     attribSetters,
+    uniformLocations: Object.fromEntries(Object.entries(uniformSetters).map(([k, v]) => [k, v.location])),
+    attribLocations: Object.fromEntries(Object.entries(attribSetters).map(([k, v]) => [k, v.location])),
   };
 
   if (isWebGL2(gl)) {
@@ -8785,7 +8817,7 @@ const notIdRE = /\s|{|}|;/;
  *        shaders or ids. The first is assumed to be the vertex shader,
  *        the second the fragment shader.
  * @param {module:twgl.ProgramOptions|string[]|module:twgl.ErrorCallback} [opt_attribs] Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
- * @param {number[]} [opt_locations|module:twgl.ErrorCallback] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
+ * @param {number[]|module:twgl.ErrorCallback} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
  * @param {module:twgl.ErrorCallback} [opt_errorCallback] callback for errors. By default it just prints an error to the console
  *        on error. If you want something else pass an callback. It's passed an error message.
  * @return {module:twgl.ProgramInfo?} The created ProgramInfo or null if it failed to link or compile
diff --git a/webgpu/lessons/webgpu-from-webgl.md b/webgpu/lessons/webgpu-from-webgl.md
index a9801fdb..463732cd 100644
--- a/webgpu/lessons/webgpu-from-webgl.md
+++ b/webgpu/lessons/webgpu-from-webgl.md
@@ -1420,8 +1420,10 @@ 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)
+* [Drawing up to 30000 objects in WebGL using standard WebGL uniforms](../webgl-optimization-none.html)
+* [Drawing up to 30000 objects in WebGL using uniform blocks](../webgl-optimization-none-uniform-buffers.html)
+* [Drawing up to 30000 objects in WebGL using global/material/per object uniform blocks](../webgl-optimization-global-material-per-object-uniform-buffers.html)
+* [Drawing up to 30000 objects in WebGL using one large uniform buffer](../webgl-optimization-uniform-buffers-one-large.html)
 
 Another article, if you're comparing performance of WebGL vs WebGPU see
 [this article](https://toji.dev/webgpu-best-practices/webgl-performance-comparison).
diff --git a/webgpu/lessons/webgpu-optimization.md b/webgpu/lessons/webgpu-optimization.md
index 0eda2c32..b42c96e7 100644
--- a/webgpu/lessons/webgpu-optimization.md
+++ b/webgpu/lessons/webgpu-optimization.md
@@ -351,13 +351,13 @@ We'll make 20 "materials" and then pick a material at random for each cube.
 ```
 
 Now let's make data for each thing (cube) we want to draw. We'll support a
-maximum of 20000. Like we have in the past, we'll make a uniform buffer for each
+maximum of 30000. Like we have in the past, we'll make a uniform buffer for each
 object as well as a typed array we can update with uniform values. We'll also
 make a bind group for each object. And we'll pick some random values we can use
 to position and animate each object.
 
 ```js
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   for (let i = 0; i < maxObjects; ++i) {
@@ -1265,7 +1265,7 @@ Then we can removed these uniforms from our perObject uniform buffer and add the
 global uniform buffer to each object's bind group.
 
 ```js
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   for (let i = 0; i < maxObjects; ++i) {
@@ -1585,7 +1585,7 @@ settings. Instead we just need to add the material's uniform buffer to the
 object's bind group.
 
 ```js
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   for (let i = 0; i < maxObjects; ++i) {
@@ -2079,7 +2079,7 @@ Other things that *might* help
   
   This is why, in our loop where we update our per object uniform values, for
   each object we have to create 2 `Float32Array` views into our mapped buffer.
-  For 10000 objects that's creating 20000 of these temporary views.
+  For 20000 objects that's creating 40000 of these temporary views.
   
   Adding offsets to every input would make them burdensome to use in my opinion
   but, just as a test, I wrote a modified version of the math functions that
@@ -2097,7 +2097,7 @@ Other things that *might* help
 
   [It appears to be about 7% faster to use the offsets](../webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html).
 
-  It's up to you if you feel that's worthß it. For me personally, like I
+  It's up to you if you feel that's worth it. For me personally, like I
   mentioned at the top of the article, I'd prefer to keep it simple to use. I'm
   rarely trying to draw 10000 things. But, it's good to know, if I wanted to
   squeeze out more performance, this is one place I might find some. More likely
diff --git a/webgpu/webgl-optimization-global-material-per-object-uniform-buffers.html b/webgpu/webgl-optimization-global-material-per-object-uniform-buffers.html
new file mode 100644
index 00000000..35875444
--- /dev/null
+++ b/webgpu/webgl-optimization-global-material-per-object-uniform-buffers.html
@@ -0,0 +1,537 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+    <title>WebGL Optimization - Uniform Blocks (global/material/perObject)</title>
+    <style>
+      @import url(resources/webgpu-lesson.css);
+html, body {
+  margin: 0;       /* remove the default margin          */
+  height: 100%;    /* make the html,body fill the page   */
+}
+canvas {
+  display: block;  /* make the canvas act like a block   */
+  width: 100%;     /* make the canvas fill its container */
+  height: 100%;
+}
+:root {
+  --bg-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #000;
+  }
+}
+canvas {
+  background-color: var(--bg-color);
+}
+#info {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 0.5em;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  min-width: 8em;
+}
+    </style>
+  </head>
+  <body>
+    <canvas></canvas>
+    <pre id="info"></pre>
+  </body>
+  <script type="module">
+//import 'https://greggman.github.io/webgl-lint/webgl-lint.js';
+import GUI from '../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../3rdparty/twgl-full.module.js';
+import RollingAverage from './resources/js/rolling-average.js';
+
+class TimingHelper {
+  #ext;
+  #query;
+  #gl;
+  #state = 'free';
+  #duration = 0;
+
+  constructor(gl) {
+    this.#gl = gl;
+    this.#ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
+    if (!this.#ext) {
+      return;
+    }
+    this.#query = gl.createQuery();
+  }
+
+  begin() {
+    if (!this.#ext || this.#state !== 'free') {
+      return;
+    }
+    this.#state = 'started';
+    const gl = this.#gl;
+    const ext = this.#ext;
+    const query = this.#query;
+    gl.beginQuery(ext.TIME_ELAPSED_EXT, query);
+  }
+  end() {
+    if (!this.#ext || this.#state === 'free') {
+      return;
+    }
+
+    const gl = this.#gl;
+    const ext = this.#ext;
+    const query = this.#query;
+
+    if (this.#state === 'started') {
+      gl.endQuery(ext.TIME_ELAPSED_EXT);
+      this.#state = 'waiting';
+    } else {
+      const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
+      const disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
+      if (available && !disjoint) {
+        this.#duration = gl.getQueryParameter(query, gl.QUERY_RESULT);
+      }
+      if (available || disjoint) {
+        this.#state = 'free';
+      }
+    }
+  }
+  getResult() {
+    return this.#duration;
+  }
+}
+
+const { m4: mat4, v3: vec3 } = twgl;
+const mat3 = {
+  identity() {
+    return new Float32Array(9);
+  },
+  fromMat4(m, dst) {
+    dst = dst || new Float32Array(9);
+
+    dst[0] =  m[ 0]; dst[1] = m[ 1]; dst[2] = m[ 2];
+    dst[3] =  m[ 4]; dst[4] = m[ 5]; dst[5] = m[ 6];
+    dst[6] =  m[ 8]; dst[7] = m[ 9]; dst[8] = m[10];
+
+    return dst;
+  },
+};
+
+const fpsAverage = new RollingAverage();
+const jsAverage = new RollingAverage();
+const gpuAverage = new RollingAverage();
+const mathAverage = new RollingAverage();
+
+/** Given a css color string, return an array of 4 values from 0 to 255 */
+const cssColorToRGBA8 = (() => {
+  const canvas = new OffscreenCanvas(1, 1);
+  const ctx = canvas.getContext('2d', {willReadFrequently: true});
+  return cssColor => {
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = cssColor;
+    ctx.fillRect(0, 0, 1, 1);
+    return Array.from(ctx.getImageData(0, 0, 1, 1).data);
+  };
+})();
+
+/** Given a css color string, return an array of 4 values from 0 to 1 */
+const cssColorToRGBA = cssColor => cssColorToRGBA8(cssColor).map(v => v / 255);
+
+/**
+ * Given hue, saturation, and luminance values in the range of 0 to 1
+ * return the corresponding CSS hsl string
+ */
+const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
+
+/**
+ * Given hue, saturation, and luminance values in the range of 0 to 1
+ * returns an array of 4 values from 0 to 1
+ */
+const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
+
+/**
+ * Returns a random number between min and max.
+ * If min and max are not specified, returns 0 to 1
+ * If max is not specified, return 0 to min.
+ */
+function rand(min, max) {
+  if (min === undefined) {
+    max = 1;
+    min = 0;
+  } else if (max === undefined) {
+    max = min;
+    min = 0;
+  }
+  return Math.random() * (max - min) + min;
+}
+
+/** Selects a random array element */
+const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
+
+async function main() {
+  const infoElem = document.querySelector('#info');
+
+  // Get a WebGPU context from the canvas and configure it
+  const canvas = document.querySelector('canvas');
+  const gl = canvas.getContext('webgl2');
+  const timingHelper = new TimingHelper(gl);
+
+  const uniformBlock = `
+      uniform GlobalUniforms {
+        mat4 viewProjection;
+        vec3 lightWorldPosition;
+        vec3 viewWorldPosition;
+      };
+
+      uniform MaterialUniforms {
+        vec4 color;
+        float shininess;
+      };
+
+      uniform PerObjectUniforms {
+        mat3 normalMatrix;
+        mat4 world;
+      };
+  `;
+  const vs = `#version 300 es
+      ${uniformBlock}
+      layout(location = 0) in vec4 position;
+      layout(location = 1) in vec3 normal;
+      layout(location = 2) in vec2 texcoord;
+
+      out vec3 v_normal;
+      out vec3 v_surfaceToLight;
+      out vec3 v_surfaceToView;
+      out vec2 v_texcoord;
+
+      void main() {
+        gl_Position = viewProjection * world * position;
+
+        // Orient the normals and pass to the fragment shader
+        v_normal = normalMatrix * normal;
+
+        // Compute the world position of the surface
+        vec3 surfaceWorldPosition = (world * position).xyz;
+
+        // Compute the vector of the surface to the light
+        // and pass it to the fragment shader
+        v_surfaceToLight = lightWorldPosition - surfaceWorldPosition;
+
+        // Compute the vector of the surface to the light
+        // and pass it to the fragment shader
+        v_surfaceToView = viewWorldPosition - surfaceWorldPosition;
+
+        // Pass the texture coord on to the fragment shader
+        v_texcoord = texcoord;
+      }
+  `;
+
+  const fs = `#version 300 es
+      precision highp float;
+      ${uniformBlock}
+
+      in vec3 v_normal;
+      in vec3 v_surfaceToLight;
+      in vec3 v_surfaceToView;
+      in vec2 v_texcoord;
+
+      uniform sampler2D diffuseTexture;
+
+      out vec4 fragColor;
+
+      void main() {
+        // Because vsOut.normal is an inter-stage variable 
+        // it's interpolated so it will not be a unit vector.
+        // Normalizing it will make it a unit vector again
+        vec3 normal = normalize(v_normal);
+
+        vec3 surfaceToLightDirection = normalize(v_surfaceToLight);
+        vec3 surfaceToViewDirection = normalize(v_surfaceToView);
+        vec3 halfVector = normalize(
+          surfaceToLightDirection + surfaceToViewDirection);
+
+        // Compute the light by taking the dot product
+        // of the normal with the direction to the light
+        float light = dot(normal, surfaceToLightDirection);
+
+        float specular = dot(normal, halfVector);
+        specular = specular > 0.0 ?
+            pow(specular, shininess) :
+            0.0;
+
+        vec4 diffuse = color * texture(diffuseTexture, v_texcoord);
+        // Lets multiply just the color portion (not the alpha)
+        // by the light
+        vec3 c = diffuse.rgb * light + specular;
+        fragColor = vec4(c, diffuse.a);
+      }
+    `;
+
+  const prgInfo = twgl.createProgramInfo(gl, [vs, fs]);
+
+  const globalUboInfo = twgl.createUniformBlockInfo(gl, prgInfo, 'GlobalUniforms');
+
+  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
+    position:  new Float32Array([1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1]),
+    normal:    new Float32Array([1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1]),
+    texcoord: new Float32Array([1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1]),
+    indices:   new Uint16Array([0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23]),
+  });
+
+  gl.enable(gl.CULL_FACE);
+  gl.enable(gl.DEPTH_TEST);
+
+  const textures = [
+    '😂', '👾', '👍', '👀', '🌞', '🛟',
+  ].map(s => {
+    const size = 128;
+    const ctx = new OffscreenCanvas(size, size).getContext('2d');
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, size, size);
+    ctx.font = `${size * 0.9}px sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(s, size / 2, size / 2);
+    return twgl.createTexture(gl, {
+      src: ctx.canvas,
+      wrap: gl.CLAMP_TO_EDGE,
+      min: gl.LINEAR_MIPMAP_NEAREST,
+      mag: gl.LINEAR,
+    });
+  });
+
+  const numMaterials = 20;
+  const materials = [];
+  for (let i = 0; i < numMaterials; ++i) {
+    const color = hslToRGBA(rand(), rand(0.5, 0.8), rand(0.5, 0.7));
+    const shininess = rand(10, 120);
+    const materialUboInfo = twgl.createUniformBlockInfo(gl, prgInfo, 'MaterialUniforms');
+
+    // Set the data in the typed array views
+    twgl.setBlockUniforms(materialUboInfo, {
+      color,
+      shininess,
+    });
+    // copy the typed array view data to the uniform buffer
+    twgl.setUniformBlock(gl, prgInfo, materialUboInfo);
+
+    materials.push({
+      color,
+      shininess,
+      texture: randomArrayElement(textures),
+      materialUboInfo,
+    });
+  }
+
+  const maxObjects = 30000;
+  const objectInfos = [];
+
+  for (let i = 0; i < maxObjects; ++i) {
+    const material = randomArrayElement(materials);
+    const axis = vec3.normalize([rand(-1, 1), rand(-1, 1), rand(-1, 1)]);
+    const radius = rand(10, 100);
+    const speed = rand(0.1, 0.4);
+    const rotationSpeed = rand(-1, 1);
+    const scale = rand(2, 10);
+
+    const uniforms = {
+      diffuseTexture: randomArrayElement(textures),
+    };
+
+    const uboInfo = twgl.createUniformBlockInfo(gl, prgInfo, 'PerObjectUniforms');
+
+    objectInfos.push({
+      uniforms,
+      uboInfo,
+
+      axis,
+      material,
+      radius,
+      speed,
+      rotationSpeed,
+      scale,
+    });
+  }
+
+  gl.clearColor(0.3, 0.3, 0.3, 1);
+
+  const canvasToSizeMap = new WeakMap();
+  const degToRad = d => d * Math.PI / 180;
+
+  const settings = {
+    numObjects: 1000,
+    render: true,
+  };
+
+  const gui = new GUI();
+  gui.add(settings, 'numObjects', { min: 0, max: maxObjects, step: 1});
+  gui.add(settings, 'render');
+
+  let then = 0;
+
+  function render(time) {
+    time *= 0.001;  // convert to seconds
+    const deltaTime = time - then;
+    then = time;
+
+    const startTimeMs = performance.now();
+
+    const {width, height} = settings.render
+       ? canvasToSizeMap.get(canvas) ?? canvas
+       : { width: 1, height: 1 };
+
+    // Don't set the canvas size if it's already that size as it may be slow.
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+    }
+
+    gl.viewport(0, 0, canvas.width, canvas.height);
+
+    // Get the current texture from the canvas context and
+    // set it as the texture to render to.
+    timingHelper.begin();
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    gl.useProgram(prgInfo.program);
+    twgl.setBuffersAndAttributes(gl, prgInfo, bufferInfo);
+
+    const aspect = canvas.clientWidth / canvas.clientHeight;
+    const projection = mat4.perspective(
+        degToRad(60),
+        aspect,
+        1,      // zNear
+        2000,   // zFar
+    );
+
+    const eye = [100, 150, 200];
+    const target = [0, 0, 0];
+    const up = [0, 1, 0];
+
+    // Compute a view matrix
+    const viewMatrix = mat4.inverse(mat4.lookAt(eye, target, up));
+
+    // Combine the view and projection matrixes
+    mat4.multiply(projection, viewMatrix, globalUboInfo.uniforms.viewProjection);
+    twgl.setBlockUniforms(globalUboInfo, {
+      lightWorldPosition: [-10, 30, 300],
+      viewWorldPosition: eye,
+    });
+    twgl.setUniformBlock(gl, prgInfo, globalUboInfo);
+
+    let mathElapsedTimeMs = 0;
+    let currentActiveTexture = -1;
+    let currentMaterialUbo;
+    const currentTextures = [];
+
+    for (let i = 0; i < settings.numObjects; ++i) {
+      const {
+        uniforms,
+        uboInfo,
+
+        axis,
+        material,
+        radius,
+        speed,
+        rotationSpeed,
+        scale,
+      } = objectInfos[i];
+      const {
+        world,
+        normalMatrix,
+      } = uboInfo.uniforms;
+      const mathTimeStartMs = performance.now();
+
+      // Compute a world matrix
+      mat4.identity(world);
+      mat4.axisRotate(world, axis, i + time * speed, world);
+      mat4.translate(world, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], world);
+      mat4.translate(world, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], world);
+      mat4.rotateX(world, time * rotationSpeed + i, world);
+      mat4.scale(world, [scale, scale, scale], world);
+
+      // Inverse and transpose it into the normalMatrix value
+      mat3.fromMat4(mat4.transpose(mat4.inverse(world)), normalMatrix);
+
+      //twgl.bindUniformBlock(gl, prgInfo, materialUboInfo);
+      const { materialUboInfo } = material;
+      if (currentMaterialUbo !== materialUboInfo) {
+        currentMaterialUbo = materialUboInfo;
+        const blockSpec = prgInfo.uniformBlockSpec.blockSpecs[materialUboInfo.name];
+        gl.bindBufferRange(gl.UNIFORM_BUFFER, blockSpec.index, materialUboInfo.buffer, materialUboInfo.offset, materialUboInfo.size);
+      }
+
+      // do this manually since we're doing it manually in WebGPU
+      //twgl.setBlockUniforms(uboInfo, {
+      //  world: worldValue,
+      //  normalMatrix,
+      //  viewProjection: viewProjectionMatrix,
+      //  color,
+      //  lightWorldPosition: [-10, 30, 300],
+      //  viewWorldPosition: eye,
+      //  shininess,
+      //});
+
+      mathElapsedTimeMs += performance.now() - mathTimeStartMs;
+
+      // upload the uniform values to the uniform buffer
+      //twgl.setUniformBlock(gl, prgInfo, uboInfo);
+      gl.bindBuffer(gl.UNIFORM_BUFFER, uboInfo.buffer);
+      gl.bufferSubData(gl.UNIFORM_BUFFER, 0, uboInfo.asUint8, 0, uboInfo.size);
+      {
+        const blockSpec = prgInfo.uniformBlockSpec.blockSpecs[uboInfo.name];
+        gl.bindBufferRange(gl.UNIFORM_BUFFER, blockSpec.index, uboInfo.buffer, uboInfo.offset, uboInfo.size);
+      }
+
+      //twgl.setUniforms(prgInfo, uniforms);
+
+      // Do it manually since we're doing it manually in WebGPU
+      const loc = prgInfo.uniformLocations;
+
+      if (currentTextures[0] !== uniforms.diffuseTexture) {
+        if (currentActiveTexture !== 0) {
+          currentActiveTexture = 0;
+          gl.activeTexture(gl.TEXTURE0);
+        }
+        currentTextures[0] = uniforms.diffuseTexture;
+        gl.bindTexture(gl.TEXTURE_2D, uniforms.diffuseTexture);
+        gl.uniform1i(loc.diffuseTexture, 0);
+      }
+
+      //twgl.drawBufferInfo(gl, bufferInfo);
+      gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
+    }
+    timingHelper.end();
+
+    const elapsedTimeMs = performance.now() - startTimeMs;
+    fpsAverage.addSample(1 / deltaTime);
+    jsAverage.addSample(elapsedTimeMs);
+    mathAverage.addSample(mathElapsedTimeMs);
+    gpuAverage.addSample(timingHelper.getResult());
+
+    infoElem.textContent = `\
+js  : ${jsAverage.get().toFixed(1)}ms
+math: ${mathAverage.get().toFixed(1)}ms
+fps : ${fpsAverage.get().toFixed(0)}
+gpu : ${(gpuAverage.get() / 1000 / 1000).toFixed(1)}ms
+`;
+
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+
+  const observer = new ResizeObserver(entries => {
+    entries.forEach(entry => {
+      canvasToSizeMap.set(entry.target, {
+        width: Math.max(1, entry.contentBoxSize[0].inlineSize),
+        height: Math.max(1, entry.contentBoxSize[0].blockSize),
+      });
+    });
+  });
+  observer.observe(canvas);
+}
+
+main();
+  </script>
+</html>
diff --git a/webgpu/webgl-optimization-none-uniform-buffers.html b/webgpu/webgl-optimization-none-uniform-buffers.html
index 56cafeee..ca8aba91 100644
--- a/webgpu/webgl-optimization-none-uniform-buffers.html
+++ b/webgpu/webgl-optimization-none-uniform-buffers.html
@@ -304,7 +304,7 @@
     });
   }
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   for (let i = 0; i < maxObjects; ++i) {
@@ -338,8 +338,6 @@
 
   const canvasToSizeMap = new WeakMap();
   const degToRad = d => d * Math.PI / 180;
-  const worldValue = mat4.create();
-  const normalMatrix = mat3.identity();
 
   const settings = {
     numObjects: 1000,
@@ -398,6 +396,8 @@
     const viewProjectionMatrix = mat4.multiply(projection, viewMatrix);
 
     let mathElapsedTimeMs = 0;
+    let currentActiveTexture = -1;
+    const currentTextures = [];
 
     for (let i = 0; i < settings.numObjects; ++i) {
       const {
@@ -411,38 +411,72 @@
         rotationSpeed,
         scale,
       } = objectInfos[i];
+      const {
+        world,
+        normalMatrix,
+        viewProjection,
+        color,
+        lightWorldPosition,
+        viewWorldPosition,
+        shininess,
+      } = uboInfo.uniforms;
       const mathTimeStartMs = performance.now();
 
       // Compute a world matrix
-      mat4.identity(worldValue);
-      mat4.axisRotate(worldValue, axis, i + time * speed, worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], worldValue);
-      mat4.rotateX(worldValue, time * rotationSpeed + i, worldValue);
-      mat4.scale(worldValue, [scale, scale, scale], worldValue);
+      mat4.identity(world);
+      mat4.axisRotate(world, axis, i + time * speed, world);
+      mat4.translate(world, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], world);
+      mat4.translate(world, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], world);
+      mat4.rotateX(world, time * rotationSpeed + i, world);
+      mat4.scale(world, [scale, scale, scale], world);
 
       // Inverse and transpose it into the normalMatrix value
-      mat3.fromMat4(mat4.transpose(mat4.inverse(worldValue)), normalMatrix);
-
-      const {color, shininess} = material;
-
-      twgl.setBlockUniforms(uboInfo, {
-        world: worldValue,
-        normalMatrix,
-        viewProjection: viewProjectionMatrix,
-        color,
-        lightWorldPosition: [-10, 30, 300],
-        viewWorldPosition: eye,
-        shininess,
-      });
+      mat3.fromMat4(mat4.transpose(mat4.inverse(world)), normalMatrix);
+
+      // const {color, shininess} = material;
+      color.set(material.color);
+      shininess[0] = material.shininess;
+
+      // do this manually since we're doing it manually in WebGPU
+      //twgl.setBlockUniforms(uboInfo, {
+      //  world: worldValue,
+      //  normalMatrix,
+      //  viewProjection: viewProjectionMatrix,
+      //  color,
+      //  lightWorldPosition: [-10, 30, 300],
+      //  viewWorldPosition: eye,
+      //  shininess,
+      //});
+      viewProjection.set(viewProjectionMatrix);
+      lightWorldPosition.set([-10, 30, 300]);
+      viewWorldPosition.set(eye);
 
       mathElapsedTimeMs += performance.now() - mathTimeStartMs;
 
       // upload the uniform values to the uniform buffer
-      twgl.setUniformBlock(gl, prgInfo, uboInfo);
-      twgl.setUniforms(prgInfo, uniforms);
+      //twgl.setUniformBlock(gl, prgInfo, uboInfo);
+      gl.bindBuffer(gl.UNIFORM_BUFFER, uboInfo.buffer);
+      gl.bufferSubData(gl.UNIFORM_BUFFER, 0, uboInfo.asUint8, 0, uboInfo.size);
+      const blockSpec = prgInfo.uniformBlockSpec.blockSpecs[uboInfo.name];
+      gl.bindBufferRange(gl.UNIFORM_BUFFER, blockSpec.index, uboInfo.buffer, uboInfo.offset, uboInfo.size);
+
+      //twgl.setUniforms(prgInfo, uniforms);
+
+      // Do it manually since we're doing it manually in WebGPU
+      const loc = prgInfo.uniformLocations;
+
+      if (currentTextures[0] !== uniforms.diffuseTexture) {
+        if (currentActiveTexture !== 0) {
+          currentActiveTexture = 0;
+          gl.activeTexture(gl.TEXTURE0);
+        }
+        currentTextures[0] = uniforms.diffuseTexture;
+        gl.bindTexture(gl.TEXTURE_2D, uniforms.diffuseTexture);
+        gl.uniform1i(loc.diffuseTexture, 0);
+      }
 
-      twgl.drawBufferInfo(gl, bufferInfo);
+      //twgl.drawBufferInfo(gl, bufferInfo);
+      gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
     }
     timingHelper.end();
 
diff --git a/webgpu/webgl-optimization-none.html b/webgpu/webgl-optimization-none.html
index 3148b3a4..f68d4c27 100644
--- a/webgpu/webgl-optimization-none.html
+++ b/webgpu/webgl-optimization-none.html
@@ -299,7 +299,7 @@
     });
   }
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   for (let i = 0; i < maxObjects; ++i) {
@@ -395,6 +395,8 @@
     const viewProjectionMatrix = mat4.multiply(projection, viewMatrix);
 
     let mathElapsedTimeMs = 0;
+    let currentActiveTexture = -1;
+    const currentTextures = [];
 
     for (let i = 0; i < settings.numObjects; ++i) {
       const {
@@ -410,7 +412,7 @@
       const mathTimeStartMs = performance.now();
 
       // Copy the viewProjectionMatrix into the uniform values for this object
-      uniforms.viewProjection.set(viewProjectionMatrix);
+      // uniforms.viewProjection.set(viewProjectionMatrix);
 
       // Compute a world matrix
       const worldValue = uniforms.world;
@@ -426,17 +428,39 @@
 
       const {color, shininess} = material;
 
-      uniforms.color.set(color);
-      uniforms.lightWorldPosition.set([-10, 30, 300]);
-      uniforms.viewWorldPosition.set(eye);
-      uniforms.shininess = shininess;
+      // uniforms.color.set(color);
+      // uniforms.lightWorldPosition.set([-10, 30, 300]);
+      // uniforms.viewWorldPosition.set(eye);
+      // uniforms.shininess = shininess;
 
       mathElapsedTimeMs += performance.now() - mathTimeStartMs;
 
-      // upload the uniform values to the uniform buffer
-      twgl.setUniforms(prgInfo, uniforms);
+      // update the uniforms
+      // twgl.setUniforms(prgInfo, uniforms);
 
-      twgl.drawBufferInfo(gl, bufferInfo);
+      // Do it manually since we're doing it manually in WebGPU
+      const loc = prgInfo.uniformLocations;
+
+      if (currentTextures[0] !== uniforms.diffuseTexture) {
+        if (currentActiveTexture !== 0) {
+          currentActiveTexture = 0;
+          gl.activeTexture(gl.TEXTURE0);
+        }
+        currentTextures[0] = uniforms.diffuseTexture;
+        gl.bindTexture(gl.TEXTURE_2D, uniforms.diffuseTexture);
+        gl.uniform1i(loc.diffuseTexture, 0);
+      }
+
+      gl.uniformMatrix4fv(loc.world, false, worldValue);
+      gl.uniformMatrix4fv(loc.viewProjection, false, viewProjectionMatrix);
+      gl.uniformMatrix3fv(loc.normalMatrix, false, uniforms.normalMatrix);
+      gl.uniform3fv(loc.lightWorldPosition, [-10, 30, 300]);
+      gl.uniform3fv(loc.viewWorldPosition, eye);
+      gl.uniform4fv(loc.color, color);
+      gl.uniform1f(loc.shininess, shininess);
+
+      // twgl.drawBufferInfo(gl, bufferInfo);
+      gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
     }
     timingHelper.end();
 
diff --git a/webgpu/webgl-optimization-uniform-buffers-one-large.html b/webgpu/webgl-optimization-uniform-buffers-one-large.html
new file mode 100644
index 00000000..f1aefcac
--- /dev/null
+++ b/webgpu/webgl-optimization-uniform-buffers-one-large.html
@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+    <title>WebGL Optimization - Uniform Blocks, one large buffer</title>
+    <style>
+      @import url(resources/webgpu-lesson.css);
+html, body {
+  margin: 0;       /* remove the default margin          */
+  height: 100%;    /* make the html,body fill the page   */
+}
+canvas {
+  display: block;  /* make the canvas act like a block   */
+  width: 100%;     /* make the canvas fill its container */
+  height: 100%;
+}
+:root {
+  --bg-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #000;
+  }
+}
+canvas {
+  background-color: var(--bg-color);
+}
+#info {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 0.5em;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  min-width: 8em;
+}
+    </style>
+  </head>
+  <body>
+    <canvas></canvas>
+    <pre id="info"></pre>
+  </body>
+  <script type="module">
+//import 'https://greggman.github.io/webgl-lint/webgl-lint.js';
+import GUI from '../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../3rdparty/twgl-full.module.js';
+import RollingAverage from './resources/js/rolling-average.js';
+
+class TimingHelper {
+  #ext;
+  #query;
+  #gl;
+  #state = 'free';
+  #duration = 0;
+
+  constructor(gl) {
+    this.#gl = gl;
+    this.#ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
+    if (!this.#ext) {
+      return;
+    }
+    this.#query = gl.createQuery();
+  }
+
+  begin() {
+    if (!this.#ext || this.#state !== 'free') {
+      return;
+    }
+    this.#state = 'started';
+    const gl = this.#gl;
+    const ext = this.#ext;
+    const query = this.#query;
+    gl.beginQuery(ext.TIME_ELAPSED_EXT, query);
+  }
+  end() {
+    if (!this.#ext || this.#state === 'free') {
+      return;
+    }
+
+    const gl = this.#gl;
+    const ext = this.#ext;
+    const query = this.#query;
+
+    if (this.#state === 'started') {
+      gl.endQuery(ext.TIME_ELAPSED_EXT);
+      this.#state = 'waiting';
+    } else {
+      const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
+      const disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
+      if (available && !disjoint) {
+        this.#duration = gl.getQueryParameter(query, gl.QUERY_RESULT);
+      }
+      if (available || disjoint) {
+        this.#state = 'free';
+      }
+    }
+  }
+  getResult() {
+    return this.#duration;
+  }
+}
+
+const { m4: mat4, v3: vec3 } = twgl;
+const mat3 = {
+  identity() {
+    return new Float32Array(9);
+  },
+  fromMat4(m, dst) {
+    dst = dst || new Float32Array(9);
+
+    dst[0] =  m[ 0]; dst[1] = m[ 1]; dst[2] = m[ 2];
+    dst[3] =  m[ 4]; dst[4] = m[ 5]; dst[5] = m[ 6];
+    dst[6] =  m[ 8]; dst[7] = m[ 9]; dst[8] = m[10];
+
+    return dst;
+  },
+};
+
+const fpsAverage = new RollingAverage();
+const jsAverage = new RollingAverage();
+const gpuAverage = new RollingAverage();
+const mathAverage = new RollingAverage();
+
+/** Given a css color string, return an array of 4 values from 0 to 255 */
+const cssColorToRGBA8 = (() => {
+  const canvas = new OffscreenCanvas(1, 1);
+  const ctx = canvas.getContext('2d', {willReadFrequently: true});
+  return cssColor => {
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = cssColor;
+    ctx.fillRect(0, 0, 1, 1);
+    return Array.from(ctx.getImageData(0, 0, 1, 1).data);
+  };
+})();
+
+/** Given a css color string, return an array of 4 values from 0 to 1 */
+const cssColorToRGBA = cssColor => cssColorToRGBA8(cssColor).map(v => v / 255);
+
+/**
+ * Given hue, saturation, and luminance values in the range of 0 to 1
+ * return the corresponding CSS hsl string
+ */
+const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
+
+/**
+ * Given hue, saturation, and luminance values in the range of 0 to 1
+ * returns an array of 4 values from 0 to 1
+ */
+const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
+
+/**
+ * Returns a random number between min and max.
+ * If min and max are not specified, returns 0 to 1
+ * If max is not specified, return 0 to min.
+ */
+function rand(min, max) {
+  if (min === undefined) {
+    max = 1;
+    min = 0;
+  } else if (max === undefined) {
+    max = min;
+    min = 0;
+  }
+  return Math.random() * (max - min) + min;
+}
+
+/** Selects a random array element */
+const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
+
+/** Rounds up v to a multiple of alignment */
+const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
+
+async function main() {
+  const infoElem = document.querySelector('#info');
+
+  // Get a WebGPU context from the canvas and configure it
+  const canvas = document.querySelector('canvas');
+  const gl = canvas.getContext('webgl2');
+  const timingHelper = new TimingHelper(gl);
+
+  const uniformBlock = `
+      uniform GlobalUniforms {
+        mat4 viewProjection;
+        vec3 lightWorldPosition;
+        vec3 viewWorldPosition;
+      };
+
+      uniform MaterialUniforms {
+        vec4 color;
+        float shininess;
+      };
+
+      uniform PerObjectUniforms {
+        mat3 normalMatrix;
+        mat4 world;
+      };
+  `;
+  const vs = `#version 300 es
+      ${uniformBlock}
+      layout(location = 0) in vec4 position;
+      layout(location = 1) in vec3 normal;
+      layout(location = 2) in vec2 texcoord;
+
+      out vec3 v_normal;
+      out vec3 v_surfaceToLight;
+      out vec3 v_surfaceToView;
+      out vec2 v_texcoord;
+
+      void main() {
+        gl_Position = viewProjection * world * position;
+
+        // Orient the normals and pass to the fragment shader
+        v_normal = normalMatrix * normal;
+
+        // Compute the world position of the surface
+        vec3 surfaceWorldPosition = (world * position).xyz;
+
+        // Compute the vector of the surface to the light
+        // and pass it to the fragment shader
+        v_surfaceToLight = lightWorldPosition - surfaceWorldPosition;
+
+        // Compute the vector of the surface to the light
+        // and pass it to the fragment shader
+        v_surfaceToView = viewWorldPosition - surfaceWorldPosition;
+
+        // Pass the texture coord on to the fragment shader
+        v_texcoord = texcoord;
+      }
+  `;
+
+  const fs = `#version 300 es
+      precision highp float;
+      ${uniformBlock}
+
+      in vec3 v_normal;
+      in vec3 v_surfaceToLight;
+      in vec3 v_surfaceToView;
+      in vec2 v_texcoord;
+
+      uniform sampler2D diffuseTexture;
+
+      out vec4 fragColor;
+
+      void main() {
+        // Because vsOut.normal is an inter-stage variable 
+        // it's interpolated so it will not be a unit vector.
+        // Normalizing it will make it a unit vector again
+        vec3 normal = normalize(v_normal);
+
+        vec3 surfaceToLightDirection = normalize(v_surfaceToLight);
+        vec3 surfaceToViewDirection = normalize(v_surfaceToView);
+        vec3 halfVector = normalize(
+          surfaceToLightDirection + surfaceToViewDirection);
+
+        // Compute the light by taking the dot product
+        // of the normal with the direction to the light
+        float light = dot(normal, surfaceToLightDirection);
+
+        float specular = dot(normal, halfVector);
+        specular = specular > 0.0 ?
+            pow(specular, shininess) :
+            0.0;
+
+        vec4 diffuse = color * texture(diffuseTexture, v_texcoord);
+        // Lets multiply just the color portion (not the alpha)
+        // by the light
+        vec3 c = diffuse.rgb * light + specular;
+        fragColor = vec4(c, diffuse.a);
+      }
+    `;
+
+  const prgInfo = twgl.createProgramInfo(gl, [vs, fs]);
+
+  const globalUboInfo = twgl.createUniformBlockInfo(gl, prgInfo, 'GlobalUniforms');
+
+  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
+    position:  new Float32Array([1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1]),
+    normal:    new Float32Array([1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1]),
+    texcoord: new Float32Array([1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1]),
+    indices:   new Uint16Array([0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23]),
+  });
+
+  gl.enable(gl.CULL_FACE);
+  gl.enable(gl.DEPTH_TEST);
+
+  const textures = [
+    '😂', '👾', '👍', '👀', '🌞', '🛟',
+  ].map(s => {
+    const size = 128;
+    const ctx = new OffscreenCanvas(size, size).getContext('2d');
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, size, size);
+    ctx.font = `${size * 0.9}px sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(s, size / 2, size / 2);
+    return twgl.createTexture(gl, {
+      src: ctx.canvas,
+      wrap: gl.CLAMP_TO_EDGE,
+      min: gl.LINEAR_MIPMAP_NEAREST,
+      mag: gl.LINEAR,
+    });
+  });
+
+  const numMaterials = 20;
+  const materials = [];
+  for (let i = 0; i < numMaterials; ++i) {
+    const color = hslToRGBA(rand(), rand(0.5, 0.8), rand(0.5, 0.7));
+    const shininess = rand(10, 120);
+    const materialUboInfo = twgl.createUniformBlockInfo(gl, prgInfo, 'MaterialUniforms');
+
+    // Set the data in the typed array views
+    twgl.setBlockUniforms(materialUboInfo, {
+      color,
+      shininess,
+    });
+    // copy the typed array view data to the uniform buffer
+    twgl.setUniformBlock(gl, prgInfo, materialUboInfo);
+
+    materials.push({
+      color,
+      shininess,
+      texture: randomArrayElement(textures),
+      materialUboInfo,
+    });
+  }
+
+  const maxObjects = 30000;
+  const objectInfos = [];
+
+  const blockSize = roundUp(prgInfo.uniformBlockSpec.blockSpecs.PerObjectUniforms.size, 256);
+  const totalSize = blockSize * maxObjects;
+  const uniformBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBuffer);
+  gl.bufferData(gl.UNIFORM_BUFFER, totalSize, gl.DYNAMIC_DRAW);
+
+  const uniformArrayBuffer = new ArrayBuffer(totalSize);
+  const uniformView = new Uint8Array(uniformArrayBuffer);
+
+  for (let i = 0; i < maxObjects; ++i) {
+    const material = randomArrayElement(materials);
+    const axis = vec3.normalize([rand(-1, 1), rand(-1, 1), rand(-1, 1)]);
+    const radius = rand(10, 100);
+    const speed = rand(0.1, 0.4);
+    const rotationSpeed = rand(-1, 1);
+    const scale = rand(2, 10);
+
+    const uniforms = {
+      diffuseTexture: randomArrayElement(textures),
+    };
+
+    const uboInfo = twgl.createUniformBlockInfo(gl, prgInfo, 'PerObjectUniforms', {
+      buffer: uniformBuffer,
+      offset: blockSize * i,
+      array: uniformArrayBuffer,
+    });
+
+    objectInfos.push({
+      uniforms,
+      uboInfo,
+
+      axis,
+      material,
+      radius,
+      speed,
+      rotationSpeed,
+      scale,
+    });
+  }
+
+  gl.clearColor(0.3, 0.3, 0.3, 1);
+
+  const canvasToSizeMap = new WeakMap();
+  const degToRad = d => d * Math.PI / 180;
+
+  const settings = {
+    numObjects: 1000,
+    render: true,
+  };
+
+  const gui = new GUI();
+  gui.add(settings, 'numObjects', { min: 0, max: maxObjects, step: 1});
+  gui.add(settings, 'render');
+
+  let then = 0;
+
+  function render(time) {
+    time *= 0.001;  // convert to seconds
+    const deltaTime = time - then;
+    then = time;
+
+    const startTimeMs = performance.now();
+
+    const {width, height} = settings.render
+       ? canvasToSizeMap.get(canvas) ?? canvas
+       : { width: 1, height: 1 };
+
+    // Don't set the canvas size if it's already that size as it may be slow.
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+    }
+
+    gl.viewport(0, 0, canvas.width, canvas.height);
+
+    // Get the current texture from the canvas context and
+    // set it as the texture to render to.
+    timingHelper.begin();
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    gl.useProgram(prgInfo.program);
+    twgl.setBuffersAndAttributes(gl, prgInfo, bufferInfo);
+
+    const aspect = canvas.clientWidth / canvas.clientHeight;
+    const projection = mat4.perspective(
+        degToRad(60),
+        aspect,
+        1,      // zNear
+        2000,   // zFar
+    );
+
+    const eye = [100, 150, 200];
+    const target = [0, 0, 0];
+    const up = [0, 1, 0];
+
+    // Compute a view matrix
+    const viewMatrix = mat4.inverse(mat4.lookAt(eye, target, up));
+
+    // Combine the view and projection matrixes
+    mat4.multiply(projection, viewMatrix, globalUboInfo.uniforms.viewProjection);
+    twgl.setBlockUniforms(globalUboInfo, {
+      lightWorldPosition: [-10, 30, 300],
+      viewWorldPosition: eye,
+    });
+    twgl.setUniformBlock(gl, prgInfo, globalUboInfo);
+
+    let mathElapsedTimeMs = 0;
+    let currentActiveTexture = -1;
+    let currentMaterialUbo;
+    const currentTextures = [];
+
+    const mathTimeStartMs = performance.now();
+    for (let i = 0; i < settings.numObjects; ++i) {
+      const {
+        uboInfo,
+        axis,
+        radius,
+        speed,
+        rotationSpeed,
+        scale,
+      } = objectInfos[i];
+      const {
+        world,
+        normalMatrix,
+      } = uboInfo.uniforms;
+
+      // Compute a world matrix
+      mat4.identity(world);
+      mat4.axisRotate(world, axis, i + time * speed, world);
+      mat4.translate(world, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], world);
+      mat4.translate(world, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], world);
+      mat4.rotateX(world, time * rotationSpeed + i, world);
+      mat4.scale(world, [scale, scale, scale], world);
+
+      // Inverse and transpose it into the normalMatrix value
+      mat3.fromMat4(mat4.transpose(mat4.inverse(world)), normalMatrix);
+    }
+    mathElapsedTimeMs = performance.now() - mathTimeStartMs;
+
+    // Copy all uniform block values for all objects
+    gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBuffer);
+    gl.bufferSubData(gl.UNIFORM_BUFFER, 0, uniformView, 0, settings.numObjects * blockSize);
+
+    for (let i = 0; i < settings.numObjects; ++i) {
+      const {
+        uniforms,
+        uboInfo,
+        material,
+      } = objectInfos[i];
+
+      //twgl.bindUniformBlock(gl, prgInfo, materialUboInfo);
+      const { materialUboInfo } = material;
+      if (currentMaterialUbo !== materialUboInfo) {
+        currentMaterialUbo = materialUboInfo;
+        const blockSpec = prgInfo.uniformBlockSpec.blockSpecs[materialUboInfo.name];
+        gl.bindBufferRange(gl.UNIFORM_BUFFER, blockSpec.index, materialUboInfo.buffer, materialUboInfo.offset, materialUboInfo.size);
+      }
+
+      // upload the uniform values to the uniform buffer
+      //twgl.setUniformBlock(gl, prgInfo, uboInfo);
+      {
+        const blockSpec = prgInfo.uniformBlockSpec.blockSpecs[uboInfo.name];
+        gl.bindBufferRange(gl.UNIFORM_BUFFER, blockSpec.index, uboInfo.buffer, uboInfo.offset, uboInfo.size);
+      }
+
+      //twgl.setUniforms(prgInfo, uniforms);
+
+      // Do it manually since we're doing it manually in WebGPU
+      const loc = prgInfo.uniformLocations;
+
+      if (currentTextures[0] !== uniforms.diffuseTexture) {
+        if (currentActiveTexture !== 0) {
+          currentActiveTexture = 0;
+          gl.activeTexture(gl.TEXTURE0);
+        }
+        currentTextures[0] = uniforms.diffuseTexture;
+        gl.bindTexture(gl.TEXTURE_2D, uniforms.diffuseTexture);
+        gl.uniform1i(loc.diffuseTexture, 0);
+      }
+
+      //twgl.drawBufferInfo(gl, bufferInfo);
+      gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
+    }
+    timingHelper.end();
+
+    const elapsedTimeMs = performance.now() - startTimeMs;
+    fpsAverage.addSample(1 / deltaTime);
+    jsAverage.addSample(elapsedTimeMs);
+    mathAverage.addSample(mathElapsedTimeMs);
+    gpuAverage.addSample(timingHelper.getResult());
+
+    infoElem.textContent = `\
+js  : ${jsAverage.get().toFixed(1)}ms
+math: ${mathAverage.get().toFixed(1)}ms
+fps : ${fpsAverage.get().toFixed(0)}
+gpu : ${(gpuAverage.get() / 1000 / 1000).toFixed(1)}ms
+`;
+
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+
+  const observer = new ResizeObserver(entries => {
+    entries.forEach(entry => {
+      canvasToSizeMap.set(entry.target, {
+        width: Math.max(1, entry.contentBoxSize[0].inlineSize),
+        height: Math.max(1, entry.contentBoxSize[0].blockSize),
+      });
+    });
+  });
+  observer.observe(canvas);
+}
+
+main();
+  </script>
+</html>
diff --git a/webgpu/webgpu-optimization-all.html b/webgpu/webgpu-optimization-all.html
deleted file mode 100644
index a30a814b..00000000
--- a/webgpu/webgpu-optimization-all.html
+++ /dev/null
@@ -1,603 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-    <title>WebGPU Optimization - None</title>
-    <style>
-      @import url(resources/webgpu-lesson.css);
-html, body {
-  margin: 0;       /* remove the default margin          */
-  height: 100%;    /* make the html,body fill the page   */
-}
-canvas {
-  display: block;  /* make the canvas act like a block   */
-  width: 100%;     /* make the canvas fill its container */
-  height: 100%;
-}
-:root {
-  --bg-color: #fff;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #000;
-  }
-}
-canvas {
-  background-color: var(--bg-color);
-}
-#info {
-  position: absolute;
-  left: 0;
-  top: 0;
-  padding: 0.5em;
-  margin: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  min-width: 8em;
-}
-    </style>
-  </head>
-  <body>
-    <canvas></canvas>
-    <pre id="info"></pre>
-  </body>
-  <script type="module">
-import GUI from '../3rdparty/muigui-0.x.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-utils.html#webgpu-utils
-import {createTextureFromSource} from '../3rdparty/webgpu-utils-1.x.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-matrix-math.html
-import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
-import TimingHelper from './resources/js/timing-helper.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
-import RollingAverage from './resources/js/rolling-average.js';
-
-const fpsAverage = new RollingAverage();
-const jsAverage = new RollingAverage();
-const gpuAverage = new RollingAverage();
-const mathAverage = new RollingAverage();
-
-/** Given a css color string, return an array of 4 values from 0 to 255 */
-const cssColorToRGBA8 = (() => {
-  const canvas = new OffscreenCanvas(1, 1);
-  const ctx = canvas.getContext('2d', {willReadFrequently: true});
-  return cssColor => {
-    ctx.clearRect(0, 0, 1, 1);
-    ctx.fillStyle = cssColor;
-    ctx.fillRect(0, 0, 1, 1);
-    return Array.from(ctx.getImageData(0, 0, 1, 1).data);
-  };
-})();
-
-/** Given a css color string, return an array of 4 values from 0 to 1 */
-const cssColorToRGBA = cssColor => cssColorToRGBA8(cssColor).map(v => v / 255);
-
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * return the corresponding CSS hsl string
- */
-const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
-
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * returns an array of 4 values from 0 to 1
- */
-const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
-
-/**
- * Returns a random number between min and max.
- * If min and max are not specified, returns 0 to 1
- * If max is not specified, return 0 to min.
- */
-function rand(min, max) {
-  if (min === undefined) {
-    max = 1;
-    min = 0;
-  } else if (max === undefined) {
-    max = min;
-    min = 0;
-  }
-  return Math.random() * (max - min) + min;
-}
-
-/** Selects a random array element */
-const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
-
-async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
-  const canTimestamp = adapter.features.has('timestamp-query');
-  const device = await adapter?.requestDevice({
-    requiredFeatures: [
-      ...(canTimestamp ? ['timestamp-query'] : []),
-     ],
-  });
-  if (!device) {
-    fail('could not init WebGPU');
-  }
-
-  const timingHelper = new TimingHelper(device);
-  const infoElem = document.querySelector('#info');
-
-  // Get a WebGPU context from the canvas and configure it
-  const canvas = document.querySelector('canvas');
-  const context = canvas.getContext('webgpu');
-  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-  context.configure({
-    device,
-    format: presentationFormat,
-    alphaMode: 'premultiplied',
-  });
-
-  const module = device.createShaderModule({
-    code: `
-      struct GlobalUniforms {
-        viewProjection: mat4x4f,
-        lightWorldPosition: vec3f,
-        viewWorldPosition: vec3f,
-      };
-      struct PerObjectUniforms {
-        normalMatrix: mat3x3f,
-        world: mat4x4f,
-        color: vec4f,
-        shininess: f32,
-      };
-
-      struct Vertex {
-        @location(0) position: vec4f,
-        @location(1) normal: vec3f,
-        @location(2) texcoord: vec2f,
-      };
-
-      struct VSOutput {
-        @builtin(position) position: vec4f,
-        @location(0) normal: vec3f,
-        @location(1) surfaceToLight: vec3f,
-        @location(2) surfaceToView: vec3f,
-        @location(3) texcoord: vec2f,
-      };
-
-      @group(0) @binding(0) var diffuseTexture: texture_2d<f32>;
-      @group(0) @binding(1) var diffuseSampler: sampler;
-      @group(0) @binding(2) var<uniform> obj: PerObjectUniforms;
-      @group(0) @binding(3) var<uniform> glb: GlobalUniforms;
-
-      @vertex fn vs(vert: Vertex) -> VSOutput {
-        var vsOut: VSOutput;
-        vsOut.position = glb.viewProjection * obj.world * vert.position;
-
-        // Orient the normals and pass to the fragment shader
-        vsOut.normal = obj.normalMatrix * vert.normal;
-
-        // Compute the world position of the surface
-        let surfaceWorldPosition = (obj.world * vert.position).xyz;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToLight = glb.lightWorldPosition - surfaceWorldPosition;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToView = glb.viewWorldPosition - surfaceWorldPosition;
-
-        // Pass the texture coord on to the fragment shader
-        vsOut.texcoord = vert.texcoord;
-
-        return vsOut;
-      }
-
-      @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
-        // Because vsOut.normal is an inter-stage variable 
-        // it's interpolated so it will not be a unit vector.
-        // Normalizing it will make it a unit vector again
-        let normal = normalize(vsOut.normal);
-
-        let surfaceToLightDirection = normalize(vsOut.surfaceToLight);
-        let surfaceToViewDirection = normalize(vsOut.surfaceToView);
-        let halfVector = normalize(
-          surfaceToLightDirection + surfaceToViewDirection);
-
-        // Compute the light by taking the dot product
-        // of the normal with the direction to the light
-        let light = dot(normal, surfaceToLightDirection);
-
-        var specular = dot(normal, halfVector);
-        specular = select(
-            0.0,                           // value if condition is false
-            pow(specular, obj.shininess),  // value if condition is true
-            specular > 0.0);               // condition
-
-        let diffuse = obj.color * textureSample(diffuseTexture, diffuseSampler, vsOut.texcoord);
-        // Lets multiply just the color portion (not the alpha)
-        // by the light
-        let color = diffuse.rgb * light + specular;
-        return vec4f(color, diffuse.a);
-      }
-    `,
-  });
-
-  function createBufferWithData(device, data, usage) {
-    const buffer = device.createBuffer({
-      size: data.byteLength,
-      usage: usage,
-      mappedAtCreation: true,
-    });
-    const dst = new Uint8Array(buffer.getMappedRange());
-    dst.set(new Uint8Array(data.buffer));
-    buffer.unmap();
-    return buffer;
-  }
-
-  const vertexData = new Float32Array([
-  // position       normal        texcoord
-     1,  1, -1,     1,  0,  0,    1, 0,
-     1,  1,  1,     1,  0,  0,    0, 0,
-     1, -1,  1,     1,  0,  0,    0, 1,
-     1, -1, -1,     1,  0,  0,    1, 1,
-    -1,  1,  1,    -1,  0,  0,    1, 0,
-    -1,  1, -1,    -1,  0,  0,    0, 0,
-    -1, -1, -1,    -1,  0,  0,    0, 1,
-    -1, -1,  1,    -1,  0,  0,    1, 1,
-    -1,  1,  1,     0,  1,  0,    1, 0,
-     1,  1,  1,     0,  1,  0,    0, 0,
-     1,  1, -1,     0,  1,  0,    0, 1,
-    -1,  1, -1,     0,  1,  0,    1, 1,
-    -1, -1, -1,     0, -1,  0,    1, 0,
-     1, -1, -1,     0, -1,  0,    0, 0,
-     1, -1,  1,     0, -1,  0,    0, 1,
-    -1, -1,  1,     0, -1,  0,    1, 1,
-     1,  1,  1,     0,  0,  1,    1, 0,
-    -1,  1,  1,     0,  0,  1,    0, 0,
-    -1, -1,  1,     0,  0,  1,    0, 1,
-     1, -1,  1,     0,  0,  1,    1, 1,
-    -1,  1, -1,     0,  0, -1,    1, 0,
-     1,  1, -1,     0,  0, -1,    0, 0,
-     1, -1, -1,     0,  0, -1,    0, 1,
-    -1, -1, -1,     0,  0, -1,    1, 1,
-  ]);
-  const indices   = new Uint16Array([0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23]);
-
-  const vertexBuffer = createBufferWithData(device, vertexData, GPUBufferUsage.VERTEX);
-  const indicesBuffer = createBufferWithData(device, indices, GPUBufferUsage.INDEX);
-  const numVertices = indices.length;
-
-  const pipeline = device.createRenderPipeline({
-    label: 'textured model with point light w/specular highlight',
-    layout: 'auto',
-    vertex: {
-      module,
-      buffers: [
-        {
-          arrayStride: (3 + 3 + 2) * 4, // 8 floats
-          attributes: [
-            {shaderLocation: 0, offset: 0 * 4, format: 'float32x3'}, // position
-            {shaderLocation: 1, offset: 3 * 4, format: 'float32x3'}, // normal
-            {shaderLocation: 2, offset: 6 * 4, format: 'float32x2'}, // texcoord
-          ],
-        },
-      ],
-    },
-    fragment: {
-      module,
-      targets: [{ format: presentationFormat }],
-    },
-    primitive: {
-      cullMode: 'back',
-    },
-    depthStencil: {
-      depthWriteEnabled: true,
-      depthCompare: 'less',
-      format: 'depth24plus',
-    },
-  });
-
-  const textures = [
-    '😂', '👾', '👍', '👀', '🌞', '🛟',
-  ].map(s => {
-    const size = 128;
-    const ctx = new OffscreenCanvas(size, size).getContext('2d');
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 0, size, size);
-    ctx.font = `${size * 0.9}px sans-serif`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(s, size / 2, size / 2);
-    return createTextureFromSource(device, ctx.canvas, {mips: true});
-  });
-
-  const sampler = device.createSampler({
-    magFilter: 'linear',
-    minFilter: 'linear',
-    mipmapFilter: 'nearest',
-  });
-
-  const numMaterials = 20;
-  const materials = [];
-  for (let i = 0; i < numMaterials; ++i) {
-    const color = hslToRGBA(rand(), rand(0.5, 0.8), rand(0.5, 0.7));
-    const shininess = rand(10, 120);
-    materials.push({
-      color,
-      shininess,
-      texture: randomArrayElement(textures),
-      sampler,
-    });
-  }
-
-  const sharedUniformBufferSize = (16 + 4 + 4) * 4;
-  const sharedUniformBuffer = device.createBuffer({
-    label: 'shared uniforms',
-    size: sharedUniformBufferSize,
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-  });
-
-  const sharedUniformValues = new Float32Array(sharedUniformBufferSize / 4);
-
-  const kViewProjectionOffset = 0;
-  const kLightWorldPositionOffset = 16;
-  const kViewWorldPositionOffset = 20;
-
-  const viewProjectionValue = sharedUniformValues.subarray(
-      kViewProjectionOffset, kViewProjectionOffset + 16);
-  const lightWorldPositionValue = sharedUniformValues.subarray(
-      kLightWorldPositionOffset, kLightWorldPositionOffset + 3);
-  const viewWorldPositionValue = sharedUniformValues.subarray(
-      kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
-
-  const maxObjects = 20000;
-  const objectInfos = [];
-
-  for (let i = 0; i < maxObjects; ++i) {
-    const uniformBufferSize = (12 + 16 + 4 + 4) * 4;
-    const uniformBuffer = device.createBuffer({
-      label: 'uniforms',
-      size: uniformBufferSize,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    });
-
-    const uniformValues = new Float32Array(uniformBufferSize / 4);
-
-    // offsets to the various uniform values in float32 indices
-    const kNormalMatrixOffset = 0;
-    const kWorldOffset = 12;
-    const kColorOffset = 28;
-    const kShininessOffset = 32;
-
-    const normalMatrixValue = uniformValues.subarray(
-        kNormalMatrixOffset, kNormalMatrixOffset + 12);
-    const worldValue = uniformValues.subarray(
-        kWorldOffset, kWorldOffset + 16);
-    const colorValue = uniformValues.subarray(kColorOffset, kColorOffset + 4);
-    const shininessValue = uniformValues.subarray(
-        kShininessOffset, kShininessOffset + 1);
-
-    const material = randomArrayElement(materials);
-
-    const bindGroup = device.createBindGroup({
-      label: 'bind group for object',
-      layout: pipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: material.texture.createView() },
-        { binding: 1, resource: material.sampler },
-        { binding: 2, resource: { buffer: uniformBuffer }},
-        { binding: 3, resource: { buffer: sharedUniformBuffer }},
-      ],
-    });
-
-    const color = hslToRGBA(rand(), rand(0.5, 0.8), rand(0.5, 0.7));
-    const axis = vec3.normalize([rand(-1, 1), rand(-1, 1), rand(-1, 1)]);
-    const radius = rand(10, 100);
-    const speed = rand(0.1, 0.4);
-    const rotationSpeed = rand(-1, 1);
-    const scale = rand(2, 10);
-    const shininess = rand(10, 120);
-
-    objectInfos.push({
-      bindGroup,
-
-      uniformBuffer,
-      uniformValues,
-
-      normalMatrixValue,
-      worldValue,
-      colorValue,
-      shininessValue,
-
-      axis,
-      color,
-      radius,
-      speed,
-      rotationSpeed,
-      scale,
-      shininess,
-    });
-  }
-
-  const renderPassDescriptor = {
-    label: 'our basic canvas renderPass',
-    colorAttachments: [
-      {
-        // view: <- to be filled out when we render
-        clearValue: [0.3, 0.3, 0.3, 1],
-        loadOp: 'clear',
-        storeOp: 'store',
-      },
-    ],
-    depthStencilAttachment: {
-      // view: <- to be filled out when we render
-      depthClearValue: 1.0,
-      depthLoadOp: 'clear',
-      depthStoreOp: 'store',
-    },
-  };
-
-  const canvasToSizeMap = new WeakMap();
-  const degToRad = d => d * Math.PI / 180;
-
-  const settings = {
-    numObjects: 1000,
-    render: true,
-  };
-
-  const gui = new GUI();
-  gui.add(settings, 'numObjects', { min: 0, max: maxObjects, step: 1});
-  gui.add(settings, 'render');
-
-  let depthTexture;
-  let then = 0;
-
-  function render(time) {
-    time *= 0.001;  // convert to seconds
-    const deltaTime = time - then;
-    then = time;
-
-    const startTimeMs = performance.now();
-
-    const {width, height} = settings.render
-       ? canvasToSizeMap.get(canvas) ?? canvas
-       : { width: 1, height: 1 };
-
-    // Don't set the canvas size if it's already that size as it may be slow.
-    if (canvas.width !== width || canvas.height !== height) {
-      canvas.width = width;
-      canvas.height = height;
-    }
-
-    // Get the current texture from the canvas context and
-    // set it as the texture to render to.
-    const canvasTexture = context.getCurrentTexture();
-    renderPassDescriptor.colorAttachments[0].view = canvasTexture.createView();
-
-    // If we don't have a depth texture OR if its size is different
-    // from the canvasTexture when make a new depth texture
-    if (!depthTexture ||
-        depthTexture.width !== canvasTexture.width ||
-        depthTexture.height !== canvasTexture.height) {
-      if (depthTexture) {
-        depthTexture.destroy();
-      }
-      depthTexture = device.createTexture({
-        size: [canvasTexture.width, canvasTexture.height],
-        format: 'depth24plus',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-      });
-    }
-    renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
-
-    const encoder = device.createCommandEncoder();
-    const pass = timingHelper.beginRenderPass(encoder, renderPassDescriptor);
-    pass.setPipeline(pipeline);
-    pass.setVertexBuffer(0, vertexBuffer);
-    pass.setIndexBuffer(indicesBuffer, 'uint16');
-
-    const aspect = canvas.clientWidth / canvas.clientHeight;
-    const projection = mat4.perspective(
-        degToRad(60),
-        aspect,
-        1,      // zNear
-        2000,   // zFar
-    );
-
-    const eye = [100, 150, 200];
-    const target = [0, 0, 0];
-    const up = [0, 1, 0];
-
-    // Compute a view matrix
-    const viewMatrix = mat4.lookAt(eye, target, up);
-
-    // Combine the view and projection matrixes
-    mat4.multiply(projection, viewMatrix, viewProjectionValue);
-
-    lightWorldPositionValue.set([-10, 30, 300]);
-    viewWorldPositionValue.set(eye);
-
-    device.queue.writeBuffer(sharedUniformBuffer, 0, sharedUniformValues);
-
-    let mathElapsedTimeMs = 0;
-
-    for (let i = 0; i < settings.numObjects; ++i) {
-      const {
-        bindGroup,
-        uniformBuffer,
-        uniformValues,
-        normalMatrixValue,
-        worldValue,
-        colorValue,
-        shininessValue,
-
-        axis,
-        material,
-        radius,
-        speed,
-        rotationSpeed,
-        scale,
-      } = objectInfos[i];
-      const mathTimeStartMs = performance.now();
-
-      // Compute a world matrix
-      mat4.identity(worldValue);
-      mat4.axisRotate(worldValue, axis, i + time * speed, worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], worldValue);
-      mat4.rotateX(worldValue, time * rotationSpeed + i, worldValue);
-      mat4.scale(worldValue, [scale, scale, scale], worldValue);
-
-      // Inverse and transpose it into the normalMatrix value
-      mat3.fromMat4(mat4.transpose(mat4.inverse(worldValue)), normalMatrixValue);
-
-      const {color, shininess} = material;
-      colorValue.set(color);
-      shininessValue[0] = shininess;
-
-      mathElapsedTimeMs += performance.now() - mathTimeStartMs;
-
-      // upload the uniform values to the uniform buffer
-      device.queue.writeBuffer(uniformBuffer, 0, uniformValues);
-
-      pass.setBindGroup(0, bindGroup);
-      pass.drawIndexed(numVertices);
-    }
-
-    pass.end();
-
-    const commandBuffer = encoder.finish();
-    device.queue.submit([commandBuffer]);
-
-    timingHelper.getResult().then(gpuTime => {
-      gpuAverage.addSample(gpuTime / 1000);
-    });
-
-    const elapsedTimeMs = performance.now() - startTimeMs;
-    fpsAverage.addSample(1 / deltaTime);
-    jsAverage.addSample(elapsedTimeMs);
-    mathAverage.addSample(mathElapsedTimeMs);
-
-    infoElem.textContent = `\
-js  : ${jsAverage.get().toFixed(1)}ms
-math: ${mathAverage.get().toFixed(1)}ms
-fps : ${fpsAverage.get().toFixed(0)}
-gpu : ${canTimestamp ? `${(gpuAverage.get() / 1000).toFixed(1)}ms` : 'N/A'}
-`;
-
-    requestAnimationFrame(render);
-  }
-  requestAnimationFrame(render);
-
-  const observer = new ResizeObserver(entries => {
-    entries.forEach(entry => {
-      canvasToSizeMap.set(entry.target, {
-        width: Math.max(1, Math.min(entry.contentBoxSize[0].inlineSize, device.limits.maxTextureDimension2D)),
-        height: Math.max(1, Math.min(entry.contentBoxSize[0].blockSize, device.limits.maxTextureDimension2D)),
-      });
-    });
-  });
-  observer.observe(canvas);
-}
-
-function fail(msg) {
-  alert(msg);
-}
-
-main();
-  </script>
-</html>
diff --git a/webgpu/webgpu-optimization-none.html b/webgpu/webgpu-optimization-none.html
index 9bbdc3fd..cfecd80c 100644
--- a/webgpu/webgpu-optimization-none.html
+++ b/webgpu/webgpu-optimization-none.html
@@ -309,7 +309,7 @@
     });
   }
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   for (let i = 0; i < maxObjects; ++i) {
diff --git a/webgpu/webgpu-optimization-step3-global-vs-per-object-uniforms.html b/webgpu/webgpu-optimization-step3-global-vs-per-object-uniforms.html
index c7798063..6705c431 100644
--- a/webgpu/webgpu-optimization-step3-global-vs-per-object-uniforms.html
+++ b/webgpu/webgpu-optimization-step3-global-vs-per-object-uniforms.html
@@ -344,7 +344,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   for (let i = 0; i < maxObjects; ++i) {
diff --git a/webgpu/webgpu-optimization-step4-material-uniforms.html b/webgpu/webgpu-optimization-step4-material-uniforms.html
index 4457f788..acacb750 100644
--- a/webgpu/webgpu-optimization-step4-material-uniforms.html
+++ b/webgpu/webgpu-optimization-step4-material-uniforms.html
@@ -360,7 +360,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   for (let i = 0; i < maxObjects; ++i) {
diff --git a/webgpu/webgpu-optimization-step5-double-buffer-frequently-updated-uniform-buffers-pre-submit.html b/webgpu/webgpu-optimization-step5-double-buffer-frequently-updated-uniform-buffers-pre-submit.html
deleted file mode 100644
index 93416361..00000000
--- a/webgpu/webgpu-optimization-step5-double-buffer-frequently-updated-uniform-buffers-pre-submit.html
+++ /dev/null
@@ -1,615 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-    <title>WebGPU Optimization - None</title>
-    <style>
-      @import url(resources/webgpu-lesson.css);
-html, body {
-  margin: 0;       /* remove the default margin          */
-  height: 100%;    /* make the html,body fill the page   */
-}
-canvas {
-  display: block;  /* make the canvas act like a block   */
-  width: 100%;     /* make the canvas fill its container */
-  height: 100%;
-}
-:root {
-  --bg-color: #fff;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #000;
-  }
-}
-canvas {
-  background-color: var(--bg-color);
-}
-#info {
-  position: absolute;
-  left: 0;
-  top: 0;
-  padding: 0.5em;
-  margin: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  min-width: 8em;
-}
-    </style>
-  </head>
-  <body>
-    <canvas></canvas>
-    <pre id="info"></pre>
-  </body>
-  <script type="module">
-import GUI from '../3rdparty/muigui-0.x.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-utils.html#webgpu-utils
-import {createTextureFromSource} from '../3rdparty/webgpu-utils-1.x.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-matrix-math.html
-import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
-import TimingHelper from './resources/js/timing-helper.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
-import RollingAverage from './resources/js/rolling-average.js';
-
-const fpsAverage = new RollingAverage();
-const jsAverage = new RollingAverage();
-const gpuAverage = new RollingAverage();
-const mathAverage = new RollingAverage();
-
-/** Given a css color string, return an array of 4 values from 0 to 255 */
-const cssColorToRGBA8 = (() => {
-  const canvas = new OffscreenCanvas(1, 1);
-  const ctx = canvas.getContext('2d', {willReadFrequently: true});
-  return cssColor => {
-    ctx.clearRect(0, 0, 1, 1);
-    ctx.fillStyle = cssColor;
-    ctx.fillRect(0, 0, 1, 1);
-    return Array.from(ctx.getImageData(0, 0, 1, 1).data);
-  };
-})();
-
-/** Given a css color string, return an array of 4 values from 0 to 1 */
-const cssColorToRGBA = cssColor => cssColorToRGBA8(cssColor).map(v => v / 255);
-
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * return the corresponding CSS hsl string
- */
-const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
-
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * returns an array of 4 values from 0 to 1
- */
-const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
-
-/**
- * Returns a random number between min and max.
- * If min and max are not specified, returns 0 to 1
- * If max is not specified, return 0 to min.
- */
-function rand(min, max) {
-  if (min === undefined) {
-    max = 1;
-    min = 0;
-  } else if (max === undefined) {
-    max = min;
-    min = 0;
-  }
-  return Math.random() * (max - min) + min;
-}
-
-/** Selects a random array element */
-const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
-
-async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
-  const canTimestamp = adapter.features.has('timestamp-query');
-  const device = await adapter?.requestDevice({
-    requiredFeatures: [
-      ...(canTimestamp ? ['timestamp-query'] : []),
-     ],
-  });
-  if (!device) {
-    fail('could not init WebGPU');
-  }
-
-  const timingHelper = new TimingHelper(device);
-  const infoElem = document.querySelector('#info');
-
-  // Get a WebGPU context from the canvas and configure it
-  const canvas = document.querySelector('canvas');
-  const context = canvas.getContext('webgpu');
-  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-  context.configure({
-    device,
-    format: presentationFormat,
-    alphaMode: 'premultiplied',
-  });
-
-  const module = device.createShaderModule({
-    code: `
-      struct GlobalUniforms {
-        viewProjection: mat4x4f,
-        lightWorldPosition: vec3f,
-        viewWorldPosition: vec3f,
-      };
-
-      struct MaterialUniforms {
-        color: vec4f,
-        shininess: f32,
-      };
-
-      struct PerObjectUniforms {
-        normalMatrix: mat3x3f,
-        world: mat4x4f,
-      };
-
-      struct Vertex {
-        @location(0) position: vec4f,
-        @location(1) normal: vec3f,
-        @location(2) texcoord: vec2f,
-      };
-
-      struct VSOutput {
-        @builtin(position) position: vec4f,
-        @location(0) normal: vec3f,
-        @location(1) surfaceToLight: vec3f,
-        @location(2) surfaceToView: vec3f,
-        @location(3) texcoord: vec2f,
-      };
-
-      @group(0) @binding(0) var diffuseTexture: texture_2d<f32>;
-      @group(0) @binding(1) var diffuseSampler: sampler;
-      @group(0) @binding(2) var<uniform> obj: PerObjectUniforms;
-      @group(0) @binding(3) var<uniform> glb: GlobalUniforms;
-      @group(0) @binding(4) var<uniform> material: MaterialUniforms;
-
-      @vertex fn vs(vert: Vertex) -> VSOutput {
-        var vsOut: VSOutput;
-        vsOut.position = glb.viewProjection * obj.world * vert.position;
-
-        // Orient the normals and pass to the fragment shader
-        vsOut.normal = obj.normalMatrix * vert.normal;
-
-        // Compute the world position of the surface
-        let surfaceWorldPosition = (obj.world * vert.position).xyz;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToLight = glb.lightWorldPosition - surfaceWorldPosition;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToView = glb.viewWorldPosition - surfaceWorldPosition;
-
-        // Pass the texture coord on to the fragment shader
-        vsOut.texcoord = vert.texcoord;
-
-        return vsOut;
-      }
-
-      @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
-        // Because vsOut.normal is an inter-stage variable 
-        // it's interpolated so it will not be a unit vector.
-        // Normalizing it will make it a unit vector again
-        let normal = normalize(vsOut.normal);
-
-        let surfaceToLightDirection = normalize(vsOut.surfaceToLight);
-        let surfaceToViewDirection = normalize(vsOut.surfaceToView);
-        let halfVector = normalize(
-          surfaceToLightDirection + surfaceToViewDirection);
-
-        // Compute the light by taking the dot product
-        // of the normal with the direction to the light
-        let light = dot(normal, surfaceToLightDirection);
-
-        var specular = dot(normal, halfVector);
-        specular = select(
-            0.0,                           // value if condition is false
-            pow(specular, material.shininess),  // value if condition is true
-            specular > 0.0);               // condition
-
-        let diffuse = material.color * textureSample(diffuseTexture, diffuseSampler, vsOut.texcoord);
-        // Lets multiply just the color portion (not the alpha)
-        // by the light
-        let color = diffuse.rgb * light + specular;
-        return vec4f(color, diffuse.a);
-      }
-    `,
-  });
-
-  function createBufferWithData(device, data, usage) {
-    const buffer = device.createBuffer({
-      size: data.byteLength,
-      usage: usage,
-      mappedAtCreation: true,
-    });
-    const dst = new Uint8Array(buffer.getMappedRange());
-    dst.set(new Uint8Array(data.buffer));
-    buffer.unmap();
-    return buffer;
-  }
-
-  const vertexData = new Float32Array([
-  // position       normal        texcoord
-     1,  1, -1,     1,  0,  0,    1, 0,
-     1,  1,  1,     1,  0,  0,    0, 0,
-     1, -1,  1,     1,  0,  0,    0, 1,
-     1, -1, -1,     1,  0,  0,    1, 1,
-    -1,  1,  1,    -1,  0,  0,    1, 0,
-    -1,  1, -1,    -1,  0,  0,    0, 0,
-    -1, -1, -1,    -1,  0,  0,    0, 1,
-    -1, -1,  1,    -1,  0,  0,    1, 1,
-    -1,  1,  1,     0,  1,  0,    1, 0,
-     1,  1,  1,     0,  1,  0,    0, 0,
-     1,  1, -1,     0,  1,  0,    0, 1,
-    -1,  1, -1,     0,  1,  0,    1, 1,
-    -1, -1, -1,     0, -1,  0,    1, 0,
-     1, -1, -1,     0, -1,  0,    0, 0,
-     1, -1,  1,     0, -1,  0,    0, 1,
-    -1, -1,  1,     0, -1,  0,    1, 1,
-     1,  1,  1,     0,  0,  1,    1, 0,
-    -1,  1,  1,     0,  0,  1,    0, 0,
-    -1, -1,  1,     0,  0,  1,    0, 1,
-     1, -1,  1,     0,  0,  1,    1, 1,
-    -1,  1, -1,     0,  0, -1,    1, 0,
-     1,  1, -1,     0,  0, -1,    0, 0,
-     1, -1, -1,     0,  0, -1,    0, 1,
-    -1, -1, -1,     0,  0, -1,    1, 1,
-  ]);
-  const indices   = new Uint16Array([0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23]);
-
-  const vertexBuffer = createBufferWithData(device, vertexData, GPUBufferUsage.VERTEX);
-  const indicesBuffer = createBufferWithData(device, indices, GPUBufferUsage.INDEX);
-  const numVertices = indices.length;
-
-  const pipeline = device.createRenderPipeline({
-    label: 'textured model with point light w/specular highlight',
-    layout: 'auto',
-    vertex: {
-      module,
-      buffers: [
-        {
-          arrayStride: (3 + 3 + 2) * 4, // 8 floats
-          attributes: [
-            {shaderLocation: 0, offset: 0 * 4, format: 'float32x3'}, // position
-            {shaderLocation: 1, offset: 3 * 4, format: 'float32x3'}, // normal
-            {shaderLocation: 2, offset: 6 * 4, format: 'float32x2'}, // texcoord
-          ],
-        },
-      ],
-    },
-    fragment: {
-      module,
-      targets: [{ format: presentationFormat }],
-    },
-    primitive: {
-      cullMode: 'back',
-    },
-    depthStencil: {
-      depthWriteEnabled: true,
-      depthCompare: 'less',
-      format: 'depth24plus',
-    },
-  });
-
-  const textures = [
-    '😂', '👾', '👍', '👀', '🌞', '🛟',
-  ].map(s => {
-    const size = 128;
-    const ctx = new OffscreenCanvas(size, size).getContext('2d');
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 0, size, size);
-    ctx.font = `${size * 0.9}px sans-serif`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(s, size / 2, size / 2);
-    return createTextureFromSource(device, ctx.canvas, {mips: true});
-  });
-
-  const sampler = device.createSampler({
-    magFilter: 'linear',
-    minFilter: 'linear',
-    mipmapFilter: 'nearest',
-  });
-
-  const numMaterials = 20;
-  const materials = [];
-  for (let i = 0; i < numMaterials; ++i) {
-    const color = hslToRGBA(rand(), rand(0.5, 0.8), rand(0.5, 0.7));
-    const shininess = rand(10, 120);
-
-    const materialValues = new Float32Array([
-      ...color,
-      shininess,
-      0, 0, 0,  // padding
-    ]);
-    const materialUniformBuffer = createBufferWithData(
-      device,
-      materialValues,
-      GPUBufferUsage.UNIFORM,
-    );
-
-    materials.push({
-      materialUniformBuffer,
-      texture: randomArrayElement(textures),
-      sampler,
-    });
-  }
-
-  const globalUniformBufferSize = (16 + 4 + 4) * 4;
-  const globalUniformBuffer = device.createBuffer({
-    label: 'global uniforms',
-    size: globalUniformBufferSize,
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-  });
-
-  const globalUniformValues = new Float32Array(globalUniformBufferSize / 4);
-
-  const kViewProjectionOffset = 0;
-  const kLightWorldPositionOffset = 16;
-  const kViewWorldPositionOffset = 20;
-
-  const viewProjectionValue = globalUniformValues.subarray(
-      kViewProjectionOffset, kViewProjectionOffset + 16);
-  const lightWorldPositionValue = globalUniformValues.subarray(
-      kLightWorldPositionOffset, kLightWorldPositionOffset + 3);
-  const viewWorldPositionValue = globalUniformValues.subarray(
-      kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
-
-  const maxObjects = 20000;
-  const objectInfos = [];
-
-  for (let i = 0; i < maxObjects; ++i) {
-    const material = randomArrayElement(materials);
-
-    const uniformBufferSize = (12 + 16 + 4 + 4) * 4;
-
-    const numBindGroupsUniformPairs = 2;
-    const bindGroupsUniformPairs = [];
-    for (let i = 0; i < numBindGroupsUniformPairs; ++i) {
-      const uniformBuffer = device.createBuffer({
-        label: 'uniforms',
-        size: uniformBufferSize,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-      });
-
-      const bindGroup = device.createBindGroup({
-        label: 'bind group for object',
-        layout: pipeline.getBindGroupLayout(0),
-        entries: [
-          { binding: 0, resource: material.texture.createView() },
-          { binding: 1, resource: material.sampler },
-          { binding: 2, resource: { buffer: uniformBuffer }},
-          { binding: 3, resource: { buffer: globalUniformBuffer }},
-          { binding: 4, resource: { buffer: material.materialUniformBuffer }},
-        ],
-      });
-
-      bindGroupsUniformPairs.push({
-        uniformBuffer,
-        bindGroup,
-      });
-    }
-
-    const uniformValues = new Float32Array(uniformBufferSize / 4);
-
-    // offsets to the various uniform values in float32 indices
-    const kNormalMatrixOffset = 0;
-    const kWorldOffset = 12;
-
-    const normalMatrixValue = uniformValues.subarray(
-        kNormalMatrixOffset, kNormalMatrixOffset + 12);
-    const worldValue = uniformValues.subarray(
-        kWorldOffset, kWorldOffset + 16);
-
-    const axis = vec3.normalize([rand(-1, 1), rand(-1, 1), rand(-1, 1)]);
-    const radius = rand(10, 100);
-    const speed = rand(0.1, 0.4);
-    const rotationSpeed = rand(-1, 1);
-    const scale = rand(2, 10);
-
-    objectInfos.push({
-      bindGroupsUniformPairs,
-
-      uniformValues,
-
-      normalMatrixValue,
-      worldValue,
-
-      axis,
-      radius,
-      speed,
-      rotationSpeed,
-      scale,
-    });
-  }
-
-  const renderPassDescriptor = {
-    label: 'our basic canvas renderPass',
-    colorAttachments: [
-      {
-        // view: <- to be filled out when we render
-        clearValue: [0.3, 0.3, 0.3, 1],
-        loadOp: 'clear',
-        storeOp: 'store',
-      },
-    ],
-    depthStencilAttachment: {
-      // view: <- to be filled out when we render
-      depthClearValue: 1.0,
-      depthLoadOp: 'clear',
-      depthStoreOp: 'store',
-    },
-  };
-
-  const canvasToSizeMap = new WeakMap();
-  const degToRad = d => d * Math.PI / 180;
-
-  const settings = {
-    numObjects: 1000,
-    render: true,
-  };
-
-  const gui = new GUI();
-  gui.add(settings, 'numObjects', { min: 0, max: maxObjects, step: 1});
-  gui.add(settings, 'render');
-
-  let depthTexture;
-  let then = 0;
-  let frameCount = 0;
-
-  function render(time) {
-    time *= 0.001;  // convert to seconds
-    const deltaTime = time - then;
-    then = time;
-    ++frameCount;
-
-    const startTimeMs = performance.now();
-
-    const {width, height} = settings.render
-       ? canvasToSizeMap.get(canvas) ?? canvas
-       : { width: 1, height: 1 };
-
-    // Don't set the canvas size if it's already that size as it may be slow.
-    if (canvas.width !== width || canvas.height !== height) {
-      canvas.width = width;
-      canvas.height = height;
-    }
-
-    // Get the current texture from the canvas context and
-    // set it as the texture to render to.
-    const canvasTexture = context.getCurrentTexture();
-    renderPassDescriptor.colorAttachments[0].view = canvasTexture.createView();
-
-    // If we don't have a depth texture OR if its size is different
-    // from the canvasTexture when make a new depth texture
-    if (!depthTexture ||
-        depthTexture.width !== canvasTexture.width ||
-        depthTexture.height !== canvasTexture.height) {
-      if (depthTexture) {
-        depthTexture.destroy();
-      }
-      depthTexture = device.createTexture({
-        size: [canvasTexture.width, canvasTexture.height],
-        format: 'depth24plus',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-      });
-    }
-    renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
-
-    const encoder = device.createCommandEncoder();
-    const pass = timingHelper.beginRenderPass(encoder, renderPassDescriptor);
-    pass.setPipeline(pipeline);
-    pass.setVertexBuffer(0, vertexBuffer);
-    pass.setIndexBuffer(indicesBuffer, 'uint16');
-
-    const aspect = canvas.clientWidth / canvas.clientHeight;
-    const projection = mat4.perspective(
-        degToRad(60),
-        aspect,
-        1,      // zNear
-        2000,   // zFar
-    );
-
-    const eye = [100, 150, 200];
-    const target = [0, 0, 0];
-    const up = [0, 1, 0];
-
-    // Compute a view matrix
-    const viewMatrix = mat4.lookAt(eye, target, up);
-
-    // Combine the view and projection matrixes
-    mat4.multiply(projection, viewMatrix, viewProjectionValue);
-
-    lightWorldPositionValue.set([-10, 30, 300]);
-    viewWorldPositionValue.set(eye);
-
-    device.queue.writeBuffer(globalUniformBuffer, 0, globalUniformValues);
-
-    let mathElapsedTimeMs = 0;
-
-    for (let i = 0; i < settings.numObjects; ++i) {
-      const {
-        bindGroupsUniformPairs,
-        uniformValues,
-        normalMatrixValue,
-        worldValue,
-
-        axis,
-        radius,
-        speed,
-        rotationSpeed,
-        scale,
-      } = objectInfos[i];
-      const mathTimeStartMs = performance.now();
-
-      // Compute a world matrix
-      mat4.identity(worldValue);
-      mat4.axisRotate(worldValue, axis, i + time * speed, worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], worldValue);
-      mat4.rotateX(worldValue, time * rotationSpeed + i, worldValue);
-      mat4.scale(worldValue, [scale, scale, scale], worldValue);
-
-      // Inverse and transpose it into the normalMatrix value
-      mat3.fromMat4(mat4.transpose(mat4.inverse(worldValue)), normalMatrixValue);
-
-      mathElapsedTimeMs += performance.now() - mathTimeStartMs;
-
-      const {uniformBuffer} = bindGroupsUniformPairs[frameCount % 2];
-      const {bindGroup} = bindGroupsUniformPairs[(frameCount + 1) % 2];
-
-      // upload the uniform values to the uniform buffer
-      device.queue.writeBuffer(uniformBuffer, 0, uniformValues);
-
-      pass.setBindGroup(0, bindGroup);
-      pass.drawIndexed(numVertices);
-    }
-
-    pass.end();
-
-    const commandBuffer = encoder.finish();
-    device.queue.submit([commandBuffer]);
-
-    timingHelper.getResult().then(gpuTime => {
-      gpuAverage.addSample(gpuTime / 1000);
-    });
-
-    const elapsedTimeMs = performance.now() - startTimeMs;
-    fpsAverage.addSample(1 / deltaTime);
-    jsAverage.addSample(elapsedTimeMs);
-    mathAverage.addSample(mathElapsedTimeMs);
-
-    infoElem.textContent = `\
-js  : ${jsAverage.get().toFixed(1)}ms
-math: ${mathAverage.get().toFixed(1)}ms
-fps : ${fpsAverage.get().toFixed(0)}
-gpu : ${canTimestamp ? `${(gpuAverage.get() / 1000).toFixed(1)}ms` : 'N/A'}
-`;
-
-    requestAnimationFrame(render);
-  }
-  requestAnimationFrame(render);
-
-  const observer = new ResizeObserver(entries => {
-    entries.forEach(entry => {
-      canvasToSizeMap.set(entry.target, {
-        width: Math.max(1, Math.min(entry.contentBoxSize[0].inlineSize, device.limits.maxTextureDimension2D)),
-        height: Math.max(1, Math.min(entry.contentBoxSize[0].blockSize, device.limits.maxTextureDimension2D)),
-      });
-    });
-  });
-  observer.observe(canvas);
-}
-
-function fail(msg) {
-  alert(msg);
-}
-
-main();
-  </script>
-</html>
diff --git a/webgpu/webgpu-optimization-step5-double-buffer-frequently-updated-uniform-buffers.html b/webgpu/webgpu-optimization-step5-double-buffer-frequently-updated-uniform-buffers.html
deleted file mode 100644
index 93416361..00000000
--- a/webgpu/webgpu-optimization-step5-double-buffer-frequently-updated-uniform-buffers.html
+++ /dev/null
@@ -1,615 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-    <title>WebGPU Optimization - None</title>
-    <style>
-      @import url(resources/webgpu-lesson.css);
-html, body {
-  margin: 0;       /* remove the default margin          */
-  height: 100%;    /* make the html,body fill the page   */
-}
-canvas {
-  display: block;  /* make the canvas act like a block   */
-  width: 100%;     /* make the canvas fill its container */
-  height: 100%;
-}
-:root {
-  --bg-color: #fff;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #000;
-  }
-}
-canvas {
-  background-color: var(--bg-color);
-}
-#info {
-  position: absolute;
-  left: 0;
-  top: 0;
-  padding: 0.5em;
-  margin: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  min-width: 8em;
-}
-    </style>
-  </head>
-  <body>
-    <canvas></canvas>
-    <pre id="info"></pre>
-  </body>
-  <script type="module">
-import GUI from '../3rdparty/muigui-0.x.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-utils.html#webgpu-utils
-import {createTextureFromSource} from '../3rdparty/webgpu-utils-1.x.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-matrix-math.html
-import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
-import TimingHelper from './resources/js/timing-helper.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
-import RollingAverage from './resources/js/rolling-average.js';
-
-const fpsAverage = new RollingAverage();
-const jsAverage = new RollingAverage();
-const gpuAverage = new RollingAverage();
-const mathAverage = new RollingAverage();
-
-/** Given a css color string, return an array of 4 values from 0 to 255 */
-const cssColorToRGBA8 = (() => {
-  const canvas = new OffscreenCanvas(1, 1);
-  const ctx = canvas.getContext('2d', {willReadFrequently: true});
-  return cssColor => {
-    ctx.clearRect(0, 0, 1, 1);
-    ctx.fillStyle = cssColor;
-    ctx.fillRect(0, 0, 1, 1);
-    return Array.from(ctx.getImageData(0, 0, 1, 1).data);
-  };
-})();
-
-/** Given a css color string, return an array of 4 values from 0 to 1 */
-const cssColorToRGBA = cssColor => cssColorToRGBA8(cssColor).map(v => v / 255);
-
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * return the corresponding CSS hsl string
- */
-const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
-
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * returns an array of 4 values from 0 to 1
- */
-const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
-
-/**
- * Returns a random number between min and max.
- * If min and max are not specified, returns 0 to 1
- * If max is not specified, return 0 to min.
- */
-function rand(min, max) {
-  if (min === undefined) {
-    max = 1;
-    min = 0;
-  } else if (max === undefined) {
-    max = min;
-    min = 0;
-  }
-  return Math.random() * (max - min) + min;
-}
-
-/** Selects a random array element */
-const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
-
-async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
-  const canTimestamp = adapter.features.has('timestamp-query');
-  const device = await adapter?.requestDevice({
-    requiredFeatures: [
-      ...(canTimestamp ? ['timestamp-query'] : []),
-     ],
-  });
-  if (!device) {
-    fail('could not init WebGPU');
-  }
-
-  const timingHelper = new TimingHelper(device);
-  const infoElem = document.querySelector('#info');
-
-  // Get a WebGPU context from the canvas and configure it
-  const canvas = document.querySelector('canvas');
-  const context = canvas.getContext('webgpu');
-  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-  context.configure({
-    device,
-    format: presentationFormat,
-    alphaMode: 'premultiplied',
-  });
-
-  const module = device.createShaderModule({
-    code: `
-      struct GlobalUniforms {
-        viewProjection: mat4x4f,
-        lightWorldPosition: vec3f,
-        viewWorldPosition: vec3f,
-      };
-
-      struct MaterialUniforms {
-        color: vec4f,
-        shininess: f32,
-      };
-
-      struct PerObjectUniforms {
-        normalMatrix: mat3x3f,
-        world: mat4x4f,
-      };
-
-      struct Vertex {
-        @location(0) position: vec4f,
-        @location(1) normal: vec3f,
-        @location(2) texcoord: vec2f,
-      };
-
-      struct VSOutput {
-        @builtin(position) position: vec4f,
-        @location(0) normal: vec3f,
-        @location(1) surfaceToLight: vec3f,
-        @location(2) surfaceToView: vec3f,
-        @location(3) texcoord: vec2f,
-      };
-
-      @group(0) @binding(0) var diffuseTexture: texture_2d<f32>;
-      @group(0) @binding(1) var diffuseSampler: sampler;
-      @group(0) @binding(2) var<uniform> obj: PerObjectUniforms;
-      @group(0) @binding(3) var<uniform> glb: GlobalUniforms;
-      @group(0) @binding(4) var<uniform> material: MaterialUniforms;
-
-      @vertex fn vs(vert: Vertex) -> VSOutput {
-        var vsOut: VSOutput;
-        vsOut.position = glb.viewProjection * obj.world * vert.position;
-
-        // Orient the normals and pass to the fragment shader
-        vsOut.normal = obj.normalMatrix * vert.normal;
-
-        // Compute the world position of the surface
-        let surfaceWorldPosition = (obj.world * vert.position).xyz;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToLight = glb.lightWorldPosition - surfaceWorldPosition;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToView = glb.viewWorldPosition - surfaceWorldPosition;
-
-        // Pass the texture coord on to the fragment shader
-        vsOut.texcoord = vert.texcoord;
-
-        return vsOut;
-      }
-
-      @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
-        // Because vsOut.normal is an inter-stage variable 
-        // it's interpolated so it will not be a unit vector.
-        // Normalizing it will make it a unit vector again
-        let normal = normalize(vsOut.normal);
-
-        let surfaceToLightDirection = normalize(vsOut.surfaceToLight);
-        let surfaceToViewDirection = normalize(vsOut.surfaceToView);
-        let halfVector = normalize(
-          surfaceToLightDirection + surfaceToViewDirection);
-
-        // Compute the light by taking the dot product
-        // of the normal with the direction to the light
-        let light = dot(normal, surfaceToLightDirection);
-
-        var specular = dot(normal, halfVector);
-        specular = select(
-            0.0,                           // value if condition is false
-            pow(specular, material.shininess),  // value if condition is true
-            specular > 0.0);               // condition
-
-        let diffuse = material.color * textureSample(diffuseTexture, diffuseSampler, vsOut.texcoord);
-        // Lets multiply just the color portion (not the alpha)
-        // by the light
-        let color = diffuse.rgb * light + specular;
-        return vec4f(color, diffuse.a);
-      }
-    `,
-  });
-
-  function createBufferWithData(device, data, usage) {
-    const buffer = device.createBuffer({
-      size: data.byteLength,
-      usage: usage,
-      mappedAtCreation: true,
-    });
-    const dst = new Uint8Array(buffer.getMappedRange());
-    dst.set(new Uint8Array(data.buffer));
-    buffer.unmap();
-    return buffer;
-  }
-
-  const vertexData = new Float32Array([
-  // position       normal        texcoord
-     1,  1, -1,     1,  0,  0,    1, 0,
-     1,  1,  1,     1,  0,  0,    0, 0,
-     1, -1,  1,     1,  0,  0,    0, 1,
-     1, -1, -1,     1,  0,  0,    1, 1,
-    -1,  1,  1,    -1,  0,  0,    1, 0,
-    -1,  1, -1,    -1,  0,  0,    0, 0,
-    -1, -1, -1,    -1,  0,  0,    0, 1,
-    -1, -1,  1,    -1,  0,  0,    1, 1,
-    -1,  1,  1,     0,  1,  0,    1, 0,
-     1,  1,  1,     0,  1,  0,    0, 0,
-     1,  1, -1,     0,  1,  0,    0, 1,
-    -1,  1, -1,     0,  1,  0,    1, 1,
-    -1, -1, -1,     0, -1,  0,    1, 0,
-     1, -1, -1,     0, -1,  0,    0, 0,
-     1, -1,  1,     0, -1,  0,    0, 1,
-    -1, -1,  1,     0, -1,  0,    1, 1,
-     1,  1,  1,     0,  0,  1,    1, 0,
-    -1,  1,  1,     0,  0,  1,    0, 0,
-    -1, -1,  1,     0,  0,  1,    0, 1,
-     1, -1,  1,     0,  0,  1,    1, 1,
-    -1,  1, -1,     0,  0, -1,    1, 0,
-     1,  1, -1,     0,  0, -1,    0, 0,
-     1, -1, -1,     0,  0, -1,    0, 1,
-    -1, -1, -1,     0,  0, -1,    1, 1,
-  ]);
-  const indices   = new Uint16Array([0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23]);
-
-  const vertexBuffer = createBufferWithData(device, vertexData, GPUBufferUsage.VERTEX);
-  const indicesBuffer = createBufferWithData(device, indices, GPUBufferUsage.INDEX);
-  const numVertices = indices.length;
-
-  const pipeline = device.createRenderPipeline({
-    label: 'textured model with point light w/specular highlight',
-    layout: 'auto',
-    vertex: {
-      module,
-      buffers: [
-        {
-          arrayStride: (3 + 3 + 2) * 4, // 8 floats
-          attributes: [
-            {shaderLocation: 0, offset: 0 * 4, format: 'float32x3'}, // position
-            {shaderLocation: 1, offset: 3 * 4, format: 'float32x3'}, // normal
-            {shaderLocation: 2, offset: 6 * 4, format: 'float32x2'}, // texcoord
-          ],
-        },
-      ],
-    },
-    fragment: {
-      module,
-      targets: [{ format: presentationFormat }],
-    },
-    primitive: {
-      cullMode: 'back',
-    },
-    depthStencil: {
-      depthWriteEnabled: true,
-      depthCompare: 'less',
-      format: 'depth24plus',
-    },
-  });
-
-  const textures = [
-    '😂', '👾', '👍', '👀', '🌞', '🛟',
-  ].map(s => {
-    const size = 128;
-    const ctx = new OffscreenCanvas(size, size).getContext('2d');
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 0, size, size);
-    ctx.font = `${size * 0.9}px sans-serif`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(s, size / 2, size / 2);
-    return createTextureFromSource(device, ctx.canvas, {mips: true});
-  });
-
-  const sampler = device.createSampler({
-    magFilter: 'linear',
-    minFilter: 'linear',
-    mipmapFilter: 'nearest',
-  });
-
-  const numMaterials = 20;
-  const materials = [];
-  for (let i = 0; i < numMaterials; ++i) {
-    const color = hslToRGBA(rand(), rand(0.5, 0.8), rand(0.5, 0.7));
-    const shininess = rand(10, 120);
-
-    const materialValues = new Float32Array([
-      ...color,
-      shininess,
-      0, 0, 0,  // padding
-    ]);
-    const materialUniformBuffer = createBufferWithData(
-      device,
-      materialValues,
-      GPUBufferUsage.UNIFORM,
-    );
-
-    materials.push({
-      materialUniformBuffer,
-      texture: randomArrayElement(textures),
-      sampler,
-    });
-  }
-
-  const globalUniformBufferSize = (16 + 4 + 4) * 4;
-  const globalUniformBuffer = device.createBuffer({
-    label: 'global uniforms',
-    size: globalUniformBufferSize,
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-  });
-
-  const globalUniformValues = new Float32Array(globalUniformBufferSize / 4);
-
-  const kViewProjectionOffset = 0;
-  const kLightWorldPositionOffset = 16;
-  const kViewWorldPositionOffset = 20;
-
-  const viewProjectionValue = globalUniformValues.subarray(
-      kViewProjectionOffset, kViewProjectionOffset + 16);
-  const lightWorldPositionValue = globalUniformValues.subarray(
-      kLightWorldPositionOffset, kLightWorldPositionOffset + 3);
-  const viewWorldPositionValue = globalUniformValues.subarray(
-      kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
-
-  const maxObjects = 20000;
-  const objectInfos = [];
-
-  for (let i = 0; i < maxObjects; ++i) {
-    const material = randomArrayElement(materials);
-
-    const uniformBufferSize = (12 + 16 + 4 + 4) * 4;
-
-    const numBindGroupsUniformPairs = 2;
-    const bindGroupsUniformPairs = [];
-    for (let i = 0; i < numBindGroupsUniformPairs; ++i) {
-      const uniformBuffer = device.createBuffer({
-        label: 'uniforms',
-        size: uniformBufferSize,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-      });
-
-      const bindGroup = device.createBindGroup({
-        label: 'bind group for object',
-        layout: pipeline.getBindGroupLayout(0),
-        entries: [
-          { binding: 0, resource: material.texture.createView() },
-          { binding: 1, resource: material.sampler },
-          { binding: 2, resource: { buffer: uniformBuffer }},
-          { binding: 3, resource: { buffer: globalUniformBuffer }},
-          { binding: 4, resource: { buffer: material.materialUniformBuffer }},
-        ],
-      });
-
-      bindGroupsUniformPairs.push({
-        uniformBuffer,
-        bindGroup,
-      });
-    }
-
-    const uniformValues = new Float32Array(uniformBufferSize / 4);
-
-    // offsets to the various uniform values in float32 indices
-    const kNormalMatrixOffset = 0;
-    const kWorldOffset = 12;
-
-    const normalMatrixValue = uniformValues.subarray(
-        kNormalMatrixOffset, kNormalMatrixOffset + 12);
-    const worldValue = uniformValues.subarray(
-        kWorldOffset, kWorldOffset + 16);
-
-    const axis = vec3.normalize([rand(-1, 1), rand(-1, 1), rand(-1, 1)]);
-    const radius = rand(10, 100);
-    const speed = rand(0.1, 0.4);
-    const rotationSpeed = rand(-1, 1);
-    const scale = rand(2, 10);
-
-    objectInfos.push({
-      bindGroupsUniformPairs,
-
-      uniformValues,
-
-      normalMatrixValue,
-      worldValue,
-
-      axis,
-      radius,
-      speed,
-      rotationSpeed,
-      scale,
-    });
-  }
-
-  const renderPassDescriptor = {
-    label: 'our basic canvas renderPass',
-    colorAttachments: [
-      {
-        // view: <- to be filled out when we render
-        clearValue: [0.3, 0.3, 0.3, 1],
-        loadOp: 'clear',
-        storeOp: 'store',
-      },
-    ],
-    depthStencilAttachment: {
-      // view: <- to be filled out when we render
-      depthClearValue: 1.0,
-      depthLoadOp: 'clear',
-      depthStoreOp: 'store',
-    },
-  };
-
-  const canvasToSizeMap = new WeakMap();
-  const degToRad = d => d * Math.PI / 180;
-
-  const settings = {
-    numObjects: 1000,
-    render: true,
-  };
-
-  const gui = new GUI();
-  gui.add(settings, 'numObjects', { min: 0, max: maxObjects, step: 1});
-  gui.add(settings, 'render');
-
-  let depthTexture;
-  let then = 0;
-  let frameCount = 0;
-
-  function render(time) {
-    time *= 0.001;  // convert to seconds
-    const deltaTime = time - then;
-    then = time;
-    ++frameCount;
-
-    const startTimeMs = performance.now();
-
-    const {width, height} = settings.render
-       ? canvasToSizeMap.get(canvas) ?? canvas
-       : { width: 1, height: 1 };
-
-    // Don't set the canvas size if it's already that size as it may be slow.
-    if (canvas.width !== width || canvas.height !== height) {
-      canvas.width = width;
-      canvas.height = height;
-    }
-
-    // Get the current texture from the canvas context and
-    // set it as the texture to render to.
-    const canvasTexture = context.getCurrentTexture();
-    renderPassDescriptor.colorAttachments[0].view = canvasTexture.createView();
-
-    // If we don't have a depth texture OR if its size is different
-    // from the canvasTexture when make a new depth texture
-    if (!depthTexture ||
-        depthTexture.width !== canvasTexture.width ||
-        depthTexture.height !== canvasTexture.height) {
-      if (depthTexture) {
-        depthTexture.destroy();
-      }
-      depthTexture = device.createTexture({
-        size: [canvasTexture.width, canvasTexture.height],
-        format: 'depth24plus',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-      });
-    }
-    renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
-
-    const encoder = device.createCommandEncoder();
-    const pass = timingHelper.beginRenderPass(encoder, renderPassDescriptor);
-    pass.setPipeline(pipeline);
-    pass.setVertexBuffer(0, vertexBuffer);
-    pass.setIndexBuffer(indicesBuffer, 'uint16');
-
-    const aspect = canvas.clientWidth / canvas.clientHeight;
-    const projection = mat4.perspective(
-        degToRad(60),
-        aspect,
-        1,      // zNear
-        2000,   // zFar
-    );
-
-    const eye = [100, 150, 200];
-    const target = [0, 0, 0];
-    const up = [0, 1, 0];
-
-    // Compute a view matrix
-    const viewMatrix = mat4.lookAt(eye, target, up);
-
-    // Combine the view and projection matrixes
-    mat4.multiply(projection, viewMatrix, viewProjectionValue);
-
-    lightWorldPositionValue.set([-10, 30, 300]);
-    viewWorldPositionValue.set(eye);
-
-    device.queue.writeBuffer(globalUniformBuffer, 0, globalUniformValues);
-
-    let mathElapsedTimeMs = 0;
-
-    for (let i = 0; i < settings.numObjects; ++i) {
-      const {
-        bindGroupsUniformPairs,
-        uniformValues,
-        normalMatrixValue,
-        worldValue,
-
-        axis,
-        radius,
-        speed,
-        rotationSpeed,
-        scale,
-      } = objectInfos[i];
-      const mathTimeStartMs = performance.now();
-
-      // Compute a world matrix
-      mat4.identity(worldValue);
-      mat4.axisRotate(worldValue, axis, i + time * speed, worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], worldValue);
-      mat4.rotateX(worldValue, time * rotationSpeed + i, worldValue);
-      mat4.scale(worldValue, [scale, scale, scale], worldValue);
-
-      // Inverse and transpose it into the normalMatrix value
-      mat3.fromMat4(mat4.transpose(mat4.inverse(worldValue)), normalMatrixValue);
-
-      mathElapsedTimeMs += performance.now() - mathTimeStartMs;
-
-      const {uniformBuffer} = bindGroupsUniformPairs[frameCount % 2];
-      const {bindGroup} = bindGroupsUniformPairs[(frameCount + 1) % 2];
-
-      // upload the uniform values to the uniform buffer
-      device.queue.writeBuffer(uniformBuffer, 0, uniformValues);
-
-      pass.setBindGroup(0, bindGroup);
-      pass.drawIndexed(numVertices);
-    }
-
-    pass.end();
-
-    const commandBuffer = encoder.finish();
-    device.queue.submit([commandBuffer]);
-
-    timingHelper.getResult().then(gpuTime => {
-      gpuAverage.addSample(gpuTime / 1000);
-    });
-
-    const elapsedTimeMs = performance.now() - startTimeMs;
-    fpsAverage.addSample(1 / deltaTime);
-    jsAverage.addSample(elapsedTimeMs);
-    mathAverage.addSample(mathElapsedTimeMs);
-
-    infoElem.textContent = `\
-js  : ${jsAverage.get().toFixed(1)}ms
-math: ${mathAverage.get().toFixed(1)}ms
-fps : ${fpsAverage.get().toFixed(0)}
-gpu : ${canTimestamp ? `${(gpuAverage.get() / 1000).toFixed(1)}ms` : 'N/A'}
-`;
-
-    requestAnimationFrame(render);
-  }
-  requestAnimationFrame(render);
-
-  const observer = new ResizeObserver(entries => {
-    entries.forEach(entry => {
-      canvasToSizeMap.set(entry.target, {
-        width: Math.max(1, Math.min(entry.contentBoxSize[0].inlineSize, device.limits.maxTextureDimension2D)),
-        height: Math.max(1, Math.min(entry.contentBoxSize[0].blockSize, device.limits.maxTextureDimension2D)),
-      });
-    });
-  });
-  observer.observe(canvas);
-}
-
-function fail(msg) {
-  alert(msg);
-}
-
-main();
-  </script>
-</html>
diff --git a/webgpu/webgpu-optimization-step5-use-buffer-offsets.html b/webgpu/webgpu-optimization-step5-use-buffer-offsets.html
index 18e5b0b4..9b3e325c 100644
--- a/webgpu/webgpu-optimization-step5-use-buffer-offsets.html
+++ b/webgpu/webgpu-optimization-step5-use-buffer-offsets.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-    <title>WebGPU Optimization - None</title>
+    <title>WebGPU Optimization - Use One Large Uniform Buffer with Offsets</title>
     <style>
       @import url(resources/webgpu-lesson.css);
 html, body {
@@ -363,7 +363,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   const uniformBufferSize = (12 + 16) * 4;
diff --git a/webgpu/webgpu-optimization-step6-use-mapped-buffers-2-command-buffers.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers-2-command-buffers.html
deleted file mode 100644
index 3a182bf9..00000000
--- a/webgpu/webgpu-optimization-step6-use-mapped-buffers-2-command-buffers.html
+++ /dev/null
@@ -1,619 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-    <title>WebGPU Optimization - None</title>
-    <style>
-      @import url(resources/webgpu-lesson.css);
-html, body {
-  margin: 0;       /* remove the default margin          */
-  height: 100%;    /* make the html,body fill the page   */
-}
-canvas {
-  display: block;  /* make the canvas act like a block   */
-  width: 100%;     /* make the canvas fill its container */
-  height: 100%;
-}
-:root {
-  --bg-color: #fff;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #000;
-  }
-}
-canvas {
-  background-color: var(--bg-color);
-}
-#info {
-  position: absolute;
-  left: 0;
-  top: 0;
-  padding: 0.5em;
-  margin: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  min-width: 8em;
-}
-    </style>
-  </head>
-  <body>
-    <canvas></canvas>
-    <pre id="info"></pre>
-  </body>
-  <script type="module">
-import GUI from '../3rdparty/muigui-0.x.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-utils.html#webgpu-utils
-import {createTextureFromSource} from '../3rdparty/webgpu-utils-1.x.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-matrix-math.html
-import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
-import TimingHelper from './resources/js/timing-helper.js';
-// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
-import RollingAverage from './resources/js/rolling-average.js';
-
-const fpsAverage = new RollingAverage();
-const jsAverage = new RollingAverage();
-const gpuAverage = new RollingAverage();
-const mathAverage = new RollingAverage();
-
-/** Given a css color string, return an array of 4 values from 0 to 255 */
-const cssColorToRGBA8 = (() => {
-  const canvas = new OffscreenCanvas(1, 1);
-  const ctx = canvas.getContext('2d', {willReadFrequently: true});
-  return cssColor => {
-    ctx.clearRect(0, 0, 1, 1);
-    ctx.fillStyle = cssColor;
-    ctx.fillRect(0, 0, 1, 1);
-    return Array.from(ctx.getImageData(0, 0, 1, 1).data);
-  };
-})();
-
-/** Given a css color string, return an array of 4 values from 0 to 1 */
-const cssColorToRGBA = cssColor => cssColorToRGBA8(cssColor).map(v => v / 255);
-
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * return the corresponding CSS hsl string
- */
-const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
-
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * returns an array of 4 values from 0 to 1
- */
-const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
-
-/**
- * Returns a random number between min and max.
- * If min and max are not specified, returns 0 to 1
- * If max is not specified, return 0 to min.
- */
-function rand(min, max) {
-  if (min === undefined) {
-    max = 1;
-    min = 0;
-  } else if (max === undefined) {
-    max = min;
-    min = 0;
-  }
-  return Math.random() * (max - min) + min;
-}
-
-/** Selects a random array element */
-const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
-
-/** Rounds up v to a multiple of alignment */
-const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
-
-async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
-  const canTimestamp = adapter.features.has('timestamp-query');
-  const device = await adapter?.requestDevice({
-    requiredFeatures: [
-      ...(canTimestamp ? ['timestamp-query'] : []),
-     ],
-  });
-  if (!device) {
-    fail('could not init WebGPU');
-  }
-
-  const timingHelper = new TimingHelper(device);
-  const infoElem = document.querySelector('#info');
-
-  // Get a WebGPU context from the canvas and configure it
-  const canvas = document.querySelector('canvas');
-  const context = canvas.getContext('webgpu');
-  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-  context.configure({
-    device,
-    format: presentationFormat,
-    alphaMode: 'premultiplied',
-  });
-
-  const module = device.createShaderModule({
-    code: `
-      struct GlobalUniforms {
-        viewProjection: mat4x4f,
-        lightWorldPosition: vec3f,
-        viewWorldPosition: vec3f,
-      };
-
-      struct MaterialUniforms {
-        color: vec4f,
-        shininess: f32,
-      };
-
-      struct PerObjectUniforms {
-        normalMatrix: mat3x3f,
-        world: mat4x4f,
-      };
-
-      struct Vertex {
-        @location(0) position: vec4f,
-        @location(1) normal: vec3f,
-        @location(2) texcoord: vec2f,
-      };
-
-      struct VSOutput {
-        @builtin(position) position: vec4f,
-        @location(0) normal: vec3f,
-        @location(1) surfaceToLight: vec3f,
-        @location(2) surfaceToView: vec3f,
-        @location(3) texcoord: vec2f,
-      };
-
-      @group(0) @binding(0) var diffuseTexture: texture_2d<f32>;
-      @group(0) @binding(1) var diffuseSampler: sampler;
-      @group(0) @binding(2) var<uniform> obj: PerObjectUniforms;
-      @group(0) @binding(3) var<uniform> glb: GlobalUniforms;
-      @group(0) @binding(4) var<uniform> material: MaterialUniforms;
-
-      @vertex fn vs(vert: Vertex) -> VSOutput {
-        var vsOut: VSOutput;
-        vsOut.position = glb.viewProjection * obj.world * vert.position;
-
-        // Orient the normals and pass to the fragment shader
-        vsOut.normal = obj.normalMatrix * vert.normal;
-
-        // Compute the world position of the surface
-        let surfaceWorldPosition = (obj.world * vert.position).xyz;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToLight = glb.lightWorldPosition - surfaceWorldPosition;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToView = glb.viewWorldPosition - surfaceWorldPosition;
-
-        // Pass the texture coord on to the fragment shader
-        vsOut.texcoord = vert.texcoord;
-
-        return vsOut;
-      }
-
-      @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
-        // Because vsOut.normal is an inter-stage variable 
-        // it's interpolated so it will not be a unit vector.
-        // Normalizing it will make it a unit vector again
-        let normal = normalize(vsOut.normal);
-
-        let surfaceToLightDirection = normalize(vsOut.surfaceToLight);
-        let surfaceToViewDirection = normalize(vsOut.surfaceToView);
-        let halfVector = normalize(
-          surfaceToLightDirection + surfaceToViewDirection);
-
-        // Compute the light by taking the dot product
-        // of the normal with the direction to the light
-        let light = dot(normal, surfaceToLightDirection);
-
-        var specular = dot(normal, halfVector);
-        specular = select(
-            0.0,                           // value if condition is false
-            pow(specular, material.shininess),  // value if condition is true
-            specular > 0.0);               // condition
-
-        let diffuse = material.color * textureSample(diffuseTexture, diffuseSampler, vsOut.texcoord);
-        // Lets multiply just the color portion (not the alpha)
-        // by the light
-        let color = diffuse.rgb * light + specular;
-        return vec4f(color, diffuse.a);
-      }
-    `,
-  });
-
-  function createBufferWithData(device, data, usage) {
-    const buffer = device.createBuffer({
-      size: data.byteLength,
-      usage: usage,
-      mappedAtCreation: true,
-    });
-    const dst = new Uint8Array(buffer.getMappedRange());
-    dst.set(new Uint8Array(data.buffer));
-    buffer.unmap();
-    return buffer;
-  }
-
-  const vertexData = new Float32Array([
-  // position       normal        texcoord
-     1,  1, -1,     1,  0,  0,    1, 0,
-     1,  1,  1,     1,  0,  0,    0, 0,
-     1, -1,  1,     1,  0,  0,    0, 1,
-     1, -1, -1,     1,  0,  0,    1, 1,
-    -1,  1,  1,    -1,  0,  0,    1, 0,
-    -1,  1, -1,    -1,  0,  0,    0, 0,
-    -1, -1, -1,    -1,  0,  0,    0, 1,
-    -1, -1,  1,    -1,  0,  0,    1, 1,
-    -1,  1,  1,     0,  1,  0,    1, 0,
-     1,  1,  1,     0,  1,  0,    0, 0,
-     1,  1, -1,     0,  1,  0,    0, 1,
-    -1,  1, -1,     0,  1,  0,    1, 1,
-    -1, -1, -1,     0, -1,  0,    1, 0,
-     1, -1, -1,     0, -1,  0,    0, 0,
-     1, -1,  1,     0, -1,  0,    0, 1,
-    -1, -1,  1,     0, -1,  0,    1, 1,
-     1,  1,  1,     0,  0,  1,    1, 0,
-    -1,  1,  1,     0,  0,  1,    0, 0,
-    -1, -1,  1,     0,  0,  1,    0, 1,
-     1, -1,  1,     0,  0,  1,    1, 1,
-    -1,  1, -1,     0,  0, -1,    1, 0,
-     1,  1, -1,     0,  0, -1,    0, 0,
-     1, -1, -1,     0,  0, -1,    0, 1,
-    -1, -1, -1,     0,  0, -1,    1, 1,
-  ]);
-  const indices   = new Uint16Array([0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23]);
-
-  const vertexBuffer = createBufferWithData(device, vertexData, GPUBufferUsage.VERTEX);
-  const indicesBuffer = createBufferWithData(device, indices, GPUBufferUsage.INDEX);
-  const numVertices = indices.length;
-
-  const pipeline = device.createRenderPipeline({
-    label: 'textured model with point light w/specular highlight',
-    layout: 'auto',
-    vertex: {
-      module,
-      buffers: [
-        {
-          arrayStride: (3 + 3 + 2) * 4, // 8 floats
-          attributes: [
-            {shaderLocation: 0, offset: 0 * 4, format: 'float32x3'}, // position
-            {shaderLocation: 1, offset: 3 * 4, format: 'float32x3'}, // normal
-            {shaderLocation: 2, offset: 6 * 4, format: 'float32x2'}, // texcoord
-          ],
-        },
-      ],
-    },
-    fragment: {
-      module,
-      targets: [{ format: presentationFormat }],
-    },
-    primitive: {
-      cullMode: 'back',
-    },
-    depthStencil: {
-      depthWriteEnabled: true,
-      depthCompare: 'less',
-      format: 'depth24plus',
-    },
-  });
-
-  const textures = [
-    '😂', '👾', '👍', '👀', '🌞', '🛟',
-  ].map(s => {
-    const size = 128;
-    const ctx = new OffscreenCanvas(size, size).getContext('2d');
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 0, size, size);
-    ctx.font = `${size * 0.9}px sans-serif`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(s, size / 2, size / 2);
-    return createTextureFromSource(device, ctx.canvas, {mips: true});
-  });
-
-  const sampler = device.createSampler({
-    magFilter: 'linear',
-    minFilter: 'linear',
-    mipmapFilter: 'nearest',
-  });
-
-  const numMaterials = 20;
-  const materials = [];
-  for (let i = 0; i < numMaterials; ++i) {
-    const color = hslToRGBA(rand(), rand(0.5, 0.8), rand(0.5, 0.7));
-    const shininess = rand(10, 120);
-
-    const materialValues = new Float32Array([
-      ...color,
-      shininess,
-      0, 0, 0,  // padding
-    ]);
-    const materialUniformBuffer = createBufferWithData(
-      device,
-      materialValues,
-      GPUBufferUsage.UNIFORM,
-    );
-
-    materials.push({
-      materialUniformBuffer,
-      texture: randomArrayElement(textures),
-      sampler,
-    });
-  }
-
-  const globalUniformBufferSize = (16 + 4 + 4) * 4;
-  const globalUniformBuffer = device.createBuffer({
-    label: 'global uniforms',
-    size: globalUniformBufferSize,
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-  });
-
-  const globalUniformValues = new Float32Array(globalUniformBufferSize / 4);
-
-  const kViewProjectionOffset = 0;
-  const kLightWorldPositionOffset = 16;
-  const kViewWorldPositionOffset = 20;
-
-  const viewProjectionValue = globalUniformValues.subarray(
-      kViewProjectionOffset, kViewProjectionOffset + 16);
-  const lightWorldPositionValue = globalUniformValues.subarray(
-      kLightWorldPositionOffset, kLightWorldPositionOffset + 3);
-  const viewWorldPositionValue = globalUniformValues.subarray(
-      kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
-
-  const maxObjects = 20000;
-  const objectInfos = [];
-
-  const uniformBufferSize = (12 + 16) * 4;
-  const uniformBufferSpace = roundUp(uniformBufferSize, device.limits.minUniformBufferOffsetAlignment);
-  const uniformBuffer = device.createBuffer({
-    label: 'uniforms',
-    size: uniformBufferSpace * maxObjects,
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-  });
-
-  const mappedTransferBuffers = [];
-  const getMappedTransferBuffer = () => {
-    return mappedTransferBuffers.pop() || device.createBuffer({
-      label: 'transfer buffer',
-      size: uniformBufferSpace * maxObjects,
-      usage: GPUBufferUsage.MAP_WRITE | GPUBufferUsage.COPY_SRC,
-      mappedAtCreation: true,
-    });
-  };
-  // offsets to the various uniform values in float32 indices
-  const kNormalMatrixOffset = 0;
-  const kWorldOffset = 12;
-
-  for (let i = 0; i < maxObjects; ++i) {
-    const uniformBufferOffset = i * uniformBufferSpace;
-
-    const material = randomArrayElement(materials);
-
-    const bindGroup = device.createBindGroup({
-      label: 'bind group for object',
-      layout: pipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: material.texture.createView() },
-        { binding: 1, resource: material.sampler },
-        { binding: 2, resource: { buffer: uniformBuffer, offset: uniformBufferOffset, size: uniformBufferSize }},
-        { binding: 3, resource: { buffer: globalUniformBuffer }},
-        { binding: 4, resource: { buffer: material.materialUniformBuffer }},
-      ],
-    });
-
-    const axis = vec3.normalize([rand(-1, 1), rand(-1, 1), rand(-1, 1)]);
-    const radius = rand(10, 100);
-    const speed = rand(0.1, 0.4);
-    const rotationSpeed = rand(-1, 1);
-    const scale = rand(2, 10);
-
-    objectInfos.push({
-      bindGroup,
-
-      axis,
-      radius,
-      speed,
-      rotationSpeed,
-      scale,
-    });
-  }
-
-  const renderPassDescriptor = {
-    label: 'our basic canvas renderPass',
-    colorAttachments: [
-      {
-        // view: <- to be filled out when we render
-        clearValue: [0.3, 0.3, 0.3, 1],
-        loadOp: 'clear',
-        storeOp: 'store',
-      },
-    ],
-    depthStencilAttachment: {
-      // view: <- to be filled out when we render
-      depthClearValue: 1.0,
-      depthLoadOp: 'clear',
-      depthStoreOp: 'store',
-    },
-  };
-
-  const canvasToSizeMap = new WeakMap();
-  const degToRad = d => d * Math.PI / 180;
-
-  const settings = {
-    numObjects: 1000,
-    render: true,
-  };
-
-  const gui = new GUI();
-  gui.add(settings, 'numObjects', { min: 0, max: maxObjects, step: 1});
-  gui.add(settings, 'render');
-
-  let depthTexture;
-  let then = 0;
-
-  function render(time) {
-    time *= 0.001;  // convert to seconds
-    const deltaTime = time - then;
-    then = time;
-
-    const startTimeMs = performance.now();
-
-    const {width, height} = settings.render
-       ? canvasToSizeMap.get(canvas) ?? canvas
-       : { width: 1, height: 1 };
-
-    // Don't set the canvas size if it's already that size as it may be slow.
-    if (canvas.width !== width || canvas.height !== height) {
-      canvas.width = width;
-      canvas.height = height;
-    }
-
-    // Get the current texture from the canvas context and
-    // set it as the texture to render to.
-    const canvasTexture = context.getCurrentTexture();
-    renderPassDescriptor.colorAttachments[0].view = canvasTexture.createView();
-
-    // If we don't have a depth texture OR if its size is different
-    // from the canvasTexture when make a new depth texture
-    if (!depthTexture ||
-        depthTexture.width !== canvasTexture.width ||
-        depthTexture.height !== canvasTexture.height) {
-      if (depthTexture) {
-        depthTexture.destroy();
-      }
-      depthTexture = device.createTexture({
-        size: [canvasTexture.width, canvasTexture.height],
-        format: 'depth24plus',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-      });
-    }
-    renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
-
-    const encoder = device.createCommandEncoder();
-    const pass = timingHelper.beginRenderPass(encoder, renderPassDescriptor);
-    pass.setPipeline(pipeline);
-    pass.setVertexBuffer(0, vertexBuffer);
-    pass.setIndexBuffer(indicesBuffer, 'uint16');
-
-    let mathElapsedTimeMs = 0;
-
-    const transferBuffer = getMappedTransferBuffer();
-    const uniformValues = new Float32Array(transferBuffer.getMappedRange());
-
-    for (let i = 0; i < settings.numObjects; ++i) {
-      const {
-        bindGroup,
-        axis,
-        radius,
-        speed,
-        rotationSpeed,
-        scale,
-      } = objectInfos[i];
-      const mathTimeStartMs = performance.now();
-
-      const uniformBufferOffset = i * uniformBufferSpace;
-      const f32Offset = uniformBufferOffset / 4;
-      const normalMatrixValue = uniformValues.subarray(
-          f32Offset + kNormalMatrixOffset, f32Offset + kNormalMatrixOffset + 12);
-      const worldValue = uniformValues.subarray(
-          f32Offset + kWorldOffset, f32Offset + kWorldOffset + 16);
-
-      // Compute a world matrix
-      mat4.identity(worldValue);
-      mat4.axisRotate(worldValue, axis, i + time * speed, worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], worldValue);
-      mat4.translate(worldValue, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], worldValue);
-      mat4.rotateX(worldValue, time * rotationSpeed + i, worldValue);
-      mat4.scale(worldValue, [scale, scale, scale], worldValue);
-
-      // Inverse and transpose it into the normalMatrix value
-      mat3.fromMat4(mat4.transpose(mat4.inverse(worldValue)), normalMatrixValue);
-
-      mathElapsedTimeMs += performance.now() - mathTimeStartMs;
-
-      pass.setBindGroup(0, bindGroup);
-      pass.drawIndexed(numVertices);
-    }
-    transferBuffer.unmap();
-
-    // copy the uniform values from the transfer buffer to the uniform buffer
-    const encoder2 = device.createCommandEncoder();
-    if (settings.numObjects) {
-      const size = (settings.numObjects - 1) * uniformBufferSpace + uniformBufferSize;
-      encoder2.copyBufferToBuffer(transferBuffer, 0, uniformBuffer, 0, size);
-    }
-    const cb2 = encoder2.finish();
-
-    const aspect = canvas.clientWidth / canvas.clientHeight;
-    const projection = mat4.perspective(
-        degToRad(60),
-        aspect,
-        1,      // zNear
-        2000,   // zFar
-    );
-
-    const eye = [100, 150, 200];
-    const target = [0, 0, 0];
-    const up = [0, 1, 0];
-
-    // Compute a view matrix
-    const viewMatrix = mat4.lookAt(eye, target, up);
-
-    // Combine the view and projection matrixes
-    mat4.multiply(projection, viewMatrix, viewProjectionValue);
-
-    lightWorldPositionValue.set([-10, 30, 300]);
-    viewWorldPositionValue.set(eye);
-
-    device.queue.writeBuffer(globalUniformBuffer, 0, globalUniformValues);
-
-    pass.end();
-
-    const commandBuffer = encoder.finish();
-    device.queue.submit([cb2, commandBuffer]);
-
-    transferBuffer.mapAsync(GPUMapMode.WRITE).then(() => {
-      mappedTransferBuffers.push(transferBuffer);
-    });
-
-    timingHelper.getResult().then(gpuTime => {
-      gpuAverage.addSample(gpuTime / 1000);
-    });
-
-    const elapsedTimeMs = performance.now() - startTimeMs;
-    fpsAverage.addSample(1 / deltaTime);
-    jsAverage.addSample(elapsedTimeMs);
-    mathAverage.addSample(mathElapsedTimeMs);
-
-    infoElem.textContent = `\
-js  : ${jsAverage.get().toFixed(1)}ms
-math: ${mathAverage.get().toFixed(1)}ms
-fps : ${fpsAverage.get().toFixed(0)}
-gpu : ${canTimestamp ? `${(gpuAverage.get() / 1000).toFixed(1)}ms` : 'N/A'}
-`;
-
-    requestAnimationFrame(render);
-  }
-  requestAnimationFrame(render);
-
-  const observer = new ResizeObserver(entries => {
-    entries.forEach(entry => {
-      canvasToSizeMap.set(entry.target, {
-        width: Math.max(1, Math.min(entry.contentBoxSize[0].inlineSize, device.limits.maxTextureDimension2D)),
-        height: Math.max(1, Math.min(entry.contentBoxSize[0].blockSize, device.limits.maxTextureDimension2D)),
-      });
-    });
-  });
-  observer.observe(canvas);
-}
-
-function fail(msg) {
-  alert(msg);
-}
-
-main();
-  </script>
-</html>
diff --git a/webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html
index c5076da0..3173092a 100644
--- a/webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html
+++ b/webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html
@@ -403,7 +403,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   const uniformBufferSize = (12 + 16) * 4;
diff --git a/webgpu/webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html
index fecd4017..8f900b02 100644
--- a/webgpu/webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html
+++ b/webgpu/webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html
@@ -920,7 +920,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   const uniformBufferSize = (12 + 16) * 4;
diff --git a/webgpu/webgpu-optimization-step6-use-mapped-buffers.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers.html
index 63307848..42595485 100644
--- a/webgpu/webgpu-optimization-step6-use-mapped-buffers.html
+++ b/webgpu/webgpu-optimization-step6-use-mapped-buffers.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-    <title>WebGPU Optimization - None</title>
+    <title>WebGPU Optimization - Use Mapped Buffers</title>
     <style>
       @import url(resources/webgpu-lesson.css);
 html, body {
@@ -363,7 +363,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   const uniformBufferSize = (12 + 16) * 4;
diff --git a/webgpu/webgpu-optimization-step7-double-buffer-2-submit.html b/webgpu/webgpu-optimization-step7-double-buffer-2-submit.html
index beef2180..b0666c9e 100644
--- a/webgpu/webgpu-optimization-step7-double-buffer-2-submit.html
+++ b/webgpu/webgpu-optimization-step7-double-buffer-2-submit.html
@@ -363,7 +363,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   const uniformBufferSize = (12 + 16) * 4;
diff --git a/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set.html b/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set.html
index 08d41df2..38bb4564 100644
--- a/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set.html
+++ b/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set.html
@@ -363,7 +363,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   const uniformBufferSize = (12 + 16) * 4;
diff --git a/webgpu/webgpu-optimization-step7-double-buffer.html b/webgpu/webgpu-optimization-step7-double-buffer.html
index 867e3d47..c40dbb55 100644
--- a/webgpu/webgpu-optimization-step7-double-buffer.html
+++ b/webgpu/webgpu-optimization-step7-double-buffer.html
@@ -363,7 +363,7 @@
   const viewWorldPositionValue = globalUniformValues.subarray(
       kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
 
-  const maxObjects = 20000;
+  const maxObjects = 30000;
   const objectInfos = [];
 
   const uniformBufferSize = (12 + 16) * 4;