diff --git a/packages/g-plugin-webgl-device/src/WebGLDeviceContribution.ts b/packages/g-plugin-webgl-device/src/WebGLDeviceContribution.ts index a50533194..b2e91b229 100644 --- 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 index fcb07e9dc..3d5830d69 100644 --- 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 index 4f7cfc963..4bbc30c94 100644 --- 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, }, });