Chrome Text Distortion When New Elements Are Added

[csimlinger]

Description

The issue surfaces when we employ FontLoader and introduce another element. Portions of the font undergo complete distortion. It operates smoothly until additional elements are introduced to the scene. This glitch appears to impact multiple tabs concurrently. Thus, if it manifests on one tab, it influences all fonts across every tab, regardless of their prior functionality. I also tried different three.js versions - same issue every time.

Reproduction steps

1. Update Chrome to latest version (on MacOS, not sure if it happens on Windows)
2. Run the Code (it should work fine), remove comment from line 44: Bug should appear

Code

import * as THREE from "https://esm.sh/three";
import { FontLoader } from "https://esm.sh/three/examples/jsm/loaders/FontLoader.js";
import { TextGeometry } from "https://esm.sh/three/examples/jsm/geometries/TextGeometry.js";

window.addEventListener('DOMContentLoaded', init);
function init() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 40;
    const renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor( 0x2B2B2B, 1 );
    document.body.appendChild(renderer.domElement);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    const loader = new FontLoader();
    loader.load('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/fonts/helvetiker_regular.typeface.json', function (font) {
        const textGeometry = new TextGeometry('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore', {
            font: font,
            size: 1,
            height: 0.1
        });
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 1 });
        const textMesh = new THREE.Mesh(textGeometry, material);
        scene.add(textMesh);

        textGeometry.computeBoundingBox();
        textMesh.position.x = -0.5 * (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x);
        textMesh.position.y = -0.5 * (textGeometry.boundingBox.max.y - textGeometry.boundingBox.min.y);
    });

    const material = new THREE.MeshBasicMaterial({ color: 0xFF0000 });
    const geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = 0;
    cube.position.y = 0;
    cube.position.z = 10;
    //scene.add(cube);

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
    window.addEventListener('resize', onWindowResize, false);

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
}

Live example

• jsfiddle-latest-release

Screenshots

Version

r164.1

Device

No response

Browser

Chrome

OS

MacOS

[Mugen87]

I'm unable to reproduce on macOS 14.4.1 and Chrome 125.0.6422.77 and Firefox 126. This is how the scene looks with and without the red cube in Chrome.

This issue might be device-related so please try to reproduce it on other systems.

[csimlinger]

I tried it on four different macs. The issue occurred on three of these four.

[Mugen87]

Have you tried different browsers as well? What happens in Firefox and Safari?

[Mugen87]

Besides, can you share a Chrome GPU report of one affected system by typing chrome://gpu/ in the address bar and hit "Donwload Report to File"?

[csimlinger]

Only happens in Chrome (currently everybody on version 125.0.6422.77).
Mac OS Versions:

12.6.6 - No issue
13.5 - Issue visible
14.3 - Issue visible
14.4.1 - Issue visible

[csimlinger]

Here is the GPU Report: https://pastebin.com/cTeNs0m4

Strangely it worked for 10 minutes on another computer, without us changing anything.
Problem happens now again all the time on 3 of 4 computers.

[Mugen87]

Strangely it worked for 10 minutes on another computer, without us changing anything.

Do all affected macs use Intel+AMD? Can you also reproduce on a mac with M processor?

If the issue might temporarily disappear, I wonder if it makes a difference if the discrete AMD GPU is used or the integrated Intel graphics (in your case UHD Graphics 630).

I'm not sure this is works anymore but it was possible in the past to go in "System Preferences" - "Energy Saver" and disable "Automatic graphics switching". This should force the usage of the discrete GPU.

[csimlinger]

I was able to disable the "Automatic graphics switching", the problem still occurs.
Yes, all are Intel + AMD. Unfortunately we don't have any M1 Mac here right now...

EDIT: We just found out, that if you disable "Hardware Acceleration" in Chrome, it works. 🤨

[Mugen87]

It seems this is a GPU related issue. Unfortunately, there is nothing what we can do on our side. The problem should be reported to the Chromium bug tracker (https://issues.chromium.org/issues).

Please report the issue there including the live example, the GPU report as a txt file attachment and the findings from this discussion (the rendering issue happens exclusively with Chrome on macOS with Intel+AMD).

I could imagine that the live example is still too complex as a reproduction case for the Chromium team so I wonder if we can break it further down. Do you ass any rendering issues with examples from the official website? https://threejs.org/examples/

There are some font/text examples that might show glitches on your hardware similar to your fiddle. Besides, it would be interesting to know if affected devices have issues with non-text related examples as well.

[csimlinger]

Oh... thanks for the info, I will report it.

Regarding glitches of the examples, looked trough many of them and I encounter these (not 100% sure if they are supposed to look like that, but I guess they are supposed to look differently):

[Mugen87]

The last two are definitely wrong. The logarithmic depth buffer demo shows glitches on the left side which is intended. The first one does not render its checkerboard pattern double-sided so the screenshot is as expected.

So there seems to be a more general GPU related issue on these devices. The root cause is not related to text rendering. It seems the 3MF demo (the one with the vehicle) could be a good reproduction test case since it does not involve font or text components.

[Mugen87]

Potentially related #27842.

[Mugen87]

Closing. This needs to be reported to the browser vendor.