fix: use premultiplied alpha in WebGL & WebGPU #1399

antvis · Jun 30, 2023 · c18d37b · c18d37b
1 parent 8916c11
commit c18d37b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/g-plugin-webgl-device/src/WebGLDeviceContribution.ts b/packages/g-plugin-webgl-device/src/WebGLDeviceContribution.ts
@@ -14,7 +14,7 @@ export class WebGLDeviceContribution implements DeviceContribution {
       // @see https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-use-the-stencil-buffer.html
       stencil: true,
       // @see https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html
-      // premultipliedAlpha: true,
+      premultipliedAlpha: true,
     };
     this.handleContextEvents($canvas);
 

diff --git a/packages/g-plugin-webgpu-device/src/platform/Device.ts b/packages/g-plugin-webgpu-device/src/platform/Device.ts
@@ -206,8 +206,9 @@ export class Device_WebGPU implements SwapChain, IDevice_WebGPU {
       device: this.device,
       format: this.swapChainFormat,
       usage: this.swapChainTextureUsage,
-      // @see https://www.w3.org/TR/webgpu/#enumdef-gpucanvascompositingalphamode
-      alphaMode: 'opaque',
+      // @see https://www.w3.org/TR/webgpu/#gpucanvasalphamode
+      // alphaMode: 'opaque',
+      alphaMode: 'premultiplied',
     });
   }
 

diff --git a/site/examples/3d/3d-basic/demo/webgpu.js b/site/examples/3d/3d-basic/demo/webgpu.js
@@ -59,11 +59,11 @@ const rect = new Rect({
 
 const line = new Line({
   style: {
-    x1: 100,
-    y1: 200,
-    x2: 100,
-    y2: 400,
-    stroke: 'red',
+    x1: 200,
+    y1: 100,
+    x2: 400,
+    y2: 100,
+    stroke: '#1890FF',
     lineWidth: 2,
   },
 });
@@ -87,7 +87,6 @@ const image = new Image({
     width: 200,
     height: 200,
     src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
-    isBillboard: true,
   },
 });