ITADN

Only one object correctly reflect the rotating environment map in WebGPU

#33763OpenPowerNow 创建于 2026-06-10
BugWebGPU
P
PowerNowcommented
### 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 条评论