How to create Default Environment in multiscreen with LayerMask

Questions
1

Hello everyone.
I am new to babylon, and to js in general.
I’m looking for a way to create a DefaultEnvironment in a playground with dynamic multiscreen.
Similar to this playground:

But with a visual aspect with DefaultEnvironmen like this:

The problem is that when creating the DefaultEvironment in the playground, the layermask is not used correctly.

Thanks in advance

2

Hello and welcome to the babylon community! Can you describe a bit more what you want to achieve? :slight_smile: Do you have a playground with what you tried so far? It would help us greatly :slight_smile:

1 Like
3

Thanks for the welcome.
I have two problems with my playground.

  1. I can’t get the defaultEnvironment to work on both screens. Mirror doesn’t work on the ground.
  2. If I enable skybox creation in defaultEnvironment, it hides the scene.

This is my playground:

4

There are a few issues you’ll have to deal with.

  1. You’ll need to update the items created by EnvironmentHelper to render on multiple layer masks. i.e.
    const bgPlane = scene.getMeshByName("BackgroundPlane")
    bgPlane.layerMask = mask.left | mask.right

The same is true for anything else created by EnvironmentHelper.

  1. By default, the EnvironmentHelper only mirrors meshes in the scene at time it is constructed. So you either need to construct EnvironmentHelper after all meshes you want to mirror have been loaded, or you need to manually add to the mirrorRenderList. i.e.
  for (let child of meshesToMirror) {
      helper.groundMirrorRenderList.push(child)                
  }

Here is your PG modified using both of those suggestions:

However…

  1. The EnvironmentHelper makes use of a MirrorTexture, and I don’t see a way to control that per camera/layer. That’s why in that PG, you see the heart still mirrored in your scene in the right camera. I don’t see an easy way around that. Perhaps you can create mirror planes/textures yourself for each camera. Others might have a better idea.
4 Likes
5

Thank you very much for the help.
Changing the color of the background, I don’t need the skybox.
What I don’t know how to achieve is to separate the mirrors by screen.

6

Perhaps instead of using EnvironmentHelper to create the mirror, do what EnvironmentHelper does yourself so that you can use two planes (one per camera) and control the layerMask.:

Also useful:

1 Like
7

Thank you very much for the help.
It’s the first option I used. The problem is that you see the end of the planes.

1 Like
8

Something like this? https://playground.babylonjs.com/#QJIQVC#39

You need two environment helpers so that it will create two separate grounds.

3 Likes
9

Yup mainly cause with one ground only you can only have one reflection texture e.g. one mirror.

1 Like
10

Thank you very much for your help.
How could I adjust the height offset of the ground?

image
image1726×1214 30.8 KB

11

This is because of the option sizeAuto which is true by default. After creating the first environmentHelper, the second environmentHelper will see the first environmentHelper’s ground mesh. Turning it off fixes it.

PG: https://playground.babylonjs.com/#QJIQVC#41

3 Likes
12

Thank you very much for your help.
Is a great forum

2 Likes