When utilizing ArrayCamera, it is crucial to handle view frustum culling in a unique manner.
Typically, view frustum culling is employed to eliminate objects from rendering if they fall outside of the camera's view frustum. The frustum is generated from the camera's projection and view matrix. When working with ArrayCamera as demonstrated in your code snippet, both matrices are not correctly configured, leading to erroneous view frustum culling that impacts your scene negatively. To address this dilemma, there are two suggested solutions:
- Deactivate view frustum culling for your objects by setting
Object3D.frustumCulled to false.
- Create a 3D transformation and projection matrix specifically for your instance of
ArrayCamera. This has been implemented in the live example given below:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
//cube.frustumCulled = false; // SOLUTION
scene.add(cube);
camera.position.z = 10;
camera.updateMatrixWorld();
camera.viewport = new THREE.Vector4(0, 0, window.innerWidth, window.innerHeight);
var arraycamera = new THREE.ArrayCamera();
arraycamera.cameras.push(camera);
arraycamera.position.copy( camera.position ); // SOLUTION
arraycamera.projectionMatrix.copy( camera.projectionMatrix ); // SOLUTION
var animate = function() {
requestAnimationFrame(animate);
if (cube.position.x > 5)
cube.position.x = -1;
else cube.position.x += 0.1;
renderer.render(scene, arraycamera);
};
animate();
body {
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2741475d4a4adb6e413341343941">[email protected]</a>/build/three.js"></script>
As evident, I have simply transferred the values from your current camera settings. Especially in VR scenarios (where ArrayCamera finds its primary use), combining projection matrices becomes essential to create a unified frustum covering both eyes.
The fundamental concept revolves around performing view frustum culling just once when employing ArrayCamera (due to multiple renderings within one render pass).