webgpu / webgpu-samples

WebGPU Samples
https://webgpu.github.io/webgpu-samples/
BSD 3-Clause "New" or "Revised" License
1.77k stars 300 forks source link

Add depth bias to wireframe sample #430

Closed toji closed 3 months ago

toji commented 3 months ago

As was pointed out by @rconde01 in the matrix chat, the wireframe sample suffers from Z fighting that gives the wireframes a very aliased, sparkly appearance. This PR adds an adjustable depthBias and depthBiasSlopeScale slider that can be used both to improve the appearance of the wireframe and help visualize for users the effect those values have.

Before: Screenshot 2024-07-02 103450

After: Screenshot 2024-07-02 103528

Bias is applied to the lit mesh rather than the wireframe because apparently line and point primitives don't consider depth bias when rendering! Didn't know that previously. I've also added a checkbox to pause the scene's animation, as I found that helpful when specifically looking for the effects of the depth bias.

greggman commented 3 months ago

This is great! I actually tried adding that too and when I didn't see a difference I gave up for a while. I'm glad you figure out why it wasn't working for me.

Can you fix up the lint issues?

toji commented 3 months ago

Done!