Environments with more than one WebGPURenderers / canvases do not work

[x0YYYY0]

Description

I am working on a project where I need to have 2 canvases. Both canvases need to use Environment based lighting. For some reason the with the WebGPURenderer only one environment works, perhaps a global state issue?

Reproduction steps

1. Broken WebGPURender https://jsfiddle.net/zafrbgxd/21/
2. Working WebGLRenderer https://jsfiddle.net/zafrbgxd/24/

More than one canvas, both with env maps

Code

import * as THREE from 'three/webgpu';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

async function createScene(canvas, hdrPath) {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100);
    camera.position.set(0, 0, 4);
    
    const renderer = new THREE.WebGPURenderer({ canvas, antialias: true });
    await renderer.init()
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    
    const hdrTexture = await new RGBELoader().loadAsync(hdrPath);
    hdrTexture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = hdrTexture;
    scene.background = hdrTexture
    
    const controls = new OrbitControls(camera, renderer.domElement);
    
    const sphere = new THREE.Mesh(
        new THREE.SphereGeometry(0.8, 32, 32),
        new THREE.MeshStandardMaterial({ metalness: 1, roughness: 0, envMap: hdrTexture })
    );
    
    scene.add(sphere);
    	
    function animate() {
        controls.update()
        sphere.rotation.y += 0.005;
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }
    
   renderer.setAnimationLoop(animate)
}

// Create two canvases
const container = document.body;
const canvas1 = document.createElement('canvas');
const canvas2 = document.createElement('canvas');

canvas1.width = canvas2.width = window.innerWidth / 2;
canvas1.height = canvas2.height = window.innerHeight;
canvas1.style.position = canvas2.style.position = 'absolute';
canvas1.style.left = '0';
canvas2.style.left = `${window.innerWidth / 2}px`;

container.appendChild(canvas1);
container.appendChild(canvas2);

// Load two different HDR files
await createScene(canvas1, 'https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr');
await createScene(canvas2, 'https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr');

Live example

Broken WebGPURender https://jsfiddle.net/zafrbgxd/21/
Working WebGLRenderer https://jsfiddle.net/zafrbgxd/24/

Screenshots

Version

r173

Device

Desktop

Browser

Chrome

OS

MacOS