CSE 160 - Program 2

Matthew Chen
mchen146
25 April 2021

Links:

Driver
prog2.js
webgl.js
instance.js
mesh.js
cuon-matrix-cse160.js library is used from ../lib

Description:

This program draws meshes (cubes, cylinders, prisms) of a scene using WebGL. Scenes are constructed with Instance objects. Instances contain transform information, and MeshInstances also contain a mesh and its properties such as color. Meshes are part of a Mesh class which can save generated meshes to be used in multiple instances. The scene tree is a representation of the hierarchy of instances, each instance having child instances and a parent (if not the root). Instances can also be manipulated (transform, color, mesh) under the instance data section, when selected.

Usage:

Scene Viewing:

Click and drag the canvas to rotate the view. This rotates the root instance.

Scene Tree and instance selection:

Select an instance by clicking it in the scene tree. Show or hide the instances' children with the arrow button to the right of the selector button.

Instance Data and instance manipulation:

When an instance is selected from the scene tree, instance data will appear. The selected instance's name, translation, rotation, scale, and visibility can be changed. A MeshInstance will also have changeable color and mesh properties.

Options and instance management:

When an instance is selected, options will appear.
- To insert a new instance as a child of the selected instance, choose an Instance or MeshInstance then press Insert New. To change its properties (and mesh / color if MeshInstance), select it and change it in the data table.
- To change the parent of the selected instance, choose a new parent instance by name in the dropdown and press Reparent To.
- To delete the selected instance, press Delete Instance. This will delete all children of the instance, and their children.
- To duplicate the selected instance, press Duplicate. This will duplicate all children as well.

Output Preview: