WebGPU双MSAA管线仅显示最后一层问题求助

问题根源 #

1. 独立渲染循环与屏幕清除：每个图层启动单独的requestAnimationFrame循环，每次渲染都会通过loadOp: 'clear'清除屏幕缓冲区，后渲染的图层会直接覆盖先渲染的内容。
2. 管线独占MSAA/深度资源：每个管线单独创建MSAA纹理和深度纹理，不仅浪费显存，还导致图层间无法进行深度测试，且每次解析MSAA纹理到屏幕都会覆盖原有内容。

修复步骤 #

1. 创建全局共享的MSAA与深度纹理 #

在所有管线初始化前，创建一份全局共享的多重采样纹理和深度纹理：

// 全局共享MSAA颜色纹理
const sharedMultiTexture = device.createTexture({
    size,
    sampleCount: 4,
    format,
    usage: GPUTextureUsage.RENDER_ATTACHMENT,
});

// 全局共享深度纹理
const sharedDepthTexture = device.createTexture({
    size,
    sampleCount: 4,
    format: 'depth24plus',
    usage: GPUTextureUsage.RENDER_ATTACHMENT,
});
const sharedDepthView = sharedDepthTexture.createView();

2. 修改管线初始化函数 #

移除每个管线内创建multiTexture和depthTexture的代码，改为使用全局共享资源：
（以initPipelineODLine为例，initPipelineLine做相同修改）

export async function initPipelineODLine(data, device, format, size, viewport, mvpbuffer) {
    // 原有顶点数据处理、管线创建逻辑保持不变

    // 移除以下代码：
    // const multiTexture = device.createTexture(...);
    // const depthTexture = device.createTexture(...);
    // const depthView = depthTexture.createView();

    // 原有顶点缓冲区、uniform组创建逻辑保持不变

    // 返回结果移除独占资源
    return { pipeline, vertexBuffer, colorBuffer, mvpBuffer, uniformGroup };
}

3. 合并渲染循环为单一帧流程 #

将所有图层的渲染合并到同一个帧循环中，使用共享资源完成绘制后一次性解析到屏幕：

const pipelineObjects = {};

// 初始化所有管线
if (data.type === 'bus') {
    pipelineObjects.bus = await initPipelineLine(data, device, format, size, viewport, mvpbuffer);
} else if (data.type === 'odline') {
    pipelineObjects.odline = await initPipelineODLine(data, device, format, size, viewport, mvpbuffer);
}

// 统一帧渲染函数
function drawFrame() {
    const commandEncoder = device.createCommandEncoder();
    
    // 启动单个渲染通道，使用共享资源
    const passEncoder = commandEncoder.beginRenderPass({
        colorAttachments: [{
            view: sharedMultiTexture.createView(),
            resolveTarget: context.getCurrentTexture().createView(),
            clearValue: [0, 0, 0, 0],
            loadOp: 'clear',
            storeOp: 'store'
        }],
        depthStencilAttachment: {
            view: sharedDepthView,
            depthClearValue: 1.0,
            depthLoadOp: 'clear',
            depthStoreOp: 'store',
        },
    });

    // 绘制bus图层
    if (pipelineObjects.bus) {
        passEncoder.setPipeline(pipelineObjects.bus.pipeline);
        setsome(dataBus, device, context, pipelineObjects.bus, passEncoder, commandEncoder);
        draw(dataBus, device, context, pipelineObjects.bus, passEncoder, commandEncoder);
    }

    // 绘制odline图层
    if (pipelineObjects.odline) {
        passEncoder.setPipeline(pipelineObjects.odline.pipeline);
        setsome(dataODLine, device, context, pipelineObjects.odline, passEncoder, commandEncoder);
        draw(dataODLine, device, context, pipelineObjects.odline, passEncoder, commandEncoder);
    }

    passEncoder.end();
    device.queue.submit([commandEncoder.finish()]);
    requestAnimationFrame(drawFrame);
}

drawFrame();

原理说明 #

• 共享MSAA资源：所有图层在同一个多重采样纹理上绘制，最后一次性解析到屏幕，避免多次解析导致的图层覆盖。
• 单一渲染循环：确保每帧内所有图层按顺序绘制，后绘制的图层会遵守深度测试规则，不会直接覆盖整个屏幕。
• 统一深度缓冲：共享深度纹理让不同图层间的深度测试生效，正确处理图层遮挡关系。

内容的提问来源于stack exchange，提问作者699Felix