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.
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>Z-Fighting
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()
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 master
$ 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();
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 );
animate();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>
Wireframe
12 Triangles
Lecture 6
By Daniel Haehn
Lecture 6
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!