Make all canvas alphaModes premultiplied

Also, fix helloTriangle not considering devicePixelRatio
webgpu · Apr 5, 2023 · e485401 · e485401
1 parent 0bd0e6b
commit e485401
Show file tree

Hide file tree

Showing 17 changed files with 21 additions and 17 deletions.
diff --git a/src/sample/animometer/main.ts b/src/sample/animometer/main.ts
@@ -36,7 +36,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
     usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
   });
 

diff --git a/src/sample/computeBoids/main.ts b/src/sample/computeBoids/main.ts
@@ -17,7 +17,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const spriteShaderModule = device.createShaderModule({ code: spriteWGSL });

diff --git a/src/sample/cubemap/main.ts b/src/sample/cubemap/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.

diff --git a/src/sample/deferredRendering/main.ts b/src/sample/deferredRendering/main.ts
@@ -28,7 +28,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create the model vertex buffer.

diff --git a/src/sample/fractalCube/main.ts b/src/sample/fractalCube/main.ts
@@ -31,7 +31,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
     // Specify we want both RENDER_ATTACHMENT and COPY_SRC since we
     // will copy out of the swapchain texture.
     usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.

diff --git a/src/sample/helloTriangle/main.ts b/src/sample/helloTriangle/main.ts
@@ -10,11 +10,15 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   if (!pageState.active) return;
   const context = canvas.getContext('webgpu') as GPUCanvasContext;
 
+  const devicePixelRatio = window.devicePixelRatio || 1;
+  canvas.width = canvas.clientWidth * devicePixelRatio;
+  canvas.height = canvas.clientHeight * devicePixelRatio;
   const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const pipeline = device.createRenderPipeline({

diff --git a/src/sample/helloTriangleMSAA/main.ts b/src/sample/helloTriangleMSAA/main.ts
@@ -18,7 +18,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const sampleCount = 4;

diff --git a/src/sample/imageBlur/main.ts b/src/sample/imageBlur/main.ts
@@ -22,7 +22,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const blurPipeline = device.createComputePipeline({

diff --git a/src/sample/instancedCube/main.ts b/src/sample/instancedCube/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.

diff --git a/src/sample/particles/main.ts b/src/sample/particles/main.ts
@@ -30,7 +30,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const particlesBuffer = device.createBuffer({

diff --git a/src/sample/resizeCanvas/main.ts b/src/sample/resizeCanvas/main.ts
@@ -21,7 +21,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const sampleCount = 4;

diff --git a/src/sample/reversedZ/main.ts b/src/sample/reversedZ/main.ts
@@ -114,7 +114,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const verticesBuffer = device.createBuffer({

diff --git a/src/sample/rotatingCube/main.ts b/src/sample/rotatingCube/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.

diff --git a/src/sample/shadowMapping/main.ts b/src/sample/shadowMapping/main.ts
@@ -25,7 +25,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create the model vertex buffer.

diff --git a/src/sample/texturedCube/main.ts b/src/sample/texturedCube/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.

diff --git a/src/sample/twoCubes/main.ts b/src/sample/twoCubes/main.ts
@@ -27,7 +27,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   // Create a vertex buffer from the cube data.

diff --git a/src/sample/videoUploading/main.ts b/src/sample/videoUploading/main.ts
@@ -29,7 +29,7 @@ const init: SampleInit = async ({ canvas, pageState }) => {
   context.configure({
     device,
     format: presentationFormat,
-    alphaMode: 'opaque',
+    alphaMode: 'premultiplied',
   });
 
   const pipeline = device.createRenderPipeline({