Academic Success, Advising and Technology.  https://youtu.be/I7Rns-JACXc

Financial Aid Matters. https://youtu.be/N03CLfOk1zs

Emotional and Social Support at UMass Boston.  https://youtu.be/hITZh3W_7eI

AR/VR with Jasmine Roberts

confirmed for 11/18!

CS460 Computer Graphics - University of Massachusetts Boston

WebGPU

Assignment 2

X

Y

Z

3D?

It is all virtual.

Viewport

Camera

(Eye)

Frustum

zNear

zFar

Viewport

Camera

(Eye)

Perspective Projection

Camera

Scene

Camera

Eye

Position (x,y,z)

Focus (x,y,z)

Scene

Center

Up (x,y,z)

Camera

Eye

Position (0,0,100)

Focus (0,0,0)

Scene

Center

Up (0,1,0)

Translate (Move in x,y)

Zoom (Move in z)

Rotate

X

Y

Z

c = new X.cube();

c2 = new X.cube();

c.center = [0, 0, 0];

c.lengthX

c.lengthY

c.lengthZ

gap

= 20

c2.center = [?, ?, ?];

= 5

c.color = [0, 0, 1];

c2.color = [1, 1, 1];

c.lengthX / 2 + gap + c2.lengthX / 2

0, 0, 0

X

Y

Z

c = new X.cube();

c2 = new X.cube();

c.center = [0, 0, 0];

c.lengthX

c.lengthY

c.lengthZ

gap

= 20

c2.center = [25, 0, 0];

= 5

c.color = [0, 0, 1];

c2.color = [1, 1, 1];

25, 0, 0

0, 0, 0

Z-Fighting

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>CS460 Assignment 2</title>
    <style>
      body {
        background-color: black;
        color: white; /* font color */
        font-family: sans-serif;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;
      }

      #logo {
        position: absolute;
        right: 10px;
        top: 10px;
      }
    </style>
    
    <script type="text/javascript" src="http://get.goXTK.com/xtk_edge.js"></script>

    <script type="text/javascript">

    window.onload = function() {

      // this gets called when the site is ready

      // create a new scene and renderer
      r = new X.renderer3D();
      r.init();

      // create a cube and add it!
      c = new X.cube();
      r.add(c);
      
      

      // set camera further away!
      r.camera.position = [0, 0, 1000];

      // render everything!
      r.render();

    };

    </script>
  </head>
  <body>
    <h1>CS460 Assignment 2</h1>
    <div id="logo"><img style="height:60px" src="gfx/cs460.png"></div>
  </body>
</html>

Quiz today!!

Lecture 5

By Daniel Haehn

Lecture 5

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

  • 129

More from Daniel Haehn