ELEC 4547
2023-09
Emerging Tech for VR/AR
- Vison and Image/Display Processing
Evan Y. Peng @ EEExCS
For Education Use Only, Edited by E.Y. Peng @ hku
Class Schedule
Thursday 13:30-16:15 [CPD 258]
Assignment 1 Due
Oct. 13, 2023
Project Proposal Due
Oct. 12, 2023
Late coursework submission would be
unfortunately suffering from penalty of
2% points deduction per day
Instructor
Dr. Evan Y. Peng @ EEExCS
CPD 258
evanpeng@hku.hk
Consultancy
By appointment via emails
Teaching Assistant
Wenbin Zhou @ EEE / CS
zhouwb@connect.hku.hk
Zhenyang Li @ EEE
lizy23@connect.hku.hk
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
General Graphics Pipeline
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
1. Vertex Processing: Process and transform individual vertices with attributes.
2. Rasterization: Convert each primitive (connected vertices) into a set of fragments. A
fragment can be treated as a pixel in 3D spaces, which is aligned with the pixel grid.
3. Fragment Processing: Process individual fragments.
4. Output Merging: Combine fragments of all primitives into 2D color-pixel for display.
For Education Use Only, Edited by E.Y. Peng @ hku
Rendering = from Scene to Image
The entire process that
produces color values
for pixels given the 3D
presentation.
Ray Casting and Rasterization
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
radiance towards viewer emitted radiance BRDF incident radiance from some direction
Kajija “The Rendering Equation”, SIGGRAPH 1986
Rendering Equation
Direction towards viewer
bidirectional reflectance distribution function
For Education Use Only, Edited by E.Y. Peng @ hku
• How much light (energy) has been received?
Attenuation: Light Fall-off
intensity
I/r2
intensity I
Light Fall-off
Intensity as function of distance…
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
• Emissive part can be added if desired
• Calculate separately for each color channel: RGB
Blinn-Phong Lighting/Reflection Model
https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_model
For Education Use Only, Edited by E.Y. Peng @ hku
Shading Types Illustration
Flat Shading Gouraud Shading Phong Shading
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
vertex shader fragment shader
• lighting calculations
done for each vertex
• lighting calculations done
for each fragment
Per-vertex Lighting vs Per-fragment Lighting
For Education Use Only, Edited by E.Y. Peng @ hku
Texture Filtering: fragments don’t align with texture pixels (texels) interpolate
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
Texture Mapping
For Education Use Only, Edited by E.Y. Peng @ hku
• OpenGL Tutorial http://learnopengl.com
• Versions of OpenGL, WebGL, GLSL… What you may use
✓ WebGL 1.0 - based on OpenGL ES 2.0
cheat sheet: https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf
✓ GLSL 1.10 - shader preprocessor: #ve rsion 110
• The principal shading language for OpenGL
• High-level programming language for shaders
• Syntax similar to C (i.e., has main function)
• Short programs that are executed in parallel on GPU
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
Start
from
2D Model Transform
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
Task2: Spin Your Teapot
Gouraud Lighting Phong Lighting
1. Implement MVP matrix.
2. Implement Gouraud & Phong Lighting in Vertex and Fragment Shaders.
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
Stereo Rendering with OpenGL/WebGL
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
Anatomy of the Human Visual System
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
• monocular visual field: visual field of either only the left or right eye
• binocular visual field or region of binocular overlap: intersection of monocular
visual fields, i.e., only the overlapping part of both eyes
• total visual field: union of monocular visual fields, i.e., visual fields of eyes combined
visual field of both eyes
Ruch
&
Fulton,
1960
nasal left + nasal right: 120°
binocular visual field or
region of binocular overlap
→ stereo vision
Anatomy of the Human Visual System
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
• Visual angle ≈ object size / object distance in degree
Visual Angle Matters
Requirement per eye:
150°x135°with pixels covering
1 arc min of visual angle
= 9,000 x 8,000 pixels (probably 2-
3x of that in practice)
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
FOV in VR: Immersive or Not
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
Marty
Banks,
UC
Berkeley
Negative Effects
• visual discomfort
• visual fatigue
• nausea
• diplopic vision
• eyestrain
• compromised
image quality
• pathologies in
developing visual
system
• …
VAC Is Bad
For Education Use Only, Edited by E.Y. Peng @ hku
binocular disparity motion parallax accommodation/blur
convergence
current glasses-based (stereoscopic) displays
near-term: light field displays
longer-term: holographic displays
Depth Perception (Cues/Displays)
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
Stereoscopic Displays
For Education Use Only, Edited by E.Y. Peng @ hku
Charles Wheatstone 1838 stereoscopic displays
176 years later
Stereoscopic Displays
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
Parallax
Relative distance of a 3D point
projected into 2 stereo images
http://paulbourke.net/stereographics/stereorender/
LaValle "Virtual Reality",
Cambridge University Press, 2016
For Education Use Only, Edited by E.Y. Peng @ hku
Parallax
• Visual system only uses horizontal parallax, no vertical parallax
• Naïve toe-in method may create vertical parallax → visual discomfort
Toe-in = incorrect! Off-axis = correct!
http://paulbourke.net/stereographics/stereorender/
LaValle "Virtual Reality",
Cambridge University Press, 2016
For Education Use Only, Edited by E.Y. Peng @ hku
Anaglyph
3D
The visual cortex of the brain fuses this into the perception…
Each of the two images reaches the eye it's intended for.
For Education Use Only, Edited by E.Y. Peng @ hku
Parallax – well done
1862
“Tending wounded Union soldiers at
Savage's Station, Virginia, during the
Peninsular Campaign”,
Library of Congress Prints and
Photographs Division
LaValle "Virtual Reality",
Cambridge University Press, 2016
For Education Use Only, Edited by E.Y. Peng @ hku
Parallax – well done
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
Parallax – not well done
For Education Use Only, Edited by E.Y. Peng @ hku
• Render L & R images (do not convert to grayscale)
• Merge into red-cyan anaglyph by assigning N(r)=L(r), N(g,b)=R(g,b)
from movie “Bick Buck Bunny”
Parallax – Stereo (Anaglyph) Rendering
For Education Use Only, Edited by E.Y. Peng @ hku
from movie “Bick Buck Bunny”
N(r)=L(r), N(g,b)=R(g,b)
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
1. Anaglyph
2. Polarization
3. Shutter Glasses
4. Chromatic Filters (e.g., Dolby)
Off-the-shelf 3D Glasses
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
Held
et
al.,
2006,
ACM
SIGGRAPH
Blur Matters in What
For Education Use Only, Edited by E.Y. Peng @ hku
Patney et al. 2016
For Education Use Only, Edited by E.Y. Peng @ hku
Patney et al. 2016
For Education Use Only, Edited by E.Y. Peng @ hku
Relative Acuity Over Retina
Eccentricity (離心率)
wikipedia
For Education Use Only, Edited by E.Y. Peng @ hku
Foveated Rendering
Guenter et al. 2016:
• Split image into n layers, e.g. inner (foveal, 1),
middle (2), outer (3)
• Render image in each zone with
progressively lower resolution
• Goal: save computation
A rendering technique which uses an eye tracker
integrated with a virtual reality headset to
reduce the rendering workload by greatly reducing
the image quality in the peripheral vision
For Education Use Only, Edited by E.Y. Peng @ hku
MAR
eccentricity (degrees)
MAR
HMD field of view/2
layer 2
layer 1 layer 3
e1 e2 e3
e3 =
fov
2
e1 =
fov
6
e2 =
fov
3
w1
w2
w3 ei =
i
n
×
fov
2
Foveated Rendering
Guenter et al. 2016:
• Split image into n layers, e.g. inner (foveal, 1),
middle (2), outer (3)
For Education Use Only, Edited by E.Y. Peng @ hku
MAR
eccentricity (degrees)
MAR
HMD field of view/2
layer 2
layer 1 layer 3
e1 e2
w1
w2
w3
e3
w1
is best the display can do!
unit of : degrees
cycle
=
degrees
2× pixel _size
w1
Foveated Rendering
For Education Use Only, Edited by E.Y. Peng @ hku
MAR
eccentricity (degrees)
MAR
HMD field of view/2
layer 2
layer 1 layer 3
e1 e2
w1
w2
w3
w1
is best the display can do!
unit of : degrees
cycle
=
degrees
2× pixel _size
w1
w1 = 2tan-1 screen_size
screen_resolution×viewer_distance
æ
è
ç
ö
ø
÷ ×
360
2p
viewer_distance
e3
Foveated Rendering
For Education Use Only, Edited by E.Y. Peng @ hku
MAR
eccentricity (degrees)
MAR
HMD field of view/2
layer 2
layer 1 layer 3
e1 e2
w1
w2
w3
w1 = 2tan-1 screen_size
screen_resolution×viewer_distance
æ
è
ç
ö
ø
÷ ×
360
2p
w2 = me2 +w0
w3 = me3 +w0
e3
Foveated Rendering
ei =
i
n
×
fov
2
For Education Use Only, Edited by E.Y. Peng @ hku
• convert MAR (in degrees/cycle) to pixels
MAR
eccentricity (degrees)
MAR
HMD field of view/2
layer 2
layer 1 layer 3
e1 e2
w1
w2
w3
blur _radius_in_ px = viewer_distance×tan
w
2
×
2p
360
æ
è
ç
ö
ø
÷
e3
Foveated Rendering
For Education Use Only, Edited by E.Y. Peng @ hku
Foveated Rendering – Performance Gain
m = 0.028 m = 0.022
n is number of layers
speedup is total number of display pixels / number of pixels in all layers combined
conclusion: for large fov & high-res displays, maybe shade much fewer pixels
For Education Use Only, Edited by E.Y. Peng @ hku
• Visual acuity: ~1 arc min and varies over retina: via foveated rendering
• Visual field: ~200° monocular, ~120° binocular, ~135° vertical
• Temporal resolution: ~60 Hz (depends on contrast, luminance)
• Depth cues in 3D displays: disparity, vergence, accommodation, blur, …
• Accommodation range: ~8cm to ∞, degrades with age
A Few Facts about Your Vision/Perception
Duane, 1912
Nearest
focus
distance
32 40 48
Age (years)
8 16 24 56 64 72
4D (25cm)
8D (12.5cm)
12D (8cm)
16D (6cm)
Presbyopia
0D (∞cm)
Bifocals
https://c1.staticflickr.com/1/77/173805491_4e4d77fa71_b.jpg
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
Stereo Rendering with OpenGL/WebGL
For Education Use Only, Edited by E.Y. Peng @ hku
VR HMDs: Break-down
IFIXIT teardown
For Education Use Only, Edited by E.Y. Peng @ hku
Simple
Magnifiers
For Education Use Only, Edited by E.Y. Peng @ hku
HMD
d
1
d
+
1
d'
=
1
f
Û d =
1
1
f
-
1
d'
Gaussian thin lens formula:
h
deye
eye relief
lens
micro
display
f
d'
h'
Image Formation
Side View
virtual image
For Education Use Only, Edited by E.Y. Peng @ hku
HMD
d
1
d
+
1
d'
=
1
f
Û d =
1
1
f
-
1
d'
Gaussian thin lens formula:
h
deye
eye relief
lens
micro
display
f
d'
h'
Image Formation
Side View
virtual image
For Education Use Only, Edited by E.Y. Peng @ hku
HMD
virtual image
Side View
d
1
d
+
1
d'
=
1
f
Û d =
1
1
f
-
1
d'
Gaussian thin lens formula:
Magnification:
M =
f
f - d'
Þ h = Mh'
h
deye
eye relief
lens
micro
display
f
d'
h'
Image Formation
For Education Use Only, Edited by E.Y. Peng @ hku
HMD
virtual image
Side View
d
1
d
+
1
d'
=
1
f
Û d =
1
1
f
-
1
d'
Gaussian thin lens formula:
Magnification:
M =
f
f - d'
Þ h = Mh'
h
deye
eye relief
lens
micro
display
f
d'
h'
Image Formation
For Education Use Only, Edited by E.Y. Peng @ hku
• Modify view matrix and projection matrix
• Rendering pipeline doesn't change
• Render two images in sequence
• Don’t use THREE.Matrix4().lookAt()
• Look at view matrix first: write own lookAt function that uses rotation &
translation matrix to generate view matrix
Stereo Rendering with OpenGL/WebGL: View Matrix
Further Readings…
• http://paulbourke.net/stereographics/stereorender/
• Eric Dubois, “A Projection Method to Generate Anaglyph Stereo Images”, ICASSP 2001
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
𝑀 = 𝑅 ∙ 𝑇(−𝑒)
Z
X
Adjusting the View Matrix
IPD
For Education Use Only, Edited by E.Y. Peng @ hku
IPD
Adjusting the View Matrix
For Education Use Only, Edited by E.Y. Peng @ hku
IPD
Adjusting the View Matrix
For Education Use Only, Edited by E.Y. Peng @ hku
IPD
Adjusting the View Matrix
Image borrowed from public domain
𝑀𝐿/𝑅 = 𝑇
±𝐼𝑃𝐷/2
0
0
𝑅 ∙ 𝑇(−𝑒)
For Education Use Only, Edited by E.Y. Peng @ hku
Adjusting the Projection Matrix
M proj =
2n
r - l
0
r + l
r - l
0
0
2n
t - b
t + b
t - b
0
0 0 -
f + n
f - n
-2× f ×n
f - n
0 0 -1 0
æ
è
ç
ç
ç
ç
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
÷
÷
÷
÷
Off-axis frustum is the key
For Education Use Only, Edited by E.Y. Peng @ hku
HMD
virtual image
Side View
d
1
d
+
1
d'
=
1
f
Û d =
1
1
f
-
1
d'
Gaussian thin lens formula:
Magnification:
M =
f
f - d'
Þ h = Mh'
h
deye
eye relief
lens
micro
display
f
d'
h'
Image Formation
For Education Use Only, Edited by E.Y. Peng @ hku
virtual image
Side View
d
h
eye relief
deye
view frustum
symmetric
znear
top
bottom
near
clipping
plane
Image Formation
For Education Use Only, Edited by E.Y. Peng @ hku
virtual image
Side View
d
h
eye relief
deye
view frustum
symmetric
znear
top
bottom
similar triangles:
near
clipping
plane
top = znear
h
2 d + deye
( )
bottom = -znear
h
2 d + deye
( )
Image Formation
For Education Use Only, Edited by E.Y. Peng @ hku
Top View
eye relief
deye
IPD
d'
w'
HMD
Image Formation
For Education Use Only, Edited by E.Y. Peng @ hku
Image Formation – Left Eye
HMD
Top View
deye
eye relief
w'
2
IPD/2
For Education Use Only, Edited by E.Y. Peng @ hku
HMD
virtual image
Top View
d
w1
deye
eye relief
w2
w1 = M
ipd
2
w2 = M
w'- ipd
2
æ
è
ç
ö
ø
÷
IPD/2
Image Formation – Left Eye
For Education Use Only, Edited by E.Y. Peng @ hku
virtual image
Top View
d
eye relief
deye
view frustum
asymmetric
znear
near
clipping
plane
w1
w2
Image Formation – Left Eye
For Education Use Only, Edited by E.Y. Peng @ hku
virtual image
Top View
d
eye relief
deye
view frustum
asymmetric
znear
right
left
similar triangles:
right = znear
w1
d + deye
left = -znear
w2
d + deye
near
clipping
plane
w1
w2
Image Formation – Left Eye
For Education Use Only, Edited by E.Y. Peng @ hku
virtual image
Top View
d
eye relief
deye
view frustum
asymmetric
w1
w2
Image Formation – Right Eye
w1 = M
ipd
2
w2 = M
w'- ipd
2
æ
è
ç
ö
ø
÷
For Education Use Only, Edited by E.Y. Peng @ hku
virtual image
Top View
d
eye relief
deye
view frustum
asymmetric
znear
right
left
similar triangles:
right = znear
w2
d + deye
left = -znear
w1
d + deye
w1
w2
Image Formation – Right Eye
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
https://www.slideshare.net/Mark_Kilgard/nvidia-opengl-in-2016
• Grid seen through HMD lens
• Lateral (xy) distortion of image
• Chromatic aberrations: distortion
is wavelength dependent
Lens Distortion
For Education Use Only, Edited by E.Y. Peng @ hku
HMD Housing, Lenses, and Display Panels
• View-Master VR Starter Kit ($15-20)
or Deluxe VR Viewer ($23)
✓ implements Google Cardboard 1.0/2.0
✓ durable – protect flimsy LCDs
✓ may need to drill additional holes
✓ We will prepare~
Image borrowed from public domain
For Education Use Only, Edited by E.Y. Peng @ hku
HMD Control System and Interaction Devices (Advanced)
Arduino-based open-source platform for:
• orientation tracking
• positional tracking
• interfacing with IO devices
For Education Use Only, Edited by E.Y. Peng @ hku
❖ 3D Glasses are Fun…
❖ VR HMDs are Similar…
❖ Why Foveated Rendering…
❖ Re-cap the Stereo Rendering…
❖
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
• Design an innovative & practical application for VR/AR
• Direct adoption of existing projects is strictly prohibited
• For each group, submit a 3~4 pages’ experiential learning report (like
a small conference paper in VRAR / CV / HCI / Robotics / SID… )
AND one-page (excluding references) project proposal/summary
• Names of the members
• Description of the project (Application, Background, Plan)
• Highlights (Key features), Plans, Deliverables, etc.
• Extra H/W and S/W required
• Due on Oct. 12, 2023 – 23:55, submission through Moodle
For Education Use Only, Edited by E.Y. Peng @ hku
99
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku
Reading Group Seminar Presentation
(Show-time as a group)
• Choose one from the state-of-the-art research paper pool (~10 for selection)
• Everyone else in this course should take a glance too, and join the discussion
• Lead the discussion about the paper (e.g., SWOT analysis) with a few slides
For Education Use Only, Edited by E.Y. Peng @ hku
• ACM SIGGRAPH / SIGGRAPH Asia conferences (general CG)
• IEEE VR, ISMAR, VRST conferences (focused on VR/AR)
• HCI conferences: ACM SIGCHI, UIST, …
• Optics journals: Optica, Optics Express, Optics Letters, Applied Optics, …
• SPIE conferences: Photonics West AR|MR|VR
Relevant Scientific Venues
For Education Use Only, Edited by E.Y. Peng @ hku
For Education Use Only, Edited by E.Y. Peng @ hku

