How to show and hide an instance in instance mesh

Questions
1

Hello All,

I am following this article three.js examples and this is amazing.
Here i am wondering how to show and hide an instance.

Please provide some inputs.

Thanks

2

In my work in progress, the digits 0 and 1 are hidden as needed.

See CPU-Simulation-8Bit

Press the green Run button.

2021-07-21 10.19.50

3

This topic was lately discussed at GitHub. You will find some pointers at the following issue:

1 Like
4

Its not very clear to me. I also want to ask that i asked before also.
For instance buffer geometry as i used shader material so shading is not working. You said to introduce the logic in shader and here i am using instance mesh with simple material like basic or standard so does it have a capability to have shadow for each instances.

I am also trying the setColorAt but it is saying setColorAt is not a function.

5

You probably using an outdated version of three.js. This method was added after the introduction of InstancedMesh.

6

I got one solution for this please correct me if i am wrong

instanceMesh.instanceMatrix, so i need to find the may matrix position in the array and remove and update this matrix so it will delete an instance and readding is simple by using setMatrix.

But this the solution of one problem, still have to see how i can do show/hide that is need still

Version is 0.116.1

7

Per instance color support was added with r120.

If you want to show/hide instances, it’s explained here: [Feature request] Add per-instance visibility support to InstanceMesh · Issue #22102 · mrdoob/three.js · GitHub

To be more precise, you define the visible instances with setMatrixAt() first, the invisible ones last. You then use the count property to define the draw range.

1 Like
8

Just out of curiousity, is setting scale of an instance to 0 not an option?

Example: https://codepen.io/prisoner849/pen/oNWXejZ?editors=0010
Picture:

изображение
изображение1118×819 101 KB

1 Like
9

Any example that you can share like fiddle or pen

10

that is what i am using and it works perfectly fine.

1 Like
11

Of course! The only thing is that you don’t save performance (unlike with defining a draw range).

1 Like
12

I have achieved the very dynamic visibility of the digits 0 and 1 respectively by setting the position to 0 and behind frustum far.

Is there a difference in performance compared to the method @prisoner849 ?

const M4 = new THREE.Matrix4( ); // helper matrix to position instanced meshes
const visible = 0;
const hidden = -8000;
...
const aspectRight  = containerRight.clientWidth / containerRight.clientHeight;
const cameraRight = new THREE.PerspectiveCamera( 55, aspectRight, 0.01, -hidden / 2  );
cameraRight.position.set( 0, 0, 26.5 );
...


function rf_binRAM( row ) {
	
	for ( let j = 0; j < 8 ; j ++ ) {
	
		if ( RAM[ row ][ 2 ][ j ] === '0' ) {
			
			visibilityRAM( iMeshDig0RAM, row, j, visible );
			visibilityRAM( iMeshDig1RAM, row, j, hidden );
			
		} else { // === '1'
			
			visibilityRAM( iMeshDig0RAM, row, j, hidden );
			visibilityRAM( iMeshDig1RAM, row, j, visible );
			
		}
		
	}
	
	iMeshDig0RAM.instanceMatrix.needsUpdate = true;
	iMeshDig1RAM.instanceMatrix.needsUpdate = true;
	
}

function visibilityRAM( iMesh, i, j, visibility ) {
	
	iMesh.setMatrixAt( i * 8 + j, M4.setPosition( RAMx( j ), RAMy( i ), visibility ) );
	
}

2021-07-21 21.08.12
2021-07-21 21.08.121027×615 142 KB

1 Like
13

My need here is to do the dynamic selection of the instances and than i want to hide the selected instances, setting draw range seems like its only during the initial creation

14

It is actually intended that the draw range is changed during runtime.

15

Hi. I know the topic is old but i guess it may help some people

Here is a code I use to show and hide instances using draw range (InstancedMesh.count) and swaping their matrices in InstancedMesh.instanceMatrix.

mtx = new THREE.Matrix4();
mtx2 = new THREE.Matrix4();
// im - InstancedMesh
// instanceIdx - index of an instance
// visible - boolean show or hide
instanceShow( im, instanceIdx, visible )
{
		const numVisibleInst = im.count;
		const maxInstances = im.instanceMatrix.count;

		if( instanceIdx >= maxInstances ) 
			throw Error("!");
		 
		let lastInstIdx;
		
		// if show instance which is hidden
		if( visible && instanceIdx >= im.count )
		{
			lastInstIdx = im.count;	// last instance idx
			im.count += 1; 		// show last
		}

		// if hide instance which is visible
		if( !visible && instanceIdx < im.count )
		{
			im.count -= 1; 			// hide last instance
			lastInstIdx = im.count;	// last instance
		}
		
		// Swap instances: instanceIdx <-> lastInstIdx
		
		// Swap matrices
		im.getMatrixAt( lastInstIdx, mtx );	
		im.getMatrixAt( instanceIdx, mtx2 );	
		
		im.setMatrixAt( lastInstIdx, mtx2 );
		im.setMatrixAt( instanceIdx, mtx );
		
		im.instanceMatrix.needsUpdate = true;	// !
}