Transparent HDR skybox

Questions
1

How can I make a hdr skybox only affect meshes in my scene, and not the background?

Currently I’m creating a box with a HDRCubeTexture for reflections, but now I want to make the background transparent as well.

2

You should not set scene.environmentTexture, but instead set material.reflectionTexture with your cube texture => scene.environmentTexture is used when no reflection texture can be found in a material.

2 Likes
3

Thanks, I’m not using environmentTexture actually, this is how I set up my skybox:

const hdrTexture = new HDRCubeTexture(this.assetPath + options.hdr, this._scene, 512);
this._container.hdrTexture = hdrTexture;

const hdrSkybox = CreateBox('hdrSkyBox', { size: 1000.0 }, this._scene);
const hdrSkyboxMaterial = new PBRMaterial('skyBox', this._scene);
hdrSkyboxMaterial.backFaceCulling = false;
hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
hdrSkyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
hdrSkyboxMaterial.microSurface = 1.0;
hdrSkyboxMaterial.cameraExposure = 0.6;
hdrSkyboxMaterial.cameraContrast = 1.6;
hdrSkyboxMaterial.disableLighting = true;
hdrSkybox.material = hdrSkyboxMaterial;
hdrSkybox.infiniteDistance = true;

So I guess I already use reflectionTexture, but how do I make the box invisible? Do I need to use layerMask?

4

I think I got it working using:

hdrSkybox.onBeforeRenderObservable.add(() => this.engine.setColorWrite(false));|
hdrSkybox.onAfterRenderObservable.add(() => this.engine.setColorWrite(true));|

Is this the way to go about it?

5

Are you able to setup a repro in the Playground? If you only create a skybox, I don’t see why the other meshes would use the reflection cube for their reflection texture.

For eg:

The sphere is black. You will have to uncomment line 27 for the sphere to use the reflection texture.