Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how the study of brain connectivity and machine perception can help advance the understanding of biologically inspired artificial intelligence.
Prof. Michael Wehar
CS460 Computer Graphics - University of Massachusetts Boston
Assignment 2
Assignment 2 on Github Pages
<script type="text/javascript" src="http://get.goxtk.com/xtk_edge.js"></script><script type="text/javascript" src="https://get.goxtk.com/xtk_edge.js"></script>Final Project
counts as 40% !!
easy
hard
XTK
Three.js
WebGL
limited
freedom
Complexity
Functionality
XTK
X.renderer3D
Renderer
Scene
Interaction
Loop
Three.js
THREE.WebGLRenderer
THREE.Scene
THREE.TrackballControls
Loop
Canvas
Canvas
Camera
THREE.PerspectiveCamera
Lighting
THREE.AmbientLight
THREE.DirectionalLight
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera( fov, ratio, zNear, zFar )
Field of View
Frustum
zNear
zFar
Viewport
Camera
(Eye)
Perspective Projection
Frustum
zNear
zFar
Viewport
Camera
(Eye)
Perspective Projection
Camera
Field of View Angle
camera = new THREE.PerspectiveCamera( fov, ratio, zNear, zFar )
Field of View
Aspect Ratio (4:3, 16:9..)
1
10000
75
renderer = new THREE.WebGLRenderer()
document.body.appendChild ( renderer.domElement )
Canvas
ambientlight = new THREE.AmbientLight( 0x404040 )
Color
light = new THREE.DirectionalLight ( 0xffffff, 5.0 )
Color
Intensity
controls = new THREE.TrackballControls ( camera )
<script>
window.onload = function() {
// .... other code
animate();
};
function animate() {
// call it directly again
requestAnimationFrame( animate );
// trigger Three.js rendering
renderer.render( scene, camera );
};
</script>Loop
XTK
X.cube
Geometry
Material
Three.js
THREE.Mesh
THREE.BoxBufferGeometry
Mesh
THREE.MeshStandardMaterial
geometry = new THREE.BoxBufferGeometry
( 20, 20, 20 )
lengthX, lengthY, lengthZ
Geometry defines the shape!
material = new THREE.MeshStandardMaterial
( { color: 0xffffff } )
Material defines the appearance!
new THREE.Mesh( geometry, material )
cube =
$ git pull upstream main
$ git push
$ touch index.html
$ cd 03
<html>
<head>
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>
window.onload = function() {
// Three.js code goes here
animate();
};
function animate() {
requestAnimationFrame( animate );
// and here...
};
</script>
</head>
<body></body>
</html><html>
<head>
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>
window.onload = function() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 100 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight( 0x404040 );
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
material = new THREE.MeshStandardMaterial({ color: 0xffffff });
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
controls = new THREE.TrackballControls( camera, renderer.domElement );
animate();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>
Wireframe
12 Triangles
Assignment 2 due tonight!!
submit your music: cs460.org/music
Lecture 6
By Daniel Haehn
Lecture 6
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!
