Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to 3D Graphics - BostonVR VR/AR Ha...
Search
Douglass Turner
March 11, 2017
Technology
1
190
Introduction to 3D Graphics - BostonVR VR/AR Hack Day
Introduction to 3D Graphics
Presented at BostonVR VR/AR Hack Day
March 11 2017
Douglass Turner
March 11, 2017
Tweet
Share
More Decks by Douglass Turner
See All by Douglass Turner
How To Think About Augmented Reality
douglassturner
0
37
Intro to 3D Graphics - WIG Boston - 2017
douglassturner
0
61
Metal for Mortals
douglassturner
0
97
The West 16th Street Peace Mural
douglassturner
4
56
How To Think About Software
douglassturner
0
150
Camp Interactive Talk - 9 Feb 2014
douglassturner
0
37
Bronx Community Charter School Visit - 4 jun 2014
douglassturner
0
120
iOS OpenGL
douglassturner
1
92
Implementing Data Visualization Apps on iOS Devices
douglassturner
2
130
Other Decks in Technology
See All in Technology
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
11
2.4k
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
310
解析の定理証明実践@Lean 4
dec9ue
0
160
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
920
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
210
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
13
4.6k
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
110
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Site-Speed That Sticks
csswizardry
10
650
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
What's in a price? How to price your products and services
michaelherold
246
12k
Docker and Python
trallard
44
3.4k
Building an army of robots
kneath
306
45k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
INTRO TO 3D GRAPHICS Douglass Turner
[email protected]
@dugla 781 775
3708 DOUGLASS TURNER ELASTICIMAGE SOFTWARE email:
[email protected]
twitter: @dugla
Aim the camera
Elastic Image Software LLC Copyright Steve Jubinville Select and pose
the model
Elastic Image Software LLC Design Appearance. Light Scene. Copyright ©
2006 Holger Schömann 4
Render
Let’s unpack these activities …
Camera. Lights. Models. They all rely on various flavors of
transformation matrices for position, orientation, and scale.
Transform Transformation Matrix Coordinate Frame Reference Frame Eye Space Model
Space World Space Different words for the same thing
They are the fundamental state of your objects I think
of them as their DNA
Every object in Unity exists in a hierarchy. Think tree-branch.
Think parent-child, or sibling relationship.
Matrices are the basis of this hierarchical relationship.
Matrix Demo: Parent Child - Unity
Unity uses quaternions for rotation. They are easier to specify
and control then rotation via matrices.
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
Models
Model demo: Bust - Blender model download: http://bit.ly/2mbLDZj
Hang on! Where did those surfaces come from …? Rendering.
3D shapes are defined by vertices. Each is a point
in 3-space.
We attach a set of attributes to each vertex. •
position: x, y, z • surface normal: nx, ny, nz, • texture coordinate: u, v
u,v define a coordinate system on the surface of an
object for attaching a texture u v
QUAD
Elastic Image Software LLC 22 SPHERE
Elastic Image Software LLC 23 TORUS
Something more interesting
UV Demo: Bust - Blender
Texture Mapping Demo: Low Poly Bust - Unity
surface normals
Normal Vector Demo: HelloLight - iPhone
Illumination Models
PrettyPixels = kd * (N.L) + ks * (R.V)^n An
illumination model describes the interaction between a object’s surface and light sources
PrettyPixels = kd * (N.L) + ks * (R.V)^n •
V - Eye vector • L - Light source vector • N - Normal vector • kd - diffuse scale factor Diffuse Illumination
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
In the real world surfaces are neither pure diffuse nor
pure specular.
Diffuse & Specular Show and Tell
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.
IBL - HDR - GI Demo 1: Lego Star Wars
- Unity
IBL - HDR - GI Demo 2: Low Poly Bust
- Unity
All of what we have talked about up to this
point is preamble to where the real action happens, the … GPU
Elastic Image Software LLC Think of the GPU as a
dragster
Elastic Image Software LLC It does one thing insanely well
The GPU is a SIMD computing beast
SnapChat and Instagram are GPU apps
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).
A shader defines the look of an object Shaders come
in pairs • vertex shader • fragment shader
vertexShader fragmentShader vertexShader vertexShader
void main() { vec4 raw = texture2D(hero, v_st); vec3 inverted
= 1.0 - raw.rgb; gl_FragColor = vec4(inverted, 1.0); } fragmentShader code
GPU - GLSL Demo 1: FotoCollection - iPad
Doug’s Brain
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.
I wrote a 3D rendering system with an interpreted object-based
language where shaders are first class citizens
Doug’s Shading Language The language implements objects, variables and expressions
Doug’s Shading Language + + = shiny = ambient +
diffuse + specular
So how far can you take this shader idea?
DSL Demo: Swirl - Photoshop
DSL Demo: High Noon - Video
DSL Demo: Lance Williams Bust Gallery
None
360 Video Demo: Presence and Natural Phenomena
Thank You! Douglass Turner ElasticImage Software twitter: @dugla email:
[email protected]
Douglass Turner
[email protected]
@dugla 781 775 3708