diff --git a/webgpu/lessons/webgpu-from-webgl.md b/webgpu/lessons/webgpu-from-webgl.md
index 55340f55..a9801fdb 100644
--- a/webgpu/lessons/webgpu-from-webgl.md
+++ b/webgpu/lessons/webgpu-from-webgl.md
@@ -1417,10 +1417,16 @@ way you organize data and optimize how you draw.
 See [this article on WebGPU optimization](webgpu-optimization.html) for
 ideas.
 
+Note: If you are comparing WebGL to WebGPU in [the article on optimization](webgpu-optimization.html)
+here are 2 WebGL samples you can use to compare
+
+* [Drawing up to 20000 objects in WebGL using standard WebGL uniforms](../webgl-optimization-none.html)
+* [Drawing up to 20000 objects in WebGL using uniform blocks](../webgl-optimization-none-uniform-buffers.html)
+
+Another article, if you're comparing performance of WebGL vs WebGPU see
+[this article](https://toji.dev/webgpu-best-practices/webgl-performance-comparison).
+
 ---
 
 If you were already familiar with WebGL then I hope this article was useful.
 
-If you're comparing performance of WebGL vs WebGPU see
-[this article](https://toji.dev/webgpu-best-practices/webgl-performance-comparison) to make sure you are comparing similar things.
-
diff --git a/webgpu/lessons/webgpu-optimization.md b/webgpu/lessons/webgpu-optimization.md
index fcc192de..4c554731 100644
--- a/webgpu/lessons/webgpu-optimization.md
+++ b/webgpu/lessons/webgpu-optimization.md
@@ -2009,15 +2009,98 @@ which is almost 60% more than we started with.
 
 {{{example url="../webgpu-optimization-step6-use-mapped-buffers.html"}}}
 
-* double buffer?
-* Draw math with offset
-* Directly map the uniform buffer.
-* Use dynamic offsets
-* Texture Atlas or 2D-array
-* GPU Occlusion culling
-* GPU Scene graph matrix calculation
-* GPU Frustum culling
-* Indirect Drawing
-* Render Bundles
+Other things that *might* help
+
+* **Double buffer the large uniform buffer**
+
+  This comes up as a possible optimization because WebGPU, if a buffer is currently
+  in use, WebGPU can't update it.
+
+  So, imagine you start rendering (you call `device.queue.submit`). The GPU starts
+  rendering using our large uniform buffer. You immediately try to update that buffer.
+  In this case, WebGPU would have to pause and wait for the GPU to finish using the
+  buffer for rendering.
+
+  This is unlikely to happen in our example above. We don't directly update the
+  uniform buffer. Instead we update a transfer buffer and then later, ask the GPU
+  to copy it to the uniform buffer.
+
+  This issue would be more likely to come up if we update a buffer directly on the
+  GPU using a compute shader.
+
+* **Compute matrix math with offsets**
+
+  The math library we created in [the series on matrix math](webgpu-matrix-math.html)
+  Generates `Float32Array`s as outputs and takes in `Float32Array`s as inputs.
+  It can modify a `Float32Array` in place. But, what it can't do is update a
+  `Float32Array` at some offset.
+  
+  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.
+  
+  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
+  take an offset. In other words. 
+
+  ```js
+      mat4.multiply(a, b, dst);
+  ```
+
+  becomes
+
+  ```js
+     mat4.multiply(a, aOffset, b, bOffset, dst, dstOffset);
+  ```
+
+  [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, 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.
+
+* **Directly map the uniform buffer**
+
+  In our example above we map a transfer buffer, a buffer that only has `COPY_SRC` and `MAP_WRITE`
+  usage flags. We then have to call `encoder.copyBufferToBuffer` to copy the contents into the
+  actual uniform buffer.
+
+  It would be much nicer if we could directly map the uniform buffer and avoid the copy.
+  Unfortunately, that's ability is not available in WebGPU version 1 but it is being
+  considered as an optional feature sometime in the future.
+
+* **Indirect Drawing**
+
+  Indirect drawing refers to draw commands that take their input from a GPU buffer.
+
+  ```js
+  pass.draw(vertexCount, instanceCount, firstVertex, firstInstance);  // direct
+  pass.drawIndirect(someBuffer, offsetIntoSomeBuffer);                // indirect
+  ```
+
+  In the indirect case above, `someBuffer` is a 16 byte portion of a buffer that holds
+  `[vertexCount, instanceCount, firstVertex, firstInstance]`.
+
+  The advantage to indirect draw is that can have the GPU itself, fill out the values.
+  You can even have the GPU set `vertexCount` and/or `instanceCount` to zero when you
+  don't want that thing to be drawn.
+
+  Using indirect drawing, you could do things like, for example, passing all of the
+  object's bounding box or bounding sphere to the GPU and then have the GPU do
+  frustum culling and if the object is inside the frustum it would update that
+  object's indirect drawing parameter to be drawn, otherwise it would update them
+  to not be drawn. "frustum culling" is a fancy way to say "check if the object
+  is possibly inside the frustum of the camera. We talked about frustums in
+  [the article on perspective projection](webgpu-persective-projection.html).
+
+* **Render Bundles**
+
+  Render bundles let you pre-record a bunch of command buffer commands and then
+  request them to be executed later. This can be useful, especially if your scene
+  is relatively static, meaning you don't need to add or remove objects later.
+
+  There's a great article [here](https://toji.dev/webgpu-best-practices/render-bundles)
+  that combines render bundles, indirect draws, GPU frustum culling, to show
+  some ideas for getting more speed in specialized situations.
 
 
diff --git a/webgpu/webgl-optimization-none-uniform-buffers-4kplus.html b/webgpu/webgl-optimization-none-uniform-buffers-4kplus.html
deleted file mode 100644
index 414d9940..00000000
--- a/webgpu/webgl-optimization-none-uniform-buffers-4kplus.html
+++ /dev/null
@@ -1,479 +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>WebGL Optimization - Uniform Blocks 4kplus</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';
-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 values from 0 to 1
- */
-const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * returns an array of values from 0 to 255
- */
-const hslToRGBA8 = (h, s, l) => cssColorToRGBA8(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 Uniforms {
-        mat3 normalMatrix;
-        mat4 viewProjection;
-        mat4 world;
-        vec3 lightWorldPosition;
-        vec3 viewWorldPosition;
-        vec4 color;
-        float shininess;
-        mat4 padding[4096 / 4 / 16];
-      };
-  `;
-  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 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 texture = twgl.createTexture(gl, {
-    format: gl.RGBA,
-    width: 2,
-    src: new Uint8Array([
-      ...hslToRGBA8(0, 0, 1),
-      ...hslToRGBA8(0, 0, 0.5),
-      ...hslToRGBA8(0, 0, 0.75),
-      ...hslToRGBA8(0, 0, 0.25),
-    ]),
-    minMag: gl.NEAREST,
-    wrap: gl.CLAMP_TO_EDGE,
-  });
-
-  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,
-    });
-  }
-
-  const maxObjects = 20000;
-  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: texture,
-    };
-
-    const uboInfo = twgl.createUniformBlockInfo(gl, prgInfo, 'Uniforms');
-
-    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 worldValue = mat4.create();
-  const normalMatrix = mat3.identity();
-
-  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();
-
-    let width = 1;
-    let height = 1;
-    if (settings.render) {
-      const entry = canvasToSizeMap.get(canvas);
-      if (entry) {
-        width =  entry.contentBoxSize[0].inlineSize;
-        height = entry.contentBoxSize[0].blockSize;
-      }
-    }
-    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
-    const viewProjectionMatrix = mat4.multiply(projection, viewMatrix);
-
-    let mathElapsedTimeMs = 0;
-
-    for (let i = 0; i < settings.numObjects; ++i) {
-      const {
-        uniforms,
-        uboInfo,
-
-        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)), normalMatrix);
-
-      const {color, shininess} = material;
-
-      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);
-      twgl.setUniforms(prgInfo, uniforms);
-
-      twgl.drawBufferInfo(gl, bufferInfo);
-    }
-    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(e => canvasToSizeMap.set(e.target, e));
-  });
-  observer.observe(canvas);
-}
-
-main();
-  </script>
-</html>
diff --git a/webgpu/webgl-optimization-none-uniform-buffers-8k.html b/webgpu/webgl-optimization-none-uniform-buffers-8k.html
deleted file mode 100644
index 99102396..00000000
--- a/webgpu/webgl-optimization-none-uniform-buffers-8k.html
+++ /dev/null
@@ -1,479 +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>WebGL Optimization - Uniform Blocks 8k</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';
-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 values from 0 to 1
- */
-const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * returns an array of values from 0 to 255
- */
-const hslToRGBA8 = (h, s, l) => cssColorToRGBA8(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 Uniforms {
-        mat3 normalMatrix;      // 12
-        mat4 viewProjection;    // 16
-        mat4 world;             // 16
-        vec3 lightWorldPosition;// 4
-        vec3 viewWorldPosition; // 4
-        vec4 color;             // 4
-        float shininess;        // 1
-        vec4 padding[(2048 - (12 + 16 + 16 + 4 + 4 + 4 + 1)) / 4];
-      };
-  `;
-  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 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 texture = twgl.createTexture(gl, {
-    format: gl.RGBA,
-    width: 2,
-    src: new Uint8Array([
-      ...hslToRGBA8(0, 0, 1),
-      ...hslToRGBA8(0, 0, 0.5),
-      ...hslToRGBA8(0, 0, 0.75),
-      ...hslToRGBA8(0, 0, 0.25),
-    ]),
-    minMag: gl.NEAREST,
-    wrap: gl.CLAMP_TO_EDGE,
-  });
-
-  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,
-    });
-  }
-
-  const maxObjects = 20000;
-  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: texture,
-    };
-
-    const uboInfo = twgl.createUniformBlockInfo(gl, prgInfo, 'Uniforms');
-
-    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 worldValue = mat4.create();
-  const normalMatrix = mat3.identity();
-
-  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();
-
-    let width = 1;
-    let height = 1;
-    if (settings.render) {
-      const entry = canvasToSizeMap.get(canvas);
-      if (entry) {
-        width =  entry.contentBoxSize[0].inlineSize;
-        height = entry.contentBoxSize[0].blockSize;
-      }
-    }
-    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
-    const viewProjectionMatrix = mat4.multiply(projection, viewMatrix);
-
-    let mathElapsedTimeMs = 0;
-
-    for (let i = 0; i < settings.numObjects; ++i) {
-      const {
-        uniforms,
-        uboInfo,
-
-        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)), normalMatrix);
-
-      const {color, shininess} = material;
-
-      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);
-      twgl.setUniforms(prgInfo, uniforms);
-
-      twgl.drawBufferInfo(gl, bufferInfo);
-    }
-    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(e => canvasToSizeMap.set(e.target, e));
-  });
-  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 928ce78b..48b40b67 100644
--- a/webgpu/webgl-optimization-none-uniform-buffers.html
+++ b/webgpu/webgl-optimization-none-uniform-buffers.html
@@ -358,19 +358,13 @@
 
     const startTimeMs = performance.now();
 
-    let width = 1;
-    let height = 1;
-    if (settings.render) {
-      const entry = canvasToSizeMap.get(canvas);
-      if (entry) {
-        width =  entry.contentBoxSize[0].inlineSize;
-        height = entry.contentBoxSize[0].blockSize;
-      }
-    }
+    const {width, height} = canvasToSizeMap.get(canvas) ?? canvas;
+    // 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
@@ -468,7 +462,12 @@
   requestAnimationFrame(render);
 
   const observer = new ResizeObserver(entries => {
-    entries.forEach(e => canvasToSizeMap.set(e.target, e));
+    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);
 }
diff --git a/webgpu/webgl-optimization-none.html b/webgpu/webgl-optimization-none.html
index f78a5d11..28ff4b10 100644
--- a/webgpu/webgl-optimization-none.html
+++ b/webgpu/webgl-optimization-none.html
@@ -355,19 +355,13 @@
 
     const startTimeMs = performance.now();
 
-    let width = 1;
-    let height = 1;
-    if (settings.render) {
-      const entry = canvasToSizeMap.get(canvas);
-      if (entry) {
-        width =  entry.contentBoxSize[0].inlineSize;
-        height = entry.contentBoxSize[0].blockSize;
-      }
-    }
+    const {width, height} = canvasToSizeMap.get(canvas) ?? canvas;
+    // 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
@@ -462,7 +456,12 @@
   requestAnimationFrame(render);
 
   const observer = new ResizeObserver(entries => {
-    entries.forEach(e => canvasToSizeMap.set(e.target, e));
+    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);
 }
