Certain gltf models display incorrectly in three.js

Describe the bug

Certain models now display incorrectly. These models used to display correctly. I noticed the change when updating from 0.108.0 to 0.121.1, however the issue appears to still happen in the latest three.js version. Some gLTF models display incorrectly in three.js since a recent update.

To Reproduce

car.zip

Open this model in this three.js based gLTF viewer to see the problem.

The model displays fine in this alternate gLTF viewer.

Code

// code goes here

Platform:

• Device: Desktop
• OS: Windows
• Browser: Chrome
• Three.js version: latest

[donmccurdy]

https://github.com/mrdoob/three.js/pull/18235 is the relevant change here. Despite the result you’re seeing here, it was a necessary and correct change. The model attached has two materials (output from gltf-transform inspect car.gltf) …

#	name	instances	textures	alphaMode	doubleSided
0	Material #582	1	baseColorTexture	BLEND
1	window	1	baseColorTexture	BLEND

… note that both, not just the window material, are using alpha blending (or material.transparent = true). The change above fixed a number of issues with materials that are actually transparent, while unfortunately making it much more obvious when something that isn’t really transparent is marked for the alpha blend pass anyway, because it can create sorting issues.

Fortunately the workarounds are pretty easy:

• A. In Blender, switch from “Alpha Blend” to “Opaque” for these materials, or…
• B. In three.js, manually set .transparent = false, or…
• C. Use a script to patch the file…

import { NodeIO } from '@gltf-transform/core';

const io = new NodeIO();
const document = io.read('car.gltf');

for (const material of document.getRoot().listMaterials()) {
	if (material.getName() !== 'window') {
		material.setAlphaMode('OPAQUE');
	}
}

io.write('car-patched.glb', document);

Fixed version attached:

car-patched.glb.zip

[donmccurdy]

… I guess you saw it already but car-patched.glb gets [‘image/tga’ error]

Yeah, the file contains a TGA texture, which glTF doesn’t allow. I’m not sure why it says the “recognized image format” is PNG. Appears to be a bug in the Babylon.JS 3DS Max exporter not converting that.

Do we still need to set depthWrite = false after #21967?

I think it’s still best to do so. Or at least to recommend it as the default choice, and to enable it automatically in GLTFLoader. Certainly there are cases where the user might want to switch to depthWrite=true, and that’s fine. Another common case where depthWrite=false makes a difference is two geometries centered at the same point, or interlocking in some way. Sorting by the AABB rather than the center might help with the former.