Visual artifacts in rendering specific GLTF

[dxdc]

Description

When rendering a GLTF file (attached), unexpected visual artifacts appear in the form of distorted mesh patterns on the surfaces of the 3D model. The issue manifests as a series of sharp, triangular shapes that do not align with the intended smooth surface of the model. This phenomenon is particularly evident on the green and blue colored meshes, as observed in the attached screenshot.

This phenomenon is also quite readily apparent using the glTF Viewer. Interestingly, if you toggle wireframe in display (for example), these distorted mesh patterns disappear and go back to rendering properly.

molecule-06 (4).gltf.zip

Reproduction steps

• Load the provided GLTF file into the Three.js environment (see live example).
• Render the model using the standard mesh and material configurations.
• Observe the surfaces of the model, particularly the areas where color transitions occur.

Code

// code goes here

Live example

• https://jsfiddle.net/joa58Lq0/13/

Screenshots

Version

r161

Device

Desktop

Browser

Chrome

OS

MacOS

[dxdc]

(e.g., after toggling the wireframe on/off)

[Mugen87]

I'm not seeing these artifacts on my macMini with macOS 14.3.1 and Chrome 122.0.6261.94.

This could be a device specific issue. Do you mind upgrading macOS and Chrome to the latest version (if possible)?

[dxdc]

@Mugen87 thanks for the quick follow up.

I just updated Chrome to 122.0.6261.94 and running Ventura 13.6.4.

I don't see this issue on the live example I sent any longer, but I still do see it on the glTF Viewer in Chrome. Are you able to reproduce it there?

Interestingly, Firefox 123.0 does not have this issue nor does Safari 17.3.1.

EDIT:

Now, I do see it on the live example again. It does seem somewhat intermittent. This variation is a little easier to see:

• https://jsfiddle.net/joa58Lq0/12/

[Mugen87]

I don't see this issue on the live example I sent any longer, but I still do see it on the glTF Viewer in Chrome. Are you able to reproduce it there?

I can't reproduce the issue. This is a screenshot from the viewer:

This looks like a browser or device specific issue. Unfortunately, we don't support them here unless more users are affected by it so ideally this is reported to the respective browser vendors.

However, investigating such issues is very hard so before your report it would be ideal if you do some additional tests on your side and test on different Apple devices. If there is only an issue on a single device, this might be more unlikely to get fixed.