Only one object correctly reflect the rotating environment map in WebGPU
BugWebGPU
### Description
I’m trying to figure out why in three.js (0.184.0) webGPU, with a rotating environment map, rotated reflections are only displayed correctly on one object. In WebGL is everthing fine. What settings am I missing? Thanks and regards.
### Reproduction steps
Just run the code.
### Code
```js
import {
ACESFilmicToneMapping,
BoxGeometry,
Color,
EquirectangularReflectionMapping,
Mesh,
MeshPhysicalMaterial,
MeshStandardMaterial,
PerspectiveCamera,
Scene,
SphereGeometry,
SRGBColorSpace,
TextureLoader,
TorusKnotGeometry,
Vector3,
WebGPURenderer,
} from ‘three/webgpu’;
const viewport = document.querySelector(‘
’);
const scene = new Scene();
scene.background = new Color(0x0b0d10);
scene.environmentIntensity = 2.2;
scene.backgroundIntensity = 1;
scene.backgroundBlurriness = 0.08;
const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0.6, 6.5);
camera.lookAt(0, 0, 0);
const renderer = new WebGPURenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.05;
viewport.append(renderer.domElement);
await renderer.init();
const textureLoader = new TextureLoader();
const reflectiveMaterial = new MeshStandardMaterial({
color: 0xd7dde5,
metalness: 1,
roughness: 0.12,
envMapIntensity: 2.4,
});
const accentMaterial = new MeshStandardMaterial({
color: 0xc9a45f,
metalness: 1,
roughness: 0.18,
envMapIntensity: 2.1,
});
const darkMirrorMaterial = new MeshStandardMaterial({
color: 0x8e98a8,
metalness: 1,
roughness: 0.07,
envMapIntensity: 2.7,
});
const objects = [
new Mesh(new SphereGeometry(0.92, 64, 32), reflectiveMaterial),
new Mesh(new SphereGeometry(0.92, 64, 32), accentMaterial),
new Mesh(new SphereGeometry(0.92, 64, 32), darkMirrorMaterial),
];
objects[0].position.set(-2, 0, 0);
objects[1].position.set(0, 0, 0);
objects[2].position.set(2, 0, 0);
objects.forEach((object) => scene.add(object));
loadEnvironment(‘/EnvironmentMap1.png’);
window.addEventListener(‘resize’, () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
const rotationAxis = new Vector3(0, 1, 0);
let lastTime = 0;
renderer.setAnimationLoop((time) => {
const delta = Math.min((time - lastTime) / 1000, 0.033);
lastTime = time;
scene.environmentRotation.y += delta * 0.28;
scene.backgroundRotation.y += delta * 0.28;
renderer.render(scene, camera);
});
function loadEnvironment(url) {
textureLoader.load(
url,
(texture) => {
texture.mapping = EquirectangularReflectionMapping;
texture.colorSpace = SRGBColorSpace;
texture.needsUpdate = true;
scene.environment = texture;
scene.background = texture;
},
undefined,
(error) => console.error(`Environment texture could not be loaded: ${url}`, error),
);
}
```
```
{
box-sizing: border-box;
}
html,
body,
#app,
{
width: 100%;
height: 100%;
margin: 0;
}
body {
overflow: hidden;
background: #0b0d10;
}
#app {
position: relative;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
```
```
<img width="1024" height="1024" alt="Image" src="https://github.com/user-attachments/assets/d53a09d7-c6b9-4aae-ba6e-c28a3f4dc010" />
```
### Live example
### Screenshots
<img width="518" height="500" alt="Image" src="https://github.com/user-attachments/assets/f2bb4e63-9f55-4271-80ce-dfc926bbde3e" />
### Version
0.184.0
### Device
Desktop
### Browser
_No response_
### OS
Windows
0 条评论