Intro to 3D Graphics - WIG Boston - 2017

Invited talk for Women in Games Boston. Presented on Monday 2 October 2017

1. INTRO TO 3D GRAPHICS Douglass Turner douglass.turner@gmail.com @dugla 781 775 3708 WIG Boston 2017
2. Aim the camera
3. Elastic Image Software LLC Copyright Steve Jubinville Select and pose the model
4. Elastic Image Software LLC Design Appearance. Light Scene. Copyright Holger Schömann 4
5. Elastic Image Software LLC 5 Render Scene
6. Elastic Image Software LLC 6 Clip scene to the bounds of the viewing frustrum.
7. Elastic Image Software LLC Rasterize Scene 7
8. Elastic Image Software LLC 8 for each object in the scene determine its corresponding pixels for each corresponding pixel calculate depth of object at pixel if depth is closer than any object yet seen put this object in the pixel endif end end Sketch of a simple rendering algorithm
9. Let’s unpack these activities …
10. Camera. Lights. Models. They each rely on a transformation matrix for position, orientation, and scale.
11. Transform Transformation Matrix Coordinate Frame Reference Frame Eye Space Model Space World Space Different words for the same thing
12. Objects in Unity typically exist in a hierarchy. Think tree-branch or parent-child.
13. Matrices are the basis of these hierarchical relationships.
14. Matrix Demo: Parent Child - Unity
15. Unity uses quaternions for rotation. They are easier to specify and control then rotation via matrices.
16. Quaternions motivation: Alma Skrimsli
17. 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
18. Models
19. Model demo: Bust - Blender model download: http://bit.ly/2mbLDZj
20. Hang on! Where did those surfaces come from …? Rendering.
21. 3D shapes are defined by vertices. Each is a point in 3-space.
22. We attach a set of attributes to each vertex. • position: x, y, z • surface normal: nx, ny, nz, • texture coordinate: u, v
23. u,v define a coordinate system on the surface of an object for attaching a texture u v
24. We are very familiar with a two- dimensional coordinate system on the surface of a 3D object. Longitude/Latitude
25. QUAD
26. SPHERE
27. TORUS
28. UV Demo: Bust - Blender
29. xyz space uv space
30. skin texture in uv space
31. surface normals in uv space
32. Texture Mapping Demo: Head - Unity
35. surface normals
36. Why do we need surface normals? Demo: iPhone - Hello SceneKit
37. Normal Vector Demo: HelloLight - iPhone
38. Illumination Models
40. Illumination Models === math Fortunately it is a very specific collection of math function with the sole purpose of creating color
41. Some math The dot product. The cosine of the angle between N and L. A function of two vectors that produces one number. In the context of illumination this number scales reflected brightness. N.L
42. cosine function
43. diffuse = kd * (N.L) • V - Eye vector • L - Light source vector • N - Normal vector • kd - diffuse scale factor Diffuse Illumination
44. Modern illumination models can discard lights entirely and use an environment map (Sky Box) instead
45. Image Based Lighting (IBL) Use an image as the only source of light High Dynamic Range (HDR) Image More bit depth. To bring out shadow detail and subtlety. Use with … Global Illumination (GI) Result: lovely highly realistic images
47. IBL - HDR - GI Demo 1: Lego Star Wars - Unity
52. All of what we have talked about up to this point is preamble to where the real action happens, the … GPU
53. Think of the GPU as a dragster
54. It does one thing insanely well
55. The GPU is a SIMD computing beast. Single Instruction Multiple Data Points
56. SnapChat and Instagram are GPU apps
57. 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).
62. A shader defines the look of an object Shaders come in pairs • vertex shader • fragment shader
63. vertexShader fragmentShader vertexShader vertexShader
65. void main() { vec4 raw = texture2D(hero, v_st); vec3 inverted = 1.0 - raw.rgb; gl_FragColor = vec4(inverted, 1.0); }
66. GPU - GLSL Demo 1: FotoCollection - iPad
67. Color shift using a LUT (lookup table)
70. Remap colors using a LUT (lookup table)
73. Doug’s Brain
74. How far can you take this shader idea?
76. Natural Phenomena
77. • Simultaneous movement • Similar movement at multiple scales • Smooth randomness • Flocking behavior • Meditative • 360 degrees of movement
83. Douglass Turner douglass.turner@gmail.com @dugla 781 775 3708 Slides at Speaker Deck https://speakerdeck.com/douglassturner/intro-to-3d-graphics-wig-boston-2017
84. Thank You! Douglass Turner douglass.turner@gmail.com @dugla 781 775 3708