Prevent Specific Object from Showing in Reflections

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,;

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.
  • 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.

Welcome aboard!

Try to comment SkyboxMesh.infiniteDistance = true; and see if that helps.

If it does not fix it, then I think we will need a repro in the Playground, as it’s hard to say what could be wrong.

This page should help you setup the assets so that they can be used in a PG:

Unfortunately, commenting out SkyboxMesh.infiniteDistance = true; results in the same issue.

Is there not just an easy way to prevent a specific object/mesh from showing up in the reflections?

I can’t get the HDR to load either. Models will load fine from the Playground, but the HDR refuses to load. It’s always a black screen for me. Loads fine in my application using the same code.

Here’s the playground sample I’m attempting to work in:

It’s not possible if you use SSR because this post process uses the rendered scene to produce the reflections. So, if a mesh has been rendered, you will/can see it in the reflections of other meshes.

Regarding your PG, you should use HDRCubeTexture to create the cube texture:

1 Like