Using WebGPURenderer, putting the loaded GLB model into the scene will result in an error "TypeError: Cannot read properties of undefined (reading 'isInterleavedBufferAttribute')

[chengxiaowan]

Description

I use GLTFloader to load a GLB model and ADD it into the scene, but it will cause a "TypeError: Cannot read properties of undefined (reading 'isInterleavedBufferAttribute')" error. I also found that loading the GLTF model will directly lead to a white screen in the scene. This problem does not exist when I use webGL's renderer.

Reproduction steps

Load GLB or GLTF model

Code

three-webgpu

Live example

Screenshots

Version

r158

Device

Desktop

Browser

Chrome

OS

MacOS

[mrdoob]

Here's the file we care about:
https://github.com/chengxiaowan/three-webgpu/blob/main/public/RobotExpressive.glb

[sunag]

This bug still valid? The GLB model is currently opening normally.

[mrdoob]

Is that how it's supposed to look like?

[chengxiaowan]

It feels like this is not what I expected, some small parts are misplaced.

[pecopeco]

same problem, unstable

[pecopeco]

version 160 still has problems，occasionally, an error occurs and I cannot locate it.

[sunag]

version 160 still has problems，occasionally, an error occurs and I cannot locate it.

I recreated your example in vanilla because for some reason your example in vue is not install on my computer. Apparently everything is ok, or have I forgotten something?

import * as THREE from 'three';

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

import WebGPU from 'three/addons/capabilities/WebGPU.js';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';

let camera, scene, renderer;

init();

async function init() {

	if ( WebGPU.isAvailable() === false ) {

		document.body.appendChild( WebGPU.getErrorMessage() );

		throw new Error( 'No WebGPU support' );

	}

	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
	camera.position.copy( new THREE.Vector3( 10, 10, 10 ) );
	camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0x222222 );

	//

	renderer = new WebGPURenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setAnimationLoop( animate );
	document.body.appendChild( renderer.domElement );

	//

	const loader = new GLTFLoader();
	loader.load( './RobotExpressive.glb', ( gltf ) => {

		const object = gltf.scene;
		object.scale.set( 1, 1, 1 );
		scene.add( object );

	} );

	//

	const axesHelper = new THREE.AxesHelper( 5 );
	scene.add( axesHelper );

	const size = 100;
	const divisions = 100;
	const gridHelper = new THREE.GridHelper( size, divisions );
	scene.add( gridHelper );

	const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8d8d8d, 3);
	hemiLight.position.set( 0, 20, 0 );
	scene.add( hemiLight );

	const dirLight = new THREE.DirectionalLight(0xffffff, 5);
	dirLight.position.set( 20, 20, 10 );
	dirLight.shadow.mapSize.set( 4096, 4096 );
	scene.add( dirLight );


	window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

	renderer.render( scene, camera );

}

[chengxiaowan]

MaLu.glb.zip
Please take a look at this model file. There will be a TypeError: Cannot read properties of undefined (reading'isInterleavedBufferAttribute ') error # @sunag

[sunag]

@chengxiaowan fixed here