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

PMREMGenerator extension: Now you can set texture size and position #30334

Closed
wants to merge 33 commits into from
+36 −17
Closed

PMREMGenerator extension: Now you can set texture size and position #30334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
b5e685c
Update WGSLNodeBuilder.js
Spiri0 Dec 2, 2024
381bb94
Merge pull request #3 from Spiri0/wgslTypeLib-extension
Spiri0 Dec 2, 2024
75ddd00
Merge branch 'mrdoob:dev' into dev
Spiri0 Dec 4, 2024
8f2e365
enables the use of samplers in compute shaders
Spiri0 Dec 4, 2024
4e0c37c
Merge pull request #4 from Spiri0/sampler_for_compute_shader
Spiri0 Dec 4, 2024
c479502
Merge branch 'mrdoob:dev' into dev
Spiri0 Dec 10, 2024
741bd64
Merge branch 'mrdoob:dev' into dev
Spiri0 Dec 11, 2024
12635d0
Update webgpu_pmrem_scene.html
Spiri0 Dec 13, 2024
eb0febd
Add files via upload
Spiri0 Dec 13, 2024
2029f8d
Update webgpu_pmrem_scene.html
Spiri0 Dec 13, 2024
86587c8
Add files via upload
Spiri0 Dec 13, 2024
6e3c35e
Update webgpu_pmrem_scene.html
Spiri0 Dec 13, 2024
f8961b8
Update webgpu_pmrem_scene.html
Spiri0 Dec 13, 2024
38eea72
Merge pull request #7 from Spiri0/update-PMREM-scene-example
Spiri0 Dec 13, 2024
e909a77
Merge branch 'mrdoob:dev' into dev
Spiri0 Jan 15, 2025
ce59025
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
2c3645a
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
f2c96ef
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
f6ea023
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
69f5a86
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
f47913b
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
958f730
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
c70daa3
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
39ea7b4
Add size and position as parameters to the PMREMGenerator
Jan 16, 2025
93dd2e9
Delete src/renderers/webgpu/nodes/WGSLNodeBuilder.js
Spiri0 Jan 16, 2025
7fc4ef8
Add files via upload
Spiri0 Jan 16, 2025
77d2a68
update PR
Jan 20, 2025
78811dc
update PR
Jan 20, 2025
9a66d34
update PR
Jan 20, 2025
f7081e7
update PR
Jan 20, 2025
cb502d5
update PR
Jan 20, 2025
d0dad03
update PR
Jan 20, 2025
f3d5b3b
update PR
Jan 21, 2025
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
Binary file modified examples/screenshots/misc_exporter_usdz.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_loader_gltf_dispersion.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgpu_pmrem_scene.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 12 additions & 3 deletions examples/webgpu_pmrem_scene.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,42 +63,51 @@
scene.background = await loader.loadAsync( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );

let model;
let center = new THREE.Vector3( 0.5, 0, 0 );


model = new THREE.Mesh( new THREE.SphereGeometry( .2, 64, 64 ), new THREE.MeshBasicMaterial( { color: 0x0000ff } ) );
model.position.copy( center );
model.position.z -= 1;
scene.add( model );

