Strange: No shadows when app hosted on Heroku?

Hi all!

I have a very strange issue and no clue where to look. I’m quite sure it does not directly relate to Babylon, but maybe maybe somebody by pure chance has an idea:

My flightsim experiment works quite ok. Today I deployed it to Heroku. Still works … just without shadows (CascadedShadowGenerator)!?

Here it is:

. J

1 Like

Hard to tell, it could help to show the inspector and look at the shadow generator settings…

@Evgeni_Popov I’ll try.

Could you give me a slight hint on how to? I tried to follow the documentation, but it does not even compile bc. in debugLayer does not exist.
I imported import '@babylonjs/inspector'; which helped about that but leads to tons of missing react and JSX namespaces. npm i react @types/react didn’t help.

I’m for sure no Typescript module wizard and could need a helping hand…

. J

Disregard … found it in the of @babylonjs/inspector:

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";

Where will the shadow caster show up in the inspector?

When clicking on the light you used to create the shadow generator (it’s the shadow generator you will have access to, not the shadow casters).

1 Like

Thank you. My demo can now toggle the inspector with key I.

Shadow generator looks the same in the Heroku and my local version. Just … no shadows :(.

Also, Angular complains in the console about Unhandled expression at line : <!doctype html> on Heroku. But it works at least.

As I suspected this seems not closely related to Babylon, something must be strange in the Heroku build. Anyway thank you for trying to help. At least it gave me the inspector in the demo now :).

. J

As you have a big world with big range of values (height and x/z), there must be a precision problem.

If you set the bias to 0, then shadows start to appear. Also, by setting a light direction other than (0,-1,0) you may be able to better see the shadow of the plane.

Wow, @Evgeni_Popov, setting the bias to -0.999 lets the shadow appear.

TBH, I have no idea how cascading shadows work (which does not mean I do know how the others do work :)). I set them up following a forum and they just worked.

Still not clear how that depends on the place where the application is built (same with that strange Angular behavior)?

At least I have a solution, 1000 thx, future will tell.

Yes, this one is strange…

Just a follow-up:

I deployed the same stuff to Azure without any artifacts.

For comparison:

Still strange: The shadow of the Airbase (the Zeppelin with the runway on top) is always there, e.g. on the ground or on the runway, regardless where it is located on the world. I use Inspector (key i) to put it below ground (y=0), but the shadow remains.
As if the Airbase is located high up in the Sky.

Mysterios? Isn’t it?

This one may be due to the filtering you use: try different filtering methods and see if it changes something.

You have a bad deployment or configuration that serves the index file when a JS file is requested. Assumption is that the deployment did not include the JS files and the index file is served in case a file is not found

Idk if it could resolve your problem but I already had this case with heroku and correct deployment fixes all problems…And it’s logical because you have the same source, same browser and Babylon does nothing server side so it’s a deployment issue.


With PCSS shadows vanish completely (only on Heroku of course). PCS and ‘none’ only have effect on how the shadows look like (as expected).

On Azure it works as expected.

Same source, same browser … mysterious.

Thx @sharp … that’s it! Or at least close.

It’s not about *.js files, but about the *.obj assets that Heroku doesn’t deliver properly. Instead, it delivers index.html.
*.glb works fine.

This might irritate Babylon somehow… I will investigate further…

Fixed it. Loading all assets from *.glb files instead of *.obj in fact fixed the issue.

Shadows now work wonderful regardless of the hosting system.

Thank you @sharp and @Evgeni_Popov very much!

. J

1 Like