CS460 Computer Graphics - University of Massachusetts Boston
Assignment 1
A
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
var myoutput = document.getElementById("output");
};
</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
$ 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>
</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>