Make all canvas alphaModes premultiplied

Also, fix helloTriangle not considering devicePixelRatio

Author: austinEng

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,
   });
 

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 });

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.

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.

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.

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({

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;

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({

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.

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({