Camera Work
In this section, we'll explore how to implement practical camera movements.
- Types of Camera Work
- View Transformation
- Moving the View Coordinate System
- Walking the View Coordinate System
- Rotating the View Coordinate System
- Spinning the View Coordinate System
- Setting the Position of the View Coordinate System
- Setting the Orientation of the View Coordinate System
- Example Program
Sponsored Link
Types of Camera Work
VCSSL Graphics3D supports two main styles of camera control:
"Globe-Style" Camera Work (*)
The simplest form of camera work involves rotating the world coordinate system placed on the view coordinate system in response to mouse input -- much like spinning a globe. We'll refer to this as *globe-style* camera work (*) here.
This approach is suitable when you want to view relatively small 3D objects from various angles.
Since this technique is extremely easy to implement (you just rotate the world coordinate system based on mouse input), we won't go into much detail here. In fact, the default camera behavior in the Graphics3DFramework already uses this globe-style camera work, so you don't need to implement it yourself.
Camera-Movement-Style Camera Work
Another commonly used approach, alongside the globe style, is to move the camera itself within the world coordinate system.
For example, in many 3D action games, the viewpoint is positioned slightly behind the protagonist, and the camera follows as the character moves. This camera-movement-style camera work is suitable for exploring large 3D environments while moving around.
This section focuses primarily on this camera-movement-style method.
View Transformation
The transformation from world coordinates to view coordinates is called the view transformation. Controlling the camera essentially means controlling this view transformation.
Order of Coordinate Transformations
In general, coordinate transformations for 3D objects follow this sequence:
→ (Local Transformation) → Local Coordinates
→ (World Transformation) → World Coordinates
→ (View Transformation) → View Coordinates
View Transformation in Globe-Style Camera Work
In globe-style camera work, the hierarchy of coordinate systems aligns directly with the order of coordinate transformations.
That is, a local coordinate system is mounted onto the world coordinate system, and the world coordinate system is (conceptually) mounted onto the view coordinate system.
As a result, the view transformation behaves the same as a regular transformation -- there's no difference. Camera control is handled just like any other coordinate system: you can move or rotate the world coordinate system using the moveCoordinate(...) and rotCoordinate(...) functions.
View Transformation in Camera-Movement-Style Camera Work
In contrast, camera-movement-style work involves mounting the view coordinate system onto the world coordinate system and then manipulating the view coordinate system itself.
This reverses the relationship between the coordinate hierarchy and the transformation order in the view transformation process. Because of this reversal, view transformations in this style require a slightly different approach than regular local or world transformations.
Fortunately, VCSSL Graphics3D provides dedicated functions for controlling this type of view transformation. Instead of using moveCoordinate(...) or rotCoordinate(...), you can use moveView(...) and rotView(...) to manipulate the viewpoint with the exact same intuitive feel as working with other coordinate systems.
Moving the View Coordinate System
The functions introduced below for controlling the viewpoint take the renderer ID as their first argument, not the coordinate system ID. Be careful not to confuse the two.
To move the view coordinate system relative to the world coordinate axes, use the moveView(...) function.
- Function Format -
Arguments:
- rendererID: Specifies the ID of the renderer.
- dx, dy, dz: The distance to move the camera in the X, Y, and Z directions, respectively.
Walking the View Coordinate System
To move the view coordinate system relative to its own axes, use the walkView(...) function. This is essentially "walking" the view coordinate system in its own frame of reference.
- Function Format -
Arguments:
- rendererID: Specifies the ID of the renderer.
- dx, dy, dz: The distance to move the camera in the X, Y, and Z directions, respectively.
Rotating the View Coordinate System
Rotation Around Coordinate Axes
To rotate the view coordinate system around the world coordinate system's axes, use the rotViewX(...), rotViewY(...), rotViewZ(...), or rotView(...) functions.
- Function Format -
void rotViewY ( int rendererID, float angle )
void rotViewZ ( int rendererID, float angle )
Each of these rotates the camera around the X, Y, or Z axis, respectively.
Arguments:
- rendererID: Specifies the ID of the renderer.
- angle: The rotation angle in radians. The positive direction follows the right-hand rule based on the axis orientation.
Rotation Around an Arbitrary Axis
To rotate around an arbitrary axis direction, use the rotView(...) function:
- Function Format -
int rendererID, float angle,
float vx, float vy, float vz
)
Arguments:
- rendererID: Specifies the ID of the renderer.
- angle: The rotation angle in radians. The positive direction follows the right-hand rule based on the axis orientation.
- vx, vy, vz: The direction vector of the rotation axis, in world coordinates.
Rotation Around an Arbitrary Axis Passing Through a Specified Point
To specify both the direction and a reference point (endpoint) for the rotation axis, use the extended form of the rotView(...) function:
- Function Format -
int rendererID, float angle,
float vx, float vy, float vz,
float px, float py, float pz
)
Arguments:
- rendererID: Specifies the ID of the renderer.
- angle: The rotation angle in radians. The positive direction follows the right-hand rule based on the axis orientation.
- vx, vy, vz: The direction vector of the rotation axis, in world coordinates.
- px, py, pz: The position vector of a point on the rotation axis, in world coordinates.
Spinning the View Coordinate System
Rotation Around Its Own Axes
To rotate the view coordinate system around its own axes -- that is, to make it spin in place -- use the spinViewX(...), spinViewY(...), spinViewZ(...), or spinView(...) functions.
- Function Format -
void spinViewY ( int rendererID, float angle )
void spinViewZ ( int rendererID, float angle )
These functions rotate the view coordinate system around its own X, Y, or Z axis, respectively.
Arguments:
- rendererID: Specifies the ID of the renderer.
- angle: The rotation angle in radians. The positive direction follows the right-hand rule based on the axis orientation.
Rotation Around an Arbitrary Direction
To spin the view coordinate system around an arbitrary axis direction (relative to itself), use the spinView(...) function:
- Function Format -
int rendererID, float angle,
float vx, float vy, float vz
)
Arguments:
- rendererID: Specifies the ID of the renderer.
- angle: The rotation angle in radians. The positive direction follows the right-hand rule based on the axis orientation.
- vx, vy, vz: The direction vector of the rotation axis, relative to the view coordinate system.
Rotation Around an Arbitrary Axis Passing Through a Specific Point
To specify both the direction and a reference point for the rotation axis, use the extended version of the spinView(...) function:
- Function Format -
int rendererID, float angle,
float vx, float vy, float vz,
float px, float py, float pz
)
- rendererID: Specifies the ID of the renderer.
- angle: The rotation angle in radians. The positive direction follows the right-hand rule based on the axis orientation.
- vx, vy, vz: The direction vector of the rotation axis, relative to the view coordinate system.
- px, py, pz: The position vector of a point on the rotation axis, also relative to the view coordinate system.
Setting the Position of the View Coordinate System
To set the position (origin) of the view coordinate system, use the setViewLocation(...) function:
- Function Format -
Arguments:
- rendererID: Specifies the ID of the renderer.
- x, y, z: The X, Y, and Z coordinates of the origin of the view coordinate system, relative to the world coordinate system.
Setting the Orientation of the View Coordinate System
To set the orientation of the view coordinate system using Z-X-Z Euler angles, use the setViewAngle(...) function:
- Function Format -
int rendererID,
float alpha, float beta, float gamma
)
Arguments:
- rerndererID: Specifies the ID of the renderer.
- alpha, beta, gamma: The first, second, and third angles (α, β, γ) in the Z-X-Z Euler angle system.
Example Program
Let's try controlling the view coordinate system and simulate walking through a 3D scene, like in a game.
We'll implement a key input event handler so the camera can move using the arrow keys. Write the following code and try running it:
import graphics3d.Graphics3DFramework;
import Graphics3D;
// Function called at the start of the program
void onStart ( int rendererID ) {
// Set window size and background color (optional)
setWindowSize( 800, 600 );
setBackgroundColor( 0, 0, 0, 255 );
// Build a colorful 3D scene using box models
int box1 = newBoxModel( 1.0, 3.0, 1.0 );
mountModel( box1, rendererID );
setModelColor( box1, 255, 0, 0, 255 );
int box2 = newBoxModel( 1.0, 3.0, 1.0 );
mountModel( box2, rendererID );
setModelColor( box2, 0, 255, 0, 255 );
moveModel( box2, 5.0, 0.0, 5.0 );
int box3 = newBoxModel( 1.0, 3.0, 1.0 );
mountModel( box3, rendererID );
setModelColor( box3, 0, 0, 255, 255 );
moveModel( box3, -5.0, 0.0, 5.0 );
int box4 = newBoxModel( 1.0, 3.0, 1.0 );
mountModel( box4, rendererID );
setModelColor( box4, 255, 255, 0, 255 );
moveModel( box4, 5.0, 0.0, -5.0 );
int box5 = newBoxModel( 1.0, 3.0, 1.0 );
mountModel( box5, rendererID );
setModelColor( box5, 0, 255, 255, 255 );
moveModel( box5, -5.0, 0.0, -5.0 );
}
// Event handler called when a key is pressed
void onKeyDown( int id, int keyCode ){
// Get the renderer ID
int rendererID = getRenderer();
// Move forward/backward with UP/DOWN arrow keys
if( keyCode == KEY_UP ){
walkView( rendererID, 0.0, 0.0, -0.3 );
}
if( keyCode == KEY_DOWN ){
walkView ( rendererID, 0.0, 0.0, 0.3 );
}
// Turn left/right with LEFT/RIGHT arrow keys
if( keyCode == KEY_RIGHT ){
spinViewY ( rendererID, -0.05 );
}
if( keyCode == KEY_LEFT ){
spinViewY ( rendererID, 0.05 );
}
}
Sample.vcssl
When you run this program, colorful buildings will appear on a black background. You can walk through the buildings using the arrow keys on your keyboard.

- 3D Computer Graphics
- Setting Up the Foundation
- Mouse Control and Animation
- Using the Framework
- Creating and Placing Light Sources (and Adjusting Their Properties)
- Creating and Placing Models / Standard Models
- Creating and Placing Polygons, and Various Types of Polygons
- Moving 3D Objects
- Rotating 3D Objects
- Scaling 3D Objects
- Flipping 3D Objects
- Setting Colors for 3D Objects
- Configuring the Shape of 3D Objects
- Fill Settings for 3D Objects
- Material Settings for 3D Objects
- Understanding Coordinate Systems: Concepts, Creation, and Placement
- Moving Coordinate Systems
- Walking Coordinate Systems
- Controlling the Origin Position of a Coordinate System
- Rotating Coordinate Systems
- Spinning a Coordinate System
- Euler Angle-Based Attitude Control of Coordinate Systems
- Camera Work
- Creating, Placing, and Performing Basic Operations on Vectors
- Coordinate Transformations
- Screen Projection
- Collision Detection