Bad performances when animating a PMREMGenerator environment

Questions
1

Hi,

I was intrigued by this thread and decided to try and animate an environment in vanilla three.js.

It worked but with very poor performances so I was wondering if my approach was right?

const environment_scene = new RoomEnvironment(); // a scene containing an animated white plane acting as the light source
const pmremGenerator = new THREE.PMREMGenerator( renderer );
let environment_texture = pmremGenerator.fromScene( environment_scene ).texture;

scene.environment = environment_texture;
scene.background = environment_texture;

function loop() {

    requestAnimationFrame(loop);

    // Recreates the texture (😬)
    environment_texture = pmremGenerator.fromScene( environment_scene ).texture;
    
    // and reapplies it
    scene.background = environment_texture;
    scene.environment = environment_texture;

}

loop();

Recreating the texture each frame obviously seems like the issue here, but I couldn’t find an other way. Did I miss something?

Any guidance would be appreciated!

Thanks!

2

i don’t know what fromScene does but the environment component doesn’t re-create the scene every render, it just films it:

const fbo = new WebGLCubeRenderTarget(resolution)
fbo.texture.type = HalfFloatType
scene.environment = fbo.texture
scene.background = fbo.texture

function loop() {
  cubecamera.update(gl, virtualScene)
2 Likes
3

i think that’s my bad, in the twitter thread i just looked at room and saw pmrem, thinking this is somehow what needs to happen. but now it doesn’t make sense, a cube camera would be a much simpler choice.

btw, keep in mind that runtime environments do work on all platforms, some will take it like nothing, some will render very slow. that’s why i have the perfmon in the demo, on weak devices it just stops rendering. a static environment looks just as good, the moving stuff there is optional.

1 Like