OpenGL
12 posts
OpenGL ES 3차원 컴퓨터그래픽스 Screen-space Object Manipulation

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Object Picking 어떠한 픽셀을 클릭했을 때, 해당 픽셀이 포함된 물체가 선택되는 현상을 구현해보자. Ray : 어떤 시작점에서 한쪽 방향으로의 직선. 여기에는 start point랑 Direction vector가 있다고 생각해보자. 이 Ray가 쭉 버떠나갔을 때 어디와 마주치는지를 확인해보자. Object space → World space → Camera space → Clips space → Screen space 이 전체의 스페이스 변환을 보아도 object간 구별을 확인한 적이 없다. ray-object intersection Test에서 Object가 첫번째로 ray에 닿는 순간을 찾으면 될꺼 같다. 하지만 이는 screen-space에서는 해당 정보가 없기 때문에, Object Space공간에서 해결해야 할 것이다. screen space에…

OpenGL ES 3차원 컴퓨터그래픽스 Euler Transforms & Quaternion

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Euler Transforms 물체를 여러 축(Principal Axes)을 기준으로 연속적으로 회전시킬 때, 물체는 새로운 임의의 방향을 갖게 된다. 이 방법을 통해 물체의 방향을 결정하는 것이 “Euler Transform”이라고 부르기로 함. Euler Angle은 여기서 Euler Angles(오일러 각): 회전할 때 사용하는 각도들로, 여기서는 𝜃1, θ2, θ3로 나타낸다. 이 각도들은 각각 다른 축을 기준으로 하는 회전을 가지게 된다. 이때 x,y,z에서 어느 축을 먼저 건드리느냐에 따라 결과물이 달라지게 된다. 축의 순서에 따라 결과가 달라지는걸 볼 수 있다. Key Frame Animation in 2D 고전에는 keyframe에는 메인 keyframe이 있고, 그 메인 keyframe들 사이를 채우는 in-between frames가 있다고 한…

OpenGL ES 3차원 컴퓨터그래픽스 Output Merger

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Color and Depth Buffers Viewport : 실제적으로 스크린에 보여줄 영역이다. 이때 그 영역을 잠시 보관하고 있는 공간을 Buffer라고 한다. Color Buffer : 스크린에 나타날 픽셀들을 잠시 저장하는 곳 (WxH) Depth Buffer : Color Buffer에 저장된 픽셀들의 Z-value들을 저장하는 곳이라 생각하면 되겠다. Fragment Shader에서 계산된 normal을 이용해서 Lighting을 진행하고, 계산된 texCoord를 사용해서 texturing을 진행해서 결국 output merger에 RGB값을 전달하게 된다. Z-buffering color buffer에 저장하게 되는데, 각 fragment 모두마다 z-value를 비교를 해서 나타나게 된다. 예를 들어, 1,0으로 주어진 default 값에 비…

