Cubemap showing visibly rather than just reflecting on material

Hi there

After a LONG time, I managed to almost get the desired result (glow from emissive, a transparent background etc.). (I am using the wrapper lib react-babylonjs btw by @brianzinn).

Everything works smoothly (other than the props in the ` component not being “reactive” on initial load so I am forced to reset the, btw).

I added a environment texture in order for the reflective/metallic texture to behave as expected.

Problem is that it now has a background box and the background is not transparent anymore.

Here’'s an example of what I mean:

image

here’s the settings I used:

  const scene = useScene();

  useEffect(() => {
    var environmentTexture = new HDRCubeTexture(
      './../game/environment/gym_entrance_1k.hdr',
      scene,
      1024,
      true,
      false,
      false,
      false,
    );

    scene.createDefaultEnvironment({
      environmentTexture,
    });
  }, []);

Ideally I need the visible cubemap to go away while retaining the reflectiveness/specularity…

While before I had a transparent background (but no reflective metalness!):

instead of createDefaultEnvironment which create a box and ground, you can simply do scene.environmentTexture = new HDRCubeTexture( './../game/environment/gym_entrance_1k.hdr', scene, 1024, true, false, false, false, );

3 Likes

I didn’t test, but I think since declarative imageProcessingConfiguration was added you can assign children directly to scene props.

<Scene ...>
  <hrdCubeTexture assignTo={'environmentTexture'} url='....' size={1024} ... />
</Scene>
1 Like

Thanks! that put the nail in the coffin, wasn’t clear that the other created an actual sort of environment.

ps: offtopic, a question regarding HDRCubeTexture, I was wondering if is needed to have specular/metalness reflection or I can do with a simple CubeTexture, been trying to no avail but again could be something on my side.

1 Like

Thank you!

I will try the declarative way when I grab a chance today, amazing!

1 Like