Creating a spacescape as a 3d skybox

Questions
1

Hey community, is it possible to create a small scene in babylonJs render it off screen and have a camera that is inside the scene overlay the image at a larger scale in the main camera and sync the rotation of the skybox camera with the main scene camera ignoring panning and directional movement?
Think Half-Life 2 skyboxes.

Im trying to figure out the best way I can go about adding distant detail to my main scene. As the main scene is very very large using the traditional method here actually causes a lot of Z fighting on screen and some objects at a distance are rendered behind the skybox.

2 
skybox.infiniteDistance = true;

skybox.renderingGroupId = 0;

// Some other mesh
myMesh.renderingGroupId = 1;

are the part that should totally prevent your current setup issues.

If not, please share a repro in the playground and we ll see how to fix it.

1 Like
3

So it sort of works. But in order for it to work this is the following settings.

const skybox = BABYLON.MeshBuilder.CreateBox('skybox', {size: 10000}, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.disableLighting = true;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("assets/textures/skybox/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;	
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
	
skybox.infiniteDistance = true;
skybox.layerMask = constants.layerMasks1;
skybox.renderingGroupId = 0;
skybox.isPickable = false;
skybox.scaling = new BABYLON.Vector3(100000000, 100000000, 100000000);

I use a floating origin but even so users can zoom out to see the entire solar system. Without the skybox there is no issue but at those extreme distances with the sykbox texture it will either jitter around like crazy or objects will Z fight with the skybox texture.
The current size and scale does stop the jittering which im assuming is a floating point issue for the texture co-ordinance… The only items you can see that zoomed out is the Star and the orbital lines.
But I may rethink the controls as the only reason to zoom out is to see the scale and nothing more. Selecting Planets, moons, POI is done via a UI search box.

Edit while writing…
I’ve noticed that the skybox may not be the best method. While by default the scene does eat a lot of memory (chrome reports ~2GB, while the dev tool heap is 280mb). Enabling the skybox causes it to jump to 4.99GB. It will then garbage collect and return to around 1.5GB then over the course of 2mins climb back to 5GB before repeating the cycle.
I am also using the BabylonJs inspector and debug layer. Without them it drops around 200mb in memory.

4

A repro would be great as I do not see how a skybox could create as much memory ?

Also about the first issue you could attach the skybox to the camera so it is always there without requiring the full size ?

5

The skybox completely breaks down when attaching it to the camera. If the skybox initial size is less than 100000 it will flicker in the center of the screen as a small texture square or not appear at all. If its 100000 or more the skybox will render, but then everything else in the scene will not render. Zooming out will cause the skybox to jitter around eventually turning black.

It will be difficult to give anyone access to the repo as its a Private and the SolarSystem is quite integrated into a backend API system that would take a good week to separate and im not even sure it will work properly outside my current dev environment without a 1:1 talk through a setup procedure.

For the weekend I’ll get a Playground up and running with the same scale and see if it reproduces there.

6

A repro would help us to help you if you can share anything ?

1 Like
7

This simple demo replicates the same issues im having. This demo does not seem to be affected by the same memory leak. I will investigate on my side. The main difference is my bodies have rotations and all child objects that are parented to each body move. There can be around ~150 objects on each of the meshes surface.

8

Just bumping.

9

One thing that came to mind to avoid the precision issues is you could render the skybox in a separate scene with a camera synchronized to your main camera?

10

That was my original question. I wasn’t sure if it was possible with Babylonjs to grab a camera viewport from a scene that is off canvas and composite the final image from my main scene and the “skybox” scene.

11

You can use the same canvas for the two scenes and just render one on top of the other, like this: https://playground.babylonjs.com/#6JQQDU#2

1 Like