How to combine MirrorTexture and bump map?

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

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.

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…

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?

Let me take a look.

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 ?

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

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

I’ll take a look at this!

@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)

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:

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

2 Likes

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.

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

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

1 Like

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:

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

2 Likes