Using a custom CubeCamera and WebGLCubeRenderTarget to generate cubemaps gives weird result

Questions
,
1

Hello everyone!

I’m currently working on a project which captures 6 faces of an inside-out box to generate a cubemap texture dynamically(shows 1face, 2 faces … 6 faces when each face updates) on the scene background/another skybox. The 6 faces are 2k and could be updated frequently with some TWEEN animations.

At the very begining, I used the CubeCamera to achieve this. But the issue is, on the mobile device, the performance is terrible and animations are so unsmooth. I found that CubeCamera renders 6 faces per update which wastes a lot of efforts, since just one face updates every time in my scenario. Thus, I made a custom CubeCamera to render a specific cubeface each time. The changes are as below:

    /**
     *  Original codes: Render all faces
     */

    //     renderer.setRenderTarget(renderTarget, 0);
    //     renderer.render(scene, cameraPX);

    //     renderer.setRenderTarget(renderTarget, 1);
    //     renderer.render(scene, cameraNX);

    //     renderer.setRenderTarget(renderTarget, 2);
    //     renderer.render(scene, cameraPY);

    //     renderer.setRenderTarget(renderTarget, 3);
    //     renderer.render(scene, cameraNY);

    //     renderer.setRenderTarget(renderTarget, 4);
    //     renderer.render(scene, cameraPZ);

    //     renderer.setRenderTarget(renderTarget, 5);
    //     renderer.render(scene, cameraNZ);

    /**
     *  My codes: Render one face
     */
    renderer.setRenderTarget(renderTarget, cubeface);
    renderer.clear();
    renderer.render(scene, this.children[cubeface]);

However, this change causes a weird result: positive-z won’t update until the next render. I made a codepen to show how it happens:

Could somebody help me explain what happens and how can I fix it? Any thought or suggestion would be greatly appreciated!

Thank you! :smiley:

1 Like
2

I just found out why this happens.

It’s because cubemap is in left-hand axis but three is in right-hand axis. Thus, when CubeCamera capturs positive-z(activeCubeFace === 4), the actual captured face is negative-z in source box which has not been updated yet. So, the solution is obvious that exchanging positive-z and negative-z makes CubeCamera get the right face.

1 Like