if three renderer open "logarithmicDepthBuffer" Arc layers have no depth, Hope to support depth

[Superhero-king]

Describe the bug
If the Three.js renderer opens the 'logarithDepthBuffer': true option, the Arcs Layer will be obscured by any opaque material or will not be obscured by any material containing transparent properties

To Reproduce
Steps to reproduce the behavior:

1. Create renderer and Three.js basic constructor:

const renderer = new WebGLRenderer({ antialias: true, logarithmicDepthBuffer: false, alpha: true });
const camera = new PerspectiveCamera(50, 1, 0.001, 1000);
const scene = new Scene();

2. Create ThreeGlobe constructor:

const globe = new ThreeGlobe({ waitForGlobeReady: true, animateIn: true });

3. Add globe to the scene:

scene.add(globe);

4. Add light to illuminate the material:

const ambientLight = new AmbientLight(new Color(0xFFFFFF), 1);
scene.add(ambientLight);

5. Add Globe Layer and Arcs Layer data:

globe.showGlobe(true);
globe.arcsData(flights)
         .arcColor(() => "#00FF00");

Expected behavior
Arcs Layer is not obscured by other materials, calculate its depth

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version 136.0.7103.114

[HUAHUAI23]

I'm having the same problem.

[vasturiano]

@Superhero-king what if you increase the rings' elevation, via ringAltitude? That might force them to render above the ground, and not be obscured anymore.

Edit: Actually I'm confused by your example:

globe.ringsData(pointsData)
    .pointColor("#ffffaa")
    .pointsMerge(true)
    .pointRadius(0.25)

Are you referring to the rings layer, the arcs layer or the points layer?

[Superhero-king]

@Superhero-king what if you increase the rings' elevation, via ringAltitude? That might force them to render above the ground, and not be obscured anymore.

Edit: Actually I'm confused by your example:

globe.ringsData(pointsData)
.pointColor("#ffffaa")
.pointsMerge(true)
.pointRadius(0.25)
Are you referring to the rings layer, the arcs layer or the points layer?

sorry!

Is Arcs Layer

I'm sorry! The above description and examples are incorrect, and I apologize for my mistake in the examples.
My above description is to say that the 'Arc Layers' material does not support Three.js depth! Because the material used to create the lines is ShaderMaterial Use custom shaders dashedLineShader() The dotted line created
I referred to the following literature:

LearnOpenGL-CN

Advanced GLSL

It has been found that providing the 'gl_fragDepth' variable in fragment shaders can better mask it with materials containing depth, ultimately resulting in Three.js ShaderChunk Found the 'logdepthbuffragment' fragment that provides the 'gl_fragDepth' variable! So I submitted a [pull request](https://github.com/vasturiano/three-globe/pull/109/commits/505b598a62e39a6b27b282674c916a68e9838fab) The problem has been solved in the middle

[vasturiano]

@Superhero-king ok, thanks for clarifying.

Are you able to do a simple example on https://codepen.io/ or https://codesandbox.io/ that illustrates the issue? Then we will also have a baseline to check if we fixed it or not.

[Superhero-king]

@Superhero-king ok, thanks for clarifying.

Are you able to do a simple example on https://codepen.io/ or https://codesandbox.io/ that illustrates the issue? Then we will also have a baseline to check if we fixed it or not.

Vue Environment: https://codesandbox.io/p/sandbox/test-k9zzph

React Environment: https://codesandbox.io/p/devbox/jt6gqz

I created a copy in the sandbox and completed the testing. After checking and correcting the errors in the replica, the expected effect was achieved. The Arcs Layer material supports configuring renderers with depth without affecting renderers without depth configuration

Thank you for the author's patient guidance.

[vasturiano]

Thanks for making that example and for your PR. I've just merged the PR so issue should be fixed!