How to create a cubemap/skybox from scene?

Questions
1

Hello,
I’m trying to generate the images to use in a skybox.
To do that I need to position the camera somewhere in the scene.
Take a picture (that will be the front image).
Rotate the camera 90 degrees to the left… Rotate may be an ambiguous word to use…
I need the camera to face the left side, so that I can get another image from the canvas.
Then right, back, top and the floor image.

Right now I just need help on how to rotate (face the way I want) the camera…
I tried using camera.position.rotateByQuaternionToRef and rotateByQuaternionAroundPointToRef but I think I’m far from it…

Any ideas?

Edit1:
I thinking in using camera.rotation.x, y and z…
But I have no idea how to calculate the right values for a 90 degrees change…

Edit 2:
It seems that it receives a rad value to rotate, so 90 degrees = PI / 2;
(It would be nice to have the information on the property, for some people maybe an obvious thing… but not to me)
Now I can see the light!!!

2

@GabrielMarcondes : From my experience of creating skyboxes with Bryce 3D, the FOV of the camera is also a consideration.

cheers, gryff :slight_smile:

1 Like
3

You are completely right, I need to create perfectly square images with a vertical and horizontal FOV = 90 degrees!

Thanks for your post!

4

hi. you can use How to use Reflection Probes - Babylon.js Documentation render one frame in render target texture after build scene and you can use this rendered texture as cubemap for reflections or skybox

1 Like
5

Would you care to explain a little more? I’m going to take a look on the reflection probes…

It seems to be an overkill to what I want to do…

Anyway I appreciate your post and probably will do that just for the fun of it!!

6

http://screenshot.su/show.php?img=4a5f8db5dda19c20c80785486fb44c70.jpg
http://screenshot.su/show.php?img=3c187564bdf617fc56d30f603f0ec24a.jpg
you have scene tree with reflections probes and you can use cube texture for your skybox but i dont know how render probe once
https://www.babylonjs-playground.com/#K030U0#9

Maybe you need use render target texture RenderTargetTexture - Babylon.js Documentation and copy probe cube texture to this render target, dispose probes and use render target texture …
but these are just my assumptions that need to be checked. you need to capture probe in one frame and off reflection probes. maybe you can use simple texture and store your captured cube texture in https://doc.babylonjs.com/api/classes/babylon.texture …

1 Like
7

Sorry to necro this post, but I ran into a similar problem recently and thought my solution might help others.

If you only need a static solution, then here’s a utility function to spit out those 6 images for using in a skybox.

The download function is from download.js

const createCubeMap = (() => {
    const cameraB = new BABYLON.UniversalCamera("", new BABYLON.Vector3(0, 0, 0), scene);
    cameraB.fov = 1.5708;
    cameraB.minZ = 0.01;
    const rotations = [new BABYLON.Vector3(0, -Math.PI / 2, 0), new BABYLON.Vector3(-Math.PI / 2, 0, 0), new BABYLON.Vector3(0, Math.PI,0),
        new BABYLON.Vector3(0, Math.PI / 2, 0), new BABYLON.Vector3(Math.PI / 2, 0, 0), new BABYLON.Vector3(0, 0,0)];
    const names = ['px', 'py', 'pz', 'nx', 'ny', 'nz'];
    return (center) => {
        cameraB.position = center;
        for (let i = 0; i < rotations.length; i++) {
            cameraB.rotation = rotations[i];
            BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, cameraB, {width: 1024, height: 1024}, (data) => {
                download(data, `skybox_${names[i]}.png`);
            });
        }
    };
})();
3 Likes