Как решить проблему прозрачности после установки глубины в WebGPU? ⇐ Javascript

[Anonymous]

Я отрисовал два круга и хотел вывести первый круг на передний план, увеличив его z-индекс. Однако после включения тестирования глубины фон первого круга стал прозрачным.
нажмите на демо и нажмите кнопку «Запустить».
демо
демо p>
Я просто хочу поднять слой первого круга, точно так же, как настраиваю слой в CSS.
async function main() {
const adapter = await navigator.gpu?.requestAdapter();
const device = await adapter?.requestDevice();
if (!device) {
fail("need a browser that supports WebGPU");
return;
}

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device,
format: presentationFormat,
alphaMode: "premultiplied",
});

const module = device.createShaderModule({
code: `
struct Vertex {
@location(0) position: vec2f,
@location(1) size: f32,
@location(2) depth: f32,
};

struct Uniforms {
resolution: vec2f,
};

struct VSOutput {
@builtin(position) position: vec4f,
@location(0) quad_position: vec2f,
@location(1) color: vec4f,
};

@group(0) @binding(0) var uni: Uniforms;

@vertex fn vs(
vert: Vertex,
@builtin(vertex_index) vNdx: u32,
@builtin(instance_index) instanceIndex: u32
) -> VSOutput {
let points = array(
vec2f(-1, -1),
vec2f( 1, -1),
vec2f(-1, 1),
vec2f(-1, 1),
vec2f( 1, -1),
vec2f( 1, 1),
);
var vsOut: VSOutput;
let pos = points[vNdx];
vsOut.position = vec4f(vert.position + pos * vert.size / uni.resolution, vert.depth, 1);
vsOut.quad_position = pos;
if(instanceIndex == 0) {
vsOut.color = vec4f(1,0,0,1);
} else {
vsOut.color = vec4f(1,1,0,1);
}

return vsOut;
}

const center = vec2f(0.0, 0.0);
@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
var color = vsOut.color;
let dist = distance(vsOut.quad_position, center);
if(dist > 1.0) {
return vec4f(0,0,0,0);
}

let alpha = 1.0 - smoothstep(0.98, 1.02, dist);
color = vec4f(color.rgb * alpha, alpha);

return color;
}
`,
});

const pipeline = device.createRenderPipeline({
label: "sizeable points",
layout: "auto",
vertex: {
module,
buffers: [
{
arrayStride: (2 + 2) * 4,
stepMode: "instance",
attributes: [
{ shaderLocation: 0, offset: 0, format: "float32x2" }, // position
{ shaderLocation: 1, offset: 8, format: "float32" }, // size
{ shaderLocation: 2, offset: 4, format: "float32" }, // depth
],
},
],
},
fragment: {
module,
targets: [{
format: presentationFormat, blend: {
color: {
operation: "add",
srcFactor: "one",
dstFactor: "one-minus-src-alpha",
},
alpha: {
operation: "add",
srcFactor: "one",
dstFactor: "one-minus-src-alpha",
},
},
}],
},
depthStencil: {
depthWriteEnabled: true,
depthCompare: "less",
format: "depth24plus",
},
});

const circle1 = {
x: 0,
y: 0,
size: 60,
depth: 0.2,
};

const circle2 = {
x: 0.1,
y: 0.1,
size: 60,
depth: 0.1,
};

const vertexData = new Float32Array([
circle1.x,
circle1.y,
circle1.size,
circle1.depth,
circle2.x,
circle2.y,
circle2.size,
circle2.depth,
]);

const vertexBuffer = device.createBuffer({
label: "vertex buffer vertices",
size: vertexData.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexData);

const uniformValues = new Float32Array(2);
const uniformBuffer = device.createBuffer({
size: uniformValues.byteLength,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});
const kResolutionOffset = 0;
const resolutionValue = uniformValues.subarray(
kResolutionOffset,
kResolutionOffset + 2
);

const bindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [{ binding: 0, resource: { buffer: uniformBuffer } }],
});

const depthTexture = device.createTexture({
label: "====> depthTexture",
size: [canvas.width, canvas.height, 1],
format: "depth24plus",
usage: GPUTextureUsage.RENDER_ATTACHMENT,
});

const renderPassDescriptor = {
label: "our basic canvas renderPass",
colorAttachments: [
{
// view:

Подробнее здесь: https://stackoverflow.com/questions/793 ... -in-webgpu