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!

Fieldtrip!

12 / 2

offered as CS480 / CS697

3D model

Assignment 5

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

Due 11/25!

Olivia Moos

Kali Nikias

3D model

Assignment 5

Bonus

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

Due 11/21!

Mesh Fileformats

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

metalness = 1, roughness = 0

metalness = 0, roughness = 0

metalness = 0, roughness = 1

metalness = 1, roughness = 1

perfect mirror

perfect glossy plastic

matte paint

brushed metal

https://www.w3.org/TR/webxr/

Oculus Quest 2

https://threejs.org

ENTER VR

https://cs460.org/shortcuts/02/

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