CS460 Computer Graphics - University of Massachusetts Boston

WebGPU

Developer version

Web Browsers

Web Development Experience

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>

Lecture 5

By Daniel Haehn

Lecture 5

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

  • 107

More from Daniel Haehn