Hide the mesh but still display the shadow?

I have a forest with trees (an imported mesh file, and created with createInstance) and I’m using a CascadedShadowGenerator to display shadows of the trees on the ground. When I move the camera I make sure trees that are blocking the view are hidden with
tree.isVisible = false; , so the player is always visible.
But this also removes the shadow of the tree, which looks a bit unnatural when you move slowly.

Is there any way to hide the tree mesh, but still see the shadow on the ground?

Ideally, I would like to make the tree half-transparent, and keep the full shadow.
I couldn’t find out how to make the material of that specific instance transparent, if possible at all.

I wonder if you can make it almost invisible with mesh.visibility set to 0.01 and turn on alpha shadows:
Shadows | Babylon.js Documentation (babylonjs.com)

Unfortunately visibility doesn’t work for instances. I get the warning:

Setting visibility on an instanced mesh has no effect.

yeah you cannot play with alpha of only one instance unfortunately if we want to get the shadows

I don’t know how to do what you need. Maybe having a special version of the mesh that you could move exactly where the hidden instance is to generate the shadows?


You can disable rendering of a mesh like this:

    const material = new BABYLON.StandardMaterial('do-not-render', scene);
    material.disableColorWrite = true;
    material.disableDepthWrite = true;  // if you want to remove the mesh from the depth buffer as well
    mesh.material = material;

Shadows will be still rendered for the mesh.



Even better!!! well done man!

1 Like

Wait that will affect ALL the instances still so @BobDylan still need to do the impostor mesh trick

1 Like

@deltakosh We need a PG from @BobDylan so we can precisely answer his question. I believe we both agree. :slight_smile:

He could remove the non-visible instances and add regular meshes. How many trees? How many vertices? How performant would replacing the non-visible instances with regular meshes be… Etc…

He could prepare the meshes and disable them so adding a shadow-only-mesh could be just enabling it…

1 Like

Thanks for the tips. I’ll try to create a shadow-only mesh (don’t know how, yet :slight_smile: ) or a half-transparent mesh and switch those when needed. I also saw a solution somewhere that worked with a shader, but I have no knowledge of shaders.

I find setting up a playground to be quite hard, since everything is in several typescript files and classes, (and I’m a bit hesitant to reveal too much of the game already).

1 Like

Click on a tree you want to hide but still cast shadow.

Wow, great playground! Thanks for showing how to make the shadow mesh. This seems to be exactly what I’m looking for.

One question though, I’m using an imported mesh. Would
treePrefabShadow.material.disableColorWrite = true
work then too?

1 Like

This PG loads a mesh, creates a mini forest and the clicking functionality is the same, it hides the tree but the shadow remains.

In a real app you might want to write more professional code. I wrote this really very quickly just to showcase how it works with a loaded mesh.

Hidden trees marked:


1 Like

Thanks a lot for your effort!

1 Like

You rock buddy!

1 Like