WebGPU Fatal Error on Mesh Geometry Assignment

[illestrater]

Description

Hello, I'm facing an odd issue that I can't pinpoint, but have been able to reproduce in a sandbox.

A simple geometry reassignment on a mesh can cause errors under different circumstances.

Fatal Error:

three.webgpu.js:61792 Uncaught TypeError: Failed to execute 'setIndexBuffer' on 'GPURenderPassEncoder': parameter 1 is not of type 'GPUBuffer'.
    at WebGPUBackend.draw (three.webgpu.js:61792:20)
    at WebGPURenderer._renderObjectDirect (three.webgpu.js:48041:16)
    at WebGPURenderer.renderObject (three.webgpu.js:47962:9)
    at WebGPURenderer._renderObjects (three.webgpu.js:47875:10)
    at WebGPURenderer._renderScene (three.webgpu.js:46592:64)
    at WebGPURenderer.render (three.webgpu.js:46342:8)
    at Animation.animate [as _animationLoop] (_display/?editor_console=true:195:12)
    at update (three.webgpu.js:22340:45)

Warning Error:

Vertex buffer slot 1 required by [RenderPipeline "renderPipeline_MeshPhysicalMaterial_19"] was not set.
 - While encoding [RenderPassEncoder (unlabeled)].DrawIndexed(97536, 1, 0, 0, 0).
 - While finishing [CommandEncoder "renderContext_0"].

72[Invalid CommandBuffer from CommandEncoder "renderContext_0"] is invalid.
 - While calling [Queue].Submit([[Invalid CommandBuffer from CommandEncoder "renderContext_0"]])

I have tried different things such as geometry computeBoundingBox, computeBoundingSphere, computerVertexNormals, setIndex, position attributes/normal/material needsUpdate, geometry/material dispose, and manually setting position attribute to a BufferGeometry, to no avail.

This error is a showstopper in shipping my application as it crashes. I can circumvent this issue by deleting the mesh and recreating it, but I would need geometry assignment for the feature in my application.

My application crashes under different circumstances (but still upon geometry reassignment), but I was able to replicate the issue in the jsfiddle by placing the position of the mesh further away from the camera in the scene.

Thank you so much for your time and any help!

Reproduction steps

Please view jsfiddle!

Code

import * as THREE from "three"

let renderer, scene, camera, control, shape;

init()

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

  renderer = new THREE.WebGPURenderer()
  
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.shadowMap.enabled = true
  document.body.appendChild(renderer.domElement)
  
  const sphere = new THREE.SphereGeometry(1, 128, 128)
  const physicalMaterial = new THREE.MeshPhysicalMaterial();
  const basicMaterial = new THREE.MeshBasicMaterial();

  shape = new THREE.Mesh(sphere, physicalMaterial)
  shape.castShadow = true
  shape.receiveShadow = true
  scene.add(shape)
  
  // WILL TRIGGER FATAL ERROR
  shape.position.set(3,3,-100)

  // WILL TRIGGER RENDER WARNING IF UNCOMMENTED
  shape.position.set(3,3,-10)

	/* 
  *  THE SECOND CALL OF GEOMETRY ASSIGNMENT CAUSES FATAL ERROR
  */
  setTimeout(() => {
  	console.log('TRIGGER FATAL ERROR')
    const newGeometry = new THREE.SphereGeometry(2, 128, 128)
    shape.geometry.dispose()
    shape.geometry = newGeometry
  }, 3000)

  const shape2 = new THREE.Mesh(new THREE.BoxGeometry(100, 0.1, 100), physicalMaterial)
  shape2.castShadow = true
  shape2.receiveShadow = true
  scene.add(shape2)
  
  const light = new THREE.PointLight(0xffffff, 25, 100)
  light.position.set(2, 5, 5)
  light.castShadow = true
  light.shadow.mapSize.width = 1024;
	light.shadow.mapSize.height = 1024;
  light.shadow.radius = 10;
  scene.add(light)
  
  renderer.setAnimationLoop(animate)
}

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

Live example

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

Screenshots

No response

Version

r172

Device

No response

Browser

No response

OS

No response