Winter 2021: CSI4130 Assignment 1
Due: Sunday, February 7th, 2021, 11:00pm in Virtual Campus University of Ottawa – Universit ́e d’Ottawa
Jochen Lang
1 Animation of 2D Shapes [9 in total]
In this assignment, you will build a 2D shape from a collection of triangles and implement a pre-determined animation in Javascript with WebGL. You will also create a similar animation in Three.js. The goal is to familarize yourself with the elementary modelling and rendering process for computer graphics. This is an individual assignment.
2 WebGL
For this part of the assignment, you are working directly with WebGL. You are not allowed to use anylibraryexceptgl-matrix.jsandthehelperfilesfromthelabwebgl-utils.js webgl-debug.js cuon-utils.js in your solution. You are advised to base your solution on the lab ”Coloured Tetrahedron” of January 21, 2021.
2.1 Shape [3]
The current example uses a tetrahedron that is spinning. Change the shape to 2D and use your initials (You only need to use two letters independent of middle-names or multiple last names). Note that you can simply duplicate the setup for each letter and use two draw calls to accomplish drawing one letter after the other. This is made particularly convenient with VAOs in WebGL2. The structure of your program would then look as follow.
Setup:
Get first VAO
Define vertices and triangles for your first letter Set the vertex buffer objects for your first letter Disable first VAO
Get second VAO
Define vertices and triangles for your second letter Set the vertex buffer object for your second letter Disable second VAO
1
2.2
Drawing:
Enable first VAO Draw first letter Disable first VAO Enable second VAO Draw second letter Disable second VAO
Animation [1]
The spinning animation of the Tetrahedron is to be changed such that the initials spin clockwise around the center of your viewport. Please keep your initials upright at all times.
3 Three
Your animation will have to follow a very similar approach to the Solar animation lab. For the purpose of this assignment, you are asked to use basic geometric shapes directly available in Three.js such as boxes, cylinders and spheres.
You are not allowed to use any other library except Three.js and dat.gui.js. 3.1 Desk Lamp [3]
Build a simple stick figure resembling a desktop lamp. If you like to be inspired watch the first Pixar short called Luxo Jr from 1986. Your stick figure must be build as a scenegraph in Three.js with at least separate primitives, i.e., cylinders, spheres or ellipses. An example of desk lamp is shown in Figure 1. The minimum number of primitives are one for the support, lower arm, upper arm, two for the lamp shade and one for the bulb plus 3 spheres for the three respective joints. Your program must show the desk lamp in a pose similar to Figure 1 and from a corresponding viewpoint. The desk lamp shown in the picture is just a simple example, feel free to make your lamp fancier. Provide controls with corresponding sliders in dat.gui to control the arm joints and the lamp head by the user. The lamp head has to be able to move up/down and right/left.Place the lamp in the middle of the window.
3.2 Camera Control [2]
Use dat.gui sliders for two angles to control the pose of the camera and for the position in 3D where the camera is directed to (the at position). The angles must be rotating the camera in a sphere around the at point. Select the radius of the sphere large enough such that it is outside your scene. In other words, your perspective camera will always need to look at the at point and your rotational controls will need to move your camera on a sphere around the at point. In order to make the control more intuitive, use dat.gui to turn on the display of a small sphere shown at the at point.
2
Figure 1: Sketch of a Desk Lamp.
3.3 Bonus: Animation [3]
Use a similar strategy than in the Solar example to make the arms and lamp head move for the lamp to jump. For inspiration, you may have a look at Luxo Jr. by Pixar. Use dat.gui to give the user the option to switch the animation on and off. This is a bonus question and hence marks will be given only for successful (i.e., convincing) attempts.
4 Submission
Your assignment submission must consist of your Javascript and html files. As you are working with the current version of Three.js and dat.gui.js, you will not submit these.
Filename initials.js initials.html desklamp.js desklamp.html
You must submit the files listed above and no library files via Virtual Campus.
3
Reviews
There are no reviews yet.