Unable to get Shadows in the Browser

🌵 Needle Engine
1

The same thing was working flawlessly and then now suddenly the shadows have stopped appearing in the Browser both Dev build and Prod build. Thanks.

image.png
image.png732×614 165 KB

image.png
image.png736×486 180 KB

Original Post on Discord

by user 968769707354255361

2

Update : Light Shadow Data - Seems to work sometimes and doesnot work sometimes.

by user 968769707354255361

3

Update 2 : It seems to break as soon as I add another Directional Light in the Scene.

(PS: Sorry for poking with messages)

by user 968769707354255361

4

When you add the AdditionalLightData component on your light, you should see a gizmo in the Unity scene view for where that light actually is / where the shadow map is affecting the scene. This is less automatic in three than it is in Unity unfortunately (Unity tries to be smart about fitting the shadow map into the view and so on), so you have to check that the bounds you see there work for your scene

5

Thanks for your reply. I understood a bit better how Needle integrates unity with ThreeJS now

by user 968769707354255361

6

Did it work with these changes?

7

Yes, it worked. The bug was somehow whenever I created a new Directional Light, all other components from my original Directional Light seemed to go missing. This was a unity bug. Upgrading Unity version made sure it worked alright. Sorry for this.

Also I replaced the additional Directional Light, like the one used in Collab Sandbox Scene to Fill the env with no shadows, by an Ambient Light. I am attaching the Ambient Light script in case someone needs it. I believe it will definitely improve some levels in performance compared to adding another Directional Light.

by user 968769707354255361

8 
import { Behaviour, serializable } from "@needle-tools/engine";
import * as THREE from "three"

export class SceneAmbientLight extends Behaviour {

    @serializable(THREE.Color)
    lightColor: THREE.Color = new THREE.Color(255, 0, 0);
    @serializable()
    lightIntensity : number = 1;

    private ambientLight !: THREE.AmbientLight;

    start(): void {
        this.ambientLight = new THREE.AmbientLight(this.lightColor , this.lightIntensity);
        this.context.scene.add(this.ambientLight);
    }

}

by user 968769707354255361

9

I see, thanks. Most of the time we use the skybox (so, image based lighting) to brighten the general scene instead of adding an ambient light. You can also set the skybox to “Gradient” and have the same effect from that with controllable colors

10

Ya I did that but still some parts were dark…so I added the ambient light :sweat_smile: . Thanks tho.

by user 968769707354255361