WebGPURenderer: Add backend information to data-engine field.

[jclaessens97]

Description

Currently there is no easy way to debug if you're running on webgpu or webgl fallback. There is an data-engine attribute, but it's always set to webgpu. This should make it easier to debug that.

This contribution is funded by Segments.ai

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	690.67 171.1	690.67 171.1	+0 B +0 B
WebGPU	816.43 220.08	816.5 220.08	+66 B +8 B
WebGPU Nodes	815.94 219.95	816.01 219.96	+66 B +9 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	463.31 111.89	463.31 111.89	+0 B +0 B
WebGPU	538.61 145.41	538.68 145.42	+66 B +9 B
WebGPU Nodes	494.73 135.28	494.79 135.28	+66 B +9 B

[Mugen87]

There is an data-engine attribute, but it's always set to webgpu.

How about we about the data-engine attribute so it provides more information? In this way, we don't have update Info. The following in Backend should do the trick:

getDomElement() {

    let domElement = this.domElement;

    if ( domElement === null ) {

        domElement = ( this.parameters.canvas !== undefined ) ? this.parameters.canvas : createCanvasElement();

        const backend = ( this.coordinateSystem === WebGPUCoordinateSystem ) ? 'WebGPU backend' : 'WebGL backend';

        // OffscreenCanvas does not have setAttribute, see #22811
        if ( 'setAttribute' in domElement ) domElement.setAttribute( 'data-engine', `three.js r${REVISION} WebGPURenderer, ${backend}` );

        this.domElement = domElement;

    }

    return domElement;

}

[linbingquan]

I think this display is incorrect.

Renderer.domElement = backend.getDomElement(); code was runing before await Renderer.init().

Test browser: Firefox 131

[Mugen87]

Good catch! I'll revert the PR for now. Let's think about a new solution.

[Mugen87]

@jclaessens97 If you are interested in the current used backend, can't you just evaluate renderer.backend.coordinateSystem?

[jclaessens97]

Probably yes. Thought it would be useful to have directly in three, but now that I know what to look for, I succesfully implemented it that way without a need of having it in threejs!