Models, Moving, Rotating, Viewports and some Clean Up

• Our Demo for these notes.
• MV.js.
• Models:
  • models
  • Another set of models, along with documentation. (There may be overlap)
• The models are not uniformly
  • Scaled
  • Aligned
  • Centered
• This program will handle the first two.
• While doing that it will also
  • Give a nice viewport demo
  • Give an intro to the math library
  • Give an overview of uniform variables (matrix type)
• Look at the shaders
• Note there is no projection in this package.
  • Nor is there a camera.
  • We will add both of these soon.
• The normal "display" in *GL is a cube from (-1,-1,-1) to (1,1,1)
• I have two matrices
  • firstT is the first transformation applied to the object.
    • This is the matrix I need to "move" and scale the object so that it fits in the 2x unit cube centered at the origin.
  • midT is for word transformations.
    • This is to move things about in the "world"
  • I hope after Mr Smiley, you will understand these better.
• I really should add another matrix to my Widget
  • This would align the object properly.
  • I can't do that automatically.
  • The dragon and the bunny are fine.
    • But perhaps $\pi/2$ about the y axis would help.
  • The teapot and godzilla need to rotate by -90 about the x axis.
  • Other models need other rotations.
  • This could be added to the .js file (NAME_INITIAL_ROTATE)
    • But that must be done by hand for all of the models.
• Note the inclusion of the MV.js file and the model files.
• The canvas remains mostly the same.
  • I removed the keypress event from the constructor.
• The Program has some changes.
  • Each object has a viewport in which it is displayed.
  • So as objects are created, they are given a viewport.
• The first big change is in SetUPMidTrans
  • mat4() creates an identity matrix.
  • I miss C++, but since we can't overload operators, we use the mult function.
  • rotate is a function that builds a rotation matrix.
    • It takes an angle in degrees
    • And a axis
    • And produces a rotation matrix for rotation about that axis.
    • We discuss normalization later, but probably not the rotation matrix.
  • In this case, I rotate about z, then y then x.
    • Just an arbitrary choice, but it will do.
  • gl.uniformMatrix[234]fv()
    • Takes a uniform location in the shader
    • A bool indicating if transposition of the matrix is required.
      • The documentation says this must be false.
    • And a matrix
    • See also gl.unformMatrix[234]x[234]vf()
      • 2x2, 3x3, 4x4 must use the above format.
• Changes to the object.
  • Viweport function has been added
    • reference, just for reminder.
    • Initialized to the entire canvas.
    • But can be changed with Viewport
    • And is used before the item is drawn.
  • FindMove
    • Probably a really dumb name.
    • ...object clones an object in javascript
      • But only a shallow clone
    • But it centers the object and scales it to a 2x2 cube ceneterd on the origin.
    • This is worth going trough.