Instanced cube not showing when viewed from certain perspectives unless position is 0, 0, 0

Questions
,
1

I had this cube working fine, but when I set its position to something other than (0, 0, 0), it became invisible when looked at depending on where I am viewing it from. None of the objects are transparent.

ezgif.com-optimize 3
ezgif.com-optimize 3800×560 1.26 MB

This is some of the source code:

scene.autoUpdate = true;

let camera = new THREE.PerspectiveCamera(
	75, // field of view
	window.innerWidth / window.innerHeight, // aspect ratio
	0.1, // near clipping plane
	32, // far clipping plane
);

let renderer = new THREE.WebGLRenderer({
	canvas: document.getElementById('world-canvas') as HTMLCanvasElement,
	precision: 'mediump',
	stencil: false,
});

let voxelGeometry = new THREE.BoxBufferGeometry(1, 1, 1);

let material = new THREE.MeshNormalMaterial();

function newVoxelMesh(count: number): THREE.InstancedMesh {
	let mesh = new THREE.InstancedMesh(voxelGeometry, material, count);
	scene.add(mesh);
	return mesh;
}

// Used to hold the matrix that will be applied to objects
let transform = new THREE.Object3D();

function addVoxel(index: number, mesh: THREE.InstancedMesh, x: number, y: number, z: number) {
	transform.position.set(x, y, z);
	transform.updateMatrix();
	mesh.setMatrixAt(index, transform.matrix);
}

let tmpMesh = newVoxelMesh(1);
addVoxel(0, tmpMesh, 0, 0, 4);

camera.position.set(0, 0, 8);
camera.lookAt(0, 0, 4);

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

I tried doing many things to fix this, like using Camera.updateProjectionMatrix(), turning on auto matrix update, and even switching to orthographic camera. I found a possible solution which is to disable Object3D.frustumCulled, but this will cause performance issues when I add more voxel geometry in the future.

2

Can you try to increase your camera with a higher far plane value? Besides, can you try to remove the precision parameter from WebGLRenderer ctor? Do you see any effects?

1 Like
3

I tried both and it still does not work correctly.

4

Related to https://github.com/mrdoob/three.js/issues/18334? Culling does not know about all of the instances. You may need to disable it or set a manual bounding box for now.

1 Like
5

I tried changing the background color of the scene to see if the cube is just turning black, and it’s not. I also tried switching to MeshDepthMaterial and it still does not work.

6

I disabled frustumCulled for now

7

View frustum culling is deactivated by default for InstancedMesh:

So I don’t think you have to disable it in your application.