model = new THREE.Mesh( new THREE.SphereGeometry( .2, 64, 64 ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
model.position.copy( center );
model.position.z += 1;
scene.add( model );

model = new THREE.Mesh( new THREE.SphereGeometry( .2, 64, 64 ), new THREE.MeshBasicMaterial( { color: 0xff00ff } ) );
model.position.copy( center );
model.position.x += 1;
scene.add( model );

model = new THREE.Mesh( new THREE.SphereGeometry( .2, 64, 64 ), new THREE.MeshBasicMaterial( { color: 0x00ffff } ) );
model.position.copy( center );
model.position.x -= 1;
scene.add( model );

model = new THREE.Mesh( new THREE.SphereGeometry( .2, 64, 64 ), new THREE.MeshBasicMaterial( { color: 0xffff00 } ) );
model.position.copy( center );
model.position.y -= 1;
scene.add( model );

model = new THREE.Mesh( new THREE.SphereGeometry( .2, 64, 64 ), new THREE.MeshBasicMaterial( { color: 0x00ff00 } ) );
model.position.copy( center );
model.position.y += 1;
scene.add( model );

//while ( scene.children.length > 0 ) scene.remove( scene.children[ 0 ] );

const sceneRT = new THREE.PMREMGenerator( renderer ).fromScene( scene );

const sceneRT = new THREE.PMREMGenerator( renderer ).fromScene( scene, 0, 0.1, 100, 512, center );

//

const pmremRoughness = uniform( .5 );
const pmremNode = pmremTexture( sceneRT.texture, normalWorld, pmremRoughness );

scene.add( new THREE.Mesh( new THREE.SphereGeometry( .5, 64, 64 ), new THREE.MeshBasicNodeMaterial( { colorNode: pmremNode } ) ) );
const mirror = new THREE.Mesh( new THREE.SphereGeometry( .5, 64, 64 ), new THREE.MeshBasicNodeMaterial( { colorNode: pmremNode } ) );
mirror.position.copy( center );
scene.add( mirror );

// gui

Expand Down
19 changes: 12 additions & 7 deletions src/extras/PMREMGenerator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,11 @@ class PMREMGenerator {
* @param {number} sigma
* @param {number} near
* @param {number} far
* @param {Number} size
* @param {Number} position
* @return {WebGLRenderTarget}
*/
fromScene( scene, sigma = 0, near = 0.1, far = 100 ) {
fromScene( scene, sigma = 0, near = 0.1, far = 100, size = 256, position = new Vector3( 0, 0, 0 ) ) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Couldn't we have these properties in class scope? e.g:

const sceneRT = new THREE.PMREMGenerator( renderer );
sceneRT.position = new THREE.Vector3( ... );
sceneRT.faceSize = 256;
sceneRT.fromScene( ... )

Maybe we will have more options in the future, that should help.

Copy link
Collaborator

@Mugen87 Mugen87 Jan 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

position and size are only relevant for fromScene() and have no purpose for the rest of the API. Hence, I would favor to keep both in the method signature. As a compromise, how about doing the following?

generator.fromScene( scene, sigma, near, far, options );

In this way, we can add position, size and potentially future configuration properties to options.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Sounds good to me.


_oldTarget = this._renderer.getRenderTarget();
_oldActiveCubeFace = this._renderer.getActiveCubeFace();
Expand All @@ -118,12 +120,12 @@ class PMREMGenerator {

this._renderer.xr.enabled = false;

this._setSize( 256 );
this._setSize( size );

const cubeUVRenderTarget = this._allocateTargets();
cubeUVRenderTarget.depthBuffer = true;

this._sceneToCubeUV( scene, near, far, cubeUVRenderTarget );
this._sceneToCubeUV( scene, near, far, position, cubeUVRenderTarget );

if ( sigma > 0 ) {

Expand Down Expand Up @@ -320,7 +322,7 @@ class PMREMGenerator {

}

_sceneToCubeUV( scene, near, far, cubeUVRenderTarget ) {
_sceneToCubeUV( scene, near, far, position, cubeUVRenderTarget ) {

const fov = 90;
const aspect = 1;
Expand Down Expand Up @@ -372,17 +374,20 @@ class PMREMGenerator {
if ( col === 0 ) {

cubeCamera.up.set( 0, upSign[ i ], 0 );
cubeCamera.lookAt( forwardSign[ i ], 0, 0 );
cubeCamera.position.set( position.x, position.y, position.z );
cubeCamera.lookAt( position.x + forwardSign[ i ], position.y, position.z );

} else if ( col === 1 ) {

cubeCamera.up.set( 0, 0, upSign[ i ] );
cubeCamera.lookAt( 0, forwardSign[ i ], 0 );
cubeCamera.position.set( position.x, position.y, position.z );
cubeCamera.lookAt( position.x, position.y + forwardSign[ i ], position.z );

} else {

cubeCamera.up.set( 0, upSign[ i ], 0 );
cubeCamera.lookAt( 0, 0, forwardSign[ i ] );
cubeCamera.position.set( position.x, position.y, position.z );
cubeCamera.lookAt( position.x, position.y, position.z + forwardSign[ i ] );

}

Expand Down
19 changes: 12 additions & 7 deletions src/renderers/common/extras/PMREMGenerator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,13 +135,15 @@ class PMREMGenerator {
* @param {Number} [sigma=0] - The blur radius in radians.
* @param {Number} [near=0.1] - The near plane distance.
* @param {Number} [far=100] - The far plane distance.
* @param {Number} [size=256] - The size (resolution) of the cube texture,
* @param {Number} [position = new Vector3( 0, 0, 0 )] - The cubeCamera position
* @param {RenderTarget?} [renderTarget=null] - The render target to use.
* @return {RenderTarget} The resulting PMREM.
* @see fromSceneAsync
*/
fromScene( scene, sigma = 0, near = 0.1, far = 100, renderTarget = null ) {
fromScene( scene, sigma = 0, near = 0.1, far = 100, size = 256, position = new Vector3( 0, 0, 0 ), renderTarget = null ) {

this._setSize( 256 );
this._setSize( size );

if ( this._hasInitialized === false ) {

Expand All @@ -162,7 +164,7 @@ class PMREMGenerator {
const cubeUVRenderTarget = renderTarget || this._allocateTargets();
cubeUVRenderTarget.depthBuffer = true;

this._sceneToCubeUV( scene, near, far, cubeUVRenderTarget );
this._sceneToCubeUV( scene, near, far, position, cubeUVRenderTarget );

if ( sigma > 0 ) {

Expand Down Expand Up @@ -458,7 +460,7 @@ class PMREMGenerator {

}

_sceneToCubeUV( scene, near, far, cubeUVRenderTarget ) {
_sceneToCubeUV( scene, near, far, position, cubeUVRenderTarget ) {

const cubeCamera = _cubeCamera;
cubeCamera.near = near;
Expand Down Expand Up @@ -528,17 +530,20 @@ class PMREMGenerator {
if ( col === 0 ) {

cubeCamera.up.set( 0, upSign[ i ], 0 );
cubeCamera.lookAt( forwardSign[ i ], 0, 0 );
cubeCamera.position.set( position.x, position.y, position.z );
cubeCamera.lookAt( position.x + forwardSign[ i ], position.y, position.z );

} else if ( col === 1 ) {

cubeCamera.up.set( 0, 0, upSign[ i ] );
cubeCamera.lookAt( 0, forwardSign[ i ], 0 );
cubeCamera.position.set( position.x, position.y, position.z );
cubeCamera.lookAt( position.x, position.y + forwardSign[ i ], position.z );

} else {

cubeCamera.up.set( 0, upSign[ i ], 0 );
cubeCamera.lookAt( 0, 0, forwardSign[ i ] );
cubeCamera.position.set( position.x, position.y, position.z );
cubeCamera.lookAt( position.x, position.y, position.z + forwardSign[ i ] );

}

Expand Down
Loading