morphtargets example broken (flickering on Chrome)

[aknoerig]

Describe the bug

The morphtargets example shows flickering when interacting with the morph target sliders.

To Reproduce

Steps to reproduce the behavior:

1. Open Google Chrome
2. Go to morphtargets example
3. Drag spherify/twist sliders
4. Notice flickering

Expected behavior

The cube should morph smoothly.

Observed behavior

The shape is morphing, but intermittently jumping back to some basic cube. Once a different value than 0 is set, it keeps flickering/jumping back and forth. Setting a value to 1 lets the shape disappear altogether.

Note that on Safari the example is working fine.

Platform:

• Device: Desktop
• OS: MacOS 12.5
• Browser: Chrome Version 106.0.5249.61 (Official Build) (x86_64)
• Three.js version: r145

[Mugen87]

I'm unable to reproduce the issue with latest Chrome and FF on macOS. Also tested with Chrome on a Pixel 4a and a Windows 10 laptop.

Does the other morph target examples also break on your system? What about:

https://threejs.org/examples/webgl_morphtargets_horse.html
https://threejs.org/examples/webgl_morphtargets_face.html

[aknoerig]

Thanks for checking, that is weird. :) My system should be fairly standard. Also checked disabling all extensions and incognito mode.
On my Pixel it also works fine, as it does on Desktop FF and Safari.

The other morph target examples are working fine. But I guess they are different in that they load morphs from a GLTF file.

Let's maybe see if somebody else encounters this? I wouldn't know how to debug this further on my side.

[aknoerig]

Here's a screen recording of what the behaviour looks like for me:

Screen.Recording.2022-09-30.at.12.04.48.mov

[WestLangley]

Looks like #24652 (comment).

Regarding the cube example, I see no artifacts on M1, MacOS 12.6, Version 106.0.5249.61 (Official Build) (arm64).

[Mugen87]

The glich mentioned in #24652 (comment) is caused by CCDIKSolver. It is not related to the above exmaple.

[mrdoob]

@aknoerig Can you try disabling antialias when initialising the WebGLRenderer?

[aknoerig]

@mrdoob That indeed does the trick - the flickering is gone. Let me know if there's anything else to try.

[mrdoob]

Unfortunately there isn't much we can do.
This is an issue in Chrome with your current GPU. Maybe a Chrome update will fix it 🤞

[aknoerig]

Oh, I see, that's a shame :) - thanks for following up on this!
For reference, if anyone else encounters this: I'm on a MacBook Pro 2020 with an Intel Iris Plus Graphics card.