WebGPURenderer: Cannot pause shadows with shadowMap.autoUpdate false

[verekia]

Description

shadowMap.autoUpdate = false is ignored by WebGPURenderer

Pausing shadows is particularly useful for baking shadows on static meshes in a single render.

Reproduction steps

1. Create a scene with shadows and the WebGPURenderer
2. Set renderer.shadowMap.autoUpdate = false
3. Shadows continue to update

Code

import * as THREE from 'three'
import { WebGPURenderer } from 'three/webgpu'

const width = window.innerWidth
const height = window.innerHeight

const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10)
camera.position.set(0, 0.5, 1)
camera.rotation.x = -0.5

const scene = new THREE.Scene()

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshLambertMaterial({ color: 'red' })
)
cube.scale.set(0.5, 0.5, 0.5)
cube.position.set(0, 0.3, 0)
cube.castShadow = true
scene.add(cube)

const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(1, 1),
  new THREE.MeshLambertMaterial({ color: 'green' })
)
plane.scale.set(10, 10, 10)
plane.rotation.x = -Math.PI / 2
plane.position.y = -0.5
plane.receiveShadow = true
scene.add(plane)

const light = new THREE.DirectionalLight(0xffffff, 5)
light.position.set(0, 5, 0)
light.castShadow = true
light.shadow.mapSize.width = 1024
light.shadow.mapSize.height = 1024
light.shadow.camera.near = 0.5
light.shadow.camera.far = 10
scene.add(light)

// Doesn't work with WebGPURenderer:
const renderer = new WebGPURenderer({ antialias: true })
await renderer.init()

// Works with WebGLRenderer:
// const renderer = new THREE.WebGLRenderer({ antialias: true })
// renderer.setClearColor(0xffffff)

renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.shadowMap.enabled = true
renderer.setSize(width, height)
renderer.setAnimationLoop(animate)
document.body.appendChild(renderer.domElement)

function animate(time) {
  cube.rotation.x = time / 2000
  cube.rotation.y = time / 1000

  renderer.render(scene, camera)
}

setTimeout(() => {
  // bake shadows
  renderer.shadowMap.autoUpdate = false
}, 200)

Live example

• jsfiddle-latest-release WebGLRenderer
• jsfiddle-dev WebGLRenderer
• jsfiddle-latest-release WebGPURenderer
• jsfiddle-dev WebGPURenderer

Screenshots

No response

Version

r176

Device

Desktop

Browser

Chrome

OS

MacOS

[RenaudRohlinger]

It's because the WebGPURenderer is way more cool:

const light = new THREE.DirectionalLight(0xffffff, 5)
light.position.set(0, 5, 0)
light.castShadow = true
light.shadow.mapSize.width = 1024
light.shadow.mapSize.height = 1024
light.shadow.camera.near = 0.5
light.shadow.camera.far = 10
// bake shadow
light.shadow.autoUpdate = false
light.shadow.needsUpdate = true

https://jsfiddle.net/zgkcLb75/7/