Moving Camera in 3D Space - Demo 16¶

Purpose¶

Make a moving camera in 3D space. Use Ortho to transform a rectangular prism, defined relative to camera space, into NDC.

Problem purposefully put in¶

When running this demo and moving the viewer, parts of the geometry will disappear. This is because it gets “clipped out”, as the geometry will be outside of NDC, (-1 to 1 on all three axis). We could fix this by making a bigger ortho rectangular prism, but that won’t solve the fundamental problem.

This doesn’t look like a 3D application should, where objects further away from the viewer would appear smaller. This will be fixed in demo17.

How to Execute¶

On Linux or on MacOS, in a shell, type “python src/demo16/demo.py”. On Windows, in a command prompt, type “python src\demo16\demo.py”.

Move the Paddles using the Keyboard¶

Description¶

Before starting this demo, run mvpVisualization/modelvieworthoprojection/modelvieworthoprojection.py, as it will show graphically all of the steps in this demo. In the GUI, take a look at the camera options buttons, and once the camera is placed and oriented in world space, use the buttons to change the camera’s position and orientation. This will demonstrate what we have to do for moving the camera in a 3D scene.

There are new keyboard inputs to control the moving camera. As you would expect to see in a first person game, up moves the camera forward (-z), down moves the camera backwards (z), left rotates the camera as would happen if you rotated your body to the left, and likewise for right. Page UP and Page DOWN rotate the camera to look up or to look down.

To enable this, the camera is modeled with a data structure, having a position in x,y,z relative to world space, and two rotations (one around the camera’s x axis, and one around the camera’s y axis).

To position the camera you would

1. translate to the camera’s position, using the actual position values of camera position in world space coordinates.

2. rotate around the local y axis

3. rotate around the local x axis

To visualize this, run “python mvpVisualization/modelvieworthoprojection/modelvieworthoprojection.py”

The ordering of 1) before 2) and 3) should be clear, as we are imagining a coordinate system that moves, just like we do for the modelspace to world space transformations. The ordering of 2) before 3) is very important, as two rotations around different axes are not commutative, meaning that you can’t change the order and still expect the same results https://en.wikipedia.org/wiki/Commutative_property.

Try this. Rotate your head to the right a little more that 45 degrees. Now rotate your head back a little more than 45 degrees.

Now, reset your head (glPopMatrix, which we have not yet covered). Try rotating your head back 45 degrees. Once it’s there, rotate your head (not your neck), 45 degrees. It’s different, and quite uncomfortable!

We rotate the camera by the y axis first, then by the relative x axis, for the same reason.

        # world_space: Vertex = camera_space.rotate_x(camera.rot_x) \
        #                                   .rotate_y(camera.rot_y) \
        #                                   .translate(tx=camera.position_worldspace.x,
        #                                              ty=camera.position_worldspace.y,
        #                                              tz=camera.position_worldspace.z)

(Remember, read bottom up, just like the previous demos for modelspace to worldspace data)

