React Native: shadowGenerator not casting shadows

Questions
,
1

I worked on a basic scene in the playground, and tried to replicate it in a React Native project. Here’s the PG: https://playground.babylonjs.com/#20OAV9#14149

Problem 1:
In React Native, the cube is rendered and the directional light applied to its faces, but it does not cast a shadow on the floor. I checked the shadowGenerator.getShadowMap().renderList and meshes were pushed. Any ideas what I can try?

Problem 2:
Even in the web playground, if I uncomment line 27, cube.receiveShadows = true I get some artifacts in the cube’s material. Is it something wrong with how I set up the frustrum?

I’ve added the light gizmo to help understand what’s wrong but I don’t see the issue…
Any help appreciated.

Edit: adding my package.json for reference

{
  "name": "BabylonJSTestProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@babylonjs/core": "^6.49.0",
    "@babylonjs/loaders": "^7.3.1",
    "@babylonjs/react-native": "^1.8.2",
    "@babylonjs/react-native-iosandroid-0-71": "^1.8.2",
    "@types/geojson": "^7946.0.14",
    "react": "18.2.0",
    "react-native": "0.73.7"
  },
  "overrides": {
    "@babylonjs/core": "^6.49.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}
2

Cc @ryantrem

3

For Problem 1, removing these lines and adjusting lighting intensity to compensate allowed the shadows to appear on iPhone, though I’m still having problems in Android

dirLight.diffuse = new BABYLON.Color3(0.23,0.25,0.25);
dirLight.specular = new BABYLON.Color3(0, 0, 0);

Is there a way to determine from the documentation which features are available in React Native? It would be great to have maybe a flag indicating that in the docs.

4

I will take a look today and see if anything stands out.

Is there a way to determine from the documentation which features are available in React Native? It would be great to have maybe a flag indicating that in the docs.

We try to keep a high level feature list up-to-date in the Babylon Native GitHub readme here: BabylonJS/BabylonNative: Build cross-platform native applications with the power of the Babylon.js JavaScript framework (github.com)

Flagging at the API level in the docs would be useful as well, but let me chat with some other folks and see if it would be practical.

5

@carolx I tried your playground with the Babylon Native test app on MacOS and iOS and see the same thing:

image
image1152×2228 96.9 KB

Is this what you see? I haven’t tried it with Babylon React Native, but I would expect the behavior to be the same. That said, shadow support is not fully implemented in Babylon Native right now, so some behavior won’t yet be the same as Babylon.js in a browser.

@sebavan do you have any idea on the second problem described above?

https://playground.babylonjs.com/#20OAV9#14149
Even in the web playground, if I uncomment line 27, cube.receiveShadows = true I get some artifacts in the cube’s material. Is it something wrong with how I set up the frustrum?

I see the same thing (artifacts on the cube), and I would have thought that receiveShadows on the cube would not have any effect.

image
image666×572 24.9 KB

6

I was able to get the shadow on iOS, though they are not as soft as the playground test (possibly because of what you mentioned).

On Android, the same code does not show any shadow.

Could it be the package versions I’ve installed? I did have an issue with conflicting dependencies and had to manually override to 6.49.0 on package.json.

The artifacts when I turn on receiveShadows are still a mystery to me. It does seem to only happen with directional light after editing ortho options.

7

@ryantrem it looks like shadow acnea usually due to missing bias or because the depth buffer might have less precision in your case ?

8

Is it possible to achieve softer shadows in React Native? On the web playground I can soften them by manipulating the ortho values… But in React Native, the same values of ortho for the Directional light result in either hard or distorted shadows… I played with all settings in the documentation, none helped me achieve soft shadows…

9

I don’t think it is possible right now as shadows are not fully implemented in Babylon Native.