CI: Tests are not consistently running with WebGPU

[gkjohnson]

Originally mentioned by @WestLangley here - it seems that the CI tests are fairly frequently reporting the following error on screenshot tests resulting the test being skipped and (possibly erroneously) being marked as "passed":

Error: [example name]: JSHandle:THREE.THREE.WebGPURenderer: WebGPU Device Lost:

Message: A valid external Instance reference no longer exists.
Reason: unknown
Restarting browser...

You can see the issue in this PR and many others. It seems to have started a number of weeks ago when the WebGL fallback stopped being used.

Notice specifically that no diff percentage is reported for webgpu_compute_cloth nor webgpu_compute_particles_fluid implying they haven't been evaluated:

[Mugen87]

I've researched a bit and the message we see (meaning "A valid external Instance reference no longer exists.") comes from Dawn, the WebGPU implementation of Chromium.

The WebGPU Device lost is something which we can't 100 % avoid, so we must find a policy how to better handle this issue.

How about we just retry the example when a Device lost happens instead of skipping over it? We can define a maximum number of retries (e.g. 3) or try it infinitely until a timeout is reached.

[Mugen87]

Alternatively, we redirect this issue somehow to the Dawn devs and ask for advice. The Device Lost always seems to happen with GPU-heavy demos.

[WestLangley]

FWIW, I am finding on my home machine (macOS 6.4.1, Chrome 148.0.7778.97) that I often get the WebGL backend, even though WebGPU is supported. This began with r184. Safari works properly. Firefox, too, but with a compatibility mode warning.

console.log( 'three.js r' + THREE.REVISION );

console.log( 'backend: ', renderer.backend ); // WebGPUBackend

await renderer.init();

console.log( 'backend: ', renderer.backend ); // WebGLBackend

[Mugen87]

The compatibility mode warning in Firefox is actually a browser-related issue, see #30725 (comment).

If you end up with a WebGL 2 backend after the init(), an exception has been thrown during the WebGPU init routine. Can you please inspect the error object in this catch block:

three.js/src/renderers/common/Renderer.js

Lines 770 to 772 in 99550a5

	} catch ( error ) {
	if ( this._getFallback !== null ) {

What does it state?

[WestLangley]

Actually, that block does not get executed. The backend swap occurs here, according to the debugger.

three.js/examples/jsm/inspector/tabs/Settings.js

Lines 15 to 19 in 99550a5

	if ( this.backend.isWebGLBackend !== true ) {
	const parameters = this.backend.parameters;
	this.backend = new WebGLBackend( parameters );

An example use case is webgpu_sky.html.

[WestLangley]

Including the following line in any webgpu example appears to trigger the backend swap.

import { Inspector } from 'three/addons/inspector/Inspector.js';

[Mugen87]

When you open the Inspector UI, is below "Force WebGL" checkbox activated?

These settings are saved in the browser's local storage. If you want to be on the save side, open the browsers dev tools and clear all site data. In Chromium browsers, this function is part of the "Application" tab.

[WestLangley]

Thanks @Mugen87 That was it.

I am not sure it is a good idea for these settings to track across examples (i.e., apps), however.