Slide 1

Slide 1 text

INTRO TO 3D GRAPHICS Douglass Turner [email protected] @dugla 781 775 3708 DOUGLASS TURNER ELASTICIMAGE SOFTWARE email: [email protected] twitter: @dugla

Slide 2

Slide 2 text

Aim the camera

Slide 3

Slide 3 text

Elastic Image Software LLC Copyright Steve Jubinville Select and pose the model

Slide 4

Slide 4 text

Elastic Image Software LLC Design Appearance. Light Scene. Copyright © 2006 Holger Schömann 4

Slide 5

Slide 5 text

Render

Slide 6

Slide 6 text

Let’s unpack these activities …

Slide 7

Slide 7 text

Camera. Lights. Models. They all rely on various flavors of transformation matrices for position, orientation, and scale.

Slide 8

Slide 8 text

Transform Transformation Matrix Coordinate Frame Reference Frame Eye Space Model Space World Space Different words for the same thing

Slide 9

Slide 9 text

They are the fundamental state of your objects I think of them as their DNA

Slide 10

Slide 10 text

Every object in Unity exists in a hierarchy. Think tree-branch. Think parent-child, or sibling relationship.

Slide 11

Slide 11 text

Matrices are the basis of this hierarchical relationship.

Slide 12

Slide 12 text

Matrix Demo: Parent Child - Unity

Slide 13

Slide 13 text

Unity uses quaternions for rotation. They are easier to specify and control then rotation via matrices.

Slide 14

Slide 14 text

Quaternion demo: HelloLight - iPhone For an implementation of quaternions in Swift for iOS see the EIArcball class in my HelloMetal repository on Github: https://github.com/turner/HelloMetal

Slide 15

Slide 15 text

Models

Slide 16

Slide 16 text

Model demo: Bust - Blender model download: http://bit.ly/2mbLDZj

Slide 17

Slide 17 text

Hang on! Where did those surfaces come from …? Rendering.

Slide 18

Slide 18 text

3D shapes are defined by vertices. Each is a point in 3-space.

Slide 19

Slide 19 text

We attach a set of attributes to each vertex. • position: x, y, z • surface normal: nx, ny, nz, • texture coordinate: u, v

Slide 20

Slide 20 text

u,v define a coordinate system on the surface of an object for attaching a texture u v

Slide 21

Slide 21 text

QUAD

Slide 22

Slide 22 text

Elastic Image Software LLC 22 SPHERE

Slide 23

Slide 23 text

Elastic Image Software LLC 23 TORUS

Slide 24

Slide 24 text

Something more interesting

Slide 25

Slide 25 text

UV Demo: Bust - Blender

Slide 26

Slide 26 text

Texture Mapping Demo: Low Poly Bust - Unity

Slide 27

Slide 27 text

surface normals

Slide 28

Slide 28 text

Normal Vector Demo: HelloLight - iPhone

Slide 29

Slide 29 text

Illumination Models

Slide 30

Slide 30 text

PrettyPixels = kd * (N.L) + ks * (R.V)^n An illumination model describes the interaction between a object’s surface and light sources

Slide 31

Slide 31 text

PrettyPixels = kd * (N.L) + ks * (R.V)^n • V - Eye vector • L - Light source vector • N - Normal vector • kd - diffuse scale factor Diffuse Illumination

Slide 32

Slide 32 text

PrettyPixels = kd * (N.L) + ks * (R.V)^n • V - Eye vector • L - Light source vector • N - Normal vector • R - Refection vector • n - specular exponent • ks - specular scale factor Specular Illumination

Slide 33

Slide 33 text

In the real world surfaces are neither pure diffuse nor pure specular.

Slide 34

Slide 34 text

Diffuse & Specular Show and Tell

Slide 35

Slide 35 text

Image Based Lighting (IBL) combined with High Dynamic Range (HDR) Images allows us to eliminate “lights” entirely. Global Illumination (GI) takes things to another level.

Slide 36

Slide 36 text

IBL - HDR - GI Demo 1: Lego Star Wars - Unity

Slide 37

Slide 37 text

IBL - HDR - GI Demo 2: Low Poly Bust - Unity

Slide 38

Slide 38 text

All of what we have talked about up to this point is preamble to where the real action happens, the … GPU

Slide 39

Slide 39 text

Elastic Image Software LLC Think of the GPU as a dragster

Slide 40

Slide 40 text

Elastic Image Software LLC It does one thing insanely well

Slide 41

Slide 41 text

The GPU is a SIMD computing beast

Slide 42

Slide 42 text

SnapChat and Instagram are GPU apps

Slide 43

Slide 43 text

The GPU takes the triangles and textures and rasterizes then for display. We control the GPU with small programs called shaders written in GLSL or Metal (iOS).

Slide 44

Slide 44 text

A shader defines the look of an object Shaders come in pairs • vertex shader • fragment shader

Slide 45

Slide 45 text

vertexShader fragmentShader vertexShader vertexShader

Slide 46

Slide 46 text

void main() { vec4 raw = texture2D(hero, v_st); vec3 inverted = 1.0 - raw.rgb; gl_FragColor = vec4(inverted, 1.0); } fragmentShader code

Slide 47

Slide 47 text

GPU - GLSL Demo 1: FotoCollection - iPad

Slide 48

Slide 48 text

Doug’s Brain

Slide 49

Slide 49 text

The shader concept was introduced by Pixar in the form of RenderMan. It is a powerful idea that has unleashed all the visual f/x we take for granted in games and effects-heavy movies.

Slide 50

Slide 50 text

I wrote a 3D rendering system with an interpreted object-based language where shaders are first class citizens

Slide 51

Slide 51 text

Doug’s Shading Language The language implements objects, variables and expressions

Slide 52

Slide 52 text

Doug’s Shading Language + + = shiny = ambient + diffuse + specular

Slide 53

Slide 53 text

So how far can you take this shader idea?

Slide 54

Slide 54 text

DSL Demo: Swirl - Photoshop

Slide 55

Slide 55 text

DSL Demo: High Noon - Video

Slide 56

Slide 56 text

DSL Demo: Lance Williams Bust Gallery

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

360 Video Demo: Presence and Natural Phenomena

Slide 59

Slide 59 text

Thank You! Douglass Turner ElasticImage Software twitter: @dugla email: [email protected] Douglass Turner [email protected] @dugla 781 775 3708