Skip to content

fixed cubemap dynamic example and small PMREMs #23428

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

Merged
merged 1 commit into from
Feb 4, 2022
Merged

fixed cubemap dynamic example and small PMREMs #23428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 7 additions & 3 deletions examples/webgl_materials_cubemap_dynamic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,19 +73,23 @@

//

cubeRenderTarget1 = new THREE.WebGLCubeRenderTarget( 256 );
const envSize = 64; // minimum size for roughness >= 0.1
Copy link
Collaborator

@WestLangley WestLangley Feb 5, 2022

Choose a reason for hiding this comment

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

@Mugen87 @elalish I think it would be better, as an example, to do this:

const envSize = 256; // the minimum size if roughness >= 0.1 is 64

Are the default WebGLCubeRenderTarget options the ones you want?

Copy link
Collaborator

@Mugen87 Mugen87 Feb 5, 2022

Choose a reason for hiding this comment

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

I guess 64 was used so we have at least one use case with a small sized environment map. TBH, I'm not sure which value is better. Both setups makes sense.

Copy link
Collaborator

@WestLangley WestLangley Feb 5, 2022

Choose a reason for hiding this comment

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

Since users copy these patterns, I suggest we set it to a recommended size -- not to an edge case for testing.

Copy link
Contributor Author

@elalish elalish Feb 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Actually, I changed it here on purpose. Yes, this did catch an error, but more importantly, there's nothing special about 256. We've actually found most of our users preferring smaller envMaps to get reasonable HDR downloads (since they're PNGs internally). 256 is required for roughness >= 0.05, while 64 is for roughness >= 0.1; I consider that to be a very worthwhile trade in performance (both GPU cache and download) for the vast majority of users.

Copy link
Owner

@mrdoob mrdoob Feb 11, 2022

Choose a reason for hiding this comment

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

I think it would be good to document this.

@elalish what are the roughness ranges for 32, 128 and 512?

envmap size roughness
32 ???
64 >= 0.1
128 ???
256 >= 0.05
512 ???

Once we complete the table we could add it to the docs:
https://threejs.org/docs/?q=pmrem#api/en/extras/PMREMGenerator

Copy link
Contributor Author

@elalish elalish Feb 11, 2022

Choose a reason for hiding this comment

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

roughness = ( 2 ^ ( -0.5 * mip ) ) / 1.16, where dimension is 2 ^ mip. So:

  • 16: mip 4: roughness 0.21
  • 32: mip 5: roughness 0.15
  • 64: mip 6: roughness 0.11
  • 128: mip 7: roughness 0.076
  • 256: mip 8: roughness 0.054
  • 512: mip 9: roughness 0.038
  • 1024: mip 10: roughness 0.027


cubeRenderTarget1 = new THREE.WebGLCubeRenderTarget( envSize );
cubeRenderTarget1.texture.image[0] = {width: envSize, height: envSize};

cubeCamera1 = new THREE.CubeCamera( 1, 1000, cubeRenderTarget1 );

cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget( 256 );
cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget( envSize );
cubeRenderTarget2.texture.image[0] = {width: envSize, height: envSize};

cubeCamera2 = new THREE.CubeCamera( 1, 1000, cubeRenderTarget2 );

//

material = new THREE.MeshStandardMaterial( {
envMap: cubeRenderTarget2.texture,
roughness: 0.2,
roughness: 0.1,
metalness: 1
} );

Expand Down
2 changes: 1 addition & 1 deletion src/renderers/webgl/WebGLProgram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ function generateCubeUVSize( parameters ) {

const texelHeight = 1.0 / imageHeight;

const texelWidth = 1.0 / ( 3 * Math.max( Math.pow( 2, maxMip ), 7 ) );
const texelWidth = 1.0 / ( 3 * Math.max( Math.pow( 2, maxMip ), 7 * 16 ) );

return { texelWidth, texelHeight, maxMip };

Expand Down