From 6ea25c39d2b01ccb5638e5a4de57dd3a1129dea0 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..b0ff5f3a 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.0, 0.0, 1.0], 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..354d05e4 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.0, 0.0, 1.0], loadOp: 'clear' as const, storeOp: 'store' as const, }, diff --git a/sample/deferredRendering/main.ts b/sample/deferredRendering/main.ts index 2e54621a..1223e768 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.0, 0.0, 1.0], 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.0, 0.0, 1.0], 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..89766498 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.0, 0.0, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/helloTriangleMSAA/main.ts b/sample/helloTriangleMSAA/main.ts index 115baabc..927baa01 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.0, 0.0, 1.0], loadOp: 'clear', storeOp: 'discard', }, diff --git a/sample/imageBlur/main.ts b/sample/imageBlur/main.ts index 0aec1df0..b5d3dbaa 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.0, 0.0, 1.0], 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..9e00ea9d 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.0, 0.0, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/particles/main.ts b/sample/particles/main.ts index c4353b2a..104253ac 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.0, 0.0, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/renderBundles/main.ts b/sample/renderBundles/main.ts index 5f184b3d..8d9a3dc5 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.0, 0.0, 1.0], 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..6c176ecd 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.0, 0.0, 1.0], loadOp: 'clear', storeOp: 'store', }, diff --git a/sample/videoUploading/video.ts b/sample/videoUploading/video.ts index e59953ff..c2c90aed 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.0, 0.0, 1.0], 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', }, ], });