diff --git a/webgpu/lessons/webgpu-optimization.md b/webgpu/lessons/webgpu-optimization.md
index 86304695..fcc192de 100644
--- a/webgpu/lessons/webgpu-optimization.md
+++ b/webgpu/lessons/webgpu-optimization.md
@@ -615,6 +615,10 @@ bind the bind group for this object, and draw.
     }
 ```
 
+> Note that the portion of the code labeled "Compute a world matrix" is not so common. It would
+be more common to have a [scene graph](webgpu-scene-graphs.html) but that would have clutter
+the example even more. We needed something showing animation I through something together.
+
 Then we can end the pass and submit it.
 
 ```js
@@ -881,7 +885,7 @@ steps listed near the top of the article, and it works.
 {{{example url="../webgpu-optimization-none.html"}}}
 
 Increase the number of objects and see when the framerate drops for you.
-For me, on my 75hz monitor on an M1 Mac I got ~9000 cubes before the 
+For me, on my 75hz monitor on an M1 Mac I got ~8000 cubes before the 
 framerate dropped.
 
 # <a id="a-mapped-on-creation"></a> Optimization: Mapped On Creation
@@ -1668,8 +1672,8 @@ We also no longer need to deal with this stuff at render time.
 Right now, each object has it's own uniform buffer. At render time,
 for each object, we update a typed array with the uniform values for
 that object and then call `device.queue.writeBuffer` to update that
-single uniform buffer's values. If we're rendering 8400 objects
-that's 8400 calls to `device.queue.writeBuffer`.
+single uniform buffer's values. If we're rendering 8000 objects
+that's 8000 calls to `device.queue.writeBuffer`.
 
 Instead, we could make one larger uniform buffer. We can then setup
 the bind group for each object to use it's own portion of the larger 
@@ -1813,10 +1817,201 @@ just one call to `device.queue.writeBuffer`.
 
 On my machine that shaved off 40% of the JavaScript time!
 
+# Optimization: Use Mapped Buffers
+
+When we call `device.queue.writeBuffer`, what happens is, WebGPU makes a copy
+of the data in the typed array. It copies that data to the GPU process (a separate process
+that talks to the GPU for security). In the GPU process that data is then copied
+to the GPU Buffer.
+
+We can skip one of those copies by using mapped buffers instead. We'll map a buffer,
+update the uniform values directly into that mapped buffer. Then we'll unmap the
+buffer and issue a `copyBufferToBuffer` command to copy to the uniform buffer.
+This will save a copy.
+
+WebGPU mapping happens asynchronously so rather then map a buffer and wait for it
+to be ready, we'll keep an array of already mapped buffers. Each frame, we either
+get an already mapped buffer or create a new one that is already mapped. After
+we render we'll setup a callback to map the buffer when it's available and put
+it back on the list of already mapped buffers. This way, we'll never have to wait
+for a mapped buffer.
+
+First we'll make an array of mapped buffers and a function to either get a pre-mapped
+buffer or make a new one.
+
+```js
+  const mappedTransferBuffers = [];
+  const getMappedTransferBuffer = () => {
+    return mappedTransferBuffers.pop() || device.createBuffer({
+      label: 'transfer buffer',
+      size: uniformBufferSpace * maxObjects,
+      usage: GPUBufferUsage.MAP_WRITE | GPUBufferUsage.COPY_SRC,
+      mappedAtCreation: true,
+    });
+  };
+```
+
+We can't pre-create typedarray views anymore because mapping
+a buffer gives us a new `ArrayBuffer`. So, we'll have to
+make new typedarray views after mapping.
+
+```js
++  // 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 f32Offset = uniformBufferOffset / 4;
+-
+-    // offsets to the various uniform values in float32 indices
+-    const kNormalMatrixOffset = 0;
+-    const kWorldOffset = 12;
+-
+-    const normalMatrixValue = uniformValues.subarray(
+-        f32Offset + kNormalMatrixOffset, f32Offset + kNormalMatrixOffset + 12);
+-    const worldValue = uniformValues.subarray(
+-        f32Offset + kWorldOffset, f32Offset + kWorldOffset + 16);
+-    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,
+
+-      normalMatrixValue,
+-      worldValue,
+
+      axis,
+      radius,
+      speed,
+      rotationSpeed,
+      scale,
+    });
+  }
+```
+
+At render time we have to loop through the objects twice. Once to update the mapped buffer
+and then again to draw each object. This is because, only after we've updated every
+object's values in the mapped buffer can we then unmap it can call `copyBufferToBuffer`
+to update the uniform buffer. `copyBufferToBuffer` only exists on the command encoder. It
+can not be called while we are encoding our render pass. At least not on the same command
+buffer, so we'll loop twice.
+
+First we loop and update the mapped buffer
+
+```js
+    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,
+-        normalMatrixValue,
+-        worldValue,
+        axis,
+        radius,
+        speed,
+        rotationSpeed,
+        scale,
+      } = 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(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;
+    }
++    transferBuffer.unmap();
+
+    // copy the uniform values from the transfer buffer to the uniform buffer
+    if (settings.numObjects) {
+      const size = (settings.numObjects - 1) * uniformBufferSpace + uniformBufferSize;
+-      device.queue.writeBuffer( uniformBuffer, 0, uniformValues, 0, size / uniformValues.BYTES_PER_ELEMENT);
++      encoder.copyBufferToBuffer(transferBuffer, 0, uniformBuffer, 0, size);
+    }
+```
+
+Then we loop and draw each object.
+
+```js
++    const pass = timingHelper.beginRenderPass(encoder, renderPassDescriptor);
++    pass.setPipeline(pipeline);
++    pass.setVertexBuffer(0, vertexBuffer);
++    pass.setIndexBuffer(indicesBuffer, 'uint16');
++
++    for (let i = 0; i < settings.numObjects; ++i) {
++      const { bindGroup } = objectInfos[i];
++      pass.setBindGroup(0, bindGroup);
++      pass.drawIndexed(numVertices);
++    }
+
+    pass.end();
+```
+
+Finally, as soon as we've submitted the command buffer we map the buffer again.
+Mapping is asynchronous so when it's finally ready we'll add it back to the
+list of already mapped buffer.
+
+```js
+    pass.end();
+
+    const commandBuffer = encoder.finish();
+    device.queue.submit([commandBuffer]);
+
++    transferBuffer.mapAsync(GPUMapMode.WRITE).then(() => {
++      mappedTransferBuffers.push(transferBuffer);
++    });
+```
 
