Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
Avanith Kanamarlapudi
Office Hours
Mondays 3-4p
Special Today for Assignment 1: 3-4p
McCormack 3rd Floor M-3-02-164
#help
1 Week Recap
Web-based 3D Graphics
in all major browsers!
Next-generation web-based Graphics!
still experimental
There is a ton of WebGL content!
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
Brandon Jones
Quiz 1
WebGL Support
Gecko Engine
Blink and V8
WebKit
Blink and V8
Presto
Blink and V8
EdgeHtml
WebGPU is still experimental:
also has webdev tools...
let's try them!
33 links
31 using THREE.js
Which framework?
#feedback
/anon
LMK if I shall NOT bring her
or if stuff goes too slow or too fast..
ANY FEEDBACK IS WELCOME TO IMPROVE THE COURSE!
coming soon!
Browser
Editor
Let's try this!!
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
r.camera.view is a 4x4 matrix
X.camera3D
Let's try moving the cube!!
c.center = [0, 0, 0];
c.center = [10, 0, 0];
c.transform.translateX(10);
X.cube
from the origin
c.center = [20, 0, 0];
c.center = [10, 0, 0];
c.transform.translateX(10);
c.transform.translateX(-10);
from the current position
movement in x-direction
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
Editor
$ 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>
Assignment 1 due today!!
submit your music
Lecture 3
By Daniel Haehn
Lecture 3
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.orghttps://cs460.org