OpenGL ES 3차원 컴퓨터그래픽스 Lighting

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Lighting 빛과 물체릐 상호작용을 다루는 모든 행위를 lighting이라고 한다. Phong Model 가장 유명한 lighting 모델 중에 Phong Model을 자주 쓴다. diffuse specular ambient emissive Diffuse Term Directional light source : 워낙 멀리 떨어져있어서 평행하다고 가정하고 한다. 가상카메라가 어디에 있든, 색깔은 동일하다고 볼 수 있다. → 난반사 (Lambertian Surface) l을 광원으로 부터는 벡터 방향 n을 p점의 normal 벡터 방향이라고 하자. 이 두 벡터 사이의 각도 세타가 커질수록 빛의 양이 더 작아진다. → cosθ cosθ에서 θ가 90도를 넘어가면, 0이 그 값이 되겠다. 백색광인 RGB가 (1,1,1)인데, 이 빛을 쐈을 때 물체 표면이 (1,0…

OpenGL ES 3차원 컴퓨터그래픽스 이미지 텍스쳐링

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Fragment Shader Lighting Texturing Texel 텍스쳐의 구성요소를 texture element의 약자인 texcel이라고 부른다. Texture Coordinate는 polygon mesh의 각 vertex들이 계산된 값을 의미한다. Texture Coordinates (s, t)는 texture space에 투영될 fragment를 구성하기 위해서 interpolation이 되는데, 이는 fragment의 color를 결정하게 된다. s와 t는 각각 해상도가 계산되어서 최종 결정되어버린다. parameter space가 Normalized 되어있기 때문에, Texture Coordinate도 정규화된다는 걸 알 수 있다. 정규화된 texture coordinate는 특정 해상도에 의존하지 않으며 다양하게 연결할 수 있다. Surfac…

OpenGL ES 3차원 컴퓨터그래픽스 Rasterizer

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Rasterizer 앞서 배운 vertex shader를 통해 삼각형이 그려질 것이고, 삼각형이 화면에 나타나면서 픽셀을 점유하게 될 것이다. 픽셀마다 필요한 색깔과 같은 데이터를 대입시켜주어야 한다. Clipping Perspective Back-face culling Viewport Transform Scan conversion Clipping t1의 경우 view frustum 밖에 있기 때문에 신경쓰지 않아도 된다. t2의 경우 view frustum안에 있기 때문에 구현해야겠다. GPU rendering pipeline 다음 단계로 넘어감. t3의 경우 view frustum 경계에 걸쳐있기 때문에 Clipping을 활용하여 처리를 해주어야겠다. clipping의 결과물로 일부 vertex들은 무시하고 처리될 수 있지만, 잘라진 선을 기준으로 다른 ver…

OpenGL ES 3차원 컴퓨터그래픽스 GL & Shader

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. GPU Rendering Pipeline, All Transforms 물체가 n개라면 n번의 world transform이 일어날 것이다. Vertex and Index Arrays texture coordinate라는 좌표도 vertex array에 각 셀에 같이 입력되는데, position, normal과 함께 필수 요소라고 볼 수 있다. GPU는 parallel 프로세서이기 때문에 각 vertex들이 병렬적으로 처리될 수 있다. OpenGL ES Vertex Shader와 Fragment Shader는 결국 프로그램이기 때문에, 각자가 스스로 API에게 제공을 해야 시스템이 돌아간다. Shader를 짜기 위한 GPU에 특화된 언어를 사용해야하는데, 이를 OpenGL ES Shading Language라고 한다.(GLSL) OpenGL ES Shading L…

OpenGL ES 3차원 컴퓨터그래픽스 정점 처리

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. GPU Rendering Pipeline GPU 렌더링은 다양한 과정을 걸쳐서 나타나는데, polygon mesh가 GPU안으로 입력되면, polygon mesh의 정점들은 vertex array에 저장이 되어 있을 것이다. 해당 정점들을 vertex shader가 한번에 하나씩 불러들이면서 연산을 하기 시작함. rasterizer를 통해 index array에 있는 정보를 바탕으로 삼각형을 조립하기 시작. 조립된 삼각형은 화면 안에서 여러개의 픽셀을 품고 있을텐데, 이때 각각의 픽셀의 색상을 결정할 정보를 rasterizer가 모아서 각 픽셀 위치마다 저장을 해놓는다.(= fragment) fragment shader를 통해서 각 fragment의 색깔을 결정한다. 마지막으로, output merger가 결정된 색상을 보여줄 건지, 말건지를 결정해서 최종 스크린…

OpenGL ES 3차원 컴퓨터그래픽스 스케일링

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Scaling(축소/확대) 2차원 축소 확대는, x방향과 y방향인자를 포함하게 된다. 행렬의 곱셈으로 처리함 Rotation(회전 변환) 반시계/시계 방향은 사실 상관없음. 음수로 작성하면 동일하다. Translation anf Homogenous Coordinates 주어진 x,y를 dx dy만큼 이동하는 것을 의미함. 벡터의 덧셈으로 정의됨. 동차좌표 (homogeneous coordinates) 회전 변환과 똑같이 벡터의 곱셈으로 나타냈으면 좋겠다. (x, y) → (x, y, 1) scaling과 rotation과 다른 점은 3 x 3 행렬이라는 점. 사실 (x,y,1) 이라고 했지만, 꼭 1일 필요는 없다. with any non-zero w 가능하기 때문에, (wx, wy, w) 로 정의해도 괜찮다. 반대로 Cartesian 좌표를 변환하는 것은,…

OpenGL ES 3차원 컴퓨터그래픽스 모델링

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Modeling 모델링이란, 그래픽스에서 렌더링할 물체를 만들어내는 것을 모델링이라고 한다. 우리가 흔히 아는 것은, 음함수 구의 방정식을 이용해서 구를 모델링하는 것이다. 문제는, GPU는 음함수를 처리하는데에 매우 적합하지 않게 설계되어있다. (추후에 이유는 알아보자.) 구의 방정식으로 모델링하는 방법 대신, 구 위의 여러가지의 정점들을 샘플링을 한다. 해당 정점들을 다각형으로 이루어져서 만들어 낸 것을 polydon mesh라고 한다. GPU는 반대로, 이런 폴리곤 매쉬를 처리하는데에 매우 적합하다고 하자 (왜 적합할까?) 1. Polygon Mesh 가장 간단한 polygon mesh는 삼각형으로 이루어진 triangle mesh이다. 우리가 배우는 OpenGL ES에서는 삼각형의 triangle mesh만 처리를 한다. 삼각형 메쉬는 보통 꼭짓점 갯수의 …

OpenGL ES 3차원 컴퓨터그래픽스 수학

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. Matrices and Vectors m x n 벡터를 표현할 때, m = n 이면 정사각(square) 행렬이라 부른다. A 행렬의 크기가 l x m 이고, B 행렬의 크기가 m x n 이면, A * B = l x n 행렬이 된다. OpenGL은 열벡터를 사용하고, M*V와 같이 행렬-벡터 (vector-on-the-right)곱셈을 사용하는 반면, Direct3D는 행벡터를 사용하고, V^T*M^T와 같은 방식(vector-on-the-left)을 사용한다. Coordinate System and Basis Coordinate System = origin(원점) + basis(기저) 좌표계 = 공간 표준기저에서 보다싶이 e1과 e2가 주축 (principle axis, x축과 y축)에 나란하므로, e1과 e2를 특별히 표준기저(Standard Basis)라…

OpenGL ES 3차원 컴퓨터그래픽스 Introduction

ⓒ 2019. JungHyun Han Korea University Seoul, All rights reserved. 3차원 컴퓨터그래픽스의 정의 3차원으로 표현된 물체를 입력으로 받아서 2차원 영상을 출력하는 작업. 이를 프레임이라고 부르는데, 이 프레임을 얼마나 빠르게 변환할 수 있는지에 따라 실시간 그래픽스(real-time grapics)와, 비-실시간 그래픽스(visual effects)로 분류할 수 있다. 초당 30개 이상(fps)을 만들어내는 대표적인 예로는 게임, 가상현실(VR), 증강현실(AR)이 있다. OpenGL ES를 이용해서 실시간 그래픽스의 기본적인 알고리즘을 이해하는 것이 주 목적이 될 것이다. Computer Grapics Production Modeling Rigging Animation Rendering Post-Processing Modeling 가상의 그래픽스 환경을 구성하는 각각의 물체를 컴퓨터가 처리할 수 있는 방식으로 표현한 것이 모델(Mo…