Adding a Mesh to a scene *before* an InstancedMesh stop the Instanced mesh working.

[ernie-hs]

Description

If i construct a scene and add a "regular" mesh before an InstancedMesh

for example,

const sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
const sphereGeometry = new THREE.SphereGeometry(0.6);
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

const helper = new THREE.GridHelper(100, 100, THREE.Color.NAMES.orangered, THREE.Color.NAMES.saddlebrown);
helper.opacity = 0.5;
helper.position.set(0, 0, 0);
scene.add(helper);

const meshMaterial = new THREE.MeshBasicMaterial({ color: THREE.Color.NAMES.green });
const meshGeometry = new THREE.BoxGeometry(1);
mesh = new THREE.InstancedMesh(meshGeometry, meshMaterial, total);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
scene.add(mesh);

the mesh is rendered but no instanceMatrix is applied...

Reproduction steps

1. construct a scene with an WebGPURenderer an InstanceMesh and regular Mesh
2. render...
3. switch the order of InstancedMesh/Mesh in the scene construction, re-render

Code

import * as THREE from "three";
import { ArcballControls, WebGL } from "three/examples/jsm/Addons.js";
import WebGPU from "three/examples/jsm/capabilities/WebGPU.js";
import WebGPURenderer from "three/examples/jsm/renderers/webgpu/WebGPURenderer.js";

const renderTarget = document.body;
let renderer;
let camera;
let controls;
let scene;
let mesh;
const total = 20;
let objs = [];

if (WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false) {
  document.body.appendChild(WebGPU.getErrorMessage());
  throw new Error('No WebGPU or WebGL2 support');
}

function OnWindowResize() {
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(renderTarget.parentElement.clientWidth, renderTarget.parentElement.clientHeight);
  camera.aspect = renderTarget.parentElement.clientWidth / renderTarget.parentElement.clientHeight;
  camera.updateProjectionMatrix();
}

// stuff

function update() {
  if (mesh) {
    objs.forEach((o, idx) => {
      mesh.setMatrixAt(idx, o.matrix);
    });
    mesh.instanceMatrix.needsUpdate = true;
  }
}

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

function animate() {
  update();
  render();
}

// meat

camera = new THREE.PerspectiveCamera(45, renderTarget.parentElement.clientWidth / renderTarget.parentElement.clientWidth, 0.1, 10000);
camera.aspect = renderTarget.parentElement.clientWidth / renderTarget.parentElement.clientHeight;
camera.position.set(0, 2, 10);

scene = new THREE.Scene();

const sun = new THREE.PointLight(0xffffff, 1000);
sun.position.set(-100, 500, -100);
scene.add(sun);

// uncomment any of below

// const planeGeometry = new THREE.PlaneGeometry(100, 100);
// planeGeometry.rotateX(-Math.PI / 2);
// const planeMaterial = new THREE.MeshBasicMaterial({ color: THREE.Color.NAMES.sandybrown });
// const plane = new THREE.Mesh(planeGeometry, planeMaterial);
// plane.position.set(0, 0, 0);
// scene.add(plane);

// const sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
// const sphereGeometry = new THREE.SphereGeometry(0.6);
// const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// scene.add(sphere);

const helper = new THREE.GridHelper(100, 100, THREE.Color.NAMES.orangered, THREE.Color.NAMES.saddlebrown);
helper.opacity = 0.5;
helper.position.set(0, 0, 0);
scene.add(helper);

const meshMaterial = new THREE.MeshBasicMaterial({ color: THREE.Color.NAMES.green });
const meshGeometry = new THREE.BoxGeometry(1);
mesh = new THREE.InstancedMesh(meshGeometry, meshMaterial, total);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
scene.add(mesh);

for (let i = 0; i < total; i++) {
  let o = new THREE.Object3D();
  o.position.set(i * 2, 0.5, 0);
  o.updateMatrix();
  objs.push(o);
  mesh.setMatrixAt(i, o.matrix);
}
mesh.instanceMatrix.needsUpdate = true;

console.log(mesh);

renderer = new WebGPURenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(renderTarget.parentElement.clientWidth, renderTarget.parentElement.clientHeight);
renderer.setAnimationLoop(animate);
renderTarget.appendChild(renderer.domElement);

controls = new ArcballControls(camera, renderer.domElement);
controls.cursorZoom = true;


// register event listeners

window.addEventListener("resize", OnWindowResize);

Live example

• example

Screenshots

No response

Version

0.164.1

Device

Desktop

Browser

Chrome

OS

Windows