diff --git a/webgpu/webgpu-optimization-none-4kplus.html b/webgpu/webgpu-optimization-none-4kplus.html
deleted file mode 100644
index bc656c81..00000000
--- a/webgpu/webgpu-optimization-none-4kplus.html
+++ /dev/null
@@ -1,586 +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 4kplus</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';
-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 values from 0 to 1
- */
-const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
-/**
- * Given hue, saturation, and luminance values in the range of 0 to 1
- * returns an array of values from 0 to 255
- */
-const hslToRGBA8 = (h, s, l) => cssColorToRGBA8(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 Uniforms {
-        normalMatrix: mat3x3f,
-        viewProjection: mat4x4f,
-        world: mat4x4f,
-        color: vec4f,
-        lightWorldPosition: vec3f,
-        viewWorldPosition: vec3f,
-        shininess: f32,
-        padding: array<mat4x4f, 4096 / 4 / 16>,
-      };
-
-      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> uni: Uniforms;
-
-      @vertex fn vs(vert: Vertex) -> VSOutput {
-        var vsOut: VSOutput;
-        vsOut.position = uni.viewProjection * uni.world * vert.position;
-
-        // Orient the normals and pass to the fragment shader
-        vsOut.normal = uni.normalMatrix * vert.normal;
-
-        // Compute the world position of the surface
-        let surfaceWorldPosition = (uni.world * vert.position).xyz;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToLight = uni.lightWorldPosition - surfaceWorldPosition;
-
-        // Compute the vector of the surface to the light
-        // and pass it to the fragment shader
-        vsOut.surfaceToView = uni.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, uni.shininess),  // value if condition is true
-            specular > 0.0);               // condition
-
-        let diffuse = uni.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 | GPUBufferUsage.COPY_DST,
-    });
-    device.queue.writeBuffer(buffer, 0, data);
-    return buffer;
-  }
-
-  const positions = 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]);
-  const normals   = 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]);
-  const texcoords = 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]);
-  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 positionBuffer = createBufferWithData(device, positions, GPUBufferUsage.VERTEX);
-  const normalBuffer = createBufferWithData(device, normals, GPUBufferUsage.VERTEX);
-  const texcoordBuffer = createBufferWithData(device, texcoords, 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: [
-        // position
-        {
-          arrayStride: 3 * 4, // 3 floats
-          attributes: [
-            {shaderLocation: 0, offset: 0, format: 'float32x3'},
-          ],
-        },
-        // normal
-        {
-          arrayStride: 3 * 4, // 3 floats
-          attributes: [
-            {shaderLocation: 1, offset: 0, format: 'float32x3'},
-          ],
-        },
-        // uvs
-        {
-          arrayStride: 2 * 4, // 2 floats
-          attributes: [
-            {shaderLocation: 2, offset: 0, format: 'float32x2'},
-          ],
-        },
-      ],
-    },
-    fragment: {
-      module,
-      targets: [{ format: presentationFormat }],
-    },
-    primitive: {
-      cullMode: 'back',
-    },
-    depthStencil: {
-      depthWriteEnabled: true,
-      depthCompare: 'less',
-      format: 'depth24plus',
-    },
-  });
-
-  const texture = device.createTexture({
-    size: [2, 2],
-    format: 'rgba8unorm',
-    usage:
-      GPUTextureUsage.TEXTURE_BINDING |
-      GPUTextureUsage.COPY_DST,
-  });
-  device.queue.writeTexture(
-      { texture },
-      new Uint8Array([
-        ...hslToRGBA8(0, 0, 1),
-        ...hslToRGBA8(0, 0, 0.5),
-        ...hslToRGBA8(0, 0, 0.75),
-        ...hslToRGBA8(0, 0, 0.25),
-      ]),
-      { bytesPerRow: 8, rowsPerImage: 2 },
-      { width: 2, height: 2 },
-  );
-
-  const sampler = device.createSampler({
-    magFilter: 'nearest',
-    minFilter: '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,
-      sampler,
-    });
-  }
-
-  const maxObjects = 20000;
-  const objectInfos = [];
-
-  for (let i = 0; i < maxObjects; ++i) {
-    const uniformBufferSize = (12 + 16 + 16 + 4 + 4 + 4 + (4096 / 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 kViewProjectionOffset = 12;
-    const kWorldOffset = 28;
-    const kColorOffset = 44;
-    const kLightWorldPositionOffset = 48;
-    const kViewWorldPositionOffset = 52;
-    const kShininessOffset = 55;
-
-    const normalMatrixValue = uniformValues.subarray(
-        kNormalMatrixOffset, kNormalMatrixOffset + 12);
-    const viewProjectionValue = uniformValues.subarray(
-        kViewProjectionOffset, kViewProjectionOffset + 16);
-    const worldValue = uniformValues.subarray(
-        kWorldOffset, kWorldOffset + 16);
-    const colorValue = uniformValues.subarray(kColorOffset, kColorOffset + 4);
-    const lightWorldPositionValue = uniformValues.subarray(
-        kLightWorldPositionOffset, kLightWorldPositionOffset + 3);
-    const viewWorldPositionValue = uniformValues.subarray(
-        kViewWorldPositionOffset, kViewWorldPositionOffset + 3);
-    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 }},
-      ],
-    });
-
-    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,
-
-      uniformBuffer,
-      uniformValues,
-
-      normalMatrixValue,
-      worldValue,
-      viewProjectionValue,
-      colorValue,
-      lightWorldPositionValue,
-      viewWorldPositionValue,
-      shininessValue,
-
-      axis,
-      material,
-      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} = canvasToSizeMap.get(canvas) ?? canvas;
-    // 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, positionBuffer);
-    pass.setVertexBuffer(1, normalBuffer);
-    pass.setVertexBuffer(2, texcoordBuffer);
-    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
-    const viewProjectionMatrix = mat4.multiply(projection, viewMatrix);
-
-    let mathElapsedTimeMs = 0;
-
-    for (let i = 0; i < settings.numObjects; ++i) {
-      const {
-        bindGroup,
-        uniformBuffer,
-        uniformValues,
-        normalMatrixValue,
-        worldValue,
-        viewProjectionValue,
-        colorValue,
-        lightWorldPositionValue,
-        viewWorldPositionValue,
-        shininessValue,
-
-        axis,
-        material,
-        radius,
-        speed,
-        rotationSpeed,
-        scale,
-      } = objectInfos[i];
-      const mathTimeStartMs = performance.now();
-
-      // Copy the viewProjectionMatrix into the uniform values for this object
-      viewProjectionValue.set(viewProjectionMatrix);
-
-      // 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);
-      lightWorldPositionValue.set([-10, 30, 300]);
-      viewWorldPositionValue.set(eye);
-      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-step7-double-buffer-typedarray-set-count-100.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html
similarity index 89%
rename from webgpu/webgpu-optimization-step7-double-buffer-typedarray-set-count-100.html
rename to webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html
index a09a6721..a81aa00b 100644
--- a/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set-count-100.html
+++ b/webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html
@@ -226,6 +226,46 @@
     `,
   });
 
+  const bindGroupLayout = device.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.FRAGMENT,
+        texture: {
+          sampleType: 'float',
+          viewDimension: '2d',
+          multisampled: false,
+        },
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.FRAGMENT,
+        sampler: {
+          type: 'filtering',
+        },
+      },
+      {
+        binding: 2,
+        visibility: GPUShaderStage.VERTEX,
+        buffer: { hasDynamicOffset: true },
+      },
+      {
+        binding: 3,
+        visibility: GPUShaderStage.VERTEX,
+        buffer: {},
+      },
+      {
+        binding: 4,
+        visibility: GPUShaderStage.FRAGMENT,
+        buffer: {},
+      },
+    ],
+  });
+
+  const pipelineLayout = device.createPipelineLayout({
+    bindGroupLayouts: [ bindGroupLayout ],
+  });
+
   function createBufferWithData(device, data, usage) {
     const buffer = device.createBuffer({
       size: data.byteLength,
@@ -273,7 +313,7 @@
 
   const pipeline = device.createRenderPipeline({
     label: 'textured model with point light w/specular highlight',
-    layout: 'auto',
+    layout: pipelineLayout,
     vertex: {
       module,
       buffers: [
@@ -374,11 +414,11 @@
 
   const uniformBufferSize = (12 + 16) * 4;
   const uniformBufferSpace = roundUp(uniformBufferSize, device.limits.minUniformBufferOffsetAlignment);
-  const uniformBuffers = [0, 1].map(() => device.createBuffer({
+  const uniformBuffer = device.createBuffer({
     label: 'uniforms',
     size: uniformBufferSpace * maxObjects,
     usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-  }));
+  });
 
   const mappedTransferBuffers = [];
   const getMappedTransferBuffer = () => {
@@ -394,21 +434,19 @@
   const kWorldOffset = 12;
 
   for (let i = 0; i < maxObjects; ++i) {
-    const uniformBufferOffset = i * uniformBufferSpace;
-
     const material = randomArrayElement(materials);
 
-    const bindGroups = [0, 1].map(i => device.createBindGroup({
+    const bindGroup = device.createBindGroup({
       label: 'bind group for object',
-      layout: pipeline.getBindGroupLayout(0),
+      layout: bindGroupLayout,
       entries: [
         { binding: 0, resource: material.texture.createView() },
         { binding: 1, resource: material.sampler },
-        { binding: 2, resource: { buffer: uniformBuffers[i], offset: uniformBufferOffset, size: uniformBufferSize }},
+        { binding: 2, resource: { buffer: uniformBuffer, 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);
@@ -417,7 +455,7 @@
     const scale = rand(2, 10);
 
     objectInfos.push({
-      bindGroups,
+      bindGroup,
 
       axis,
       radius,
@@ -449,7 +487,7 @@
   const degToRad = d => d * Math.PI / 180;
 
   const settings = {
-    numObjects: 100,
+    numObjects: 1000,
     render: true,
   };
 
@@ -459,16 +497,11 @@
 
   let depthTexture;
   let then = 0;
-  let frameCount = 0;
-
-  const worldTemp = mat4.identity();
-  const normalMatrixTemp = mat3.identity();
 
   function render(time) {
     time *= 0.001;  // convert to seconds
     const deltaTime = time - then;
     then = time;
-    ++frameCount;
 
     const startTimeMs = performance.now();
 
@@ -517,30 +550,29 @@
       } = objectInfos[i];
       const mathTimeStartMs = performance.now();
 
+      // Make views into the mapped buffer.
       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(worldTemp);
-      mat4.axisRotate(worldTemp, axis, i + time * speed, worldTemp);
-      mat4.translate(worldTemp, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], worldTemp);
-      mat4.translate(worldTemp, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], worldTemp);
-      mat4.rotateX(worldTemp, time * rotationSpeed + i, worldTemp);
-      mat4.scale(worldTemp, [scale, scale, scale], worldTemp);
+      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(worldTemp)), normalMatrixTemp);
-
-      uniformValues.set(worldTemp, f32Offset + kWorldOffset);
-      uniformValues.set(normalMatrixTemp, f32Offset + kNormalMatrixOffset);
+      mat3.fromMat4(mat4.transpose(mat4.inverse(worldValue)), normalMatrixValue);
 
       mathElapsedTimeMs += performance.now() - mathTimeStartMs;
     }
     transferBuffer.unmap();
 
-    const resourceIndex = frameCount % 2;
-    const uniformBuffer = uniformBuffers[resourceIndex];
-
     // copy the uniform values from the transfer buffer to the uniform buffer
     if (settings.numObjects) {
       const size = (settings.numObjects - 1) * uniformBufferSpace + uniformBufferSize;
@@ -575,9 +607,13 @@
     pass.setVertexBuffer(0, vertexBuffer);
     pass.setIndexBuffer(indicesBuffer, 'uint16');
 
+    const offsets = new Uint32Array(1);
     for (let i = 0; i < settings.numObjects; ++i) {
-      const { bindGroups } = objectInfos[i];
-      pass.setBindGroup(0, bindGroups[resourceIndex]);
+      const uniformBufferOffset = i * uniformBufferSpace;
+      //offset: uniformBufferOffset, size: uniformBufferSize
+      offsets[0] = uniformBufferOffset;
+      const { bindGroup } = objectInfos[i];
+      pass.setBindGroup(0, bindGroup, offsets);
       pass.drawIndexed(numVertices);
     }