[threejs] `logarithmicDepthBuffer` makes animations to render below everything

TThi · 4 сен 2023

Hi!

I found that with spine-threejs runtime, when we declare logarithmicDepthBuffer: true when creating the WebGL renderer (which is necessary in my case to solve some difficult z-fighting), spine animations are rendered under every other 3d object regardless of their 3d position.

It's easily reproducible on the official example by creating the renderer this way here:

renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });

Here is the result:

I tried with latest npm version of spine-threejs which is 4.2.18 and threejs version 0.143.0.

When reading about logarithmicDepthBuffer on threejs documentation it says:

Note that this setting uses gl_FragDepth if available which disables the Early Fragment Test optimization and can cause a decrease in performance

I wonder if this is the source of the problem. Does anyone have an idea of how to fix/solve/workaround this problem?

Mario · 4 сен 2023

You need to modify the default shader we use:

https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-threejs/src/SkeletonMesh.ts#L49

There are shader chunks related to the logarithmic depth buffer here (see the files starting with logarithmic_, which need to be integrated:
https://github.com/mrdoob/three.js/tree/master/src/renderers/shaders/ShaderChunk

You can modify the shader used by a SkeletonMesh by passing a SkeletonMeshMaterialParametersCustomizer to the SkeletonMesh constructor. I've created a working example here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-threejs/example/logarithmic-depth-buffer.html#L101

TThi · 4 сен 2023

Awesome, thank you, I'll try that!

TThi · 4 сен 2023

It works wonderfully out of the box . Thank you so much again! I was not expecting a so fast answer and so easy to implement! You literally saved me ~~hours~~ days .