Assignment 5

Due 10/11/2019

Transformations

Translate

Rotate

Scale

Matrix

r   r   r   t_x

r   r   r   t_y

r   r   r   t_z

 0   0   0     1  

x, y, z

x, y, z

new

var m = new Float32Array( [
  r, r, r, 0, 
  r, r, r, 0, 
  r, r, r, 0, 
  t_x, t_y, t_z, 1
]);

column-major ordering!

:

Math

2

3

 

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

2, 2, 2

?

with T = Pi/2

 = 90°

X

Y

Z

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

2, 2, 2

with T = Pi/2

 = 90°

-2, 2, 2

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

2, 2, 2

with T = Pi/2

0

0

1

2 Pi

Pi

Pi/2

1.5 Pi

90°

1

1

-2

2

2

-1

Scene

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

Scene Graph is a Tree-like Hierarchy!

*

*

*

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

    <style>
      html, body { 
        background-color: #000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>

    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
    <script type="text/javascript" src="https://get.goXTK.com/xtk_xdat.gui.js"></script>


    <script type="text/javascript">

      var r,c;

      window.onload = function() {

        r = new X.renderer3D();
        r.init();


        c = new X.cube();
        c.center = [110,0,0]
        r.add(c);

        r.render();


        // build gui

        var transformer = {

          'rotateX': function() {
            c.transform.rotateX( 20 );
          },
          'rotateY': function() {
            c.transform.rotateY( 20 );
          }

        };


        var gui = new dat.GUI();
        var cube1 = gui.addFolder('cube');
        cube1.add( c, 'visible' );
        cube1.add( c, 'opacity', 0, 1 );
        cube1.addColor( c, 'color' );
        cube1.add(c, 'magicmode');
        cube1.add(transformer, 'rotateX');
        cube1.add(transformer, 'rotateY');
        cube1.open();

      };

    </script>


  </head>

  <body>

  </body>

</html>

Frame of Reference

X

Y

Z

World Frame

Frame of Reference

X

Y

Z

Object Frame

Frame of Reference

X

Y

Z

Object Frame

Frame of Reference

X

Y

Z

Eye Frame

Camera

(Eye)

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

rotation around Z

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Matrix

Quaternion

var m = new Float32Array( [
  Math.cos(T), -Math.sin(T), 0, 0, 
  Math.sin(T), Math.cos(T), 0, 0, 
  0, 0, 1, 0, 
  0, 0, 0, 1
]);
var q = new Float32Array( [
  Math.cos(T/2), 
  Math.sin(T/2)*0,
  Math.sin(T/2)*0,
  Math.sin(T/2)*1
]);
var q = new Float32Array( [
  Math.sin(T/2)*0,
  Math.sin(T/2)*0,
  Math.sin(T/2)*1,
  Math.cos(T/2)
]);

w

x

y

z

    1          0        0          0

     0   cos(T)   -sin(T)   0

    0    sin(T)   cos(T)     0

    0          0       0           1

rotation around X

cos(T/2)

sin(T/2) * 1

sin(T/2) * 0

sin(T/2) * 0

Matrix

Quaternion

cos(T)         0       sin(T)    0  

    0           1              0     0

-sin(T)    0       cos(T)     0

    0           0              0     1

rotation around Y

cos(T/2)

sin(T/2) * 0

sin(T/2) * 1

sin(T/2) * 0

Matrix

Quaternion

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

Identity

1

0

0

0

Matrix

Quaternion

w

x

y

z

-1

0

0

0

Quaternion

var q = new THREE.Quaternion( x, y, z, w );

Lecture 15

By Daniel Haehn

Lecture 15

Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!

  • 79

More from Daniel Haehn