Initializing Components

Render Controller

Render Controller handles the rendering pipeline - It takes textures from the cameras setup , processes them and renders the final output onto the specified canvas.

/* We query the canvas where the output has to be displayed and pass
   along with its webgl context to the Render Controller */

var canvaswgl = document.querySelector("#canvas");
var gl = canvaswgl.getContext("webgl", {preserveDrawingBuffer : true});
var convergenceDistance = 20;

const controller = RenderController;
controller.initialize(canvaswgl, gl, window);
controller.setConvergence(convergenceDistance);

Render Controller expects

1. Canvas where the output has to be rendered

2. WebGL context of the output canvas

3. Window object

4. Convergence distance

This initialization can be done once on launch along with your framework initialization.

Cameras and Projections 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();
}

Render Textures

Once the cameras are setup, a render texture can be created to render the camera output and passed 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);