Setting up the cameras and the scene

Setting up the cameras and projection matrices

Depending on the device the application is being developed for , the scene typically requires 4 to N cameras to be setup. The positions and the projection matrices of these cameras can be queried from the SDK while setting up. Before the cameras are setup.

var cameraPositions = controller.getCameraPositions();
for(var i = 0 ; i < cameraPositions.length ; i++)
{
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(cameraPositions[i], 4, 20);
cameras.push(camera);
scene.add(camera);
}

The projection matrices in from SDK vary with the camera type, so the type of the camera has to be specified while querying 'perspective' or 'orthographic' for the projection matrices. These projection matrices can be set to the cameras that were initially setup

let projectionMatrices = controller.getProjectionMatrices(camType);
for(let i = 0; i<projectionMatrices.length; i++) {
let matrix = new THREE.Matrix4();
matrix.elements = projectionMatrices[i];
cameras[i].projectionMatrix = matrix.clone();
cameras[i].projectionMatrixInverse = matrix.clone().invert();
}

Setting up render textures

Once the cameras are setup, a render texture can be created to render the camera output and pass on to the SDK

The width and height of the render texture can be queried from the SDK as follows

RenderController.setupCanvas(gl);
const rtWidth = controller.getRenderTextureWidth();
const rtHeight = controller.getRenderTextureHeight();
const renderTarget = new THREE.WebGLRenderTarget(rtWidth,rtHeight);