Logarithmic Depth Buffer Option in 3D Panels

[mikebauer]

Hey all,

First time posting here, so I wanted to start off by thanking you for this excellent tool. I've been trying use it at the moment to plot some navigational and gis data and have noticed some severe Z fighting when working with very large objects (like the Earth). In particular, in the attached screenshot I've been trying to plot some borders as line primitives on top of a glb mesh of the WGS84 ellipsoid which I've put into a ModelPrimitive (all within a SceneUpdate). In the screenshot, the right side is how things look in the web app while the left side is how it looks on my locally hosted version with the edit mentioned below. The screenshot is from very far away, but even from much lower the Z fighting makes the borders difficult to see. On the left side of the screenshot, I was able to eliminate this problem using a logarithmic depth buffer by adding a single line to Renderer.ts:

diff --git a/packages/studio-base/src/panels/ThreeDeeRender/Renderer.ts b/packages/studio-base/src/panels/ThreeDeeRender/Renderer.ts
index 74755cca5..04e9d3271 100644
--- a/packages/studio-base/src/panels/ThreeDeeRender/Renderer.ts
+++ b/packages/studio-base/src/panels/ThreeDeeRender/Renderer.ts
@@ -279,6 +279,7 @@ export class Renderer extends EventEmitter<RendererEvents> implements IRenderer
       canvas,
       alpha: true,
       antialias: true,
+      logarithmicDepthBuffer: true,
     });
     if (!this.gl.capabilities.isWebGL2) {
       throw new Error("WebGL2 is not supported");

I'm curious if this could be added as a configurable option for 3D panels. I'm happy to take on the effort of putting together a full PR for that, but wanted to check if y'all were amenable to that change first.

Thanks again for all of your hard work on this great open source tool!

[mikebauer]

[jtbandes]

This would be a reasonable thing to consider adding (previous attempt: https://github.com/foxglove/studio/pull/4662), but would be blocked by foxglove/three-text#63

[jtbandes]

I think I would try to have the material adapt to whatever the renderer is doing, since the setting is on the renderer and not usually something you have to configure on a per-material basis (I think). I haven't used the log depth stuff in three.js much before, so I could be wrong... Usually with three.js stuff I end up reading their source code to figure out how things are supposed to work, since it's not often obvious or well documented.

Created an internal tracking issue to make sure that we follow up on your PR when it is ready: FG-6822

[mikebauer]

Okay, I think foxglove/three-text#259 is probably ready for feedback. Who would you recommend for review?
I did manage to get things working slightly more cleanly by using the onBeforeCompile() callback to get info from the renderer. I also made a refurbished version of foxglove/studio#4662 in https://github.com/foxglove/studio/pull/7505 to integration test this a bit. It seems like everything is working alright for me locally. Thanks for all of your patience on this. This is my first time working with typescript instead of C++, so I expect a lot of changes may be needed. 😅

[jtbandes]

Thanks, will try to take a look at this within the next week or two.

[jtbandes]

FYI we've closed the foxglove/studio PR (see announcement) but I'm still planning to take a look at this soon 🙂

[mikebauer]

Yeah. I had seen that. Thanks for the heads up!

[jtbandes]

This is now implemented and available on the web app! It will be in the next release of the desktop app. Docs are updated here: https://github.com/foxglove/docs/pull/220