diff --git a/examples/files.json b/examples/files.json index 7f401d6dfeebde..c49e86b945d86b 100644 --- a/examples/files.json +++ b/examples/files.json @@ -329,6 +329,7 @@ "webgpu_instance_uniform", "webgpu_instancing_morph", "webgpu_lightprobe", + "webgpu_lightprobe_cubecamera", "webgpu_lights_custom", "webgpu_lights_ies_spotlight", "webgpu_lights_phong", diff --git a/examples/jsm/lights/LightProbeGenerator.js b/examples/jsm/lights/LightProbeGenerator.js index 4bd9896c8cd3fd..692c7c219518c7 100644 --- a/examples/jsm/lights/LightProbeGenerator.js +++ b/examples/jsm/lights/LightProbeGenerator.js @@ -7,7 +7,8 @@ import { SRGBColorSpace, NoColorSpace, HalfFloatType, - DataUtils + DataUtils, + WebGLCoordinateSystem } from 'three'; class LightProbeGenerator { @@ -126,7 +127,9 @@ class LightProbeGenerator { } - static fromCubeRenderTarget( renderer, cubeRenderTarget ) { + static async fromCubeRenderTarget( renderer, cubeRenderTarget ) { + + const flip = renderer.coordinateSystem === WebGLCoordinateSystem ? -1 : 1; // The renderTarget must be set to RGBA in order to make readRenderTargetPixels works let totalWeight = 0; @@ -143,12 +146,11 @@ class LightProbeGenerator { const shCoefficients = sh.coefficients; const dataType = cubeRenderTarget.texture.type; + const imageWidth = cubeRenderTarget.width; // assumed to be square - for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) { - - const imageWidth = cubeRenderTarget.width; // assumed to be square + let data; - let data; + if ( renderer.isWebGLRenderer ) { if ( dataType === HalfFloatType ) { @@ -162,7 +164,19 @@ class LightProbeGenerator { } - renderer.readRenderTargetPixels( cubeRenderTarget, 0, 0, imageWidth, imageWidth, data, faceIndex ); + } + + for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) { + + if ( renderer.isWebGLRenderer ) { + + await renderer.readRenderTargetPixelsAsync( cubeRenderTarget, 0, 0, imageWidth, imageWidth, data, faceIndex ); + + } else { + + data = await renderer.readRenderTargetPixelsAsync( cubeRenderTarget, 0, 0, imageWidth, imageWidth, 0, faceIndex ); + + } const pixelSize = 2 / imageWidth; @@ -194,15 +208,15 @@ class LightProbeGenerator { const pixelIndex = i / 4; - const col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize; + const col = ( 1 - ( pixelIndex % imageWidth + 0.5 ) * pixelSize ) * flip; const row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize; switch ( faceIndex ) { - case 0: coord.set( 1, row, - col ); break; + case 0: coord.set( - 1 * flip, row, col * flip ); break; - case 1: coord.set( - 1, row, col ); break; + case 1: coord.set( 1 * flip, row, - col * flip ); break; case 2: coord.set( col, 1, - row ); break; diff --git a/examples/screenshots/webgpu_lightprobe_cubecamera.jpg b/examples/screenshots/webgpu_lightprobe_cubecamera.jpg new file mode 100644 index 00000000000000..5d75a244773958 Binary files /dev/null and b/examples/screenshots/webgpu_lightprobe_cubecamera.jpg differ diff --git a/examples/webgl_lightprobe_cubecamera.html b/examples/webgl_lightprobe_cubecamera.html index 3babcb51351ecf..765e0ff5bf3d5f 100644 --- a/examples/webgl_lightprobe_cubecamera.html +++ b/examples/webgl_lightprobe_cubecamera.html @@ -78,13 +78,15 @@ const urls = genCubeUrls( 'textures/cube/pisa/', '.png' ); - new THREE.CubeTextureLoader().load( urls, function ( cubeTexture ) { + new THREE.CubeTextureLoader().load( urls, async function ( cubeTexture ) { scene.background = cubeTexture; cubeCamera.update( renderer, scene ); - lightProbe.copy( LightProbeGenerator.fromCubeRenderTarget( renderer, cubeRenderTarget ) ); + const probe = await LightProbeGenerator.fromCubeRenderTarget( renderer, cubeRenderTarget ); + + lightProbe.copy( probe ); scene.add( new LightProbeHelper( lightProbe, 5 ) ); diff --git a/examples/webgpu_lightprobe_cubecamera.html b/examples/webgpu_lightprobe_cubecamera.html new file mode 100644 index 00000000000000..cf4c60fb37db04 --- /dev/null +++ b/examples/webgpu_lightprobe_cubecamera.html @@ -0,0 +1,125 @@ + + + + three.js webgpu - light probe from cubeCamera + + + + + + +
+ three.js webgpu - light probe from cubeCamera +
+ + + + + + + diff --git a/test/e2e/puppeteer.js b/test/e2e/puppeteer.js index ed1d32d814ffd3..100af8c2098108 100644 --- a/test/e2e/puppeteer.js +++ b/test/e2e/puppeteer.js @@ -127,6 +127,7 @@ const exceptionList = [ // WebGPURenderer: Unknown problem 'webgpu_camera_logarithmicdepthbuffer', 'webgpu_clipping', + 'webgpu_lightprobe_cubecamera', 'webgpu_loader_materialx', 'webgpu_materials_video', 'webgpu_materialx_noise',