Coursework V: Planetary Megademo
COMP0027 Team
Tobias Ritschel, Philipp Henzler, Mohammed Sayed, Michael Fischer, Rafael Kuffner dos Anjos
November 27, 2020
We have shown you the framework for solving the coursework at cg.cs.ucl.ac.uk/. You should start by extending the respective example there. The programming language is WebGL (https://www.khronos.org/ registry/webgl/specs/latest/1.0/) and the OpenGL ES Shading Language (GLSL) www.khronos.org/ files/opengles_shading_language.pdf. Do not write any answers in any other programming language, in paper, or pseudo code. Consider downloading the coursework in case your connection becomes unavailable.
Remember to save your solution often enough to a .uclcg file. In the end, hand in that file via Moodle. The total points for this exercise is 100.
Introduction In this final coursework, we will put together a small virtual world. You will use OpenGL, combining what you learned about geometry and scene graphs as well as a bit of shading.
We will use WebGL in Javascript, together with GLSL. To debug Javascript, make use of your browsers debugging abilities, such as the Developer Concolse in Chrome. The first four tabs are Javascript, which we discussed in the lecture. We have included the glmatrix framework, see http://glmatrix.net/docs/, to have basic vector and matrix functionality which is not part of WebGL, as you recall. The two last tabs are GLSL, which has been used in all previous courseworks.
1 Geometry (25 points)
The constructor of BoxMesh creates three arrays that describe the indexed face set of a box: polygons is an array of arrays of integers which are indices into the positions array. The array positions contains three positions, i.e. one for each face-vertex. The array normals are the per-face normals. We have as many of them as we have faces. Make sure you understand how many polygons, positions and normals a box needs and what the entries mean.
We now have a polygonal mesh, while WebGL expects triangles. Hence the polygons need to be triangulated: the indexed face set is to be turned into a set of flat array of triplets where each combination of position and normal forms a triangle and all triangles together form the polygonal object. We ask you to implement build() in the base class Mesh to do so (8 points). The default implementation does not create solid triangles, but a wireframe mesh. The result would look as below.
1
Next, complete the implementation of the class HouseMesh (5 points). A house is like a cube, just that it has a saddle-shaped wedge on its top. Make sure you use the minimal number of vertices (1 points) and polygons (1 points). An example result is seen below.
Finally, complete the implementation of the class SphereMesh (10 points). You are free to use whatever kind of sphere tessellation (there are several), as long as it is round and nice. As we work with face normals, it is okay to look faceted as seen in the next figure.
2
2 Scene graph (25 points)
So far, we have been drawing an isolated Mesh. We now take it a step further and draw an entire world by means of a scene graph. To start this part, comment out drawSingleMesh from draw and comment in drawSceneGraph. We will first make sure scene graph drawing works, and later crate a world using it.
First, we implement traverse() for Node (2 points) and traverse() for MeshNode (3 points). In particular, make sure to compute and set the model matrix and the normal matrix uniforms used in the shader whenever you draw. Do not re-implement things the base class already did: in JavaScript, this is achieved using the Node.prototype.f.call functionality to call function f (2 points). If both traversals have been implemented correctly, you should now see a world with a box, a house and a sphere next to each other as shown in the next figure.
3
Next, we ask you to make a more interesting world by creating a new scene graph. The simple three-object scene graph was loading by calling loadTestSceneGraph. Change this to a call to loadWorldSceneGraph and implement that function to do the following:
Instance a green planet (3 points), with two grey moons of discernibly different and smaller size in its orbit (4 points). Further, there shall be eight houses on Earth and two houses on each moon, all placed randomly (2 points) You must always use proper parenting (3 points), instancing (3 points) and relative matrices (3
points). An example result is shown below.
As this should be a random process, every time you load, the world should look different. Below is an image 4
of another instance. Note the houses being placed differently, this is not just another camera angle.
3 Animation (15 points)
For starters, animate the Earth to spin around its own upright axis (2 points) in applyAnimation.
So far, the camera just spins around the scene in a circle. We will work with path animation to animate the camera position in a more structured way while the camera target point remains the origin and the up vector remains (0, 1, 0)T.
Consider the curve class Animation that holds the control points as Keyframe. Using these, create an Animation to 1) look at the entire planet system from far away. 2) Move close to the Earth. 3) Look at the Earth from a few sides and 4) return back to total (3 points).
Implement the function get to evaluate an Animation at a specific time using linear interpolation (10 points).
The instructions for camera placement are vague, we will accept anything that you can argue for being plausible, pleasing, using at least three keyframes and that shows how get was implemented correctly. The next three images show example frames from that animation:
5
6
4 Special FX (35 points) Now we will make this all a bit nicer.
Add linear fog to blend into the background color (5 points). Together with animation, the planet should slowly appear when the animation is played. The next two images show stills from the animation, where the planet emerges from the fog.
7
Add a planetary ring geometry to the earth (5 points).
These houses and trees tend to intersect when placed randomly. In a very different context, we have discussed means to place things such that they are not in a regular pattern but also keep some distance which also means they will not intersect. Can you use this technique to place houses so they do not intersect (10 points)?
Add trees to stand on planets. The tree should have a stem, with a random number of 1 to 3 branches and on the end of the branch there is a box to represent the foliage. You can build them out of boxes using a recursive scene graph, inspired by L-Systems (https://en.wikipedia.org/wiki/L-system) (10 points). Again, you shall use the correct parenting matrices and instances (3 points) as well as recursive calls (2
8
points).
9