+On my machine, this version draws around 13000 objects at 75fps.
+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
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
new file mode 100644
index 00000000..be325171
--- /dev/null
+++ b/webgpu/webgpu-optimization-step6-use-mapped-buffers-2-command-buffers.html
@@ -0,0 +1,622 @@
+<!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';
+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];
+
+/** 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 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);
+
+    const materialValues = new Float32Array([
+      ...color,
+      shininess,
+      0, 0, 0,  // padding
+    ]);
+    const materialUniformBuffer = createBufferWithData(
+      device,
+      materialValues,
+      GPUBufferUsage.UNIFORM,
+    );
+
+    materials.push({
+      materialUniformBuffer,
+      texture,
+      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} = 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, 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-math-w-offsets.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html
new file mode 100644
index 00000000..d1811819
--- /dev/null
+++ b/webgpu/webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html
@@ -0,0 +1,1182 @@
+<!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';
+//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 vec3 = {
+  cross(a, b, dst) {
+    dst = dst || new Float32Array(3);
+
+    const t0 = a[1] * b[2] - a[2] * b[1];
+    const t1 = a[2] * b[0] - a[0] * b[2];
+    const t2 = a[0] * b[1] - a[1] * b[0];
+
+    dst[0] = t0;
+    dst[1] = t1;
+    dst[2] = t2;
+
+    return dst;
+  },
+
+  subtract(a, b, dst) {
+    dst = dst || new Float32Array(3);
+
+    dst[0] = a[0] - b[0];
+    dst[1] = a[1] - b[1];
+    dst[2] = a[2] - b[2];
+
+    return dst;
+  },
+
+  normalize(v, dst) {
+    dst = dst || new Float32Array(3);
+
+    const length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+    // make sure we don't divide by 0.
+    if (length > 0.00001) {
+      dst[0] = v[0] / length;
+      dst[1] = v[1] / length;
+      dst[2] = v[2] / length;
+    } else {
+      dst[0] = 0;
+      dst[1] = 0;
+      dst[2] = 0;
+    }
+
+    return dst;
+  },
+};
+
+const mat4 = {
+  projection(width, height, depth, dst) {
+    // Note: This matrix flips the Y axis so that 0 is at the top.
+    return mat4.ortho(0, width, height, 0, depth, -depth, dst);
+  },
+
+  perspective(fieldOfViewYInRadians, aspect, zNear, zFar, dst) {
+    dst = dst || new Float32Array(16);
+
+    const f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewYInRadians);
+    const rangeInv = 1 / (zNear - zFar);
+
+    dst[0] = f / aspect;
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+
+    dst[4] = 0;
+    dst[5] = f;
+    dst[6] = 0;
+    dst[7] = 0;
+
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = zFar * rangeInv;
+    dst[11] = -1;
+
+    dst[12] = 0;
+    dst[13] = 0;
+    dst[14] = zNear * zFar * rangeInv;
+    dst[15] = 0;
+
+    return dst;
+  },
+
+  identity(dst = null, offset = 0) {
+    dst = dst || new Float32Array(16);
+    dst[offset +  0] = 1;  dst[offset +  1] = 0;  dst[offset +  2] = 0;   dst[offset +  3] = 0;
+    dst[offset +  4] = 0;  dst[offset +  5] = 1;  dst[offset +  6] = 0;   dst[offset +  7] = 0;
+    dst[offset +  8] = 0;  dst[offset +  9] = 0;  dst[offset + 10] = 1;   dst[offset + 11] = 0;
+    dst[offset + 12] = 0;  dst[offset + 13] = 0;  dst[offset + 14] = 0;   dst[offset + 15] = 1;
+    return dst;
+  },
+
+  multiply(a, aOff, b, bOff, dst = null, offset = 0) {
+    dst = dst || new Float32Array(16);
+    const b00 = b[bOff + 0 * 4 + 0];
+    const b01 = b[bOff + 0 * 4 + 1];
+    const b02 = b[bOff + 0 * 4 + 2];
+    const b03 = b[bOff + 0 * 4 + 3];
+    const b10 = b[bOff + 1 * 4 + 0];
+    const b11 = b[bOff + 1 * 4 + 1];
+    const b12 = b[bOff + 1 * 4 + 2];
+    const b13 = b[bOff + 1 * 4 + 3];
+    const b20 = b[bOff + 2 * 4 + 0];
+    const b21 = b[bOff + 2 * 4 + 1];
+    const b22 = b[bOff + 2 * 4 + 2];
+    const b23 = b[bOff + 2 * 4 + 3];
+    const b30 = b[bOff + 3 * 4 + 0];
+    const b31 = b[bOff + 3 * 4 + 1];
+    const b32 = b[bOff + 3 * 4 + 2];
+    const b33 = b[bOff + 3 * 4 + 3];
+    const a00 = a[aOff + 0 * 4 + 0];
+    const a01 = a[aOff + 0 * 4 + 1];
+    const a02 = a[aOff + 0 * 4 + 2];
+    const a03 = a[aOff + 0 * 4 + 3];
+    const a10 = a[aOff + 1 * 4 + 0];
+    const a11 = a[aOff + 1 * 4 + 1];
+    const a12 = a[aOff + 1 * 4 + 2];
+    const a13 = a[aOff + 1 * 4 + 3];
+    const a20 = a[aOff + 2 * 4 + 0];
+    const a21 = a[aOff + 2 * 4 + 1];
+    const a22 = a[aOff + 2 * 4 + 2];
+    const a23 = a[aOff + 2 * 4 + 3];
+    const a30 = a[aOff + 3 * 4 + 0];
+    const a31 = a[aOff + 3 * 4 + 1];
+    const a32 = a[aOff + 3 * 4 + 2];
+    const a33 = a[aOff + 3 * 4 + 3];
+
+    dst[offset + 0] = b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30;
+    dst[offset + 1] = b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31;
+    dst[offset + 2] = b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32;
+    dst[offset + 3] = b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33;
+
+    dst[offset + 4] = b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30;
+    dst[offset + 5] = b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31;
+    dst[offset + 6] = b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32;
+    dst[offset + 7] = b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33;
+
+    dst[offset + 8] = b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30;
+    dst[offset + 9] = b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31;
+    dst[offset + 10] = b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32;
+    dst[offset + 11] = b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33;
+
+    dst[offset + 12] = b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30;
+    dst[offset + 13] = b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31;
+    dst[offset + 14] = b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32;
+    dst[offset + 15] = b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33;
+
+    return dst;
+  },
+
+  inverse(m, mOffset, dst = null, offset = 0) {
+    dst = dst || new Float32Array(16);
+
+    const m00 = m[mOffset + 0 * 4 + 0];
+    const m01 = m[mOffset + 0 * 4 + 1];
+    const m02 = m[mOffset + 0 * 4 + 2];
+    const m03 = m[mOffset + 0 * 4 + 3];
+    const m10 = m[mOffset + 1 * 4 + 0];
+    const m11 = m[mOffset + 1 * 4 + 1];
+    const m12 = m[mOffset + 1 * 4 + 2];
+    const m13 = m[mOffset + 1 * 4 + 3];
+    const m20 = m[mOffset + 2 * 4 + 0];
+    const m21 = m[mOffset + 2 * 4 + 1];
+    const m22 = m[mOffset + 2 * 4 + 2];
+    const m23 = m[mOffset + 2 * 4 + 3];
+    const m30 = m[mOffset + 3 * 4 + 0];
+    const m31 = m[mOffset + 3 * 4 + 1];
+    const m32 = m[mOffset + 3 * 4 + 2];
+    const m33 = m[mOffset + 3 * 4 + 3];
+
+    const tmp0 = m22 * m33;
+    const tmp1 = m32 * m23;
+    const tmp2 = m12 * m33;
+    const tmp3 = m32 * m13;
+    const tmp4 = m12 * m23;
+    const tmp5 = m22 * m13;
+    const tmp6 = m02 * m33;
+    const tmp7 = m32 * m03;
+    const tmp8 = m02 * m23;
+    const tmp9 = m22 * m03;
+    const tmp10 = m02 * m13;
+    const tmp11 = m12 * m03;
+    const tmp12 = m20 * m31;
+    const tmp13 = m30 * m21;
+    const tmp14 = m10 * m31;
+    const tmp15 = m30 * m11;
+    const tmp16 = m10 * m21;
+    const tmp17 = m20 * m11;
+    const tmp18 = m00 * m31;
+    const tmp19 = m30 * m01;
+    const tmp20 = m00 * m21;
+    const tmp21 = m20 * m01;
+    const tmp22 = m00 * m11;
+    const tmp23 = m10 * m01;
+
+    const t0 = (tmp0 * m11 + tmp3 * m21 + tmp4 * m31) -
+               (tmp1 * m11 + tmp2 * m21 + tmp5 * m31);
+    const t1 = (tmp1 * m01 + tmp6 * m21 + tmp9 * m31) -
+               (tmp0 * m01 + tmp7 * m21 + tmp8 * m31);
+    const t2 = (tmp2 * m01 + tmp7 * m11 + tmp10 * m31) -
+               (tmp3 * m01 + tmp6 * m11 + tmp11 * m31);
+    const t3 = (tmp5 * m01 + tmp8 * m11 + tmp11 * m21) -
+               (tmp4 * m01 + tmp9 * m11 + tmp10 * m21);
+
+    const d = 1 / (m00 * t0 + m10 * t1 + m20 * t2 + m30 * t3);
+
+    dst[offset + 0] = d * t0;
+    dst[offset + 1] = d * t1;
+    dst[offset + 2] = d * t2;
+    dst[offset + 3] = d * t3;
+
+    dst[offset + 4] = d * ((tmp1 * m10 + tmp2 * m20 + tmp5 * m30) -
+                  (tmp0 * m10 + tmp3 * m20 + tmp4 * m30));
+    dst[offset + 5] = d * ((tmp0 * m00 + tmp7 * m20 + tmp8 * m30) -
+                  (tmp1 * m00 + tmp6 * m20 + tmp9 * m30));
+    dst[offset + 6] = d * ((tmp3 * m00 + tmp6 * m10 + tmp11 * m30) -
+                  (tmp2 * m00 + tmp7 * m10 + tmp10 * m30));
+    dst[offset + 7] = d * ((tmp4 * m00 + tmp9 * m10 + tmp10 * m20) -
+                  (tmp5 * m00 + tmp8 * m10 + tmp11 * m20));
+
+    dst[offset + 8] = d * ((tmp12 * m13 + tmp15 * m23 + tmp16 * m33) -
+                  (tmp13 * m13 + tmp14 * m23 + tmp17 * m33));
+    dst[offset + 9] = d * ((tmp13 * m03 + tmp18 * m23 + tmp21 * m33) -
+                  (tmp12 * m03 + tmp19 * m23 + tmp20 * m33));
+    dst[offset + 10] = d * ((tmp14 * m03 + tmp19 * m13 + tmp22 * m33) -
+                   (tmp15 * m03 + tmp18 * m13 + tmp23 * m33));
+    dst[offset + 11] = d * ((tmp17 * m03 + tmp20 * m13 + tmp23 * m23) -
+                   (tmp16 * m03 + tmp21 * m13 + tmp22 * m23));
+
+    dst[offset + 12] = d * ((tmp14 * m22 + tmp17 * m32 + tmp13 * m12) -
+                   (tmp16 * m32 + tmp12 * m12 + tmp15 * m22));
+    dst[offset + 13] = d * ((tmp20 * m32 + tmp12 * m02 + tmp19 * m22) -
+                   (tmp18 * m22 + tmp21 * m32 + tmp13 * m02));
+    dst[offset + 14] = d * ((tmp18 * m12 + tmp23 * m32 + tmp15 * m02) -
+                   (tmp22 * m32 + tmp14 * m02 + tmp19 * m12));
+    dst[offset + 15] = d * ((tmp22 * m22 + tmp16 * m02 + tmp21 * m12) -
+                   (tmp20 * m12 + tmp23 * m22 + tmp17 * m02));
+    return dst;
+  },
+
+  transpose(m, mOffset, dst = null, offset = 0) {
+    dst = dst || new Float32Array(16);
+
+    dst[offset +  0] = m[mOffset + 0];  dst[offset +  1] = m[mOffset + 4];  dst[offset +  2] = m[mOffset +  8];  dst[offset +  3] = m[mOffset + 12];
+    dst[offset +  4] = m[mOffset + 1];  dst[offset +  5] = m[mOffset + 5];  dst[offset +  6] = m[mOffset +  9];  dst[offset +  7] = m[mOffset + 13];
+    dst[offset +  8] = m[mOffset + 2];  dst[offset +  9] = m[mOffset + 6];  dst[offset + 10] = m[mOffset + 10];  dst[offset + 11] = m[mOffset + 14];
+    dst[offset + 12] = m[mOffset + 3];  dst[offset + 13] = m[mOffset + 7];  dst[offset + 14] = m[mOffset + 11];  dst[offset + 15] = m[mOffset + 15];
+
+    return dst;
+  },
+
+  aim(eye, target, up, dst) {
+    dst = dst || new Float32Array(16);
+
+    const zAxis = vec3.normalize(vec3.subtract(target, eye));
+    const xAxis = vec3.normalize(vec3.cross(up, zAxis));
+    const yAxis = vec3.normalize(vec3.cross(zAxis, xAxis));
+
+    dst[ 0] = xAxis[0];  dst[ 1] = xAxis[1];  dst[ 2] = xAxis[2];  dst[ 3] = 0;
+    dst[ 4] = yAxis[0];  dst[ 5] = yAxis[1];  dst[ 6] = yAxis[2];  dst[ 7] = 0;
+    dst[ 8] = zAxis[0];  dst[ 9] = zAxis[1];  dst[10] = zAxis[2];  dst[11] = 0;
+    dst[12] = eye[0];    dst[13] = eye[1];    dst[14] = eye[2];    dst[15] = 1;
+
+    return dst;
+  },
+
+  cameraAim(eye, target, up, dst) {
+    dst = dst || new Float32Array(16);
+
+    const zAxis = vec3.normalize(vec3.subtract(eye, target));
+    const xAxis = vec3.normalize(vec3.cross(up, zAxis));
+    const yAxis = vec3.normalize(vec3.cross(zAxis, xAxis));
+
+    dst[ 0] = xAxis[0];  dst[ 1] = xAxis[1];  dst[ 2] = xAxis[2];  dst[ 3] = 0;
+    dst[ 4] = yAxis[0];  dst[ 5] = yAxis[1];  dst[ 6] = yAxis[2];  dst[ 7] = 0;
+    dst[ 8] = zAxis[0];  dst[ 9] = zAxis[1];  dst[10] = zAxis[2];  dst[11] = 0;
+    dst[12] = eye[0];    dst[13] = eye[1];    dst[14] = eye[2];    dst[15] = 1;
+
+    return dst;
+  },
+
+  lookAt(eye, target, up, dst = null, offset = 0) {
+    return mat4.inverse(mat4.cameraAim(eye, target, up, dst, offset), offset, dst);
+  },
+
+    /**
+     * Translates the given 4-by-4 matrix by the given vector v.
+     * @param m - The matrix.
+     * @param v - The vector by
+     *     which to translate.
+     * @param dst - matrix to hold result. If not passed a new one is created.
+     * @returns The translated matrix.
+     */
+    translate(m, mOffset, v, dst = null, offset = 0) {
+        const newDst = (dst ?? new Float32Array(16));
+        const v0 = v[0];
+        const v1 = v[1];
+        const v2 = v[2];
+        const m00 = m[mOffset + 0];
+        const m01 = m[mOffset + 1];
+        const m02 = m[mOffset + 2];
+        const m03 = m[mOffset + 3];
+        const m10 = m[mOffset + 1 * 4 + 0];
+        const m11 = m[mOffset + 1 * 4 + 1];
+        const m12 = m[mOffset + 1 * 4 + 2];
+        const m13 = m[mOffset + 1 * 4 + 3];
+        const m20 = m[mOffset + 2 * 4 + 0];
+        const m21 = m[mOffset + 2 * 4 + 1];
+        const m22 = m[mOffset + 2 * 4 + 2];
+        const m23 = m[mOffset + 2 * 4 + 3];
+        const m30 = m[mOffset + 3 * 4 + 0];
+        const m31 = m[mOffset + 3 * 4 + 1];
+        const m32 = m[mOffset + 3 * 4 + 2];
+        const m33 = m[mOffset + 3 * 4 + 3];
+        if (m !== newDst) {
+            newDst[offset + 0] = m00;
+            newDst[offset + 1] = m01;
+            newDst[offset + 2] = m02;
+            newDst[offset + 3] = m03;
+            newDst[offset + 4] = m10;
+            newDst[offset + 5] = m11;
+            newDst[offset + 6] = m12;
+            newDst[offset + 7] = m13;
+            newDst[offset + 8] = m20;
+            newDst[offset + 9] = m21;
+            newDst[offset + 10] = m22;
+            newDst[offset + 11] = m23;
+        }
+        newDst[offset + 12] = m00 * v0 + m10 * v1 + m20 * v2 + m30;
+        newDst[offset + 13] = m01 * v0 + m11 * v1 + m21 * v2 + m31;
+        newDst[offset + 14] = m02 * v0 + m12 * v1 + m22 * v2 + m32;
+        newDst[offset + 15] = m03 * v0 + m13 * v1 + m23 * v2 + m33;
+        return newDst;
+    },
+
+    /**
+     * Rotates the given 4-by-4 matrix around the x-axis by the given
+     * angle.
+     * @param m - The matrix.
+     * @param angleInRadians - The angle by which to rotate (in radians).
+     * @param dst - matrix to hold result. If not passed a new one is created.
+     * @returns The rotated matrix.
+     */
+    rotateX(m, mOffset, angleInRadians, dst = null, offset = 0) {
+        const newDst = (dst ?? new Float32Array(16));
+        const m10 = m[mOffset + 4];
+        const m11 = m[mOffset + 5];
+        const m12 = m[mOffset + 6];
+        const m13 = m[mOffset + 7];
+        const m20 = m[mOffset + 8];
+        const m21 = m[mOffset + 9];
+        const m22 = m[mOffset + 10];
+        const m23 = m[mOffset + 11];
+        const c = Math.cos(angleInRadians);
+        const s = Math.sin(angleInRadians);
+        newDst[offset + 4] = c * m10 + s * m20;
+        newDst[offset + 5] = c * m11 + s * m21;
+        newDst[offset + 6] = c * m12 + s * m22;
+        newDst[offset + 7] = c * m13 + s * m23;
+        newDst[offset + 8] = c * m20 - s * m10;
+        newDst[offset + 9] = c * m21 - s * m11;
+        newDst[offset + 10] = c * m22 - s * m12;
+        newDst[offset + 11] = c * m23 - s * m13;
+        if (m !== newDst) {
+            newDst[offset + 0] = m[mOffset + 0];
+            newDst[offset + 1] = m[mOffset + 1];
+            newDst[offset + 2] = m[mOffset + 2];
+            newDst[offset + 3] = m[mOffset + 3];
+            newDst[offset + 12] = m[mOffset + 12];
+            newDst[offset + 13] = m[mOffset + 13];
+            newDst[offset + 14] = m[mOffset + 14];
+            newDst[offset + 15] = m[mOffset + 15];
+        }
+        return newDst;
+    },
+
+    /**
+     * Rotates the given 4-by-4 matrix around the y-axis by the given
+     * angle.
+     * @param m - The matrix.
+     * @param angleInRadians - The angle by which to rotate (in radians).
+     * @param dst - matrix to hold result. If not passed a new one is created.
+     * @returns The rotated matrix.
+     */
+    rotateY(m, mOffset, angleInRadians, dst = null, offset = 0) {
+        const newDst = (dst ?? new Float32Array(16));
+        const m00 = m[mOffset + 0 * 4 + 0];
+        const m01 = m[mOffset + 0 * 4 + 1];
+        const m02 = m[mOffset + 0 * 4 + 2];
+        const m03 = m[mOffset + 0 * 4 + 3];
+        const m20 = m[mOffset + 2 * 4 + 0];
+        const m21 = m[mOffset + 2 * 4 + 1];
+        const m22 = m[mOffset + 2 * 4 + 2];
+        const m23 = m[mOffset + 2 * 4 + 3];
+        const c = Math.cos(angleInRadians);
+        const s = Math.sin(angleInRadians);
+        newDst[offset + 0] = c * m00 - s * m20;
+        newDst[offset + 1] = c * m01 - s * m21;
+        newDst[offset + 2] = c * m02 - s * m22;
+        newDst[offset + 3] = c * m03 - s * m23;
+        newDst[offset + 8] = c * m20 + s * m00;
+        newDst[offset + 9] = c * m21 + s * m01;
+        newDst[offset + 10] = c * m22 + s * m02;
+        newDst[offset + 11] = c * m23 + s * m03;
+        if (m !== newDst) {
+            newDst[offset + 4] = m[mOffset + 4];
+            newDst[offset + 5] = m[mOffset + 5];
+            newDst[offset + 6] = m[mOffset + 6];
+            newDst[offset + 7] = m[mOffset + 7];
+            newDst[offset + 12] = m[mOffset + 12];
+            newDst[offset + 13] = m[mOffset + 13];
+            newDst[offset + 14] = m[mOffset + 14];
+            newDst[offset + 15] = m[mOffset + 15];
+        }
+        return newDst;
+    },
+
+    /**
+     * Rotates the given 4-by-4 matrix around the z-axis by the given
+     * angle.
+     * @param m - The matrix.
+     * @param angleInRadians - The angle by which to rotate (in radians).
+     * @param dst - matrix to hold result. If not passed a new one is created.
+     * @returns The rotated matrix.
+     */
+    rotateZ(m, mOffset, angleInRadians, dst = null, offset = 0) {
+        const newDst = (dst ?? new Float32Array(16));
+        const m00 = m[mOffset + 0 * 4 + 0];
+        const m01 = m[mOffset + 0 * 4 + 1];
+        const m02 = m[mOffset + 0 * 4 + 2];
+        const m03 = m[mOffset + 0 * 4 + 3];
+        const m10 = m[mOffset + 1 * 4 + 0];
+        const m11 = m[mOffset + 1 * 4 + 1];
+        const m12 = m[mOffset + 1 * 4 + 2];
+        const m13 = m[mOffset + 1 * 4 + 3];
+        const c = Math.cos(angleInRadians);
+        const s = Math.sin(angleInRadians);
+        newDst[offset + 0] = c * m00 + s * m10;
+        newDst[offset + 1] = c * m01 + s * m11;
+        newDst[offset + 2] = c * m02 + s * m12;
+        newDst[offset + 3] = c * m03 + s * m13;
+        newDst[offset + 4] = c * m10 - s * m00;
+        newDst[offset + 5] = c * m11 - s * m01;
+        newDst[offset + 6] = c * m12 - s * m02;
+        newDst[offset + 7] = c * m13 - s * m03;
+        if (m !== newDst) {
+            newDst[offset + 8] = m[mOffset + 8];
+            newDst[offset + 9] = m[mOffset + 9];
+            newDst[offset + 10] = m[mOffset + 10];
+            newDst[offset + 11] = m[mOffset + 11];
+            newDst[offset + 12] = m[mOffset + 12];
+            newDst[offset + 13] = m[mOffset + 13];
+            newDst[offset + 14] = m[mOffset + 14];
+            newDst[offset + 15] = m[mOffset + 15];
+        }
+        return newDst;
+    },
+
+    /**
+     * Rotates the given 4-by-4 matrix around the given axis by the
+     * given angle.
+     * @param m - The matrix.
+     * @param axis - The axis
+     *     about which to rotate.
+     * @param angleInRadians - The angle by which to rotate (in radians).
+     * @param dst - matrix to hold result. If not passed a new one is created.
+     * @returns The rotated matrix.
+     */
+    axisRotate(m, mOffset, axis, angleInRadians, dst = null, offset = 0) {
+        const newDst = (dst ?? new Float32Array(16));
+        let x = axis[0];
+        let y = axis[1];
+        let z = axis[2];
+        const n = Math.sqrt(x * x + y * y + z * z);
+        x /= n;
+        y /= n;
+        z /= n;
+        const xx = x * x;
+        const yy = y * y;
+        const zz = z * z;
+        const c = Math.cos(angleInRadians);
+        const s = Math.sin(angleInRadians);
+        const oneMinusCosine = 1 - c;
+        const r00 = xx + (1 - xx) * c;
+        const r01 = x * y * oneMinusCosine + z * s;
+        const r02 = x * z * oneMinusCosine - y * s;
+        const r10 = x * y * oneMinusCosine - z * s;
+        const r11 = yy + (1 - yy) * c;
+        const r12 = y * z * oneMinusCosine + x * s;
+        const r20 = x * z * oneMinusCosine + y * s;
+        const r21 = y * z * oneMinusCosine - x * s;
+        const r22 = zz + (1 - zz) * c;
+        const m00 = m[mOffset + 0];
+        const m01 = m[mOffset + 1];
+        const m02 = m[mOffset + 2];
+        const m03 = m[mOffset + 3];
+        const m10 = m[mOffset + 4];
+        const m11 = m[mOffset + 5];
+        const m12 = m[mOffset + 6];
+        const m13 = m[mOffset + 7];
+        const m20 = m[mOffset + 8];
+        const m21 = m[mOffset + 9];
+        const m22 = m[mOffset + 10];
+        const m23 = m[mOffset + 11];
+        newDst[offset + 0] = r00 * m00 + r01 * m10 + r02 * m20;
+        newDst[offset + 1] = r00 * m01 + r01 * m11 + r02 * m21;
+        newDst[offset + 2] = r00 * m02 + r01 * m12 + r02 * m22;
+        newDst[offset + 3] = r00 * m03 + r01 * m13 + r02 * m23;
+        newDst[offset + 4] = r10 * m00 + r11 * m10 + r12 * m20;
+        newDst[offset + 5] = r10 * m01 + r11 * m11 + r12 * m21;
+        newDst[offset + 6] = r10 * m02 + r11 * m12 + r12 * m22;
+        newDst[offset + 7] = r10 * m03 + r11 * m13 + r12 * m23;
+        newDst[offset + 8] = r20 * m00 + r21 * m10 + r22 * m20;
+        newDst[offset + 9] = r20 * m01 + r21 * m11 + r22 * m21;
+        newDst[offset + 10] = r20 * m02 + r21 * m12 + r22 * m22;
+        newDst[offset + 11] = r20 * m03 + r21 * m13 + r22 * m23;
+        if (m !== newDst) {
+            newDst[offset + 12] = m[mOffset + 12];
+            newDst[offset + 13] = m[mOffset + 13];
+            newDst[offset + 14] = m[mOffset + 14];
+            newDst[offset + 15] = m[mOffset + 15];
+        }
+        return newDst;
+    },
+    scale(m, mOffset, v, dst = null, offset = 0) {
+        const newDst = (dst ?? new Float32Array(16));
+        const v0 = v[0];
+        const v1 = v[1];
+        const v2 = v[2];
+        newDst[offset + 0] = v0 * m[mOffset + 0 * 4 + 0];
+        newDst[offset + 1] = v0 * m[mOffset + 0 * 4 + 1];
+        newDst[offset + 2] = v0 * m[mOffset + 0 * 4 + 2];
+        newDst[offset + 3] = v0 * m[mOffset + 0 * 4 + 3];
+        newDst[offset + 4] = v1 * m[mOffset + 1 * 4 + 0];
+        newDst[offset + 5] = v1 * m[mOffset + 1 * 4 + 1];
+        newDst[offset + 6] = v1 * m[mOffset + 1 * 4 + 2];
+        newDst[offset + 7] = v1 * m[mOffset + 1 * 4 + 3];
+        newDst[offset + 8] = v2 * m[mOffset + 2 * 4 + 0];
+        newDst[offset + 9] = v2 * m[mOffset + 2 * 4 + 1];
+        newDst[offset + 10] = v2 * m[mOffset + 2 * 4 + 2];
+        newDst[offset + 11] = v2 * m[mOffset + 2 * 4 + 3];
+        if (m !== newDst) {
+            newDst[offset + 12] = m[mOffset + 12];
+            newDst[offset + 13] = m[mOffset + 13];
+            newDst[offset + 14] = m[mOffset + 14];
+            newDst[offset + 15] = m[mOffset + 15];
+        }
+        return newDst;
+    },
+};
+
+const mat3 = {
+  fromMat4(m, mOffset, dst = null, offset = 0) {
+    dst = dst || new Float32Array(12);
+
+    dst[offset + 0] = m[mOffset + 0]; dst[offset + 1] = m[mOffset + 1];  dst[offset +  2] = m[mOffset +  2];
+    dst[offset + 4] = m[mOffset + 4]; dst[offset + 5] = m[mOffset + 5];  dst[offset +  6] = m[mOffset +  6];
+    dst[offset + 8] = m[mOffset + 8]; dst[offset + 9] = m[mOffset + 9];  dst[offset + 10] = m[mOffset + 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];
+
+/** 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 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);
+
+    const materialValues = new Float32Array([
+      ...color,
+      shininess,
+      0, 0, 0,  // padding
+    ]);
+    const materialUniformBuffer = createBufferWithData(
+      device,
+      materialValues,
+      GPUBufferUsage.UNIFORM,
+    );
+
+    materials.push({
+      materialUniformBuffer,
+      texture,
+      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} = 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();
+
+    let mathElapsedTimeMs = 0;
+
+    const transferBuffer = getMappedTransferBuffer();
+    const uniformValues = new Float32Array(transferBuffer.getMappedRange());
+
+    for (let i = 0; i < settings.numObjects; ++i) {
+      const {
+        axis,
+        radius,
+        speed,
+        rotationSpeed,
+        scale,
+      } = objectInfos[i];
+      const mathTimeStartMs = performance.now();
+
+      // Make views into the mapped buffer.
+      const uniformBufferOffset = i * uniformBufferSpace;
+      const f32Offset = uniformBufferOffset / 4;
+      const normalOffset = f32Offset + kNormalMatrixOffset;
+      const worldOffset = f32Offset + kWorldOffset;
+
+      // Compute a world matrix
+      mat4.identity(uniformValues, worldOffset);
+      mat4.axisRotate(uniformValues, worldOffset, axis, i + time * speed, uniformValues, worldOffset);
+      mat4.translate(uniformValues, worldOffset, [0, 0, Math.sin(i * 3.721 + time * speed) * radius], uniformValues, worldOffset);
+      mat4.translate(uniformValues, worldOffset, [0, 0, Math.sin(i * 9.721 + time * 0.1) * radius], uniformValues, worldOffset);
+      mat4.rotateX(uniformValues, worldOffset, time * rotationSpeed + i, uniformValues, worldOffset);
+      mat4.scale(uniformValues, worldOffset, [scale, scale, scale], uniformValues, worldOffset);
+
+      // Inverse and transpose it into the normalMatrix value
+      mat3.fromMat4(mat4.transpose(mat4.inverse(uniformValues, worldOffset), 0), 0, uniformValues, normalOffset);
+
+      mathElapsedTimeMs += performance.now() - mathTimeStartMs;
+    }
+    transferBuffer.unmap();
+
+    // copy the uniform values from the transfer buffer to the uniform buffer
+    if (settings.numObjects) {
+      const size = (settings.numObjects - 1) * uniformBufferSpace + uniformBufferSize;
+      encoder.copyBufferToBuffer(transferBuffer, 0, uniformBuffer, 0, size);
+    }
+
+    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, 0, viewMatrix, 0, viewProjectionValue);
+
+    lightWorldPositionValue.set([-10, 30, 300]);
+    viewWorldPositionValue.set(eye);
+
+    device.queue.writeBuffer(globalUniformBuffer, 0, globalUniformValues);
+
+    const pass = timingHelper.beginRenderPass(encoder, renderPassDescriptor);
+    pass.setPipeline(pipeline);
+    pass.setVertexBuffer(0, vertexBuffer);
+    pass.setIndexBuffer(indicesBuffer, 'uint16');
+
+    for (let i = 0; i < settings.numObjects; ++i) {
+      const { bindGroup } = objectInfos[i];
+      pass.setBindGroup(0, bindGroup);
+      pass.drawIndexed(numVertices);
+    }
+
+    pass.end();
+
+    const commandBuffer = encoder.finish();
+    device.queue.submit([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.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers.html
index 8b533a92..9e3b8ee4 100644
--- a/webgpu/webgpu-optimization-step6-use-mapped-buffers.html
+++ b/webgpu/webgpu-optimization-step6-use-mapped-buffers.html
@@ -512,6 +512,7 @@
       } = objectInfos[i];
       const mathTimeStartMs = performance.now();
 
+      // Make views into the mapped buffer.
       const uniformBufferOffset = i * uniformBufferSpace;
       const f32Offset = uniformBufferOffset / 4;
       const normalMatrixValue = uniformValues.subarray(