mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
102.22k stars 35.35k forks source link

BatchedMesh doesn't render wireframe mode correctly #29045

Open RodrigoHamuy opened 2 months ago

RodrigoHamuy commented 2 months ago

Description

BatchedMesh doesn't render wireframe mode correctly.

Reproduction steps

  1. Create a BatchedMesh with any Material with wireframe set to true.
  2. Look at the results.

Code

  const box = new THREE.BoxGeometry();
  const sphere = new THREE.SphereGeometry();
  const material = new THREE.MeshBasicMaterial( { wireframe: true } );

  const batchedMesh = new THREE.BatchedMesh( 10, 5000, 10000, material );
  const boxGeometryId = batchedMesh.addGeometry( box );
  const boxInstancedId1 = batchedMesh.addInstance( boxGeometryId );
  batchedMesh.setMatrixAt( boxInstancedId1, new THREE.Matrix4());
  scene.add( batchedMesh );

Live example

https://jsfiddle.net/hamuyrodrigo/w9vhs7rp/62/

Screenshots

Example: 2 spheres and 2 boxes.

With wireframe turned on. image

With wireframe turned off. image

Version

r167

Device

Desktop, Mobile

Browser

Chrome

OS

MacOS, Android

Mugen87 commented 2 months ago

When using the wireframe: true flag, the engine internally creates special line geometry data and alters the render mode from triangles to lines.

This approach works for normal meshes but is incompatible with BatchedMesh right now.

gkjohnson commented 2 months ago

Since a new index buffer is created for the sake of drawing edges rather than triangles - the batched mesh "multi draw starts" and "multi draw counts" buffers (see here) need to be adjusted for the new primitive stride and buffer before upload.