Gonna try to keep this short sweet and to the point.
We’re using Babylon.js for a project currently, up to now we’ve had no need for skyboxes because the models are being rendered over the page’s background. We DO use an environment map HDR texture, and the result looks like this:
Fast forward a bit, we need to add a skybox now. No problem, so I extend the project and add the skybox like so:
// Create the skybox mesh.
let SkyboxMesh = MeshBuilder.CreateBox("skyBox", { size: 500.0 }, this.viewer.scene);
SkyboxMesh.infiniteDistance = true;
SkyboxMesh.isBlocker = false;
let SkyboxMeshMaterial = new PBRMaterial("skyBox", this.viewer.scene);
SkyboxMeshMaterial.backFaceCulling = false;
SkyboxMeshMaterial.reflectionTexture = SkyboxCubeTexture;
SkyboxMeshMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
SkyboxMeshMaterial.diffuseColor = new Color3(0,0,0);
SkyboxMeshMaterial.specularColor = new Color3(0,0,0);
SkyboxMesh.renderingGroupId = 0;
SkyboxMesh.material = SkyboxMeshMaterial;
The problem is that the skybox is now showing up in the reflection capture. We are NOT using separate probes, we are using the ScreenSpaceReflectionPostProcess setup like so, using the only camera we have in the scene:
const ssr = new ScreenSpaceReflectionPostProcess('ssr', this.viewer.scene, 1.0, this.viewer.camera);
ssr.reflectionSamples = 32;
ssr.samples = 4;
The problem shows itself like this and only seems to happen when we create the skybox using a “single image” HDR environment map, the SAME EXACT one we use for the environment texture:
As you can see, the reflections on the instrument start to get a little screwy. I’m confused as to how this happens, because JUST using the environmentTexture doesn’t result in this strange reflection pattern.
If we use a the separate 6-sided cubemap technique (px,py,pz,nx,ny,nz) it looks beautiful:
With all that said, my question is this:
- Is there an easy way to prevent the skybox from showing up in the reflection? IE skybox should NOT show up in instrument reflection, ONLY environment texture.
-OR- - Is there a way to FIX how the reflections are shown on the instrument when using the single HDR environment image technique?
We did also try not using the environment texture, it unfortunately looks the same as the skybox reflecting seems to take prescedence over the environment map reflections. We would like to avoid creating another pass/camera or specific shader if needed.
It seems like this COULD be possible with layer masks, but they’re only used for camera rendering. We could potentially still accomplish this by creating a secondary camera and ensuring the skybox doesn’t render in the second camera. However, that involves creating another camera and thus another render pass. We need to also target low end Android and iOS devices so that’s not ideal.
I tried to create a playground sample, but I can’t get the playground to accept any uploaded images or external images.
Thanks all for your viewing and pondering in advanced.