Skip to content

Commit

Permalink
WebGPURenderer: Prevent PMREM to break when missing textures (#27951)
Browse files Browse the repository at this point in the history 
* fix texture missing from env cubemap

* fix examples/webgpu_parallax_uv.html too
  • Loading branch information
@RenaudRohlinger
RenaudRohlinger committed Mar 20, 2024
1 parent 027b25f commit bd2845f
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 34 deletions.
16 changes: 16 additions & 0 deletions examples/jsm/loaders/RGBMLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ class RGBMLoader extends DataTextureLoader {

const texture = new CubeTexture();

for ( let i = 0; i < 6; i ++ ) {

texture.images[ i ] = undefined;

}

let loaded = 0;

const scope = this;
Expand Down Expand Up @@ -75,6 +81,16 @@ class RGBMLoader extends DataTextureLoader {

}

loadCubemapAsync( urls, onProgress ) {

return new Promise( ( resolve, reject ) => {

this.loadCubemap( urls, resolve, onProgress, reject );

} );

}

parse( buffer ) {

const img = UPNG.decode( buffer );
Expand Down
12 changes: 12 additions & 0 deletions examples/jsm/nodes/pmrem/PMREMNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,22 @@ function _getPMREMFromTexture( texture ) {

if ( texture.isCubeTexture ) {

if ( texture.source.data.some( ( texture ) => texture === undefined ) ) {

throw new Error( 'PMREMNode: Undefined texture in CubeTexture. Use onLoad callback or async loader' );

}

cacheTexture = _generator.fromCubemap( texture );

} else {

if ( texture.image === undefined ) {

throw new Error( 'PMREMNode: Undefined image in Texture. Use onLoad callback or async loader' );

}

cacheTexture = _generator.fromEquirectangular( texture );

}
Expand Down
12 changes: 6 additions & 6 deletions examples/jsm/renderers/common/extras/PMREMGenerator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,15 +420,15 @@ class PMREMGenerator {

if ( this._cubemapMaterial === null ) {

this._cubemapMaterial = _getCubemapMaterial();
this._cubemapMaterial = _getCubemapMaterial( texture );

}

} else {

if ( this._equirectMaterial === null ) {

this._equirectMaterial = _getEquirectMaterial();
this._equirectMaterial = _getEquirectMaterial( texture );

}

Expand Down Expand Up @@ -736,19 +736,19 @@ function _getBlurShader( lodMax, width, height ) {

}

function _getCubemapMaterial() {
function _getCubemapMaterial( envTexture ) {

const material = _getMaterial();
material.fragmentNode = cubeTexture( texture, outputDirection );
material.fragmentNode = cubeTexture( envTexture, outputDirection );

return material;

}

function _getEquirectMaterial() {
function _getEquirectMaterial( envTexture ) {

const material = _getMaterial();
material.fragmentNode = texture( texture, equirectUV( outputDirection ), 0 );
material.fragmentNode = texture( envTexture, equirectUV( outputDirection ), 0 );

return material;

Expand Down
16 changes: 7 additions & 9 deletions examples/webgpu_cubemap_adjustments.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@

init();

function init() {
async function init() {

if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {

Expand All @@ -68,18 +68,18 @@
// cube textures

const rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
const cube1Texture = new RGBMLoader()
const cube1Texture = await new RGBMLoader()
.setMaxRange( 16 )
.setPath( './textures/cube/pisaRGBM16/' )
.loadCubemap( rgbmUrls );
.loadCubemapAsync( rgbmUrls );

cube1Texture.generateMipmaps = true;
cube1Texture.minFilter = THREE.LinearMipmapLinearFilter;

const cube2Urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
const cube2Texture = new THREE.CubeTextureLoader()
const cube2Texture = await new THREE.CubeTextureLoader()
.setPath( './textures/cube/Park2/' )
.load( cube2Urls );
.loadAsync( cube2Urls );

cube2Texture.generateMipmaps = true;
cube2Texture.minFilter = THREE.LinearMipmapLinearFilter;
Expand Down Expand Up @@ -128,11 +128,9 @@
// scene objects

const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
const gltf = await loader.loadAsync( 'DamagedHelmet.gltf' );

scene.add( gltf.scene );

} );
scene.add( gltf.scene );

const sphereGeometry = new THREE.SphereGeometry( .5, 64, 32 );

Expand Down
7 changes: 4 additions & 3 deletions examples/webgpu_cubemap_dynamic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

init();

function init() {
async function init() {

if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {

Expand Down Expand Up @@ -80,10 +80,10 @@
const uvTexture = new THREE.TextureLoader().load( './textures/uv_grid_opengl.jpg' );

const rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
const texture = new RGBMLoader()
const texture = await new RGBMLoader()
.setMaxRange( 16 )
.setPath( './textures/cube/pisaRGBM16/' )
.loadCubemap( rgbmUrls );
.loadCubemapAsync( rgbmUrls );

texture.name = 'pisaRGBM16';
texture.minFilter = THREE.LinearMipmapLinearFilter;
Expand Down Expand Up @@ -150,6 +150,7 @@

const time = msTime / 1000;

if ( ! cube ) return;
cube.position.x = Math.cos( time ) * 30;
cube.position.y = Math.sin( time ) * 30;
cube.position.z = Math.sin( time ) * 30;
Expand Down
12 changes: 5 additions & 7 deletions examples/webgpu_cubemap_mix.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@

init();

function init() {
async function init() {

if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {

Expand Down Expand Up @@ -71,9 +71,9 @@
cube1Texture.minFilter = THREE.LinearMipmapLinearFilter;

const cube2Urls = [ 'dark-s_px.jpg', 'dark-s_nx.jpg', 'dark-s_py.jpg', 'dark-s_ny.jpg', 'dark-s_pz.jpg', 'dark-s_nz.jpg' ];
const cube2Texture = new THREE.CubeTextureLoader()
const cube2Texture = await new THREE.CubeTextureLoader()
.setPath( './textures/cube/MilkyWay/' )
.load( cube2Urls );
.loadAsync( cube2Urls );

cube2Texture.generateMipmaps = true;
cube2Texture.minFilter = THREE.LinearMipmapLinearFilter;
Expand All @@ -85,11 +85,9 @@
} );

const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
const gltf = await loader.loadAsync( 'DamagedHelmet.gltf' );

scene.add( gltf.scene );

} );
scene.add( gltf.scene );

renderer = new WebGPURenderer( { antialias: true } );

Expand Down
18 changes: 9 additions & 9 deletions examples/webgpu_parallax_uv.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

init();

function init() {
async function init() {

// scene

Expand All @@ -52,9 +52,9 @@

// environment

const environmentTexture = new THREE.CubeTextureLoader()
const environmentTexture = await new THREE.CubeTextureLoader()
.setPath( './textures/cube/Park2/' )
.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
.loadAsync( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );


scene.environment = environmentTexture;
Expand All @@ -64,21 +64,21 @@

const loader = new THREE.TextureLoader();

const topTexture = loader.load( 'textures/ambientcg/Ice002_1K-JPG_Color.jpg' );
const topTexture = await loader.loadAsync( 'textures/ambientcg/Ice002_1K-JPG_Color.jpg' );
topTexture.colorSpace = THREE.SRGBColorSpace;

const roughnessTexture = loader.load( 'textures/ambientcg/Ice002_1K-JPG_Roughness.jpg' );
const roughnessTexture = await loader.loadAsync( 'textures/ambientcg/Ice002_1K-JPG_Roughness.jpg' );
roughnessTexture.colorSpace = THREE.NoColorSpace;

const normalTexture = loader.load( 'textures/ambientcg/Ice002_1K-JPG_NormalGL.jpg' );
const normalTexture = await loader.loadAsync( 'textures/ambientcg/Ice002_1K-JPG_NormalGL.jpg' );
normalTexture.colorSpace = THREE.NoColorSpace;

const displaceTexture = loader.load( 'textures/ambientcg/Ice002_1K-JPG_Displacement.jpg' );
const displaceTexture = await loader.loadAsync( 'textures/ambientcg/Ice002_1K-JPG_Displacement.jpg' );
displaceTexture.colorSpace = THREE.NoColorSpace;

//

const bottomTexture = loader.load( 'textures/ambientcg/Ice003_1K-JPG_Color.jpg' );
const bottomTexture = await loader.loadAsync( 'textures/ambientcg/Ice003_1K-JPG_Color.jpg' );
bottomTexture.colorSpace = THREE.SRGBColorSpace;
bottomTexture.wrapS = THREE.RepeatWrapping;
bottomTexture.wrapT = THREE.RepeatWrapping;
Expand Down Expand Up @@ -109,7 +109,7 @@

// renderer

renderer = new WebGPURenderer( { antialias: true } );
renderer = new WebGPURenderer( { antialias: true, forceWebGL: false } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
Expand Down

0 comments on commit bd2845f

Please sign in to comment.