您如何确保在 WebGPU 中正确清除背景？

编程问答 2022-05-27

问题描述

在使用 WebGPU 渲染时，是否需要设置一个魔法标志来正确清除背景？我的渲染工作正常，除了我使用的任何设置，我看到最后显示的垃圾在浏览器窗口中而不是背景颜色（如果我在附件中设置了一个非零的 clearColor 那么它将继续累积相同的颜色直到它最大化）：

enter image description here

我通过 emscripten CPP 接口使用 WebGPU，并在 Windows 上运行 Chrome Canary（版本 90.0.4407.0（官方构建）canary（64 位））。

我的帧渲染看起来像这样（从js端的requestAnimationFrame调用）：

WGPUSwapChain swapChain                 = _pWindow->swapChain();
WGPUTextureView backbufferView          = wgpuSwapChainGetCurrentTextureView(swapChain);
WGPURenderPassDescriptor renderpassInfo = {};
WGPURenderPassColorAttachmentDescriptor colorAttachment = {};
{
    colorAttachment.attachment            = backbufferView;
    colorAttachment.resolveTarget         = nullptr;
    colorAttachment.clearColor            = { 0.0f,0.0f,0.0f };
    colorAttachment.loadOp                = WGPULoadOp_Clear;
    colorAttachment.storeOp               = WGPUStoreOp_Store;
    renderpassInfo.colorAttachmentCount   = 1;
    renderpassInfo.colorAttachments       = &colorAttachment;
    renderpassInfo.depthStencilAttachment = nullptr;
}
WGPUCommandBuffer commands;
{
    WGPUCommandEncoder encoder = wgpuDeviceCreateCommandEncoder(_device,nullptr);

    WGPURenderPassEncoder pass = wgpuCommandEncoderBeginRenderPass(encoder,&renderpassInfo);
    wgpuRenderPassEncoderSetPipeline(pass,_pipeline);
    wgpuRenderPassEncoderSetVertexBuffer(pass,_vb,0);
    wgpuRenderPassEncoderDraw(pass,3,1,0);
    wgpuRenderPassEncoderEndPass(pass);
    wgpuRenderPassEncoderRelease(pass);

    
    commands = wgpuCommandEncoderFinish(encoder,nullptr);
    wgpuCommandEncoderRelease(encoder);
}

wgpuQueueSubmit(_queue,&commands);
wgpuCommandBufferRelease(commands);
wgpuTextureViewRelease(backbufferView);

使用以下设置设置管道：

WGPURenderPipelineDescriptor descriptor = {};
WGPUBlendDescriptor blendDescriptor           = {};
blendDescriptor.operation                     = WGPUBlendOperation_Add;
blendDescriptor.srcFactor                     = WGPUBlendFactor_One;
blendDescriptor.dstFactor                     = WGPUBlendFactor_Zero;
WGPUColorStateDescriptor colorStateDescriptor = {};
colorStateDescriptor.format                   = _colorFormat;
colorStateDescriptor.alphaBlend               = blendDescriptor;
colorStateDescriptor.colorBlend               = blendDescriptor;
colorStateDescriptor.writeMask                = WGPUColorWriteMask_All;

descriptor.colorStateCount = 1;
descriptor.colorStates     = &colorStateDescriptor;

是否有我遗漏的设置或者这是 Canary 错误？

解决方法

有一个零 alpha 值，这把它搞砸了:( 在 clearColor 字段中将其更改为 1 可以正常工作：

colorAttachment.clearColor            = { 0.0f,0.0f,1.0f };
emscriptengoogle-chromewebgpu