WebGPURenderer: Mesh shapekeys deforming different geometry mesh

[Russo-creation]

Description

I prepared 2 mesh (1 mesh sliced into 2 parts) in blender with shape keys and animation for shape keys (NLA). The animation was prepared and exported from marvelus designer (simulation). I exported mesh to .glb and load into the scene with GLTFLoader.

Loaded geometry of second mesh is looking deformed. For 3 days I was searching to find what could be the reason but don't have much only feeling that file could be wrongly interpreted by the three.js - probably there are references to the shapekeys which shouldn't be?

When importing .glb file to blender it works perfectly as expected

---

What I tried so far but all gave same result: deformed 2-nd loaded mesh geometry:

• Load 2 models separately
• Export to .FBX and change influence manually (exported file does not contain animation for shape keys)
• I prepared a scripts for blender to create a new mesh based on original and "copy" positions to prevent "referring" one mesh to another (I fought blend or mesh was broken - sometimes happens)
• Remove animations form .glb's and manually change influences
• Change shape key's names
• Sometimes when influences are set to 0 second mesh is deformed anyway

Reproduction steps

1. Load 2 .glb files with shape keys into scene
2. Change 1'st model morph target influence to for instance 1
3. Check the result of deforming 2'nd geometry model

Code

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import * as THREE from 'three';

let camera, scene, renderer;

init();
render();

function init() {
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.25,
    20
  );
  camera.position.set(-1.8, 0.6, 2.7);

  scene = new THREE.Scene();

  // Light
  const light = new THREE.AmbientLight('#FFFFFF', 0.55);
  scene.add(light);

  const dirLight = new THREE.DirectionalLight(0x8888ff, 10);
  dirLight.position.set(0, 3, 0);
  scene.add(dirLight);

  const pointLight = new THREE.PointLight(0x8888ff, 10);
  pointLight.position.set(3, 0, 0);
  scene.add(pointLight);

  ///////////////////----------------------------------------------

  const loader = new GLTFLoader().setPath('/assets/');

  // Load model 1

  loader.load('back_outside 1.glb', function (gltf) {
    scene.add(gltf.scene);

    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.material = new THREE.MeshStandardMaterial({
          color: 'red',
        });
      }
    });

    console.log(gltf);

    render();
  });

  // Load model 2
  loader.load('front_outside 1.glb', function (gltf) {
    scene.add(gltf.scene);

    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.material = new THREE.MeshStandardMaterial({
          color: 'green',
        });
      }
    });

    console.log(gltf);

    render();
  });

  ///////////////////----------------------------------------------

  /// Renderer and default configs

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

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', render); // use if there is no animation loop
  controls.minDistance = 1;
  controls.maxDistance = 10;
  controls.target.set(0, 0, -0.2);
  controls.update();

  window.addEventListener('resize', onWindowResize);
}

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

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

  render();
}

//

function render() {
  renderer.renderAsync(scene, camera);
}

Live example

• Link to repo with .glb https://github.com/Russo-creation/three-bug-shapekeys

Screenshots

Version

r0.171.0

Device

Desktop, Mobile

Browser

Chrome

OS

Windows

---

Edit:
Just checked how the model is loading in babylon.js and also is working perfectly good as expected (even with animation) nothing is deformed I used same .glb files provided in repo didn't edited it

[donmccurdy]

Does the problem occur with WebGLRenderer, or only WebGPURenderer?

[Russo-creation]

@donmccurdy Just cheeked models with WebGLRenderer and with it works properly as expected (also shape keys animation is working), so it looks like issue comes with WebGPURenderer