I am looking for a way to have this kind of ground reflection effect in babylonjs:
This is easy to create a ground reflection thanks to Mirror Texture but I can’t find a way to have this “puddle of water” style.
I remember about a BabylonJS demo doing that but no way to find it, unfortunately!
Here is the page where the screenshot is coming from: adidas – CHILE20
Awesome experience BTW
Thanks for your help! Pichou
Here is a simple playground in order to make some test and try to obtain the same result:
https://www.babylonjs-playground.com/#KA93U#359
I tried to play with some texture like metallic but the reflection doesn’t get affected like in the adidas example.
You probably need to add some refraction as well: https://www.babylonjs-playground.com/#KA93U#360
I tried to play with refraction texture in different ways but I don’t see exactly how to use it in order to have the expected result ?
Maybe screen space reflection could help: Use the Screen Space Reflections (SSR) post-process - Babylon.js Documentation
At least in the demo for 4.1 you can see the kind of effect you are looking for in the SSR presentation.
That was the demo I was looking for! Thanks @Evgeni_Popov 
The post process works pretty well. But I have an issue where there is some kind of reflection aliasing a you can see in the playground: https://playground.babylonjs.com/#PIZ1GK#180
Do you know how to avoid that?
No idea, maybe @julien-moreau will know.
Hey @PichouPichou
Unfortunately this exactly why SSR are not the ultimate solution for reflections. This glitch is due to the lack of informations. You can find the same issue in the official documentation of UE4: Screen Space Reflections | Unreal Engine Documentation
The glitch you can see isn’t looking the same but is due to the same effect: the post-process finds an intersection for reflection but it is a false positive (like here: https://answers.unrealengine.com/questions/126750/ugly-screen-space-reflections.html)
Thanks for the explanation @julien-moreau !
I will stick to the Mirror Texture for now.
Any idea on how to alter the reflection using the Mirror Texture maybe?
Hum, I think @PatrickRyan will have great ideas to share in order to reproduce that kind of effect 
@PichouPichou, off the top of my head, I would create a custom node material using the new PBR nodes that @Evgeni_Popov made to apply to your ground material. Wire up the basic nodes (base color, metallic and roughness through reflectivity, perturbed normal) and then wire up a reflection node that you pass a texture node into the color input. You can find the basic wiring requirements in the sample PGs for PBR in node material to answer any questions about how to use the node.
Make sure to name your texture nodes and then use getBlockByName to assign your base color/orm/normal textures to the node material. You will also use getBlockByName to assign your mirror texture to the reflection texture input block. Now that you have the basics wired up, you can do a lot with the mirror texture.
This includes using a noise block to modify the UV input to the reflection texture that mirror texture is assigned to. Any distortion you want in your reflection can be passed into the UV values driving the texture. You could use the surface normal X and Y to distort the UV coordinates, pass in a noise texture, use vertex color to distort, or any other technique that gives you the control you need. I hope this points you in a direction that you can experiment with. Let me know if you have more questions or run into anything unexpected.
Yep thanks to your answer @PatrickRyan!
I will first need to get into your great node material editor to easily create that.
Hi.
Couldn’t you just create puddle mesh and put some waterMaterial on it?
This is something old I was working on, that might be interesting to you. Not sure
Indeed very clever to use the water material.
I will definitely try it! 
Though the topic title does include “puddle of water” but I haven’t thought about the waterMaterial 
