CSE5542-RTRendering Lab 5

Content

• Quick preview (deployed version): URL

• Codebase: https://github.com/RyanQ96/CSE5542-RTRendering

• Additional Object invited from here!

• Framework References:

  • VueJS: the framework for the interface.
  • VuetifyJS: UI component library.

• How to run from Github:

  1. git clone https://github.com/RyanQ96/CSE5542-RTRendering.git
  2. npm install (make sure npm is installed on your local machine)
  3. cd 5542-codebase
  4. git checkout lab5
  5. npm run dev

• Run from the ZIP (might have environment configuration issue)

  1. npm run dev

• Repository Walkthrough

  • 5542-codebase/src/
    • shaders: shader code for environemnt cube mapping and general objects
    • components: vue component for the interface, including appbar and the main view (canvas) of the interface
    • utils: utility methods generally used in initialize webgl program
      • shaderUtils.ts: utility functions to initialize shaders
      • matrix.ts: matrix utility functions,including creating projection, translation, rotation matrix, their inverse and also matrix and vector multiplication operations.
      • hierarchymodel.ts: hierarchical model, including HObjclass, its children class Global and each one of the shapes Sphere, Cylinder, Cube el al.
      • obj.ts: class extends HObj, hierarchical model, including OBJGeneralclass, its a generic class for .obj object and support rendering vertex shader, fragment shader and also texture.
      • objUtils.ts Utility functions for parsing OBJ files. Borrowed from https://webglfundamentals.org/webgl/webgl-load-obj-w-mtl-w-normal-maps.html.
    • core: core code for eventhander and webgl rendering
      • setup-lab4.ts: setup event listener
      • drawwebgl-new.ts: main rendering code, function initShape is the function that create all the shapes (table, cube, sphere, album and the invited new obj) and vertical node.