CS460 Computer Graphics - University of Massachusetts Boston

A

Assignment 1

CS460 Computer Graphics - University of Massachusetts Boston

1 Week Recap

Web-based 3D Graphics

in all major browsers!

There are a ton of WebGL demos!

There are different WebGL frameworks available!

All these frameworks use WebGL and make coding easier! That's good!

All WebGL demos use JavaScript!

JavaScript looks like this:

<script type="text/javascript">

var mytext = "This is a text!";
var mynumber = 8;
var myfloat = 3.1415;
var myboolean = true;

console.log(mynumber, myfloat, mytext, myboolean);

</script>
<script type="text/javascript">

window.onload = function() {

// this gets called when the site is ready

myoutput = document.getElementById("output");
// we had to remove "var" to make it global

};

</script>

or

All WebGL demos use HTML.

HTML is responsible for the structure of a website.

HTML looks like this:

<html>
  <head>
    <title>CS460 Assignment 2</title>
  </head>
  <body>
    <h1>CS460 Assignment 2</h1>
    <div id="logo"><img src="gfx/cs460.png"></div>
  </body>
</html>

CSS styles HTML.

CSS looks like this:

<style>
body {
  background-color: black;
  color: white; /* font color */
  font-family: sans-serif;
}

#logo {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>

Web Developer Tools

Spector.js is a Web Developer Tool for WebGL

We need the file 02/index.html in your fork!

We need the file 02/index.html in your fork!

If you DO NOT have it already, do the following:

$ git pull upstream master
$ git push

FREE

$ touch index.html
$ cd 02
<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;
      }

      #logo {
        position: absolute;
        right: 10px;
        top: 10px;
      }
    </style>
    <script type="text/javascript">

    window.onload = function() {

      // this gets called when the site is ready

    };

    </script>
  </head>
  <body>
    <h1>CS460 Assignment 2</h1>
    <div id="logo"><img style="height:60px" src="gfx/cs460.png"></div>
  </body>
</html>
<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);

      // 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 4

By Daniel Haehn

Lecture 4

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

  • 87

More from Daniel Haehn