LogarithmicDepthBuffer causes problems with the drawing order of transparent objects in some devices

[TriggerBlazer]

Description

Set logarithmicDepthBuffer to true in THREE.WebGLRenderer,When rendering a scene with a transparent object that has an opaque object behind it,I got the expected result in my devices ,but the transparent object disappears in some Windows devices.
Furthermore, if do not use RenderPass and draw directly to the screen, the result will be correct.

Here is some device information to help
CPU:Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz 2.11 GHz
GPU:Intel(R) UHD Graphics
SYSTEM:Windows 10

If it is difficult to reproduce, I hope can provide some guesses on this problem. Thanks.

Reproduction steps

1.Set logarithmicDepthBuffer to true in THREE.WebGLRenderer
2.use RenderPass,render to framebuffer
3.darw a transparent object that has an opaque surface behind it

Code

import * as THREE from "three";

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { Pass, FullScreenQuad } from 'three/addons/postprocessing/Pass.js';
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { OutputPass } from "three/addons/postprocessing/OutputPass.js";


let camera, renderer, group, container;
let composer;


init();

function init() {
  container = document.getElementById("container");

  camera = new THREE.PerspectiveCamera(
    45,
    container.offsetWidth / container.offsetHeight,
    10,
    2000000
  );
  camera.position.z = 1000;

  const scene = new THREE.Scene();

  const hemiLight = new THREE.HemisphereLight(0xffffff, 0x222222, 5);
  hemiLight.position.set(1, 1, 1);
  scene.add(hemiLight);

  //

  group = new THREE.Group();

  const geometry = new THREE.SphereGeometry(10, 64, 40);
  const material = new THREE.MeshBasicMaterial({
    color: 0xff0000
  });
  const material2 = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    transparent: true,
    depthWrite: true,
    depthTest: true,
    opacity: 0.5
  });

  for (let i = 0; i < 1; i++) {
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = 40;
    mesh.scale.setScalar(40);
    group.add(mesh);

    const mesh2 = new THREE.Mesh(geometry, material2);
    mesh2.scale.setScalar(10);
    mesh2.position.z = 500;
    group.add(mesh2);
  }

  scene.add(group);

  //

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(container.offsetWidth, container.offsetHeight);
  renderer.autoClear = false;
  container.appendChild(renderer.domElement);

  renderer.setClearColor(0x000000);
  renderer.setClearAlpha(0.0);

  //

  const size = renderer.getDrawingBufferSize(new THREE.Vector2());
  const renderTarget = new THREE.WebGLRenderTarget(size.width, size.height);

  const renderPass = new RenderPass(scene, camera);
  const outputPass = new OutputPass();

  //

  composer = new EffectComposer(renderer);
  composer.addPass(renderPass);
  composer.addPass(outputPass);

  window.addEventListener("resize", onWindowResize);

  animate();
}

function onWindowResize() {
  camera.aspect = container.offsetWidth / container.offsetHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(container.offsetWidth, container.offsetHeight);
  composer.setSize(container.offsetWidth, container.offsetHeight);
}

function animate() {
  requestAnimationFrame(animate);
  composer.render();
}

Live example

• jsfiddle-latest-release WebGLRenderer

Screenshots

There was a problem with displaying results on a very few devices

It appears below on most devices

Version

R170

Device

Desktop

Browser

Chrome, Edge

OS

Windows

[Mugen87]

Can't reproduce on macOS 15.1 with M2 Pro.

It's hard to pinpoint the issue but maybe there are problems with gl_FragDepth on these devices.