React native: can shadow work?

Questions
1

Hi,
I am making an app android with Babylonjs react native.
I have inserted my glb model.
I would like to show shadows now:

     // Shadows
      let floor = scene.getMeshByName("Floor");
      floor.receiveShadows = true;

      let sky_frame_1 = scene.getMeshByName("sky frame 1");

      // Shadows
      var light00 = new SpotLight("*spot00", new Vector3(0, 5, -1), new Vector3(0, -1, 0.3), 1.2, 24, scene);
    
      var shadowGenerator00 = new ShadowGenerator(512, light00);
      shadowGenerator00.getShadowMap().renderList.push(sky_frame_1);
      shadowGenerator00.usePercentageCloserFiltering = true;

But I don’t see any shadow from roof “sky frame 1” on the floor “Floor”

GalleryGLB-11.glb.zip (522.3 KB)

2

@bghgary This seems like something up your alley. :slight_smile:

3

Since @bghgary is on vacation, let’s bring in @syntheticmagus @ryantrem to see if they can offer some advice.

4

Hi igorroman777,

Shadows are definitely supposed to work — one of our validation tests checks that — so I’m wondering if there’s something else going on with that model. Can you try that code and model in an ordinary Babylon.js Playground to make sure it renders as expected there? That should help indicate where the issue lies, making it easier to track down.

5

Hi @bghgary @syntheticmagus
I have made my test here in the playground:

https://playground.babylonjs.com/#8LFTCH#808

6

Thanks! Does this Playground approximate the setup you have in your Babylon React Native app? If so, I think there are a few reasons you’re not seeing shadows.

  1. Your shadow generator creation code is not being run. If you look on line 23 of your Playground, you can should see a new Vector3(...) code block. Vector3 without the Babylon namespace (i.e., BABYLON.Vector3) is not defined in the Playground, and if you modify this Playground to actually try to run that code, it will throw an error.
  2. The hemisphere light in your scene is dramatically more powerful than your spotlight; thus, even if you modify the Playground to create the shadow generator, you probably still won’t see the shadows on the floor because they will be “drowned out” by the vastly more powerful light coming from the hemisophere light, which does not cast shadows.
  3. After creating the shadow generator and disabling the hemisphere light, the spotlight is still positioned in such a way that it barely hits enough of the ceiling to cast a shadow on the floor. There still is a visible shadow, but I had to look for it to be sure I was seeing it; and with issues 1 and 2 in the mix, it’s effectively impossible to discern.

The following Playground is modified to address issues 1 and 2, though 3 remains.

Available Mesh SeaGulf | Babylon.js Playground (babylonjs.com)

With these issues addressed, I think you should be able to see shadows in Babylon React Native just as you can on the Playground. Can you confirm that the three issues described above aren’t preventing the shadows from being visible in your Babylon React Native app?

1 Like
7

Here’s a PG where the shadows are more visible:

https://playground.babylonjs.com/#8LFTCH#812

8

Thanks a lot @Evgeni_Popov @syntheticmagus
yes, a Problem is " dramatically more powerful than your spotlight" and
light00.intensity = 100;