Use EdgesGeometry in an InstancedMesh

Questions
1

Hello,

I am currently working on a project where I need to display solar panels on a roof. For this I use THREE.InstancedMesh because the geometry remains the same. Now I would like to draw the solar panel edges in black.

The naive first implementation looked like this:

const instancedPanel = new THREE.InstancedMesh(/* Properly initialized */);
for (const [index, matrix] of matrices.entries()) {
  instancedPanel.setMatrixAt(index, matrix);

  const edges = new THREE.EdgesGeometry(instancedPanel.geometry);
  const lines = new THREE.LineSegments(edges, lineMaterial);
  lines.matrix = matrix;
  lines.matrixAutoUpdate = false;

  // Add to scene
}

This created the expected output but was too slow for large roofs with tens of thousands of solar panels.

edgesgood
edgesgood1375×764 157 KB

In the next approach I tried using another instanced mesh to display the edges.

const instancedPanel = new THREE.InstancedMesh(/* Properly initialized */);

const edges = new THREE.EdgesGeometry(instancedPanel.geometry);
const lines = new THREE.LineSegments(edges);
const instancedEdges = new THREE.InstancedMesh(lines.geometry, lineMaterial, total)

for (const [index, matrix] of matrices.entries()) {
  instancedPanel.setMatrixAt(index, matrix);
  instancedEdges.setMatrixAt(index, matrix);

  // Add to scene
}

Which results in the following:

edgebad
edgebad1386×769 105 KB

Am I doing something wrong? / What is the best way to draw edges of an instanced mesh?

2

Hi!
Take a look at this post: InstancedMesh - Lines?

3

Could you clarify some of the parameters in the example?

I assume the following:

  • positions are the vertices of the THREE.LineSegments
  • offsets should all be matrix.getPosition()
  • colors should all be zero (for black edges)

I am a little unsure about orientationStart and orientationEnd. :frowning:

4

In your case, you need just an offset as an additional instanced buffer attribute.
I wrote a small example: https://jsfiddle.net/prisoner849/cxjyu0og/

I needed to set this: instGeom.instanceCount = Infinity;, otherwise instanceCount is undefined and you’ve got nothing on the screen.

изображение
изображение713×509 5.47 KB

1 Like
5

Thanks for that! I have the problem that the line segments become invisible when zooming in close (I am also using DragControls). Do you have any idea why this could happen?

Edit: Setting frustumCulled on the created line segments solved it (found here). Thanks again @prisoner849.

1 Like
6

I was wondering how I could do this for lines with width (i.e. using LineSegmentsGeometry, LineMaterial, and LineSegments2).

I’ve created a separate post, but I’d figured it might be a relevant question for other people reading this post.

2 Likes