From c2da52c161d23a9d389d88de657a9c21b2cf7d53 Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Thu, 11 Jul 2024 11:45:16 -0700
Subject: [PATCH] address comments

---
 sample/occlusionQuery/main.ts  | 24 ++++++++++++++----------
 sample/occlusionQuery/utils.ts | 13 -------------
 2 files changed, 14 insertions(+), 23 deletions(-)
 delete mode 100644 sample/occlusionQuery/utils.ts

diff --git a/sample/occlusionQuery/main.ts b/sample/occlusionQuery/main.ts
index 8dea5fa6..d567774e 100644
--- a/sample/occlusionQuery/main.ts
+++ b/sample/occlusionQuery/main.ts
@@ -1,6 +1,5 @@
 import { GUI } from 'dat.gui';
 import { mat4 } from 'wgpu-matrix';
-import { cssColorToRGBA } from './utils';
 import solidColorLitWGSL from './solidColorLit.wgsl';
 
 const settings = {
@@ -81,12 +80,12 @@ const pipeline = device.createRenderPipeline({
 
 // prettier-ignore
 const cubePositions = [
-  { position: [-1,  0,  0], id: '🟥', color: 'red' },
-  { position: [ 1,  0,  0], id: '🟨', color: 'yellow' },
-  { position: [ 0, -1,  0], id: '🟩', color: 'green' },
-  { position: [ 0,  1,  0], id: '🟧', color: 'orange' },
-  { position: [ 0,  0, -1], id: '🟦', color: 'blue' },
-  { position: [ 0,  0,  1], id: '🟪', color: 'purple' },
+  { position: [-1,  0,  0], id: '🟥', color: [1, 0, 0, 1] },
+  { position: [ 1,  0,  0], id: '🟨', color: [1, 1, 0, 1] },
+  { position: [ 0, -1,  0], id: '🟩', color: [0, 0.5, 0, 1] },
+  { position: [ 0,  1,  0], id: '🟧', color: [1, 0.6, 0, 1] },
+  { position: [ 0,  0, -1], id: '🟦', color: [0, 0, 1, 1] },
+  { position: [ 0,  0,  1], id: '🟪', color: [0.5, 0, 0.5, 1] },
 ];
 
 const objectInfos = cubePositions.map(({ position, id, color }) => {
@@ -100,7 +99,7 @@ const objectInfos = cubePositions.map(({ position, id, color }) => {
   const worldInverseTranspose = uniformValues.subarray(16, 32);
   const colorValue = uniformValues.subarray(32, 36);
 
-  colorValue.set(cssColorToRGBA(color));
+  colorValue.set(color);
 
   const bindGroup = device.createBindGroup({
     layout: pipeline.getBindGroupLayout(0),
@@ -183,9 +182,14 @@ const vertexData = new Float32Array([
    1, -1, -1,     0,  0, -1,
   -1, -1, -1,     0,  0, -1,
 ]);
+// prettier-ignore
 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,
+   0,  1,  2,  0,  2,  3, // +x face
+   4,  5,  6,  4,  6,  7, // -x face
+   8,  9, 10,  8, 10, 11, // +y face
+  12, 13, 14, 12, 14, 15, // -y face
+  16, 17, 18, 16, 18, 19, // +z face
+  20, 21, 22, 20, 22, 23, // -z face
 ]);
 
 const vertexBuffer = createBufferWithData(
diff --git a/sample/occlusionQuery/utils.ts b/sample/occlusionQuery/utils.ts
deleted file mode 100644
index 2ff67dab..00000000
--- a/sample/occlusionQuery/utils.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const cssColorToRGBA8 = (() => {
-  const canvas = new OffscreenCanvas(1, 1);
-  const ctx = canvas.getContext('2d', { willReadFrequently: true });
-  return (cssColor: string) => {
-    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);
-  };
-})();
-
-export const cssColorToRGBA = (cssColor) =>
-  cssColorToRGBA8(cssColor).map((v) => v / 255);