Assignment 4

rpan001

genlikan

Assignment 4

A

Assignment 4

Assignment 5

Due 10/11/2019

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

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

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

-1

-2, 2, 2

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Quaternion

w

x

y

z

~0.7

~0.7

0

0

~0.7

0

0

~0.7

0

2

2

2

w

x

y

z

*

Quaternion

?

~0.7

0

0

~0.7

0

2

2

2

*

~0.7

- 0

- 0

- ~0.7

Inverse

page 64, Gortler: 3D Computer Graphics

~0.7

0

0

~0.7

0

2

2

2

w

x

y

z

*

Quaternion

~0.7

0

0

~0.7

0

2

2

2

*

~0.7

- 0

- 0

- ~0.7

Inverse

page 64, Gortler: 3D Computer Graphics

  0

- 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

-1

-2, 2, 2

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Quaternion

w

x

y

z

~0.7

~0.7

0

0

Rigid Body Transformation

Quaternion

Translation Vector

w

x

y

z

x

y

z

0

var q = new THREE.Quaternion( x, y, z, w );
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>

      var mesh = null;
      var all_meshes = [];


      window.onload = function() {

        scene = new THREE.Scene();

        fov = 75;
        ratio = window.innerWidth / window.innerHeight;
        zNear = 1;
        zFar = 10000;
        // console.log(ratio);
        camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
        camera.position.set( 0, 0, 100);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

        light = new THREE.DirectionalLight( 0xffffff, 5.0 );
        light.position.set( 10, 100, 10 );
        scene.add( light );


        //
        // The invisible plane
        //
        geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
        material = new THREE.MeshBasicMaterial( {
          visible: false
        });

        invisible_plane = new THREE.Mesh( geometry, material );

        scene.add( invisible_plane );
        //
        //
        //



        controls = new THREE.TrackballControls( camera );

        animate();


        //
        // ACTION!
        //
        totalObjects = 0;
        renderer.domElement.onmouseup = function(e) {

          if (!e.shiftKey) {


            e.preventDefault();
            return false;
          }

          console.log('yes! you clicked!');

          pixel_coords = new THREE.Vector2( e.clientX, e.clientY );

          console.log('Pixel coordinates', pixel_coords);

          vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
                                        -( pixel_coords.y / window.innerHeight ) * 2 + 1);

          console.log('Viewport coordinates', vp_coords);

          vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);

          raycaster = new THREE.Raycaster();
          raycaster.setFromCamera(vp_coords_near, camera);
          intersects = raycaster.intersectObject(invisible_plane);


          // choose random geometry
          random_geometry =  Math.floor((Math.random() * 6));
          switch(random_geometry) {
            case 0:
              geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
              break;

            case 1:
              geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
              break;

            case 2:
              geometry = new THREE.SphereBufferGeometry(20,20,10);
              break;

            case 3:
              geometry = new THREE.OctahedronBufferGeometry(20);
              break;

            case 4:
              geometry = new THREE.ConeBufferGeometry(20,10);
              break;

            case 5:
              geometry = new THREE.RingBufferGeometry( 1, 20, 32 );

          }
          random_geometry += 1


          // choose random color
          colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
          random_color = colors[Math.floor((Math.random() * colors.length))];



          material = new THREE.MeshStandardMaterial({ color: random_color });
          mesh = new THREE.Mesh( geometry, material );
        
          mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)

          scene.add(mesh);

          all_meshes.push(mesh);

          totalObjects += 1;
          console.log('Total objects', totalObjects);
        
        };

        


      };

      function animate() {

        requestAnimationFrame( animate );


          if (mesh != null) {

            for(m in all_meshes) {

              mesh = all_meshes[m];


              var startQuaternion = new THREE.Quaternion().set( 0, 0, 0, 1 ).normalize();
              var endQuaternion = new THREE.Quaternion().set( 100, 100, 100, 1 ).normalize();
              var t = 0;

              mesh.quaternion.slerp( endQuaternion, 0.01 );


            }



            // // Update a mesh's rotation in the loop
            // t = ( t + 0.1 ) % 1; // constant angular momentum
            // THREE.Quaternion.slerp( startQuaternion, endQuaternion, mesh.quaternion, t );


          }


        controls.update();
        renderer.render( scene, camera );

      };

    </script>
  </head>
  <body></body>
</html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>

      var mesh = null;
      var all_meshes = [];


      window.onload = function() {

        scene = new THREE.Scene();

        fov = 75;
        ratio = window.innerWidth / window.innerHeight;
        zNear = 1;
        zFar = 10000;
        // console.log(ratio);
        camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
        camera.position.set( 0, 0, 100);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

        light = new THREE.DirectionalLight( 0xffffff, 5.0 );
        light.position.set( 10, 100, 10 );
        scene.add( light );


        //
        // The invisible plane
        //
        geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
        material = new THREE.MeshBasicMaterial( {
          visible: false
        });

        invisible_plane = new THREE.Mesh( geometry, material );

        scene.add( invisible_plane );
        //
        //
        //



        controls = new THREE.TrackballControls( camera );

        animate();


        //
        // ACTION!
        //
        totalObjects = 0;
        renderer.domElement.onmousemove = function(e) {

          if (!e.shiftKey) {


            e.preventDefault();
            return false;
          }

          console.log('yes! you clicked!');

          pixel_coords = new THREE.Vector2( e.clientX, e.clientY );

          console.log('Pixel coordinates', pixel_coords);

          vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
                                        -( pixel_coords.y / window.innerHeight ) * 2 + 1);

          console.log('Viewport coordinates', vp_coords);

          vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);

          raycaster = new THREE.Raycaster();
          raycaster.setFromCamera(vp_coords_near, camera);
          intersects = raycaster.intersectObject(invisible_plane);


          // choose random geometry
          random_geometry =  Math.floor((Math.random() * 6));
          switch(random_geometry) {
            case 0:
              geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
              break;

            case 1:
              geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
              break;

            case 2:
              geometry = new THREE.SphereBufferGeometry(20,20,10);
              break;

            case 3:
              geometry = new THREE.OctahedronBufferGeometry(20);
              break;

            case 4:
              geometry = new THREE.ConeBufferGeometry(20,10);
              break;

            case 5:
              geometry = new THREE.RingBufferGeometry( 1, 20, 32 );

          }
          random_geometry += 1


          // choose random color
          colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
          random_color = colors[Math.floor((Math.random() * colors.length))];



          material = new THREE.MeshStandardMaterial({ color: random_color });
          mesh = new THREE.Mesh( geometry, material );
        
          mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)

          scene.add(mesh);

          all_meshes.push(mesh);

          totalObjects += 1;
          console.log('Total objects', totalObjects);
        
        };

        


      };

      function animate() {

        requestAnimationFrame( animate );

          if (mesh != null) {

            for(m in all_meshes) {

              mesh = all_meshes[m];

              q = new THREE.Quaternion( 0, Math.sin(Math.PI/2),0, Math.cos(Math.PI/2) );

              mesh.quaternion.slerp( q, 0.01 );

            }

          }


        controls.update();
        renderer.render( scene, camera );

      };

    </script>
  </head>
  <body></body>
</html>

Arcball

Trackball

Controls

Natural Feeling

Spins twice as fast

Completely path independent

Arcball

Trackball

Natural Feeling

Spins twice as fast

Completely path independent

Arcball

Trackball

Lecture 16

By Daniel Haehn

Lecture 16

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

  • 79

More from Daniel Haehn