ELEC4547_EmergingTechVRAR_Lecture_4_vision_stereo_rendering (2).pdf

  • 1.
    ELEC 4547 2023-09 Emerging Techfor VR/AR - Vison and Image/Display Processing Evan Y. Peng @ EEExCS For Education Use Only, Edited by E.Y. Peng @ hku
  • 2.
    Class Schedule Thursday 13:30-16:15[CPD 258] Assignment 1 Due Oct. 13, 2023 Project Proposal Due Oct. 12, 2023 Late coursework submission would be unfortunately suffering from penalty of 2% points deduction per day Instructor Dr. Evan Y. Peng @ EEExCS CPD 258 evanpeng@hku.hk Consultancy By appointment via emails Teaching Assistant Wenbin Zhou @ EEE / CS zhouwb@connect.hku.hk Zhenyang Li @ EEE lizy23@connect.hku.hk For Education Use Only, Edited by E.Y. Peng @ hku
  • 3.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 4.
    General Graphics Pipeline https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html 1.Vertex Processing: Process and transform individual vertices with attributes. 2. Rasterization: Convert each primitive (connected vertices) into a set of fragments. A fragment can be treated as a pixel in 3D spaces, which is aligned with the pixel grid. 3. Fragment Processing: Process individual fragments. 4. Output Merging: Combine fragments of all primitives into 2D color-pixel for display. For Education Use Only, Edited by E.Y. Peng @ hku
  • 5.
    Rendering = fromScene to Image The entire process that produces color values for pixels given the 3D presentation. Ray Casting and Rasterization Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 6.
    radiance towards vieweremitted radiance BRDF incident radiance from some direction Kajija “The Rendering Equation”, SIGGRAPH 1986 Rendering Equation Direction towards viewer bidirectional reflectance distribution function For Education Use Only, Edited by E.Y. Peng @ hku
  • 7.
    • How muchlight (energy) has been received? Attenuation: Light Fall-off intensity I/r2 intensity I Light Fall-off Intensity as function of distance… Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 8.
    • Emissive partcan be added if desired • Calculate separately for each color channel: RGB Blinn-Phong Lighting/Reflection Model https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_model For Education Use Only, Edited by E.Y. Peng @ hku
  • 9.
    Shading Types Illustration FlatShading Gouraud Shading Phong Shading Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 10.
    https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html vertex shader fragmentshader • lighting calculations done for each vertex • lighting calculations done for each fragment Per-vertex Lighting vs Per-fragment Lighting For Education Use Only, Edited by E.Y. Peng @ hku
  • 11.
    Texture Filtering: fragmentsdon’t align with texture pixels (texels) interpolate https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html Texture Mapping For Education Use Only, Edited by E.Y. Peng @ hku
  • 12.
    • OpenGL Tutorialhttp://learnopengl.com • Versions of OpenGL, WebGL, GLSL… What you may use ✓ WebGL 1.0 - based on OpenGL ES 2.0 cheat sheet: https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf ✓ GLSL 1.10 - shader preprocessor: #ve rsion 110 • The principal shading language for OpenGL • High-level programming language for shaders • Syntax similar to C (i.e., has main function) • Short programs that are executed in parallel on GPU For Education Use Only, Edited by E.Y. Peng @ hku
  • 13.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 14.
    Start from 2D Model Transform Imageborrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 15.
    Task2: Spin YourTeapot Gouraud Lighting Phong Lighting 1. Implement MVP matrix. 2. Implement Gouraud & Phong Lighting in Vertex and Fragment Shaders. Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 16.
    Stereo Rendering withOpenGL/WebGL For Education Use Only, Edited by E.Y. Peng @ hku
  • 17.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 18.
    Anatomy of theHuman Visual System Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 19.
    • monocular visualfield: visual field of either only the left or right eye • binocular visual field or region of binocular overlap: intersection of monocular visual fields, i.e., only the overlapping part of both eyes • total visual field: union of monocular visual fields, i.e., visual fields of eyes combined visual field of both eyes Ruch & Fulton, 1960 nasal left + nasal right: 120° binocular visual field or region of binocular overlap → stereo vision Anatomy of the Human Visual System Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 20.
    • Visual angle≈ object size / object distance in degree Visual Angle Matters Requirement per eye: 150°x135°with pixels covering 1 arc min of visual angle = 9,000 x 8,000 pixels (probably 2- 3x of that in practice) Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 21.
    FOV in VR:Immersive or Not Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 22.
    Marty Banks, UC Berkeley Negative Effects • visualdiscomfort • visual fatigue • nausea • diplopic vision • eyestrain • compromised image quality • pathologies in developing visual system • … VAC Is Bad For Education Use Only, Edited by E.Y. Peng @ hku
  • 23.
    binocular disparity motionparallax accommodation/blur convergence current glasses-based (stereoscopic) displays near-term: light field displays longer-term: holographic displays Depth Perception (Cues/Displays) Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 24.
    Stereoscopic Displays For EducationUse Only, Edited by E.Y. Peng @ hku
  • 25.
    Charles Wheatstone 1838stereoscopic displays 176 years later Stereoscopic Displays Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 26.
    Parallax Relative distance ofa 3D point projected into 2 stereo images http://paulbourke.net/stereographics/stereorender/ LaValle "Virtual Reality", Cambridge University Press, 2016 For Education Use Only, Edited by E.Y. Peng @ hku
  • 27.
    Parallax • Visual systemonly uses horizontal parallax, no vertical parallax • Naïve toe-in method may create vertical parallax → visual discomfort Toe-in = incorrect! Off-axis = correct! http://paulbourke.net/stereographics/stereorender/ LaValle "Virtual Reality", Cambridge University Press, 2016 For Education Use Only, Edited by E.Y. Peng @ hku
  • 28.
    Anaglyph 3D The visual cortexof the brain fuses this into the perception… Each of the two images reaches the eye it's intended for. For Education Use Only, Edited by E.Y. Peng @ hku
  • 29.
    Parallax – welldone 1862 “Tending wounded Union soldiers at Savage's Station, Virginia, during the Peninsular Campaign”, Library of Congress Prints and Photographs Division LaValle "Virtual Reality", Cambridge University Press, 2016 For Education Use Only, Edited by E.Y. Peng @ hku
  • 30.
    Parallax – welldone Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 31.
    Parallax – notwell done For Education Use Only, Edited by E.Y. Peng @ hku
  • 32.
    • Render L& R images (do not convert to grayscale) • Merge into red-cyan anaglyph by assigning N(r)=L(r), N(g,b)=R(g,b) from movie “Bick Buck Bunny” Parallax – Stereo (Anaglyph) Rendering For Education Use Only, Edited by E.Y. Peng @ hku
  • 33.
    from movie “BickBuck Bunny” N(r)=L(r), N(g,b)=R(g,b) For Education Use Only, Edited by E.Y. Peng @ hku
  • 34.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 35.
    1. Anaglyph 2. Polarization 3.Shutter Glasses 4. Chromatic Filters (e.g., Dolby) Off-the-shelf 3D Glasses Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 36.
    Held et al., 2006, ACM SIGGRAPH Blur Matters inWhat For Education Use Only, Edited by E.Y. Peng @ hku
  • 37.
    Patney et al.2016 For Education Use Only, Edited by E.Y. Peng @ hku
  • 38.
    Patney et al.2016 For Education Use Only, Edited by E.Y. Peng @ hku
  • 39.
    Relative Acuity OverRetina Eccentricity (離心率) wikipedia For Education Use Only, Edited by E.Y. Peng @ hku
  • 40.
    Foveated Rendering Guenter etal. 2016: • Split image into n layers, e.g. inner (foveal, 1), middle (2), outer (3) • Render image in each zone with progressively lower resolution • Goal: save computation A rendering technique which uses an eye tracker integrated with a virtual reality headset to reduce the rendering workload by greatly reducing the image quality in the peripheral vision For Education Use Only, Edited by E.Y. Peng @ hku
  • 41.
    MAR eccentricity (degrees) MAR HMD fieldof view/2 layer 2 layer 1 layer 3 e1 e2 e3 e3 = fov 2 e1 = fov 6 e2 = fov 3 w1 w2 w3 ei = i n × fov 2 Foveated Rendering Guenter et al. 2016: • Split image into n layers, e.g. inner (foveal, 1), middle (2), outer (3) For Education Use Only, Edited by E.Y. Peng @ hku
  • 42.
    MAR eccentricity (degrees) MAR HMD fieldof view/2 layer 2 layer 1 layer 3 e1 e2 w1 w2 w3 e3 w1 is best the display can do! unit of : degrees cycle = degrees 2× pixel _size w1 Foveated Rendering For Education Use Only, Edited by E.Y. Peng @ hku
  • 43.
    MAR eccentricity (degrees) MAR HMD fieldof view/2 layer 2 layer 1 layer 3 e1 e2 w1 w2 w3 w1 is best the display can do! unit of : degrees cycle = degrees 2× pixel _size w1 w1 = 2tan-1 screen_size screen_resolution×viewer_distance æ è ç ö ø ÷ × 360 2p viewer_distance e3 Foveated Rendering For Education Use Only, Edited by E.Y. Peng @ hku
  • 44.
    MAR eccentricity (degrees) MAR HMD fieldof view/2 layer 2 layer 1 layer 3 e1 e2 w1 w2 w3 w1 = 2tan-1 screen_size screen_resolution×viewer_distance æ è ç ö ø ÷ × 360 2p w2 = me2 +w0 w3 = me3 +w0 e3 Foveated Rendering ei = i n × fov 2 For Education Use Only, Edited by E.Y. Peng @ hku
  • 45.
    • convert MAR(in degrees/cycle) to pixels MAR eccentricity (degrees) MAR HMD field of view/2 layer 2 layer 1 layer 3 e1 e2 w1 w2 w3 blur _radius_in_ px = viewer_distance×tan w 2 × 2p 360 æ è ç ö ø ÷ e3 Foveated Rendering For Education Use Only, Edited by E.Y. Peng @ hku
  • 46.
    Foveated Rendering –Performance Gain m = 0.028 m = 0.022 n is number of layers speedup is total number of display pixels / number of pixels in all layers combined conclusion: for large fov & high-res displays, maybe shade much fewer pixels For Education Use Only, Edited by E.Y. Peng @ hku
  • 47.
    • Visual acuity:~1 arc min and varies over retina: via foveated rendering • Visual field: ~200° monocular, ~120° binocular, ~135° vertical • Temporal resolution: ~60 Hz (depends on contrast, luminance) • Depth cues in 3D displays: disparity, vergence, accommodation, blur, … • Accommodation range: ~8cm to ∞, degrades with age A Few Facts about Your Vision/Perception Duane, 1912 Nearest focus distance 32 40 48 Age (years) 8 16 24 56 64 72 4D (25cm) 8D (12.5cm) 12D (8cm) 16D (6cm) Presbyopia 0D (∞cm) Bifocals https://c1.staticflickr.com/1/77/173805491_4e4d77fa71_b.jpg Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 48.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 49.
    Stereo Rendering withOpenGL/WebGL For Education Use Only, Edited by E.Y. Peng @ hku
  • 50.
    VR HMDs: Break-down IFIXITteardown For Education Use Only, Edited by E.Y. Peng @ hku
  • 51.
    Simple Magnifiers For Education UseOnly, Edited by E.Y. Peng @ hku
  • 52.
    HMD d 1 d + 1 d' = 1 f Û d = 1 1 f - 1 d' Gaussianthin lens formula: h deye eye relief lens micro display f d' h' Image Formation Side View virtual image For Education Use Only, Edited by E.Y. Peng @ hku
  • 53.
    HMD d 1 d + 1 d' = 1 f Û d = 1 1 f - 1 d' Gaussianthin lens formula: h deye eye relief lens micro display f d' h' Image Formation Side View virtual image For Education Use Only, Edited by E.Y. Peng @ hku
  • 54.
    HMD virtual image Side View d 1 d + 1 d' = 1 f Ûd = 1 1 f - 1 d' Gaussian thin lens formula: Magnification: M = f f - d' Þ h = Mh' h deye eye relief lens micro display f d' h' Image Formation For Education Use Only, Edited by E.Y. Peng @ hku
  • 55.
    HMD virtual image Side View d 1 d + 1 d' = 1 f Ûd = 1 1 f - 1 d' Gaussian thin lens formula: Magnification: M = f f - d' Þ h = Mh' h deye eye relief lens micro display f d' h' Image Formation For Education Use Only, Edited by E.Y. Peng @ hku
  • 56.
    • Modify viewmatrix and projection matrix • Rendering pipeline doesn't change • Render two images in sequence • Don’t use THREE.Matrix4().lookAt() • Look at view matrix first: write own lookAt function that uses rotation & translation matrix to generate view matrix Stereo Rendering with OpenGL/WebGL: View Matrix Further Readings… • http://paulbourke.net/stereographics/stereorender/ • Eric Dubois, “A Projection Method to Generate Anaglyph Stereo Images”, ICASSP 2001 Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 57.
    𝑀 = 𝑅∙ 𝑇(−𝑒) Z X Adjusting the View Matrix IPD For Education Use Only, Edited by E.Y. Peng @ hku
  • 58.
    IPD Adjusting the ViewMatrix For Education Use Only, Edited by E.Y. Peng @ hku
  • 59.
    IPD Adjusting the ViewMatrix For Education Use Only, Edited by E.Y. Peng @ hku
  • 60.
    IPD Adjusting the ViewMatrix Image borrowed from public domain 𝑀𝐿/𝑅 = 𝑇 ±𝐼𝑃𝐷/2 0 0 𝑅 ∙ 𝑇(−𝑒) For Education Use Only, Edited by E.Y. Peng @ hku
  • 61.
    Adjusting the ProjectionMatrix M proj = 2n r - l 0 r + l r - l 0 0 2n t - b t + b t - b 0 0 0 - f + n f - n -2× f ×n f - n 0 0 -1 0 æ è ç ç ç ç ç ç ç ç ö ø ÷ ÷ ÷ ÷ ÷ ÷ ÷ ÷ Off-axis frustum is the key For Education Use Only, Edited by E.Y. Peng @ hku
  • 62.
    HMD virtual image Side View d 1 d + 1 d' = 1 f Ûd = 1 1 f - 1 d' Gaussian thin lens formula: Magnification: M = f f - d' Þ h = Mh' h deye eye relief lens micro display f d' h' Image Formation For Education Use Only, Edited by E.Y. Peng @ hku
  • 63.
    virtual image Side View d h eyerelief deye view frustum symmetric znear top bottom near clipping plane Image Formation For Education Use Only, Edited by E.Y. Peng @ hku
  • 64.
    virtual image Side View d h eyerelief deye view frustum symmetric znear top bottom similar triangles: near clipping plane top = znear h 2 d + deye ( ) bottom = -znear h 2 d + deye ( ) Image Formation For Education Use Only, Edited by E.Y. Peng @ hku
  • 65.
    Top View eye relief deye IPD d' w' HMD ImageFormation For Education Use Only, Edited by E.Y. Peng @ hku
  • 66.
    Image Formation –Left Eye HMD Top View deye eye relief w' 2 IPD/2 For Education Use Only, Edited by E.Y. Peng @ hku
  • 67.
    HMD virtual image Top View d w1 deye eyerelief w2 w1 = M ipd 2 w2 = M w'- ipd 2 æ è ç ö ø ÷ IPD/2 Image Formation – Left Eye For Education Use Only, Edited by E.Y. Peng @ hku
  • 68.
    virtual image Top View d eyerelief deye view frustum asymmetric znear near clipping plane w1 w2 Image Formation – Left Eye For Education Use Only, Edited by E.Y. Peng @ hku
  • 69.
    virtual image Top View d eyerelief deye view frustum asymmetric znear right left similar triangles: right = znear w1 d + deye left = -znear w2 d + deye near clipping plane w1 w2 Image Formation – Left Eye For Education Use Only, Edited by E.Y. Peng @ hku
  • 70.
    virtual image Top View d eyerelief deye view frustum asymmetric w1 w2 Image Formation – Right Eye w1 = M ipd 2 w2 = M w'- ipd 2 æ è ç ö ø ÷ For Education Use Only, Edited by E.Y. Peng @ hku
  • 71.
    virtual image Top View d eyerelief deye view frustum asymmetric znear right left similar triangles: right = znear w2 d + deye left = -znear w1 d + deye w1 w2 Image Formation – Right Eye For Education Use Only, Edited by E.Y. Peng @ hku
  • 72.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 73.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 74.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 75.
    https://www.slideshare.net/Mark_Kilgard/nvidia-opengl-in-2016 • Grid seenthrough HMD lens • Lateral (xy) distortion of image • Chromatic aberrations: distortion is wavelength dependent Lens Distortion For Education Use Only, Edited by E.Y. Peng @ hku
  • 76.
    HMD Housing, Lenses,and Display Panels • View-Master VR Starter Kit ($15-20) or Deluxe VR Viewer ($23) ✓ implements Google Cardboard 1.0/2.0 ✓ durable – protect flimsy LCDs ✓ may need to drill additional holes ✓ We will prepare~ Image borrowed from public domain For Education Use Only, Edited by E.Y. Peng @ hku
  • 77.
    HMD Control Systemand Interaction Devices (Advanced) Arduino-based open-source platform for: • orientation tracking • positional tracking • interfacing with IO devices For Education Use Only, Edited by E.Y. Peng @ hku
  • 78.
    ❖ 3D Glassesare Fun… ❖ VR HMDs are Similar… ❖ Why Foveated Rendering… ❖ Re-cap the Stereo Rendering… ❖ For Education Use Only, Edited by E.Y. Peng @ hku
  • 79.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 80.
    • Design aninnovative & practical application for VR/AR • Direct adoption of existing projects is strictly prohibited • For each group, submit a 3~4 pages’ experiential learning report (like a small conference paper in VRAR / CV / HCI / Robotics / SID… ) AND one-page (excluding references) project proposal/summary • Names of the members • Description of the project (Application, Background, Plan) • Highlights (Key features), Plans, Deliverables, etc. • Extra H/W and S/W required • Due on Oct. 12, 2023 – 23:55, submission through Moodle For Education Use Only, Edited by E.Y. Peng @ hku
  • 81.
    99 For Education UseOnly, Edited by E.Y. Peng @ hku
  • 82.
    For Education UseOnly, Edited by E.Y. Peng @ hku
  • 83.
    Reading Group SeminarPresentation (Show-time as a group) • Choose one from the state-of-the-art research paper pool (~10 for selection) • Everyone else in this course should take a glance too, and join the discussion • Lead the discussion about the paper (e.g., SWOT analysis) with a few slides For Education Use Only, Edited by E.Y. Peng @ hku
  • 84.
    • ACM SIGGRAPH/ SIGGRAPH Asia conferences (general CG) • IEEE VR, ISMAR, VRST conferences (focused on VR/AR) • HCI conferences: ACM SIGCHI, UIST, … • Optics journals: Optica, Optics Express, Optics Letters, Applied Optics, … • SPIE conferences: Photonics West AR|MR|VR Relevant Scientific Venues For Education Use Only, Edited by E.Y. Peng @ hku
  • 85.
    For Education UseOnly, Edited by E.Y. Peng @ hku