From c65375925d4c6bfbb56bb8f6e00ffc3d18c417bf Mon Sep 17 00:00:00 2001 From: Gregg Tavares Date: Wed, 3 Apr 2024 13:55:28 -0700 Subject: [PATCH] Use a simpler `clearValue` This is obviously a personal preference but, ... I feel like the `{ r: ?, g: ?, b: ?, a: ? }` format is left over from before the time when an array of numbers was allowed? The array of numbers is arguably more useful since all kinds of things can easily provide an array of numbers. So, it seems like it would be good for the samples to show the more useful usage. That way devs are not mislead into thinking they need to take some array of numbers and convert it into the more verbose format. --- sample/a-buffer/main.ts | 2 +- sample/animometer/main.ts | 2 +- sample/bitonicSort/main.ts | 2 +- sample/cameras/main.ts | 2 +- sample/computeBoids/main.ts | 2 +- sample/deferredRendering/main.ts | 6 +++--- sample/fractalCube/main.ts | 2 +- sample/helloTriangle/main.ts | 2 +- sample/helloTriangleMSAA/main.ts | 2 +- sample/imageBlur/main.ts | 2 +- sample/instancedCube/main.ts | 2 +- sample/normalMap/main.ts | 2 +- sample/particles/main.ts | 2 +- sample/renderBundles/main.ts | 2 +- sample/resizeCanvas/main.ts | 2 +- sample/resizeObserverHDDPI/main.ts | 2 +- sample/reversedZ/main.ts | 4 ++-- sample/rotatingCube/main.ts | 2 +- sample/samplerParameters/main.ts | 2 +- sample/shadowMapping/main.ts | 2 +- sample/skinnedMesh/main.ts | 4 ++-- sample/texturedCube/main.ts | 2 +- sample/twoCubes/main.ts | 2 +- sample/videoUploading/main.ts | 2 +- sample/videoUploading/video.ts | 2 +- sample/volumeRenderingTexture3D/main.ts | 2 +- sample/worker/worker.ts | 2 +- sample/workloadSimulator/index.html | 2 +- 28 files changed, 32 insertions(+), 32 deletions(-) diff --git a/sample/a-buffer/main.ts b/sample/a-buffer/main.ts index 5fdb0281..7707f93e 100644 --- a/sample/a-buffer/main.ts +++ b/sample/a-buffer/main.ts @@ -122,7 +122,7 @@ const opaquePassDescriptor: GPURenderPassDescriptor = { colorAttachments: [ { view: undefined, - clearValue: { r: 0, g: 0, b: 0, a: 1.0 }, + clearValue: [0, 0, 0, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/animometer/main.ts b/sample/animometer/main.ts index d5cf6ba9..72e814e5 100644 --- a/sample/animometer/main.ts +++ b/sample/animometer/main.ts @@ -275,7 +275,7 @@ function configure() { colorAttachments: [ { view: undefined as GPUTextureView, // Assigned later - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear' as const, storeOp: 'store' as const, }, diff --git a/sample/bitonicSort/main.ts b/sample/bitonicSort/main.ts index 786b5c22..e3525469 100644 --- a/sample/bitonicSort/main.ts +++ b/sample/bitonicSort/main.ts @@ -315,7 +315,7 @@ SampleInitFactoryWebGPU( { view: undefined, // Assigned later - clearValue: { r: 0.1, g: 0.4, b: 0.5, a: 1.0 }, + clearValue: [0.1, 0.4, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/cameras/main.ts b/sample/cameras/main.ts index be4a4ec5..f9846c5b 100644 --- a/sample/cameras/main.ts +++ b/sample/cameras/main.ts @@ -174,7 +174,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/computeBoids/main.ts b/sample/computeBoids/main.ts index 0d0e5e78..8a2ea996 100644 --- a/sample/computeBoids/main.ts +++ b/sample/computeBoids/main.ts @@ -105,7 +105,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { colorAttachments: [ { view: undefined as GPUTextureView, // Assigned later - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear' as const, storeOp: 'store' as const, }, diff --git a/sample/deferredRendering/main.ts b/sample/deferredRendering/main.ts index 2e54621a..473cbe1a 100644 --- a/sample/deferredRendering/main.ts +++ b/sample/deferredRendering/main.ts @@ -252,14 +252,14 @@ const writeGBufferPassDescriptor: GPURenderPassDescriptor = { { view: gBufferTextureViews[0], - clearValue: { r: 0.0, g: 0.0, b: 1.0, a: 1.0 }, + clearValue: [0.0, 0.0, 1.0, 1.0], loadOp: 'clear', storeOp: 'store', }, { view: gBufferTextureViews[1], - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, @@ -279,7 +279,7 @@ const textureQuadPassDescriptor: GPURenderPassDescriptor = { // view is acquired and set in render loop. view: undefined, - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/fractalCube/main.ts b/sample/fractalCube/main.ts index 9b274217..37ab8d61 100644 --- a/sample/fractalCube/main.ts +++ b/sample/fractalCube/main.ts @@ -146,7 +146,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/helloTriangle/main.ts b/sample/helloTriangle/main.ts index ba5561a6..ab7248f3 100644 --- a/sample/helloTriangle/main.ts +++ b/sample/helloTriangle/main.ts @@ -48,7 +48,7 @@ function frame() { colorAttachments: [ { view: textureView, - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/helloTriangleMSAA/main.ts b/sample/helloTriangleMSAA/main.ts index 115baabc..ad34cea5 100644 --- a/sample/helloTriangleMSAA/main.ts +++ b/sample/helloTriangleMSAA/main.ts @@ -61,7 +61,7 @@ function frame() { { view, resolveTarget: context.getCurrentTexture().createView(), - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'discard', }, diff --git a/sample/imageBlur/main.ts b/sample/imageBlur/main.ts index 0aec1df0..b1bab78f 100644 --- a/sample/imageBlur/main.ts +++ b/sample/imageBlur/main.ts @@ -267,7 +267,7 @@ function frame() { colorAttachments: [ { view: context.getCurrentTexture().createView(), - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/instancedCube/main.ts b/sample/instancedCube/main.ts index 2fb86064..4bfa062e 100644 --- a/sample/instancedCube/main.ts +++ b/sample/instancedCube/main.ts @@ -186,7 +186,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/normalMap/main.ts b/sample/normalMap/main.ts index 4edaaccf..f6b5398f 100644 --- a/sample/normalMap/main.ts +++ b/sample/normalMap/main.ts @@ -157,7 +157,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/particles/main.ts b/sample/particles/main.ts index c4353b2a..e718fd91 100644 --- a/sample/particles/main.ts +++ b/sample/particles/main.ts @@ -145,7 +145,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { colorAttachments: [ { view: undefined, // Assigned later - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/renderBundles/main.ts b/sample/renderBundles/main.ts index 5f184b3d..9a72d3f9 100644 --- a/sample/renderBundles/main.ts +++ b/sample/renderBundles/main.ts @@ -276,7 +276,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/resizeCanvas/main.ts b/sample/resizeCanvas/main.ts index 1a16144e..bf73f901 100644 --- a/sample/resizeCanvas/main.ts +++ b/sample/resizeCanvas/main.ts @@ -92,7 +92,7 @@ function frame() { { view: renderTargetView, resolveTarget: context.getCurrentTexture().createView(), - clearValue: { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }, + clearValue: [0.2, 0.2, 0.2, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/resizeObserverHDDPI/main.ts b/sample/resizeObserverHDDPI/main.ts index f3f7e4d1..fac614d0 100644 --- a/sample/resizeObserverHDDPI/main.ts +++ b/sample/resizeObserverHDDPI/main.ts @@ -116,7 +116,7 @@ function frame() { colorAttachments: [ { view: context.getCurrentTexture().createView(), - clearValue: { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }, + clearValue: [0.2, 0.2, 0.2, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/reversedZ/main.ts b/sample/reversedZ/main.ts index cf49b5fb..65ff3f1d 100644 --- a/sample/reversedZ/main.ts +++ b/sample/reversedZ/main.ts @@ -357,7 +357,7 @@ const drawPassDescriptor: GPURenderPassDescriptor = { // view is acquired and set in render loop. view: undefined, - clearValue: { r: 0.0, g: 0.0, b: 0.5, a: 1.0 }, + clearValue: [0.0, 0.0, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, @@ -396,7 +396,7 @@ const textureQuadPassDescriptor: GPURenderPassDescriptor = { // view is acquired and set in render loop. view: undefined, - clearValue: { r: 0.0, g: 0.0, b: 0.5, a: 1.0 }, + clearValue: [0.0, 0.0, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/rotatingCube/main.ts b/sample/rotatingCube/main.ts index 4aa8d3ff..cea6b992 100644 --- a/sample/rotatingCube/main.ts +++ b/sample/rotatingCube/main.ts @@ -120,7 +120,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/samplerParameters/main.ts b/sample/samplerParameters/main.ts index f923d5d6..7b357f45 100644 --- a/sample/samplerParameters/main.ts +++ b/sample/samplerParameters/main.ts @@ -317,7 +317,7 @@ function frame() { colorAttachments: [ { view: textureView, - clearValue: { r: 0.2, g: 0.2, b: 0.2, a: 1.0 }, + clearValue: [0.2, 0.2, 0.2, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/shadowMapping/main.ts b/sample/shadowMapping/main.ts index 39a616f2..bd40f902 100644 --- a/sample/shadowMapping/main.ts +++ b/sample/shadowMapping/main.ts @@ -194,7 +194,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { // view is acquired and set in render loop. view: undefined, - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/skinnedMesh/main.ts b/sample/skinnedMesh/main.ts index 0077e822..d68fcf0c 100644 --- a/sample/skinnedMesh/main.ts +++ b/sample/skinnedMesh/main.ts @@ -348,7 +348,7 @@ const gltfRenderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.3, g: 0.3, b: 0.3, a: 1.0 }, + clearValue: [0.3, 0.3, 0.3, 1.0], loadOp: 'clear', storeOp: 'store', }, @@ -367,7 +367,7 @@ const skinnedGridRenderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.3, g: 0.3, b: 0.3, a: 1.0 }, + clearValue: [0.3, 0.3, 0.3, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/texturedCube/main.ts b/sample/texturedCube/main.ts index d1124f37..080e029c 100644 --- a/sample/texturedCube/main.ts +++ b/sample/texturedCube/main.ts @@ -155,7 +155,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/twoCubes/main.ts b/sample/twoCubes/main.ts index efdadf0a..c33289f5 100644 --- a/sample/twoCubes/main.ts +++ b/sample/twoCubes/main.ts @@ -139,7 +139,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/videoUploading/main.ts b/sample/videoUploading/main.ts index 5644b827..35283202 100644 --- a/sample/videoUploading/main.ts +++ b/sample/videoUploading/main.ts @@ -93,7 +93,7 @@ function frame() { colorAttachments: [ { view: textureView, - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/videoUploading/video.ts b/sample/videoUploading/video.ts index e59953ff..3c79d578 100644 --- a/sample/videoUploading/video.ts +++ b/sample/videoUploading/video.ts @@ -93,7 +93,7 @@ export default async function ({ useVideoFrame }: { useVideoFrame: boolean }) { colorAttachments: [ { view: textureView, - clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, + clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/volumeRenderingTexture3D/main.ts b/sample/volumeRenderingTexture3D/main.ts index 4c6454d6..a4b6929c 100644 --- a/sample/volumeRenderingTexture3D/main.ts +++ b/sample/volumeRenderingTexture3D/main.ts @@ -153,7 +153,7 @@ const renderPassDescriptor: GPURenderPassDescriptor = { { view: undefined, // Assigned later - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'discard', }, diff --git a/sample/worker/worker.ts b/sample/worker/worker.ts index 4ca56210..aec123cc 100644 --- a/sample/worker/worker.ts +++ b/sample/worker/worker.ts @@ -138,7 +138,7 @@ async function init(canvas) { { view: undefined, // Assigned later - clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + clearValue: [0.5, 0.5, 0.5, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/workloadSimulator/index.html b/sample/workloadSimulator/index.html index a91519aa..41dba534 100644 --- a/sample/workloadSimulator/index.html +++ b/sample/workloadSimulator/index.html @@ -812,7 +812,7 @@

Web graphics workload simulator

view: renderAttachment, resolveTarget: multisampling.checked ? canvasView : undefined, loadOp: 'clear', - clearValue: { r: 1, g: 1, b: 1, a: 1 }, + clearValue: [1, 1, 1, 1], storeOp: multisampling.checked ? 'discard' : 'store', }, ], });