This interactive toy shows how different camera parameters change the camera's geometry and how a scene is rendered. This was originally built to supplement my upcoming articles exploring the intrinsic and extrinsic matrices; this is the standalone version. For more on the perspective camea, check out my series of articles on the topic, "The Perspective Camera, an Interactive Tour".

This requires javascript and a WebGL-enabled browser.

Javascript is required for this demo.

Scene | Image |

\(\boldsymbol{t}_x\)

\(\boldsymbol{t}_y\)

\(\boldsymbol{t}_z\)

x-Rotation

y-Rotation

z-Rotation

Adjust extrinsic parameters above.

This is a "world-centric" parameterization. These parameters describe how the *world* changes relative to the *camera*. These parameters correspond directly to entries in the extrinsic camera matrix.

As you adjust these parameters, note how the camera moves in the world (left pane) and contrast with the "camera-centric" parameterization:

- Rotating affects the camera's position (the blue box).
- The direction of camera motion depends on the current rotation.
- Positive rotations move the camera clockwise (or equivalently, rotate the world counter-clockwise).

Also note how the image is affected (right pane):

- Rotating never moves the world origin (red ball).
- Changing \(t_x\) always moves the spheres horizontally, regardless of rotation.
- Increasing \(t_z\) always moves the camera closer to the world origin.

\(C_x\)

\(C_y\)

\(C_z\)

x-Rotation

y-Rotation

z-Rotation

Adjust extrinsic parameters above.

This is a "camera-centric" parameterization, which describes how the *camera* changes relative to the *world*. These parameters correspond to elements of the *inverse* extrinsic camera matrix.

As you adjust these parameters, note how the camera moves in the world (left pane) and contrast with the "world-centric" parameterization:

- Rotation occurs about the camera's position (the blue box).
- The direction of camera motion is independent of the current rotation.
- A positive rotation rotates the camera counter-clockwise (or equivalently, rotates the world clockwise).
- Increasing \(C_y\) always moves the camera toward the sky, regardless of rotation.

Also note how the image is affected (right pane):

- Rotating around y moves both spheres horizontally.
- With different rotations, changing \(C_x\) moves the spheres in different directions.

\(C_x\)

\(C_y\)

\(C_z\)

\(p_x\)

\(p_y\)

\(p_z\)

Adjust extrinsic parameters above.

This is a "look-at" parameterization, which describes the camera's orientation in terms of what it is looking at. Adjust \(p_x\), \(p_y\), and \(p_z\) to change where the camera is looking (orange dot). The up vector is fixed at (0,1,0)'. Notice that moving the camera center, *C*, causes the camera to rotate.

Focal Length

Axis Skew

\(x_0\)

\(y_0\)

Adjust intrinsic parameters above. As you adjust these parameters, observe how the viewing volume changes in the left pane:

- Changing the focal length moves the yellow focal plane, which chainges the field-of-view angle of the viewing volume.
- Changing the principal point affects where the green center-line intersects the focal plane.
- Setting skew to non-zero causes the focal plane to be non-rectangular

Intrinsic parameters result in 2D transformations only; the depth of objects are ignored. To see this, observe how the image in the right pane is affected by changing intrinsic parameters:

- Changing the focal length scales the near sphere and the far sphere equally.
- Changing the principal point has no affect on parallax.
- No combination of intrinsic parameters will reveal occluded parts of an object.

Content by Kyle Simek. Original design by
Mark Reid

(Some rights reserved) Powered by Jekyll

(Some rights reserved) Powered by Jekyll