How to do the depth test

[michael8090]

To do a depth test, we need to :

1. encode the depth and color into a 64 int
2. use atomicMax to compare and write the encoded value to avoid writing conflict
3. decode the color and write it to the display render targert

But in WebGPU we don't have int64 type, how can we do it properly with WebGPU?

[OmarShehata]

encode the depth and color into a 64 int

hmmm, what about using separate buffers for depth and color? (this also might be a good questions to post on https://github.com/gpuweb/gpuweb/discussions, I don't know the state of the art of compute-based rasterization techniques, but I would love to learn/explore this more!)

[michael8090]

The problem with two buffers (or two atomic store operations) is that the memory is non-inherent, in another word, when two threads do "atomicMax(buffer, depth); if (depth > old_depth) {atomicStore(buffer, color);}" at the same time, it could be in the case where thread A writes the depth and thread B writes the color in the end. So the whole writing for the two values should be atomic, like what UE5 does in Nanite.

Unfortunately I found it seems impossible to do this in WebGPU, as u64 is not supported and there are no other way to write two values atomically.

[amengede]

May not be possible with WebGPU but I got it working in Vulkan, OpenGL also seems to have an extension which supports 64 bit atomic images!

The basic idea is to deal with 64 bit integers with the depth in the most significant 32 bits.