Is it possible to access the THREE.WebGLRenderer

[EffakT]

We are having an issue with z-fighting when a thickness is around 5mm.

We are thinking that using the logarithmicDepthBuffer from ThreeJS might help with the issue. However, are not too sure how to go about this.

Any help would be much appreciated.

[elalish]

You'll be outside the public API, so there be dragons, but yeah, you can find it with getOwnSymbols: $renderer. I assume this is for a large scene? Let us know what you find; that may be worth doing by default. Still, sometimes all you can do is artificially thicken things a bit. Also, doubled-sided (in the glTF) can be handy here, to avoid the second surface entirely.

[EffakT]

What we are seeing is below. See the black artifacts, and the occasional lighter squares.
The second surface is needed, as some colors need to be artificially darkened underneath.

I'll have a dig and see if I can find a solution in the Renderer object.

[EffakT]

Haven't had time to mess with the THREE.WebGLRenderer yet, however your suggestion of thickening seems to have resolved the issue.

[jukibom]

Haven't had time to mess with the THREE.WebGLRenderer yet, however your suggestion of thickening seems to have resolved the issue.

Just remember that USDZ does not support double sided - if you want to use the model in AR on iOS, it will be broken.

[EffakT]

Just dropping in this code snippet I found in the examples to access the ThreeRenderer object, in-case someone needs it or finds it helpful

const toneMV = modelViewer; // This is the model-viewer elements ID
let threeRenderer;
let scene;

for (let p = toneMV; p != null; p = Object.getPrototypeOf(p)) { // Loop through toneMV object
      const privateAPI = Object.getOwnPropertySymbols(p); // Get symbols (private API)
      const renderer = privateAPI.find((value) => value.toString() == 'Symbol(renderer)'); // Find the "renderer" Symbol
      const sceneSym = privateAPI.find((value) => value.toString() == 'Symbol(scene)'); // Find the "scene" Symbol
      if (renderer != null) { // If renderer was found
        threeRenderer = toneMV[renderer].threeRenderer; // set threeRenderer to the threeRenderer object
      }
      if (sceneSym != null) { // Same with scene
        scene = toneMV[sceneSym];
      }
      if (threeRenderer != null && scene != null) { // If both are found, break out of the loop, as we have what we need
        break;
      }
}