Directional lights ignore walls on WebGPU when the camera is too parallel to them

[janhohenheim]

Bevy version

0.16.2

Relevant system information

Using Google Chrome: Version 137.0.7151.68 (Official Build) (64-bit)

AdapterInfo { name: "", vendor: 0, device: 0, device_type: Other, driver: "", driver_info: "", backend: BrowserWebGpu }

Note this only happens on WebGPU

What you did

use bevy::{color::palettes::tailwind, prelude::*};

fn main() -> AppExit {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .add_systems(Update, rotate_camera)
        .run()
}

fn setup(
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<StandardMaterial>>,
) {
    // Light
    commands.spawn((
        DirectionalLight {
            illuminance: 5_000.0,
            shadows_enabled: true,
            ..default()
        },
        Transform::from_xyz(0.0, 5.0, -8.0).looking_at(Vec3::ZERO, Vec3::Y),
    ));

    // Ground
    commands.spawn((
        Transform::from_xyz(0.0, 0.0, 0.0),
        Mesh3d(meshes.add(Plane3d::new(Vec3::Y, Vec2::splat(10.0)))),
        MeshMaterial3d(materials.add(Color::from(tailwind::RED_400))),
    ));

    // Left Cover
    commands.spawn((
        Transform::from_xyz(-2.0, 2.0, -4.0),
        Mesh3d(meshes.add(Cuboid::new(2.0, 5.0, 0.5))),
        MeshMaterial3d(materials.add(Color::from(tailwind::RED_400))),
    ));

    // Right Cover
    commands.spawn((
        Transform::from_xyz(2.0, 2.0, -4.0),
        Mesh3d(meshes.add(Cuboid::new(2.0, 5.0, 0.5))),
        MeshMaterial3d(materials.add(Color::from(tailwind::RED_400))),
    ));

    // Upper Cover
    commands.spawn((
        Transform::from_xyz(0.0, 4.0, -4.0),
        Mesh3d(meshes.add(Cuboid::new(5.0, 2.0, 0.5))),
        MeshMaterial3d(materials.add(Color::from(tailwind::RED_400))),
    ));

    // Camera
    commands.spawn((Camera3d::default(), Transform::from_xyz(0.0, 1.0, 0.0)));
}

fn rotate_camera(mut camera: Single<&mut Transform, With<Camera>>, time: Res<Time>) {
    camera.rotate_y(time.delta_secs() * 0.5);
}

What went wrong

native:

Screencast.From.2025-06-14.20-03-23.mp4

web:

Screencast.From.2025-06-14.20-01-43.mp4

The issue gets worse with increased shadow cascades, but it's hard to notice on the minimal example. So let's look at Chainboom.

In Chainboom using the default shadow cascade config (4 I believe):

Screencast_From_2025-06-06_03-21-46.mp4

In Chainboom using only a single shadow cascade:

Screencast_From_2025-06-06_03-39-03.mp4

Additional information

Our workaround for Chainboom was to simply disable the directional light if it would start causing trouble, as a workaround.

[alice-i-cecile]

Does this only occur on WebGPU?

[janhohenheim]

It does not happen on native. I just hacked our game apart to get it to run on WebGL2 and the issue is also not present there. So yes, this seems to be WebGPU-only

[janhohenheim]

Good news, I was able to create a minimal example. Updated the PR description accordingly.
Pinging @atlv24, you may care about this.

Adding this to the 0.17 milestone as I expect more and more projects to build for WebGPU, as we've seen in the jam, now that support is widening.