Introduction to 3D Graphics - BostonVR VR/AR Hack Day

Introduction to 3D Graphics
Presented at BostonVR VR/AR Hack Day
March 11 2017

1. INTRO TO 3D GRAPHICS Douglass Turner douglass.turner@gmail.com @dugla 781 775 3708 DOUGLASS TURNER ELASTICIMAGE SOFTWARE email: douglass.turner@gmail.com twitter: @dugla
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 © 2006 Holger Schömann 4
5. Render
6. Let’s unpack these activities …
7. Camera. Lights. Models. They all rely on various flavors of transformation matrices for position, orientation, and scale.
8. Transform Transformation Matrix Coordinate Frame Reference Frame Eye Space Model Space World Space Different words for the same thing
9. They are the fundamental state of your objects I think of them as their DNA
10. Every object in Unity exists in a hierarchy. Think tree-branch. Think parent-child, or sibling relationship.
11. Matrices are the basis of this hierarchical relationship.
12. Matrix Demo: Parent Child - Unity
13. Unity uses quaternions for rotation. They are easier to specify and control then rotation via matrices.
14. 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
15. Models
16. Model demo: Bust - Blender model download: http://bit.ly/2mbLDZj
17. Hang on! Where did those surfaces come from …? Rendering.
18. 3D shapes are defined by vertices. Each is a point in 3-space.
19. We attach a set of attributes to each vertex. • position: x, y, z • surface normal: nx, ny, nz, • texture coordinate: u, v
20. u,v define a coordinate system on the surface of an object for attaching a texture u v
21. QUAD
22. Elastic Image Software LLC 22 SPHERE
23. Elastic Image Software LLC 23 TORUS
24. Something more interesting
25. UV Demo: Bust - Blender
26. Texture Mapping Demo: Low Poly Bust - Unity
27. surface normals
28. Normal Vector Demo: HelloLight - iPhone
29. Illumination Models
30. PrettyPixels = kd * (N.L) + ks * (R.V)^n An illumination model describes the interaction between a object’s surface and light sources
31. PrettyPixels = kd * (N.L) + ks * (R.V)^n • V - Eye vector • L - Light source vector • N - Normal vector • kd - diffuse scale factor Diffuse Illumination
32. 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
33. In the real world surfaces are neither pure diffuse nor pure specular.
34. Diffuse & Specular Show and Tell
35. 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.
36. IBL - HDR - GI Demo 1: Lego Star Wars - Unity
37. IBL - HDR - GI Demo 2: Low Poly Bust - Unity
38. All of what we have talked about up to this point is preamble to where the real action happens, the … GPU
39. Elastic Image Software LLC Think of the GPU as a dragster
40. Elastic Image Software LLC It does one thing insanely well
41. The GPU is a SIMD computing beast
42. SnapChat and Instagram are GPU apps
43. 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).
44. A shader defines the look of an object Shaders come in pairs • vertex shader • fragment shader
45. vertexShader fragmentShader vertexShader vertexShader
46. void main() { vec4 raw = texture2D(hero, v_st); vec3 inverted = 1.0 - raw.rgb; gl_FragColor = vec4(inverted, 1.0); } fragmentShader code
47. GPU - GLSL Demo 1: FotoCollection - iPad
48. Doug’s Brain
49. 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.
50. I wrote a 3D rendering system with an interpreted object-based language where shaders are first class citizens
51. Doug’s Shading Language The language implements objects, variables and expressions
52. Doug’s Shading Language + + = shiny = ambient + diffuse + specular
53. So how far can you take this shader idea?
54. DSL Demo: Swirl - Photoshop
55. DSL Demo: High Noon - Video
56. DSL Demo: Lance Williams Bust Gallery
58. 360 Video Demo: Presence and Natural Phenomena
59. Thank You! Douglass Turner ElasticImage Software twitter: @dugla email: douglass.turner@gmail.com Douglass Turner douglass.turner@gmail.com @dugla 781 775 3708