How to combine MirrorTexture and bump map?

Questions
1

I want to add simple reflection to my water with MirrorTexture + bump map, however the mirror reflects as if it was flat. Is this something I can solve with nodes?

PG: https://playground.babylonjs.com/#LVTTQX#256

2

There are a number of ways to ā€˜simulateā€™ the bump on a (water?) material.
May be have a look at this recent post using a node material:

Personally, I have also been using the ā€˜water materialā€™ in combination with a ā€˜mirror materialā€™ plane (before node materials) and got some good results. Obviously with animated ripples on the water surface, the ā€˜bumpā€™ of a mirrored object doesnā€™t really matter anymore, because itā€™s overseen by the animated ripples on the water surface.

3

I think I solved it with these nodes, now just need to see if I can hook it up to the mirror texture in-gameā€¦

4

Hmm, I canā€™t seem to get a reflection texture to loadā€¦see:

NME: https://nme.babylonjs.com/#100NDL#23
PG: https://playground.babylonjs.com/#56DT6C#1

When I add the 2 textures in the NME it loads fine, but when I do it in the PG it doesnā€™t load the reflection texture. Any ideas what Iā€™m doing wrong?

5

Let me take a look.

6

I can set the texture in NME and it loads properly in the PG

But as soon as I replace the texture with the same one, it doesnā€™t render.

Any idea @Evgeni_Popov ?

7

Hello just checking in, was your question answered? @JacobF

8

@carolhmj Still waiting to see if a dev can figure out the bug mentioned by @Cedric

9

Iā€™ll take a look at this!

11

@sebavan 's eagle eyes spotted a ā€œcoordinateModeā€ where it should be ā€œcoordinatesModeā€, these things are always the hardest to find :rofl: Babylon.js Playground (babylonjs.com)

13

Hmm, in my game I do have coordinatesMode already and it doesnā€™t work when assigning a mirror texture.

Edit: Here is a playground demonstrating with a MirrorTexture https://playground.babylonjs.com/#56DT6C#9

this.mirror = new MirrorTexture('main', 1024, scene, true)
this.mirror.level = 1
this.mirror.renderList!.push(this.skybox.skybox)

Then I have:

const normalMap = material.getBlockByName('Texture') as TextureBlock
const reflection = material.getBlockByName('Reflection') as ReflectionBlock
normalMap.texture = new Texture('assets/waterbump.png', scene, undefined, undefined, Texture.LINEAR_LINEAR_MIPLINEAR)
reflection.texture = this.mirror

My result is still black:

image
image1650Ɨ1080 42.8 KB

14

As you are using a NME material, there are no auto detection of render target to render, you could add it to the scene like this: https://playground.babylonjs.com/#56DT6C#10

3 Likes
15

Awesome, so that getā€™s us most of the way there. In the node material the bump texture is supposed to effect the reflection, like so:

Screenshot from 2022-05-16 09-34-57

In https://playground.babylonjs.com/#56DT6C#10 and in my game Iā€™m seeing the same thing, the reflection is uneffected by the bump texture.

Screenshot from 2022-05-16 09-34-08
Screenshot from 2022-05-16 09-34-081650Ɨ1080 50.7 KB

16

This is not a projection we currently support for mirrors :frowning: I wonder if a water material could work by default in your case ?

17

Yeah I think WaterMaterial would be a good option: Water Material | Babylon.js Documentation (babylonjs.com)

1 Like
18

Yes, I was thinking of this from the start. Donā€™t know what would not be acceptable with this solution (unless itā€™s too simple :wink:. Something like this:

19

Yeah maybe Iā€™ll stick to the water material for now. Thanks for all the help!

2 Likes