r172 - Shadows not working, inconsistent across browser environments

[illestrater]

Description

Hello - odd behavior I'm noticing, weirdly shadows will work (in browsers where shadows are not working) if an object is placed above the light

As you can see on the threejs examples page, this is what I see (no shadows) across specific browsers / environments:

Below what is shown (and referenced jsfiddle below), is that shadows appear to work when a mesh is placed close above the light, but doesn't work when there is nothing above the light:

No mesh above light:

Mesh above light:

Environments where shadows work completely fine, without needing box above light:
Windows 11 (Arc Browser)
Mac M1 Max (Brave Dev)

Environments where shadows are not working, but works with box above light:
Windows 11 (Chrome)
Mac M1 Max (Arc Browser)
Mac M1 Max (Chrome)

Reproduction steps

Please see description

Code

import * as THREE from "three"
import { OrbitControls } from "three/addons/controls/OrbitControls.js"

let renderer, scene, camera, controls;

init()

function init() {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / (window.innerHeight / 2),
    0.1,
    1000,
  )
   camera.position.set(10, 10, 10)

  renderer = new THREE.WebGPURenderer()
  
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setAnimationLoop(animate)
  renderer.shadowMap.enabled = true
  document.body.appendChild(renderer.domElement)
  
  controls = new OrbitControls(camera, renderer.domElement)

  const geometry = new THREE.SphereGeometry(1, 128, 128)
  const nodeMaterial = new THREE.MeshPhysicalNodeMaterial();

  const shape = new THREE.Mesh(geometry, nodeMaterial)
  shape.position.set(1, 3, 5)
  shape.castShadow = true
  shape.receiveShadow = true
  scene.add(shape)

  const shape2 = new THREE.Mesh(new THREE.BoxGeometry(100, 0.1, 100), nodeMaterial)
  shape2.castShadow = true
  shape2.receiveShadow = true
  scene.add(shape2)
  
  const shape3 = new THREE.Mesh(new THREE.BoxGeometry(100, 0.1, 100), nodeMaterial)
  shape3.position.set(1, 10, 5)
  shape3.castShadow = true
  shape3.receiveShadow = true
  
  // SHADOWS ONLY WORKING IF OBJECT PLACED ABOVE LIGHT - COMMENT UNCOMMENT BELOW LINE
  /* scene.add(shape3) */

  const light = new THREE.PointLight(0xffffff, 25, 100)
  light.position.set(1, 5, 1)
  light.castShadow = true
  light.shadow.mapSize.width = 1024;
	light.shadow.mapSize.height = 1024;
  light.shadow.radius = 10;
  scene.add(light)
}

function animate() {
  controls.update()
  renderer.render(scene, camera)
}

Live example

https://jsfiddle.net/illestrater/2ehtnxqo/78/

Screenshots

No response

Version

r172

Device

No response

Browser

No response

OS

No response

[Mugen87]

Indeed, the shadows in the example broke with r172. For comparison:

https://threejs.org/examples/webgpu_lights_physical
https://rawcdn.githack.com/mrdoob/three.js/r171/examples/webgpu_lights_physical.html