Tu 11/12 Texture Mapping

Th 11/14 Medical Visualization / Volume Rendering

Tu 11/19 NeRFs + glTF

Th 11/21 Final Project Fast Forward!

Tu 11/26 Fieldtrip / Outside Lecture

Fieldtrip!

11 / 26

Tu 11/12 Texture Mapping

Th 11/14 Medical Visualization / Volume Rendering

Tu 11/19 NeRFs + glTF

Th 11/21 Final Project Fast Forward!

Tu 11/26 Fieldtrip / Outside Lecture

Th 11/28 No Class

Tu 12/3 Skybox

Th 12/5 Final Project Presentations

Tu 12/10 Final Project Presentations II

Th 12/12 Recap Lecture

3D model

Assignment 5

Bonus

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

Due 11/21!

Assignment 5

Light Simulations

N (x, y, z)

Material

Scattering

controls the physical appearance

https://en.wikipedia.org/wiki/Rendering_equation

BRDF

https://en.wikipedia.org/wiki/Bidirectional_reflectance_distribution_function

http://lessons.goxtk.com/04/

magic mode uses (x, y, z) as color

https://threejs.org/docs/#api/en/materials/MeshNormalMaterial

https://threejs.org/docs/scenes/material-browser.html#MeshStandardMaterial

Physically Based Rendering

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

https://threejs.org/manual/?q=materials#en/materials

roughness 0 .. 1

metalness 0 .. 1

THREE.MeshStandardMaterial

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?!

Depth Testing / z-Buffer

Depth Testing first to skip

invisible objects in the fragment shader

Anti-Aliasing

Final Project!

counts as 40% of your grade!

#finalproject

https://stemkoski.github.io/Three.js

Texture Mapping

width

height

Fragment Shader

Vertex Shader

vec2( )

vec3 a_Position;

vec2 a_TexCoord;

vec2 v_TexCoord;

0, 0

1, 1

0, 1

u, v

varying

vec2 v_TexCoord;

varying

sampler2D u_Sampler;

Sampling

https://learnopengl.com/Getting-started/Textures

Nearest Neighbor

Linear

Interpolation

Wrapping

https://learnopengl.com/Getting-started/Textures

Repeat

Mirrored Repeat

Clamp To Edge

Clamp To Border

For U,Vs outside 0..1

https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html

Three.js

XTK

Default WebGL

var cube = new X.cube();
cube.texture.file = 'umb.png';

var floorTexture = new THREE.TextureLoader().load( 'board.jpg' );
var floorGeometry = new THREE.PlaneGeometry( 1000, 1000 );
var floorMaterial = new THREE.MeshBasicMaterial( {
map: floorTexture,
side: THREE.DoubleSide
} );
floor = new THREE.Mesh( floorGeometry, floorMaterial );

https://threejs.org/docs/?q=textures#api/en/constants/Textures