Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGPURenderer: Prevent PMREM to break when missing textures #27951

Merged
merged 2 commits into from
Mar 20, 2024
Merged

WebGPURenderer: Prevent PMREM to break when missing textures #27951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
81acb30
fix texture missing from env cubemap
RenaudRohlinger Mar 20, 2024
7ddd362
fix examples/webgpu_parallax_uv.html too
RenaudRohlinger Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions examples/jsm/loaders/RGBMLoader.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 } );
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot to remove this line but this basically does nothing (WebGPURenderer will still fallback to webgl if the webgpu context is not available) so I will include a patch in another PR later.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix in #27952

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
Expand Down