아이폰 3d 프로그래밍 챕터2

46
iPhone 3D Programming Chapter 02. Math and Metaphors 2012. 01. 26. Sanghoon Lee Sunday, December 9, 12

Upload: sanghoon-lee

Post on 20-Jun-2015

274 views

Category:

Technology


0 download

DESCRIPTION

블루사이드 스터디 발표 자료

TRANSCRIPT

Page 1: 아이폰 3D 프로그래밍 챕터2

iPhone 3DProgramming

Chapter 02. Math and Metaphors

2012. 01. 26.Sanghoon Lee

Sunday, December 9, 12

Page 2: 아이폰 3D 프로그래밍 챕터2

수학과 비유

Graphics Rendering Pipeline & Metaphor

Transforms

Matrix stack

Vector Beautification with C++

HelloCone

Sunday, December 9, 12

Page 3: 아이폰 3D 프로그래밍 챕터2

Sunday, December 9, 12

Page 4: 아이폰 3D 프로그래밍 챕터2

What we’re going to study!

Sunday, December 9, 12

Page 5: 아이폰 3D 프로그래밍 챕터2

Different kind of topology

Sunday, December 9, 12

Page 6: 아이폰 3D 프로그래밍 챕터2

Different kind of topology

The first argument specifies the topology

Sunday, December 9, 12

Page 7: 아이폰 3D 프로그래밍 챕터2

Drawing rectangle

Sunday, December 9, 12

Page 8: 아이폰 3D 프로그래밍 챕터2

Properties with Vertices

Sunday, December 9, 12

Page 9: 아이폰 3D 프로그래밍 챕터2

Setting vertex properties examples

Sunday, December 9, 12

Page 10: 아이폰 3D 프로그래밍 챕터2

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

The Life of a Vertex

Perspective transform ( removal of w )

Sunday, December 9, 12

Page 12: 아이폰 3D 프로그래밍 챕터2

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

Vertex goes from 4D to 2D

Sunday, December 9, 12

Page 14: 아이폰 3D 프로그래밍 챕터2

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

ES 1.1

ES 2.0

Sunday, December 9, 12

Page 16: 아이폰 3D 프로그래밍 챕터2

Matrix Multiplication

Sunday, December 9, 12

Page 17: 아이폰 3D 프로그래밍 챕터2

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

Setting the Model Matrix (Scale)

Sunday, December 9, 12

Page 19: 아이폰 3D 프로그래밍 챕터2

Setting the Model Matrix (Scale)

Sunday, December 9, 12

Page 20: 아이폰 3D 프로그래밍 챕터2

Setting the Model Matrix (Translation)

Sunday, December 9, 12

Page 21: 아이폰 3D 프로그래밍 챕터2

Setting the Model Matrix (Translation)

Sunday, December 9, 12

Page 22: 아이폰 3D 프로그래밍 챕터2

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

Setting the Model Matrix (Rotation ES 2.0)

Sunday, December 9, 12

Page 24: 아이폰 3D 프로그래밍 챕터2

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

Setting the Model Matrix (Rotation)

arbitrary axis rotation* ES 2.0

Sunday, December 9, 12

Page 26: 아이폰 3D 프로그래밍 챕터2

What we have been through

Sunday, December 9, 12

Page 27: 아이폰 3D 프로그래밍 챕터2

Setting the View Transform

Sunday, December 9, 12

Page 28: 아이폰 3D 프로그래밍 챕터2

Setting the View Transform

The simplest way to create a view matrix

Sunday, December 9, 12

Page 29: 아이폰 3D 프로그래밍 챕터2

Setting the Projection Transform

think of the projection as being the camera's "zoom lens"

Sunday, December 9, 12

Page 30: 아이폰 3D 프로그래밍 챕터2

Setting the Projection Transform

ES 1.1

Sunday, December 9, 12

Page 31: 아이폰 3D 프로그래밍 챕터2

Setting the Projection Transform

ES 2.0

OrthographicPerspective

Sunday, December 9, 12

Page 32: 아이폰 3D 프로그래밍 챕터2

Matrix stacks

Sunday, December 9, 12

Page 33: 아이폰 3D 프로그래밍 챕터2

Matrix stacks

Sunday, December 9, 12

Page 34: 아이폰 3D 프로그래밍 챕터2

Matrix stacks

Only ES 1.1 supportsYou need to create by yourself in ES 2.0

Sunday, December 9, 12

Page 35: 아이폰 3D 프로그래밍 챕터2

Interpolations

Sunday, December 9, 12

Page 36: 아이폰 3D 프로그래밍 챕터2

Example of easing equations

Sunday, December 9, 12

Page 37: 아이폰 3D 프로그래밍 챕터2

Quaternions

For position keyframes and color keyframes

What if interpolating between two orientations?

It's easy

Sunday, December 9, 12

Page 38: 아이폰 3D 프로그래밍 챕터2

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

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

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

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

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

Hello ConeFixed Function

Sunday, December 9, 12

Page 44: 아이폰 3D 프로그래밍 챕터2

Hello ConeShaders

Sunday, December 9, 12

Page 45: 아이폰 3D 프로그래밍 챕터2

Further study

Graphics Rendering pipeline

Quaternion

Sunday, December 9, 12

Page 46: 아이폰 3D 프로그래밍 챕터2

Q/A

Sunday, December 9, 12