Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
11/6 Materials
11/13 Lights + Textures
11/18 Medical Visualization / Volume Rendering
11/20 NeRFs + glTF
12/2 Outside Lecture + Skybox
11/25 Fast Forwards!
11/27 No Class
12/4 Recap Lecture
12/9 Presentations!
12/11 Presentations II!
+
3D model
Assignment 5
Due 11/25!
Due tonight!!
12/4
Final Project!
counts as 40% of your grade!
#finalproject
Fast Forward (30-60 seconds)
Final Project Presentation
Final Submission
Tu 11/25
Th 12/09
Th 12/18
Tu 12/11
pre-recorded or live!
#finalproject
Fast Forward
Final Project
Presentation
Code
README.md
50%
30%
20%
5-min
5%
15%
40% of your grade!!!
Sky Box
Sky Sphere
// ...
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );
var texture = new THREE.TextureLoader().load( 'photo.jpg' );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// ...// ...
// ...
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
var texture = new THREE.TextureLoader().load( 'photo.jpg' );
var material = new THREE.MeshBasicMaterial( { map: texture,
side: THREE.BackSide } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// ...We will code when we are back!
<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';
var scene, camera, renderer, ambientLight, light, controls, sphere;
window.onload = function() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set( 0, 0, 500);
renderer = new THREE.WebGLRenderer({ });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight(0x000000);
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
// TODO
controls = new OrbitControls( camera, renderer.domElement );
animate();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body>
</body>
</html>
<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';
var scene, camera, renderer, ambientLight, light, controls, sphere, texture, video;
window.start = function() {
document.getElementById('clicker').style.display = 'none';
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set( 0, 0, 500);
renderer = new THREE.WebGLRenderer({ });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight(0x000000);
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
// TODO
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
video = document.getElementById( 'video' );
video.play();
texture = new THREE.VideoTexture( video );
var material = new THREE.MeshBasicMaterial({ map:texture, side: THREE.BackSide });
sphere = new THREE.Mesh( geometry, material );
scene.add(sphere);
controls = new OrbitControls( camera, renderer.domElement );
animate();
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body>
<video id="video" loop crossOrigin="anonymous" webkit-playsinline style="display:none">
<source src="jump.mp4" type='video/mp4'>
</video>
<div id='clicker' style='width:100%;height:100%'>
<span style='position:absolute;top:45%;left:45%;width:10%;padding:20px;border:solid thick white;color:white;font-family: sans-serif;text-align:center' onclick='javascript:window.start();'>Click to start!</span>
</div>
</body>
</html>
4 Slides Max!
1. Goal of the Project / Motivation / Selected Track
2. Screenshots / Video / Demo
3. Existing Work / Inspiration + Technologies Used
4. Challenges + Steps to Finish
Every slot has 4 minutes - max 1 minute per slide!
Less text, more visuals!
submit your music
Assignment 5 due tonight!!
Lecture 23
By Daniel Haehn
Lecture 23
Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!
