Line2NodeMaterial: Incompatible with logarithmic depth buffer.

[Jenychen1996]

Description

In the WebGPU rendering scenario, the WebGPURenderer uses the logarithmicDepthBuffer property and loads both the glb model and Line2 lines. The glb model is positioned below the Line2 model in the scene. At certain angles, some of the Line2 lines may be occluded by the glb model and become invisible.

Looking forward to your reply.

Reproduction steps

1. Initialize renderer = new THREE.WebGPURenderer({ antialias: true, logarithmicDepthBuffer: true })
2. Load the glb model
3. Load the line2 line
4. Rotate the perspective and observe the phenomenon.

Code

import * as THREE from 'three';

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { Line2 } from 'three/addons/lines/webgpu/Line2.js';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';

let camera, scene, renderer;

init();
render();

function init() {

	const container = document.createElement('div');
	document.body.appendChild(container);

	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
	camera.position.set(- 1.8, 0.6, 2.7);

	scene = new THREE.Scene();

	const light = new THREE.AmbientLight(0xffffff); // soft white light
	scene.add(light);
	const sun = new THREE.DirectionalLight(0xFFFFFF, 4.0);
	sun.position.set(- 1, 2.6, 1.4);
	scene.add(sun);

	// model

	const loader = new GLTFLoader().setPath('models/gltf/DamagedHelmet/glTF/');
	loader.load('DamagedHelmet.gltf', function (gltf) {

		console.log(gltf.scene)
		scene.add(gltf.scene);

		addLine2()

		render();

	});

	function addLine2() {
		const positions = [
			0.9424954056739807, 1.2, 0.900973916053772,
			1.9424954056739807, 1.2, 1.900973916053772,
			-1.3424954056739807, 1.2, -1.300973916053772,
			0.9424954056739807, 1.2, -0.900973916053772,
			1.9424954056739807, 1.2, 1.900973916053772,
			-1.3424954056739807, 1.2, 1.300973916053772,
			0.9424954056739807, 1.2, 0.900973916053772
		];
		const colors = [
			1, 0, 0,
			1, 0, 0,
			1, 1, 0,
			0, 1, 0,
			0, 0, 1,
			1, 0, 1,
			0, 1, 1
		]
		const material = new THREE.Line2NodeMaterial({

			color: 0xffffff,
			linewidth: 10, // in world units with size attenuation, pixels otherwise
			vertexColors: true,
			dashed: false,
			alphaToCoverage: true,
			transparent: true

		});
		const geometry = new LineGeometry();
		geometry.setPositions(positions);
		geometry.setColors(colors);
		const line = new Line2(geometry, material);
		line.computeLineDistances();
		line.scale.set(1, 1, 1);
		scene.add(line);
	}


	renderer = new THREE.WebGPURenderer({ antialias: true, logarithmicDepthBuffer: true });
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.toneMapping = THREE.ACESFilmicToneMapping;
	container.appendChild(renderer.domElement);

	const controls = new OrbitControls(camera, renderer.domElement);
	controls.addEventListener('change', render); // use if there is no animation loop
	controls.minDistance = 2;
	controls.maxDistance = 10;
	controls.target.set(0, 0, - 0.2);
	controls.update();

	window.addEventListener('resize', onWindowResize);

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize(window.innerWidth, window.innerHeight);

	render();

}

//

function render() {

	renderer.renderAsync(scene, camera);

}

Live example

• webgpu_glb_line2_incorrect

Screenshots

No response

Version

dev;r178

Device

Desktop

Browser

Chrome

OS

Windows

[Mugen87]

It seems Line2NodeMaterial is currently incompatible with logarithmic depth buffer because it directly assigns logic to vertexNode and does not compute positionNode. Hence, the below logic in NodeMaterial.setupDepth() for computing logarithmic depth does not operate on a correct view space position.

three.js/src/materials/nodes/NodeMaterial.js

Lines 737 to 749 in adc26e1

	} else if ( renderer.logarithmicDepthBuffer === true ) {
	if ( camera.isPerspectiveCamera ) {
	depthNode = viewZToLogarithmicDepth( positionView.z, cameraNear, cameraFar );
	} else {
	depthNode = viewZToOrthographicDepth( positionView.z, cameraNear, cameraFar );
	}
	}

[Mugen87]

@sunag I have a fix ready that computes the correct depth in the Fn() for Line2NodeMaterial.vertexNode. However, I don't like the solution since any custom material implementing vertexNode runs in the same issue.

I think it would be better to update the code in NodeMaterial such that the logarithmic depth buffer computation relies on clip.z and not positionView.z. One solution would be the possibility to access the result of the vertex node (in some sense gl_position) as a TSL object. We could then do this:

const viewZ = perspectiveDepthToViewZ( vertexNode.z, cameraNear, cameraFar );
depthNode = viewZToLogarithmicDepth( viewZ, cameraNear, cameraFar );

Instead of vertexNode, positionClip would be an alternative name. Do you think you can create such a TSL object?

[Mugen87]

Here is the mentioned fix btw: Mugen87@818a050

[sunag]

I think we just need a vertex node for this; I used your idea as inspiration and apparently it worked, no major changes were needed.

I'll do some more tests tomorrow, and if everything is okay, I'll publish the PR.