Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: THEend8_
CG1 WS Exercise 1: Robot
Computer Graphics
Scene graph / Affine transformation (7 Points)
In this exercise, you learn how to work with a scene graph on the example of a simple robot model. The
graph is built and traversed using the Three.js framework and you have to apply affine transformations on
the objects in the scene. We provide a Typescript skeleton project and a screencast where the demanded
functionalities are demonstrated which will be available on ISIS.
In Three.js the THREE.Scene represents the scene graph and consists of multiple THREE.Object3D
objects. Their local coordinate system is implicitly defined by the homogeneous transformation (a 4 ×
4 matrix) from it to the objects parent coordinate system stored in the matrix property. The matrix
relevant for the GPU is the transformation from local coordinates to world coordinates. This matrix is
stored in the matrixWorld property. Restriction: In this exercise we only allow direct manipulation of
these transformation matrices. Rotation, translation and scaling of objects must be performed via matrix
multiplication with an appropriate matrix on to matrix. And after that you have to update the matrixWorld
of that object and all its children. As Three.js conveniently does that all implicitly for us, we need to set
THREE.Object3D.DefaultMatrixAutoUpdate to false in the beginning of the application to ensure that
restriction. Do not remove that line otherwise you will lose points. Additionally all transformation matrices
need to be built from scratch, you are not allowed to use the convenience functions of the THREE.MatrixX
class (X ∈ {3, 4}) that enables you to create rotation, translation or scaling matrices without setting their
elements by hand (e.g. makeRotationX, scale, setPosition...). You can however use functions for matrix
multiplication and the matrix inverse.
Tasks:
1. Construct a scene graph that consists of multiple THREE.Mesh instances which represent a robot. It is
not necessary that your implementation match the robot showed in the presentation video, however,
the constructed scene graph must have at least a depth of two and there must exist a node that has
at least two siblings. Note: To define the position of each node you have to set the matrix property
by hand and then update the matrixWorld by traversing the scene graph up to the root. (2 point)
2. Select individual nodes visibly in the scene graph using the keyboard. Traverse the scene graph by
pressing
• w, which selects the parent node,
• s, which selects the first child node,
• a, which selects the previous sibling node and
• d, which selects the next sibling node. (1 point)
3. Display the local coordinate system of the selected node (or all nodes) at its origin using axes. The
axes should be displayed as red, green and blue lines for x, y and z, respectively (you can use
THREE.AxesHelper). The visibility of the axes should be switched by pressing c. (1 point)
4. Allow changes (e.g. rotations) of the matrix property in the current selected node and update all
matrixWorlds of the children depending on that matrix. (1 point)
5. Implement a functionality that allows you to rotate the selected node using the arrow keys. The origin
of each rotation should be at the joints of the objects. Depending on how you created your scene graph
up to now, this might require some refinements. You need to move the local coordinate systems of
each object to the desired rotation center. It may be necessary to change the position of the objects