Assignment 1
36/40 students submitted
@staff
#help
CS460 Computer Graphics - University of Massachusetts Boston
1 Week Recap
Web-based 3D Graphics
in all major browsers!
Next-generation web-based Graphics!
still experimental
There are a ton of WebGL demos!
There are different WebGL and WebGPU frameworks available!
All these frameworks make coding easier! That's good!
All WebGL/WebGPU 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/WebGPU 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
Assignment 2
Monday 9/18
$ git pull upstream main
$ git push
$ subl .$ cd 02
Once upstream repository changed:
$ git pull
<html>
<head>
<title>CS460.org Assignment 2</title>
<style>
body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
</head>
<body>
</body>
</html>
Browser
Editor
<html>
<head>
<title>CS460.org Assignment 2</title>
<style>
body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
<script type="text/javascript">
window.onload = function() {
console.log('loaded.');
r = new X.renderer3D();
r.init();
c = new X.cube();
c.color = [1, 1, 0]; // r g b
c.lengthY += 0.1;
c.lengthZ += 0.1;
r.add(c);
c2 = new X.cube();
c2.color = [1, 0, 0];
c2.lengthX = 100;
r.add(c2);
r.render();
};
</script>
</head>
<body>
</body>
</html>
submit your music