Hello,
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.
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%;
}
