아이폰 3d 프로그래밍 챕터2
DESCRIPTION
블루사이드 스터디 발표 자료TRANSCRIPT
![Page 1: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/1.jpg)
iPhone 3DProgramming
Chapter 02. Math and Metaphors
2012. 01. 26.Sanghoon Lee
Sunday, December 9, 12
![Page 2: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/2.jpg)
수학과 비유
Graphics Rendering Pipeline & Metaphor
Transforms
Matrix stack
Vector Beautification with C++
HelloCone
Sunday, December 9, 12
![Page 3: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/3.jpg)
Sunday, December 9, 12
![Page 4: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/4.jpg)
What we’re going to study!
Sunday, December 9, 12
![Page 5: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/5.jpg)
Different kind of topology
Sunday, December 9, 12
![Page 6: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/6.jpg)
Different kind of topology
The first argument specifies the topology
Sunday, December 9, 12
![Page 7: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/7.jpg)
Drawing rectangle
Sunday, December 9, 12
![Page 8: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/8.jpg)
Properties with Vertices
Sunday, December 9, 12
![Page 9: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/9.jpg)
Setting vertex properties examples
Sunday, December 9, 12
![Page 10: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/10.jpg)
Homogeneous coordinates
Internally, the OpenGL implementation always converts it into a 4D floating-point number.
It’s an artificial construction that allows all transformations to be represented with matrix multiplication.
These 4D coordinates are known as homogeneous coordinates.
So, shortly after entering the assembly line, all vertex positions become 4D; don’t they need to become 2D at some point? The answer is yes.
Sunday, December 9, 12
![Page 11: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/11.jpg)
The Life of a Vertex
Perspective transform ( removal of w )
Sunday, December 9, 12
![Page 12: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/12.jpg)
Vertex goes from 4D to 2D
Early life of a vertex. Top row is conceptual; bottom row is OpenGL’s view
Sunday, December 9, 12
![Page 13: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/13.jpg)
Vertex goes from 4D to 2D
Sunday, December 9, 12
![Page 14: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/14.jpg)
The photography metaphor
1. Arrange the various dishes on the table.2. Arrange one or more light sources.3. Position the camera.4. Aim the camera toward the food.5. Adjust the zoom lens.6. Snap the picture.
1. Adjust the camera’s field-of-view angle. (projection matrix)2. Position the camera and aim it in the appropriate direction. (view matrix)3. For each object:
a. Scale, rotate, and translate. (model matrix)b. Render the object.
Sunday, December 9, 12
![Page 15: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/15.jpg)
ES 1.1
ES 2.0
Sunday, December 9, 12
![Page 16: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/16.jpg)
Matrix Multiplication
Sunday, December 9, 12
![Page 17: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/17.jpg)
Model Matrix
Scale
Translation
Rotation
The three most common operations when positioning an object in a scene
Sunday, December 9, 12
![Page 18: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/18.jpg)
Setting the Model Matrix (Scale)
Sunday, December 9, 12
![Page 19: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/19.jpg)
Setting the Model Matrix (Scale)
Sunday, December 9, 12
![Page 20: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/20.jpg)
Setting the Model Matrix (Translation)
Sunday, December 9, 12
![Page 21: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/21.jpg)
Setting the Model Matrix (Translation)
Sunday, December 9, 12
![Page 22: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/22.jpg)
Setting the Model Matrix (Rotation ES 1.1)
glRotatef(m_currentAngle, 0, 0, 1);
counter-clockwise rotation about the Z-axis
angle in degrees
the latter three arguments define the axis of rotation
Sunday, December 9, 12
![Page 23: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/23.jpg)
Setting the Model Matrix (Rotation ES 2.0)
Sunday, December 9, 12
![Page 24: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/24.jpg)
Setting the Model Matrix (Rotation)
arbitrary axis rotation* ES 1.1
glRotatef generates the matrix for youglRotatef only rotates about the origin
Sunday, December 9, 12
![Page 25: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/25.jpg)
Setting the Model Matrix (Rotation)
arbitrary axis rotation* ES 2.0
Sunday, December 9, 12
![Page 26: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/26.jpg)
What we have been through
Sunday, December 9, 12
![Page 27: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/27.jpg)
Setting the View Transform
Sunday, December 9, 12
![Page 28: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/28.jpg)
Setting the View Transform
The simplest way to create a view matrix
Sunday, December 9, 12
![Page 29: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/29.jpg)
Setting the Projection Transform
think of the projection as being the camera's "zoom lens"
Sunday, December 9, 12
![Page 30: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/30.jpg)
Setting the Projection Transform
ES 1.1
Sunday, December 9, 12
![Page 31: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/31.jpg)
Setting the Projection Transform
ES 2.0
OrthographicPerspective
Sunday, December 9, 12
![Page 32: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/32.jpg)
Matrix stacks
Sunday, December 9, 12
![Page 33: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/33.jpg)
Matrix stacks
Sunday, December 9, 12
![Page 34: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/34.jpg)
Matrix stacks
Only ES 1.1 supportsYou need to create by yourself in ES 2.0
Sunday, December 9, 12
![Page 35: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/35.jpg)
Interpolations
Sunday, December 9, 12
![Page 36: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/36.jpg)
Example of easing equations
Sunday, December 9, 12
![Page 37: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/37.jpg)
Quaternions
For position keyframes and color keyframes
What if interpolating between two orientations?
It's easy
Sunday, December 9, 12
![Page 38: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/38.jpg)
Quaternions
Storing an angle for each joint would be insufficient
you'd also need the axis of rotation
This is known as Axis-Angle notation
requires a total of four floating-point values for each joint
Sunday, December 9, 12
![Page 39: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/39.jpg)
Quaternions
Storing an angle for each joint would be insufficient
you'd also need the axis of rotation
This is known as Axis-Angle notation
requires a total of four floating-point values for each joint
Quaternions
Sunday, December 9, 12
![Page 40: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/40.jpg)
Quaternions
Storing an angle for each joint would be insufficient
you'd also need the axis of rotation
This is known as Axis-Angle notation
requires a total of four floating-point values for each joint
Study and understand it!!
Sunday, December 9, 12
![Page 41: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/41.jpg)
Vector Beautification template <typename T>struct Vector3 {
Vector3() {}Vector3(T x, T y, T z) : x(x), y(y), z(z) {}void Normalize(){
float length = std::sqrt(x * x + y * y + z * z);x /= length;y /= length;z /= length;
}
Vector3 Normalized() const{
Vector3 v = *this;v.Normalize();return v;
}
Vector3 Cross(const Vector3& v) const{
return Vector3(y * v.z - z * v.y,z * v.x - x * v.z,x * v.y - y * v.x);
}T Dot(const Vector3& v) const{
return x * v.x + y * v.y + z * v.z;}Vector3 operator-() const{
return Vector3(-x, -y, -z);}
bool operator==(const Vector3& v) const{
return x == v.x && y == v.y && z == v.z;}
T x;T y;T z;
};
Sunday, December 9, 12
![Page 42: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/42.jpg)
Vector Beautification
vec3 z;normalize(&z, &(eye-target));
vec3 cross;cross(&cross, &up, &z);vec3 x;normalize(&x, &cross);
cross(&cross, &up, &z);vec3 y;normalize(&y, &cross);
vec3 z = (eye - target).Normalized();
vec3 x = up.Cross(z).Normalized();
vec3 y = z.Cross(x).Normalized();
Sunday, December 9, 12
![Page 43: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/43.jpg)
Hello ConeFixed Function
Sunday, December 9, 12
![Page 44: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/44.jpg)
Hello ConeShaders
Sunday, December 9, 12
![Page 45: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/45.jpg)
Further study
Graphics Rendering pipeline
Quaternion
Sunday, December 9, 12
![Page 46: 아이폰 3D 프로그래밍 챕터2](https://reader036.vdocuments.mx/reader036/viewer/2022081800/55858ec7d8b42abc7b8b45f7/html5/thumbnails/46.jpg)
Q/A
Sunday, December 9, 12