Xeolabs SceneJS → V0.7.5

A new SceneJS.Camera node defines a view of the nodes within its subgraph. The Ortho, Perspective and Frustum nodes are gone - their functionality is aggregated by Camera.

Rationale

One reason for the Camera node's introduction is to provide scene traversal with a uniform point to signify its transition from view space down into model space. This allows SceneJS to know which of the view and model matrices is currently being modified by transform nodes in the scene graph. This enables the API to be polished by condensing SceneJS.ViewMatrix and SceneJS.ModelMatrix into a new SceneJS.Matrix node, while enabling the view transform to be constructed by SceneJS.Rotate, SceneJS.Scale and SceneJS.Translate nodes, which were formerly only for modelling transformations. The new SceneJS.Quaternion node can also be employed in the construction of the view transform.

One other reason is to allow for future extension of the Camera mechanism - for example: adding properties to describe transformation of light colors and intensities into numerical
values, following the Collada imager model.

Position and Orientation

A Camera is oriented such that the local +X is to the right, the lens looks down the local -Z axis, and the top points up the +Y axis. Its orientation and location may be moved by defining it within transform nodes - the example below defines a perspective Camera that is positioned using using a SceneJS.LookAt:

var exampleScene = new SceneJS.Scene({ ... },

   // Viewing transform specifies eye position, looking
   // at the origin by default

   SceneJS.lookAt({
          eye : { x: 0.0, y: 10.0, z: -10 },
          look : { y:1.0 },
          up : { y: 1.0 }
       },

       new SceneJS.Camera({
             optics: {
                type   : "perspective",
                fovy   : 60.0,           // Horizontal field of view in degrees
                aspect : 1.0,            // Aspect ratio of the field of view
                near   : 0.10,           // Distance of the near clipping plane
                far    : 10000.0         // Distance of the far clipping plane
             }
          },

          // ... child nodes
       )
    )
)

Optics

As you saw in the above example, a Camera has an optics property that defines the way that it projects light to form the view. Supported types are: "perspective", "frustum" and "ortho".

Perspective

Perspective projection embodies the appearance of objects relative to their distance from the view point. It implicitly defines a frustum that embodies the view volume. The example below sets the default properties for this projection:

var p = new SceneJS.Camera({
      optics: {
          type   : "perspective",
          fovy   : 60.0,           // Horizontal field of view in degrees
          aspect : 1.0,            // Aspect ratio of the field of view
          near   : 0.10,           // Distance of the near clipping plane
          far    : 10000.0         // Distance of the far clipping plane
      },

      // ... child nodes
)

Frustum

Frustum projection is effectively the same as perspective, providing you with the ability to explicitly set the view frustum, which can be useful if you want it to be asymmetrical. The example below sets its default properties:

var p = new SceneJS.Camera({
      optics: {
          type   : "frustum",
          left   : -0.02,
          bottom : -0.02,
          near   :  0.1,
          right  :  0.02,
          top    :  0.02,
          far    :  1000.0
      },

      // ... child nodes
)

Ortho

Orthographic, or parallel, projections consist of those that involve no perspective correction. There is no adjustment for distance from the camera made in these projections, meaning objects on the screen will appear the same size no matter how close or far away they are. The example below specifies the default view volume for orthographic projection:

var p = new SceneJS.Camera({
      optics: {
          type   : "ortho",
          left : -1.0,
          right : 1.0,
          bottom : -1.0,
          top : 1.0,
          near : 0.1,
          far : 1000.0
   },

   // ... child nodes
)