T&C LAB-AI
Robotics
Computer Graphics and Programming
Lecture 9
Texture Mapping
Jeong-Yean Yang
2020/12/8
1
T&C LAB-AI
What is Texture Mapping?
0
2
T&C LAB-AI
Robotics
OpenGL supports for
Three Colors + Texture
• Three Colors
– Ambient, diffuse, specular
3
• Texture(bitmap)
– Image
T&C LAB-AI
Robotics
Texture(Image) mapping
is added on Diffuse color
• Colors with texture mapping
4
ˆn
Image, I(x,y)
ˆi
ˆr
camera
ˆ : Illumination(light source)
ˆ : Reflection
ˆ :
i
r
n normal
ˆ ˆ
diffuse
cos
ˆ ˆ
color
Image diffuse
( , )
i n
I x y
i n
T&C LAB-AI
How to handle Image buffer
1
5
T&C LAB-AI
Robotics
Various Image Types
• Various types of Image formats
– Bmp, jpg, gif, png, pcx, tif, and so on
• BMP, JPG, PNG are famous image formats in Graphics
– 24bit: BMP, JPG , 32bit: PNG
• One pixel of image is described by 8, 16, 24, 32 bit.
– RGB = 24bit
– RGBA = 32bit
– Gray = 8bit
– RGB(RGB565) = 16 bit
• R =0~31
• G=0~63
• B=0~31
6
OLED pixel
1 pixel =
T&C LAB-AI
Robotics
This Class Provides Image Library
• CImagew is a wrapper class for convenient purpose
– Easy to access RGB or RGBA buffer
• From Lecture 9, we will use ‘lib2’ instead of ‘lib’
7
BMP
JPG
PNG
JPG
Decoder
Image
Buffering
Zip
Decoder
CImage.dll
CImagew
Wrapper
class
T&C LAB-AI
Robotics
‘lib2’ for Texture Mapping
• lib for solid color
• lib2 for image handling
• Changes in lib2
8
T&C LAB-AI
Robotics
Ex) uRT-01-Basic
Path Setting for Compiling and Linking
• “../../lib2” is added for “Additional Library Directories”
9
lib2
Cimage.lib
Cimagew
cimage.lib for cimage.dll
Is added
T&C LAB-AI
Robotics
Ex) uRT-01-Basic
DLL : Interface library and header file
• If we use DLL,
– We need interface library and wrapper class
• glew32.dll interface(glew32.lib) + include(glew.h)
• Cimage.dll interface(cimage.lib) + Cimagew class
10
lib2
Cimage.lib
Cimagew
uRT-01
with
Cimage.dll
T&C LAB-AI
Robotics
Ex) uRT-01-Basic
Image Loading
• 1. Declare CImagew
• 2. Image loading
• 3. Draw an image at
point (0,0)
11
1. Variable Declaration
3. Draw function
2. Image loading
T&C LAB-AI
Robotics
Image Buffering
• Confirm Image bit first before image buffering.
• Ex) d4.png 32bit RGBA
• wallpaper.jpg 24bit RGB
12
T&C LAB-AI
Robotics
Ex) uRT-02-Buffering-24bit-BGR
• 8bit Image buffering
• 24 bit image buffering
13
(0,0) (1,0) (2,0) (3,0)
(0,1) (1,1) (2,1) (3,1)
(0,2) (1,2) (2,2) (3,2)
Width=4
Height=3
Image
( , ) :
I x y
n
w y
x
) (2,1)
[ ]
[4 1 2]
ex I
p n
p
Image buffer, p
(0,0) (1,0) (2,0) (3,0) (0,1) (1,1) (2,1) (3,1) (0,2) (1,2) (2,2) (3,2)
P[0] P[1] P[2]
P[6]
Image
(0,0)
(1,0)
(2,0)
(3,0)
(0,1)
(1,1)
(2,1)
(3,1)
(0,2)
(1,2)
(2,2)
(3,2)
(0,0)
(0,1)
(0,2)
(0,0)
(0,1)
(0,2)
(1,0)
(1,1)
(1,2)
(1,0)
(1,1)
(1,2)
(2,0)
(2,1)
(2,2)
(2,0)
(2,1)
(2,2)
(3,0)
(3,1)
(3,2)
(3,0)
(3,1)
(3,2)
R( , ) : r
3
3
G( , ) : g
3
3
1
B( , ) : b
3
3
2
x y
w y
x
x y
w y
x
x y
w y
x
) R(2,1)
[ ]
[3 4 1 3 2]
G(2,1)
[g]
[3 4 1 3 2 1]
B(2,1)
[b]
[3 4 1 3 2 2]
ex
p r
p
p
p
p
p
T&C LAB-AI
Robotics
JPG uses BGR instead of using RGB
• JPG decoding uses BGR in general
– For proofed Image processing, you must understand everything
14
JPEG is NOT R8G8B8,
but B8G8R8 model
T&C LAB-AI
Robotics
32bit RGBA Vs. BGRA
• Ex) uRT-03-Buffering-32bit-BGRA
• For example, “wallpaper32.png” is 32 bit PNG
15
R( , ) : r
4
4
G( , ) : g
4
4
1
B( , ) : b
4
4
2
A( , ) : a
4
4
3
x y
w y
x
x y
w y
x
x y
w y
x
x y
w y
x
B( , ) : r
4
4
G( , ) : g
4
4
1
R( , ) : b
4
4
2
A( , ) : a
4
4
3
x y
w y
x
x y
w y
x
x y
w y
x
x y
w y
x
R8G8B8A8
B8G8R8A8
T&C LAB-AI
Robotics
RGB Color Space
• RGB is linear? Is it Independent?
• Color that we see is NOT linear
– Red(10%) + Red(20%) Red(30%) Non Linear
• RGB buffer in images are linear
• Thus, Nonlinear Color Scene Capture Storing
linearly RGB buffer is linear
16
x
y
Transform, T
x
y
x’
y’
ˆ
ˆ
ˆ
'
T
X
x
y
X
TX
Linear vector space
T&C LAB-AI
Robotics
Y’UV Space
• YUV is transformed by Y’UV space
– Y’ : luminance component
– UV: Chrominance component
– U :Blue projection
– V: Red projection
17
'
0.299
0.587
0.114
0.1473
0.28886
0.436
0.615
0.51499
0.10001
Y
R
U
G
V
B
Y=1
u
v
Rank =3
Y’UV is a linear transform of RGB
T&C LAB-AI
Texture Mapping in OpenGL
with lib2
2
18
T&C LAB-AI
Robotics
19
New uVertex class
for Texture Mapping (UV mapping)
• uVertex in lib2
ˆ
f
n
f
s
t
Three
Points
Three
Normals
ˆ
s
n
ˆ
t
n
Three
UVs for
Image
position
(u,v)
(0,1)
(0,0)
(1,1)
T&C LAB-AI
Robotics
uTexture for Image Loading
20
OpenGL
Texture
handle
Image
loading
and
buffering
T&C LAB-AI
Robotics
uTexture for Image Loading
21
Generate
texture
handle
T&C LAB-AI
Robotics
uTexture for Image Loading
22
Texture setting
T&C LAB-AI
Robotics
uTexture for Image Loading
23
Copy Image buffer into
GPU by handle, tid.
T&C LAB-AI
Robotics
uTexture for Image Loading
24
Close Texture handle
T&C LAB-AI
Robotics
uWnd and uObj for Texture Mapping
• UV value for MakeBox and MakeCyl
25
Load
Image,
d4.png
T&C LAB-AI
Robotics
VBO for Texture Mapping
26
Position: (x,y,z) for 12 bytes
Normal: (x,y,z) for 12 bytes
UV: (u,v) for 8 bytes
0th Three elements
Position (x,y,z)
T&C LAB-AI
Robotics
VBO for Texture Mapping
27
Position: (x,y,z) for 12 bytes
Normal: (x,y,z) for 12 bytes
UV: (u,v) for 8 bytes
1st Three elements
Normal (x,y,z)
After 12 bytes
from
Positon x,y,z
T&C LAB-AI
Robotics
VBO for Texture Mapping
28
Position: (x,y,z) for 12 bytes
Normal: (x,y,z) for 12 bytes
UV: (u,v) for 8 bytes
2nd TWO elements
Textures (u,v)
After 24 bytes
Position(x,y,z)
+
Normal(x,y,z)
T&C LAB-AI
Robotics
uObj::Draw() for Drawing Texture
29
Bind texture handle
Unbind texture handle
T&C LAB-AI
Robotics
UV value is defined as
Normalized Image Position
• Image pixel coordinate
• Normalized Position by U and V
30
(x,y)=(0,0)
(511,511)
(u,v)=(0,0)
(1,1)
(1,0)
(0,1)
T&C LAB-AI
Robotics
Ex) uGL-20-TextureMapping
• Original Image MakeBox(10,10,1)
31
Width=1024
Height=1024
x
y
z
4(0,0,c)
6(a,b,c)
5(a,0,c)
7(0,b,c)
UV=(0,1)
(0,0)
(1,0)
(1,1)
T&C LAB-AI
Robotics
Ex) uGL-20-TextureMapping
• It looks somewhat Unusual. Why?
32
Why?
(0,1)
(1,1)
(0,1)
(1,1)
T&C LAB-AI
Robotics
UV Tricks
ex) uGL-20-TextureMapping2
33
Original
U= 1 at right
U=0.5 at right
T&C LAB-AI
Robotics
Features of Texture Mapping
• Images are wrapped and skewed by UV map
– Use uGL-20-TextureMapping, testG36-big.exe
34
Original
Skewed examples
Camera walking
is based on
Perspective Projection,
Which is
Non Euclidean
Transform.
Big head
Long Legs
T&C LAB-AI
Robotics
Ex) UV setting ( 24 vertices)
uGL-21-TX-box
35
TOP
(Initial
View)
Back
Front
Left
Right
Bottom
T&C LAB-AI
Robotics
Special Point of OpenGL Texture
• Keep in your mind.
• Every Dimension of OpenGL Texture MUST be
power of 2.
– D4.png, width and height =512=2^9
– G36.png, width and height = 1024 = 2^10
• Texture with width = 512 and height=1024 is also
Good.
36
T&C LAB-AI
Robotics
Meaning of that
Vertices in a Polygon are NOT Duplicated
• Each Polygon has its own vertices.
– UV mappings and Normal vectors are not used for other polygon
• Important features for Shading and UV Mapping
– Flat and Gouraud shadings require Independent Normal Vectors
– UV mapping also requires their own vertices for polyogns
37
Duplicated vertex
NON-Duplicated vertex
T&C LAB-AI
Robotics
Meaning of that
Vertices in a Polygon are NOT Duplicated
ex) uGL-47-Morgan-Prof 1 and 2
38
U = U +0.01
T&C LAB-AI
Dynamic Drawing
(Dynamic Vertex in OpenGL)
3
39
T&C LAB-AI
Robotics
OpenGL has
Two Types for Object Building in GPU
• Static Mode
– Data with vertex and element(face) are INVARIANT
• Dynamic Mode
– Data with vertex and element are Varying.
– Update again with modified vertex (ReUpdate())
40
T&C LAB-AI
Robotics
Concept of Dynamic Vertex
• Static Mode
• Dynamic Mode
41
Update()
glBufferData
pVer GPU
GPU
Vertex memory
H
H
Fixed
Rendering
pVer[0].v=…
Update()
glBufferData
pVer GPU
GPU
Vertex memory
H
H
Rendering
pVer[0].v=…
glBufferSubData
Update is Not possible
ReUpdate is Possible
T&C LAB-AI
Robotics
Ex) uGL-22-TX-Dynamic
• Use wallpaper.png(32bit)
• What’s wrong?
42
Normal vector must be changed
T&C LAB-AI
Robotics
Change of Normal Vector
in Dynamic Mode
43