Back to the point, we are envisioning the camera relative to the world space by making a moving coordinate system (composed of an origin, 1 unit in the “x” axis, 1 unit in the “y” axis, and 1 unit in the “z” axis), where each subsequent transformation is relative to the previous coordinate system. (This system is beneficial btw because it allows us to think of only one coordinate system at a time, and allows us to forget how we got there, (similar to a Markov process, https://en.wikipedia.org/wiki/Markov_chain))

But this system of thinking works only when we are placing the camera into it’s position/orientation relative to world space, which is not what we need to actually do. We don’t need to place the camera. We need to move every already-plotted object in world space towards the origin and orientation of NDC. Looking at the following graph,

We want to take the modelspace geometry from, say Paddle1 space, to world space, and then to camera space (which is going in the opposite direction of the arrow, therefore requires an inverse operation, because to plot data we go from modelspace to screen space on the graph.

Given that the inverse of a sequence of transformations is the sequence backwards, with each transformations inverted, we must do that to get from world space to camera space.

The inverted form is

        camera_space: Vertex = world_space.translate(tx=-camera.position_worldspace.x,
                                                     ty=-camera.position_worldspace.y,
                                                     tz=-camera.position_worldspace.z) \
                                          .rotate_y(-camera.rot_y) \
                                          .rotate_x(-camera.rot_x)

Other things added Added rotations around the x axis, y axis, and z axis. https://en.wikipedia.org/wiki/Rotation_matrix

Code¶

The camera now has two angles as instance variables.

@dataclass
class Camera:
    position_worldspace: Vertex = field(
        default_factory=lambda: Vertex(x=0.0, y=0.0, z=50.0)
    )
    rot_y: float = 0.0
    rot_x: float = 0.0

Since we want the user to be able to control the camera, we need to read the input.

def handle_inputs() -> None:

...

Left and right rotate the viewer’s horizontal angle, page up and page down the vertical angle.

    if glfw.get_key(window, glfw.KEY_RIGHT) == glfw.PRESS:
        camera.rot_y -= 0.03
    if glfw.get_key(window, glfw.KEY_LEFT) == glfw.PRESS:
        camera.rot_y += 0.03
    if glfw.get_key(window, glfw.KEY_PAGE_UP) == glfw.PRESS:
        camera.rot_x += 0.03
    if glfw.get_key(window, glfw.KEY_PAGE_DOWN) == glfw.PRESS:
        camera.rot_x -= 0.03

The up arrow and down arrow make the user move forwards and backwards. Unlike the camera space to world space transformation, here for movement code, we don’t do the rotate around the x axis. This is because users expect to simulate walking on the ground, not flying through the sky. I.e, we want forward/backwards movement to happen relative to the XZ plane at the camera’s position, not forward/backwards movement relative to camera space.

    if glfw.get_key(window, glfw.KEY_UP) == glfw.PRESS:
        forwards_camera_space = Vertex(x=0.0, y=0.0, z=-1.0)
        forward_world_space = forwards_camera_space.rotate_y(camera.rot_y) \
                                                   .translate(tx=camera.position_worldspace.x,
                                                              ty=camera.position_worldspace.y,
                                                              tz=camera.position_worldspace.z)
        camera.position_worldspace.x = forward_world_space.x
        camera.position_worldspace.y = forward_world_space.y
        camera.position_worldspace.z = forward_world_space.z
    if glfw.get_key(window, glfw.KEY_DOWN) == glfw.PRESS:
        forwards_camera_space = Vertex(x=0.0, y=0.0, z=1.0)
        forward_world_space = forwards_camera_space.rotate_y(camera.rot_y) \
                                                   .translate(tx=camera.position_worldspace.x,
                                                              ty=camera.position_worldspace.y,
                                                              tz=camera.position_worldspace.z)
        camera.position_worldspace.x = forward_world_space.x
        camera.position_worldspace.y = forward_world_space.y
        camera.position_worldspace.z = forward_world_space.z

Ortho is the function call that shrinks the viewable region relative to camera space down to NDC, by moving the center of the rectangular prism to the origin, and scaling by the inverse of the width, height, and depth of the viewable region.

    def ortho(self: Vertex,
              left: float,
              right: float,
              bottom: float,
              top: float,
              near: float,
              far: float,
              ) -> Vertex:
        midpoint_x, midpoint_y, midpoint_z = (
            (left + right) / 2.0,
            (bottom + top) / 2.0,
            (near + far) / 2.0,
        )
        length_x: float
        length_y: float
        length_z: float
        length_x, length_y, length_z = right - left, top - bottom, far - near
        return self.translate(tx=-midpoint_x,
                              ty=-midpoint_y,
                              tz=-midpoint_z) \
                   .scale(2.0 / length_x,
                          2.0 / length_y,
                          2.0 / (-length_z))

We will make a wrapper function camera_space_to_ndc_space_fn which calls ortho, setting the size of the rectangular prism.

    def camera_space_to_ndc_space_fn(self: Vertex) -> Vertex:
        return self.ortho(left=-100.0,
                          right=100.0,
                          bottom=-100.0,
                          top=100.0,
                          near=-1.0,
                          far=-100.0)

while not glfw.window_should_close(window):

...

    glColor3f(paddle1.r, paddle1.g, paddle1.b)
    glBegin(GL_QUADS)
    for model_space in paddle1.vertices:
        world_space: Vertex = model_space.rotate_z(paddle1.rotation) \
                                         .translate(tx=paddle1.position.x,
                                                    ty=paddle1.position.y,
                                                    tz=0.0)
        # doc-region-begin d194601529be6fa90270809dd56628cb47360ff2
        # world_space: Vertex = camera_space.rotate_x(camera.rot_x) \
        #                                   .rotate_y(camera.rot_y) \
        #                                   .translate(tx=camera.position_worldspace.x,
        #                                              ty=camera.position_worldspace.y,
        #                                              tz=camera.position_worldspace.z)
        # doc-region-end d194601529be6fa90270809dd56628cb47360ff2
        # doc-region-begin 21b5929d16e434165544480ad25b7ff015e239f7
        camera_space: Vertex = world_space.translate(tx=-camera.position_worldspace.x,
                                                     ty=-camera.position_worldspace.y,
                                                     tz=-camera.position_worldspace.z) \
                                          .rotate_y(-camera.rot_y) \
                                          .rotate_x(-camera.rot_x)
        # doc-region-end 21b5929d16e434165544480ad25b7ff015e239f7
        ndc_space: Vertex = camera_space.camera_space_to_ndc_space_fn()
        glVertex3f(ndc_space.x, ndc_space.y, ndc_space.z)
    glEnd()

    glColor3f(0.0, 0.0, 1.0)
    glBegin(GL_QUADS)
    for model_space in square:
        paddle_1_space: Vertex = model_space.rotate_z(square_rotation) \
                                            .translate(tx=20.0,
                                                       ty=0.0,
                                                       tz=0.0) \
                                            .rotate_z(rotation_around_paddle1) \
                                            .translate(tx=0.0, ty=0.0, tz=-10.0)

        world_space: Vertex = model_space.rotate_z(paddle1.rotation) \
                                         .translate(tx=paddle1.position.x,
                                                    ty=paddle1.position.y,
                                                    tz=0.0)
        # world_space: Vertex = camera_space.rotate_x(camera.rot_x) \
        #                                   .rotate_y(camera.rot_y) \
        #                                   .translate(tx=camera.position_worldspace.x,
        #                                              ty=camera.position_worldspace.y,
        #                                              tz=camera.position_worldspace.z)

        camera_space: Vertex = world_space.translate(tx=-camera.position_worldspace.x,
                                                     ty=-camera.position_worldspace.y,
                                                     tz=-camera.position_worldspace.z,
                                                     ) \
                                          .rotate_y(-camera.rot_y) \
                                          .rotate_x(-camera.rot_x)
        ndc_space: Vertex = camera_space.camera_space_to_ndc_space_fn()
        glVertex3f(ndc_space.x, ndc_space.y, ndc_space.z)
    glEnd()

    glColor3f(paddle2.r, paddle2.g, paddle2.b)
    glBegin(GL_QUADS)
    for model_space in paddle2.vertices:
        world_space: Vertex = model_space.rotate_z(paddle2.rotation) \
                                         .translate(tx=paddle2.position.x,
                                                    ty=paddle2.position.y,
                                                    tz=0.0)
        # world_space: Vertex = camera_space.rotate_x(camera.rot_x) \
        #                                   .rotate_y(camera.rot_y) \
        #                                   .translate(tx=camera.position_worldspace.x,
        #                                              ty=camera.position_worldspace.y,
        #                                              tz=camera.position_worldspace.z)

        camera_space: Vertex = world_space.translate(tx=-camera.position_worldspace.x,
                                                     ty=-camera.position_worldspace.y,
                                                     tz=-camera.position_worldspace.z) \
                                          .rotate_y(-camera.rot_y) \
                                          .rotate_x(-camera.rot_x)

        ndc_space: Vertex = camera_space.camera_space_to_ndc_space_fn()
        glVertex3f(ndc_space.x, ndc_space.y, ndc_space.z)
    glEnd()