Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
Monday 11/6
Monday 11/13
Travel 11/8-11/10
Friday 11/17
Wednesday 11/29
Manuel Sainsily
Dan Ginsburg
Paloma Gonzalez-Rojas, Jose T. Dominguez
atacama.bio/3dprinting
CS480 / CS697 Special Topics
+
3D model
Assignment 5
Bonus
Spandan Madan
11 / 16 / 2022
Dan Ginsburg
11 / 28
Vulkan, OpenGL, and OpenGL ES renderers for the Source 2 engine used by games such as Dota 2, Artifact, and Dota Underlords
Assignment 8
Assignment 8
Due 11/21!
Normals
V4
V6
V5
(x, y, z)
(x, y, z)
(x, y, z)
Face
N4 (x, y, z)
V1
V3
(x, y, z)
(x, y, z)
(x, y, z)
Vertex
/ Vertices
Face
N1 (x, y, z)
N2 (x, y, z)
N3 (x, y, z)
Vertex Normals
Face Normals
used for Material
used for Lighting
used for Shading
V1
V2
V3
Bump Map
Normals
Pixel
Mesh File Formats
GLTF
.gltf
.glb
STL
OBJ
PLY
Collada
.dae
.stl
.ply
.obj
And more:
Let's make an OBJ file
v 0 0 0
v 0 10 0
v 10 0 0
v 0 0 10
f 1 2 3
f 1 2 4
f 1 4 3
f 2 4 3
save as tetrahedron.obj and drag into Slicedrop.com
+
Assignment 5
Now let's load some PLY file!
<html>
<head>
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@latest/build/three.module.js",
"three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';
var renderer, controls, scene, camera;
window.onload = function() {
window.THREE = THREE;
// Three.js code goes here
scene = new THREE.Scene();
// setup the camera
var fov = 75;
var ratio = window.innerWidth / window.innerHeight;
var zNear = 1;
var zFar = 10000;
camera = new THREE.PerspectiveCamera( fov, ratio, zNear, zFar );
camera.position.set(0, 0, 100);
// create renderer and setup the canvas
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// setup lights
var ambientLight = new THREE.AmbientLight();
scene.add( ambientLight );
var light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
// LOAD .PLY FILE
var loader = new PLYLoader();
loader.load('armadillo.ply', function(geometry) {
geometry.computeVertexNormals();
var material = new THREE.MeshStandardMaterial({
color: 'red'
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
// interaction
controls = new OrbitControls( camera, renderer.domElement );
// call animation/rendering loop
animate();
};
function animate() {
requestAnimationFrame( animate );
// and here..
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<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 src="https://threejs.org/examples/js/loaders/PLYLoader.js" type="text/javascript"></script>
<script>
var scene, camera, renderer, ambientLight, light, controls;
var floor;
window.onload = function() {
scene = new THREE.Scene();
var fov = 60;
var ratio = window.innerWidth / window.innerHeight;
var zNear = 1;
var zFar = 10000;
camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
camera.position.set( 0, 0, 500);
renderer = new THREE.WebGLRenderer({ alpha: true });
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 );
controls = new THREE.TrackballControls( camera, renderer.domElement );
// TODO
animate();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>
var loader = new PLYLoader();
loader.load('beethoven.ply', function (geometry) {
geometry.computeVertexNormals();
var material = new THREE.MeshStandardMaterial( {
color: 'red'
} );
scene.add( new THREE.Mesh( geometry, material ) );
} );
var loader = new THREE.PLYLoader();
loader.load('beethoven.ply', function (geometry) {
geometry.computeVertexNormals();
var material = new THREE.MeshStandardMaterial( {
color: 'red'
} );
scene.add( new THREE.Mesh( geometry, material ) );
} );
Constructive Solid Geometry
+
Assignment 5
Quiz today!
Lecture 26
By Daniel Haehn
Lecture 26
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!
