Post Process infinite grid "jittering"

Questions
, ,
1

I’m trying to create a measurement grid on the XY plane using an orthographic camera similar to many CAD applications.

I have decided it was a better idea to implement the grid effect as a post-processing effect instead of using the infinite ground mesh because I think it would introduce fewer problems like z-fighting and be more performant (correct me if I’m wrong here).

I am experimenting with WebGPU so I’ve written the shader in WGSL.

Currently, I have the grid properly displayed relative to the world. My approach is to convert the screen coordinates to world coordinates and then test if the position is in the correct spacing. However, there is some undesirable “jittering”/“shimmering” of the grid when panning/zooming. I assume this is happening due to the conversion from screen to world coordinates, leading to some inaccuracies when approximating the world position to the grid spacing. The rounding error is scaled with camera distance to help with this. While it has helped, it still isn’t perfect.

Any suggestions or alternative ways to accurately calculate the world position of screen fragments?

Reproduced playground:

2

Perhaps the answer on this thread could be of use? Pixel position in world space from fragment postprocess shader issue - Questions - Babylon.js (babylonjs.com) You could check your world position calculations against the solution there, at least to rule out if your calculations are the issue or not.