Dynamic shadows and reflection

Hello guys,

I try to render a model with realistic shadows and reflection. The model consists of several meshes. Some meshes share a metal material, some other meshes share a glass material. How am I able to display shadows and reflectivity on all meshes from all meshes.

How to show the shadows of meshes on each mesh with pbr material? Setting the receiveShadows = true didn’t solve it. Do I have to use cascadedShadowGenerator?

My idea was to use reflection probes but there are some problems.
First my metal materials diffuse gets black after setting the reflectionTexture if I don’t display the environment. Of course I want to use the reflection of the environment but I don’t want that the environment is visible as background.
Second do I have to create a separate material for each mesh even if they share the same textures? Because the reflectionTexture couldn’t be the same for each mesh, or am I wrong?

Thank you!!


Hello, to go further we will need a simple repro of what you try to achieve.

PBR material does not need a specific shadowgenerator so something else is off and we need a repro to understand what

The first thing is that I try to cast shadows on the model itself. I am creating a pg right now: https://playground.babylonjs.com/#X548L8#3

Ok so self shadowing is tricky because of precision
Here is a good doc about it:

A good example of self shadowing: https://playground.babylonjs.com/#EYEPRI#3

Thanks for your help. I missed the part to set the bias. It is working now: https://playground.babylonjs.com/#X548L8#4

Even though I am not sure what the normalBias does. It doesn’t seem to change it visibly.

I added the reflectionProbe to the scene. Do I have to add a skybox to get the reflection of the environment? https://playground.babylonjs.com/#X548L8#5

Nope you only need to set the reflectionTexture to your probe :slight_smile:

I read another thread about reflection probes where you said that it is not recursive so the mesh that gets the probe can’t be part of the renderlist. That is what my initial thought was: Does it mean that a have to give every mesh an own material and problem to get the reflection of all meshes on all meshes? I tried that but it is very bad for performance. I don’t think I have done it how it is supposed to be. Besides that I don’t get how to get the environment reflection back to my metal material without creating a visible skybox. https://playground.babylonjs.com/#X548L8#6

You bet :smiley:

This is not a raytracer but a forward rendering engine running on WebGL so you cannot expect more than what we are already having here

Regarding your PG ( https://playground.babylonjs.com/#X548L8#6 ), what is wrong with it?

I know and I am really thankful for your work and support. I am glad to be able to use this api for my projects :slight_smile:

A few days ago I stumbled across the website of Evan. There is a scene which shows webgl path tracing. The code is accessible on github as well (GitHub - evanw/webgl-path-tracing: Path tracing in GLSL using WebGL). I am convinced that this is extremely difficult to do? Are there some hacks for lighting, reflection and shadows to get a nearly similar result right now with bjs?

Regarding my PG:
With this setup there is no reflection of the environmentTexture on my metal material after enabling the reflectionProbe. Is it possible to get it back?

Thank you!


Let me pick @sebavan’s brain for the reflection:)

Yes path tracing is hard and you will have to do everything (there is a long thread about it on this very forum. Search for ray or path tracing)

About the reflection it is because the probe is using a clear color, you should inject a skybox in it to ensure you would see it through the reflection.

I read the thread and I am very excited for it. Learned a lot from it about path tracing. I wasn’t aware that for instance Evan’s path tracer only works for spheres and cubes which is not enough if we want to use it with bjs.

I created a skybox and pushed it to the renderlist of each probe but I encounter some problems here: https://playground.babylonjs.com/#X548L8#9

First, the skybox is visible in background obviously. I don’t want it to be visible. Setting the refreshRate of each probe to once and disabling color write solve this issue. But I have to wait for the calculation of the reflectionProbe. Is there a better solution?

Second, the material looks very different to my material before creating the probe. It is not rough, but it is more like a mirror.

Third, the reflections are on the wrong side of each mesh. I can see the reflection of the bars outside of the box and inside I just see the skybox.

Fourth, I cloned the material for each mesh to be able to set its own relectionTexture. This clones all diffuseTextures, normalTextures, etc. as well which is not necessary since the materials remains the same. Is it possible to the same textures for each material besides the reflectionsTexture?

Thank you for your help :slight_smile:

Does this work for you:



Thanks for your reply, but I am a little bit confused about what you mean.

Regarding this pg (https://playground.babylonjs.com/#X548L8#9), I try to fix:

  • Hide skybox in background but keep reflections on meshes
  • Have my initial look of the metal material while using reflectionProbe
  • Position the reflection on each mesh correctly (right now it is on the wrong side)
  • Optimize material count while using multiple probes (own material for each mesh necessary?)

I am not sure which to which issue your pg should relate. Can you explain it?

Sorry, I did not understand what you wanted to do. Maybe this one is better:


To avoid the “Feedback loop formed between Framebuffer and active Texture.” WebGL error you need to remove the reflection texture from the materials before rendering the probe, else this texture is both used in a read (when drawing the meshes in the cube) and a write (the meshes are drawn in the texture cube = the reflection texture) manner, leading to the error.

1 Like

Yes, this is a much more sophisticated method. Thank you very much!! This solves issue 1 and issue 4 :slight_smile:

Why is the reflectionTexture so dominant? The material looses its characteristics and doesn’t look like a metal anymore. It would be nice to have the normal look of the material (https://playground.babylonjs.com/#X548L8#15) and some interferences with the reflection of the environment.

In this perspective you can clearly see the reflection of a bar although the camera is outside of the box.(https://playground.babylonjs.com/#X548L8#16). But this is the reflection if the camera would be inside the box. From outside the reflection would be the skybox only.

Any idea how to fix that?

About #3 your probe is in the middle of the objects so it sees all the foot that when applied you can see in the reflection.

In your case the only way would be several probes like one in the middle of each foot and probably one in the middle of the top which would be way to expensive.

You could probably bake them offline

About #2 I am not sure to get the question.

Regarding #2, that’s because the reflection texture must be filtered so that the right mip level can be used depending on the roughness of the material. You can use the realtimeFiltering property to enable this: