In Voxelent, each view has a camera manager who takes care of managing the cameras associated with a view. The camera manager provides methods to create, delete and switch between cameras.

The Camera Manager

Each vxlView has an associated object that is in charge of managing the cameras. This object is an instance of vxlCameraManager. This object can be accessed programmatically through the public property cameraman:

var view = vxl.c.view; //current view
var cameraManager = view.cameraman

The active camera

The camera manager keeps a reference to the current camera in the public attribute active:

var currentCamera =  view.cameraman.active;
Note about multi-view envirnoments

In multi-view environments (more than one canvas per page) each view has an active camera accessible through view.cameraman.active. The camera pointed by vxl.c.camera will change depending on the view that received the last interaction from the user. Use view.cameraman.active instead of vxl.c.camera to access the active camera on each view.

Camera management operations

The camera manager provides methods to create, delete, retrieve, and switch among cameras:

  • create(type): creates a new camera of the type given by the parameter type. This type can be one of the  vxl.def.camera.type constants. This method returns the created camera.
  • get(idx): returns a camera by its index (camera 0, camera 1, camera 2, etc..)
  • switchTo(idx): switch to a camera given its index. This methods sets the active camera. The active camera is the one used in rendering.
  • remove(idx): removes the camera indicated by the index idx from this camera manager

Please notice that the index given to each camera depends on the order in which the cameras are being created. The vxlCameraManager simply keeps a list of cameras and returns the appropiate one given the index in the list.

Managing three cameras – demo

click here to see the demo in action

The following demo sets up three cameras with the same viewport (vxlView) using the buttons on the right overlay we can switch among cameras.

You can play with the cameras and verify that each one keeps track of its current type, position and orientation. You can explore the camera operations in the browser console. The variables (as they appear in the source code) are cam0, cam1 and cam2.

 

 

We create the cameras in the handleEvent function in the web page:

    cam0 = vxl.c.camera;
    cam0.setDistance(160);
    cam0.setElevation(-30);

    cam1 = view.cameraman.create(vxl.def.camera.type.TRACKING);
    cam1.setDistance(160);
    cam1.setElevation(-90);

    cam2 = view.cameraman.create(vxl.def.camera.type.EXPLORING);
    cam2.setDistance(160);
    cam2.setAzimuth(-90);
    cam2.setElevation(-10);

In the body of the web page we set up the links that will be converted to buttons using JQuery UI:

<p><a href='#' id='btnCam0'>Camera 0</a></p>
<p><a href='#' id='btnCam1'>Camera 1</a></p>
<p><a href='#' id='btnCam2'>Camera 2</a></p>

And then we attach the camera manager to the buttons to switch between cameras later on:

$('#btnCam0').button().click(
    function(){
        view.cameraman.switchTo(0);
    }
);

$('#btnCam1').button().click(
    function(){
        view.cameraman.switchTo(1);
    }
);

$('#btnCam2').button().click(
    function(){
        view.cameraman.switchTo(2);
    }
);

Summary

In this tutorial we have discussed the following vxlCameraManager methods:

.create(type) //creates a new camera
.get(idx) //gets the vxlCamera object by its index in the vxlCameraManager
.switchTo(idx) //sets camera idx as the active camera
.remove(idx) // deletes the camera idx from the camera manager