Dan Ginsburg

Vulkan, OpenGL, and OpenGL ES renderers for the Source 2 engine used by games such as Dota 2, Artifact, and Dota Underlords

10 out of 40

To go...

F 11/17 Volume Rendering

M 11/20 Atacama.bio Guest Lecture

W 11/22 WebGPU

F 11/24 No class (Thanksgiving Recess)

M 11/27 Final Project Fast Forward (60 seconds each!)

W 11/29 Field Trip / Outside Lecture

F 12/01 glTF / WebGPU II

M 12/04 Final Project Presentations I

W 12/06 Final Project Presentations II

F 12/08 Skybox

M 12/11 Final Project Presentations III

W 12/13 Final Recap and Last Lecture!

F 12/22 Final Project Submission

Fieldtrip!

11 / 29

3D model

Assignment 5

Bonus

https://cs460.org/assignments/05/

Due Tonight!

For real!

https://faculty.runi.ac.il/arik/site/3sweep.asp

https://facebookresearch.github.io/one_shot_3d_photography/

https://research.nvidia.com/labs/nxp/lp3d/

Light Simulations

N (x, y, z)

Material

Scattering

controls the physical appearance

+ Light

Physically Based Rendering

https://marmoset.co/posts/basic-theory-of-physically-based-rendering/

Shadowing

Shading

Two things control the color of an object

Material

Light

Color

Direction

Color

Orientation

https://flylib.com/books/en/2.789.1.40/1/

Reflections

https://threejsfundamentals.org/threejs/threejs-lights-ambient.html

var color = 0xFFFFFF;
var intensity = 1;
var light = new THREE.AmbientLight(color, intensity);
scene.add(light);

https://threejsfundamentals.org/threejs/threejs-lights-hemisphere.html

var skyColor = 0xB1E1FF;  // light blue
var groundColor = 0xB97A20;  // brownish orange
var intensity = 1;
var light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
scene.add(light);

https://threejsfundamentals.org/threejs/threejs-lights-directional.html

var color = 0xFFFFFF;
var intensity = 1;
var light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 10, 0);
light.target.position.set(-5, 0, 0);
scene.add(light);
scene.add(light.target);

https://threejsfundamentals.org/threejs/threejs-lights-directional-w-helper.html

var color = 0xFFFFFF;
var intensity = 1;
var light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 10, 0);
light.target.position.set(-5, 0, 0);
scene.add(light);
scene.add(light.target);

var helper = new THREE.DirectionalLightHelper(light);
scene.add(helper);

https://threejsfundamentals.org/threejs/threejs-lights-point.html

var color = 0xFFFFFF;
var intensity = 1;
var light = new THREE.PointLight(color, intensity);
light.position.set(0, 10, 0);
scene.add(light);

//...
gui.add(light, 'distance', 0, 40)

https://threejsfundamentals.org/threejs/threejs-lights-spot-w-helper.html

var color = 0xFFFFFF;
var intensity = 1;
var light = new THREE.SpotLight(color, intensity);
light.position.set(0, 10, 0);
light.target.position.set(-5, 0, 0);
scene.add(light);
scene.add(light.target);

//...
gui.add(new DegRadHelper(light, 'angle'), 'value', 0, 90).name('angle');

https://threejsfundamentals.org/threejs/threejs-lights-rectarea.html

var color = 0xFFFFFF;
var intensity = 5;
var width = 12;
var height = 4;
var light = new THREE.RectAreaLight(color, intensity, width, height);
light.position.set(0, 10, 0);
light.rotation.x = THREE.Math.degToRad(-90);
scene.add(light);

https://threejsfundamentals.org/threejs/threejs-shadows-directional-light.html

This was shading.

What about shadows?!