KiTFOx's Notepad 📝

본 포스팅의 목표는 1편에서 보여주었던 창에 삼각형을 그리는것이다.

하지만 삼각형을 그리기 전에 먼저 알아야할 것들을 생각해보자.

OpenGL의 동작하는 방법에 대해 설명하려고 한다.

어떻게 동작하는지 파악하게 되면 코드의 전체적인 흐름을 잘 이해할 수 있게 된다.

삼각형을 그린다고 가정해보자

우리는 삼각형의 정보 데이터들을 화면에 그리기 위해서 컴퓨터에게 알려줘야한다.

일련의 처리들을 거쳐서 컴퓨터는 결과를 출력한다.

일련의 처리들은 여러가지 형태를 가질 수 있는데

GL은 파이프라인 구조를 사용한다.

'한 데이터 처리 단계의 출력이 다음 단계의 입력으로 이어지는 형태로 연결된 구조'를 파이프라인이라고 부른다.

파이프라인 구조는 일종의 분업 체제이다.

그래픽 처리 작업을 기능별로 세분화하여 이를 순차적으로 배치한 것이다.

기능별로 세분화하여 순차적으로 배치하면 여러 단계가 서로 동시에, 또는 병렬적으로 수행될 수 있어 효율성이 높아지게 만들 수 있다.

OpenGL 파이프 라인은 일반적으로 버텍스 패치, 버텍스 쉐이더, 테셀레이션, 지오메트리 쉐이터, 래스터화, 프래그먼트 쉐이더, 프레임 버퍼로 이루어져 있다. 필수부분도 있고 필수가 아닌부분도 있다.

필수부분들은 일반적으로 모두 하드웨어에 의해 구현된다.

고정된 파이프라인은 처리 순서를 변경할 수는 없고 프로세서에 파라미터를 전달하는 일을 한다.

아래그림은 고정함수와 변경할 수 있는 프로그래머블함수로 이루어진 OpenGL 파이프라인이다.

생략하거나 추가할 수 있

얼마전에 면접에서 Fixed Function Pipeline 아시냐는 질문을 받았는데 그게 고정함수 말하는건지 모르고 어버버 거렸다.. 영어로도 알아놓자..

1. 버텍스 패치(버텍스 풀링(정점 풀링)) & 버텍스 쉐이더

* 버텍스 패치

자동적으로 버텍스 쉐이더에 입력을 제공하는 일을 수행한다.

유일한 필수 스테이지이다.

제일 첫번째 버텍스 패치(Vertex Fetch)가 무엇이냐

Fetch부터 알아보자

https://www.computerhope.com/jargon/f/fetch.htm

이 사이트에 따르면 Fetch(가져오기)란 소프트웨어 프로그램, 스크립트 또는 하드웨어 장치에 의한 데이터 검색이라고 한다. 그러면 버텍스 패치란 말그대로 정점을 가져온다는 말이다.

버텍스 패치/버텍스 패칭/input assembler 등등 부르는 명칭이 조금씩 다르던데 정점을 입력해주는 것이라 보면 된다.

* 버텍스 쉐이더

가져온 후에는 두번째 버텍스 쉐이더(Vertex Shader) 과정이다.

버텍스 쉐이더는 

https://ko.wikipedia.org/wiki/%EB%B2%84%ED%85%8D%EC%8A%A4_%EC%85%B0%EC%9D%B4%EB%8D%94

여기에 나와있듯이 물체의 정점 정보에 수학적인 연산을 함으로써 물체에 특별한 효과를 주는데 쓰인다고 한다.

정점 정보는 위치 좌표, 색상, 텍스처, 조명 정보 등 다양하게 들어올 수 있다.

하지만 기존의 정점을 지우거나 새로운 정점을 추가하는 등의 작업은 불가능하다.

이 말이 무슨말이냐면,

만약 정점이 X0,X1,X2의 위치 좌표로써 이와같이 들어왔다면 쉐이더 코드를 이용해서 새로운 X4 좌표를 추가한다던지 혹은 들어온 X0,X1,X2의 원본 좌표를 바꾼다던지의 작업은 안된다는 것이다.

👆 하지만 유의해야할 점이 원본을 바꾸지 못하는 것이지 가공해서 쓸수는 있다! 👆

위와 같이 V(1,0,0)을 더해주면 삼각형은 마치 x축으로 1씩 옮긴것처럼 보인다.

예시를 든 것 뿐이지 다른 다양한 작업이 가능하다. 위의 그림들은 인스턴싱을 사용할 때 어떻게 쓸 수 있는지 다시 다루도록 하겠다.

만약 3차원 물체를 화면에 출력하는 프로그램을 제작한다면,

이 과정에서 3차원 좌표들을 2차원 좌표로 변경하는 연산이 일어난다.

3차원 공간안에서 물체들은 모두 x,y,z 값을 가지고 있다. 하지만 현실에서 우리는 모니터와 같은 평면 디스플레이를 통해 3차원 좌표를 볼게된다. 이해가 어렵다면 카메라를 생각해보자.

사진을 찍는 대상은 현실 공간인 3차원 공간에 있고 우리는 2차원 평면인 사진 안에 피사체를 담게 된다.

따라서 3차원 좌표를 2차원 좌표로 변경을 하여서 정점의 위치를 계산하는 과정이 필요하다.

2. 테셀레이션

OpenGL에서 테셀레이션 과정은 고정 함수이며

일정한 형태의 도형들로 평면을 빈틈 없이 채우는 것을 말한다.

폴리곤 안을 폴리곤으로 채우는 것인데 실제감을 향상시키기 위해 하는 작업이다.

하지만 폴리곤의 숫자를 높이는 것은 성능의 저하를 초래할 수 있으니 유의하여야 한다.

다음은 테셀레이션 과정이다.

줄여서 테셀레이션 단계로만 말하는 그래픽파이프라인 설명도 많은데 정확하게는 3단계로 이루어져있다.

아마 많이 쓰지 않아서 그런것 아닐까 싶은데 테셀레이션은 아래 그림과 같이 한 평면을 삼각형으로 꽉채우는 방식이다. 

이를 이용해서 하는 것은 늘어난 꼭짓점의 높낮이를 이용하여 평면을 울퉁불퉁하게끔 만들 수 있다.

하지만 이렇게 변환을 하면 당연히 꼭짓점의 갯수가 늘어난다. 따라서 처리해야할 양도 많다는 것이다.

그래서 범프맵핑이나 노말맵핑 등등 눈속임을 하는 맵핑들을 많이 했고 2010년도까지 많이 사용하지 않았다고 한다. 예전에 비해서 현재는 컴퓨터의 사양들이 많이 좋아졌기 때문에 최근에는 사용한 게임들도 꽤 있다.

* 테셀레이션 컨트롤 쉐이더

테셀레이션 세 가지 단계 중 첫 번째 단계이다.

이 쉐이더는 버텍스 쉐이더로부터 입력을 받아 주로 두 가지 일을 수행한다.

   * 테셀레이션 엔진에 보낼 테셀레이션의 레벨을 결정

   * 수행된 다음에 실행되는 테셀레이션 이벨류에이션 쉐이더에 보낼 데이터를 생성

* 테셀레이션 고정 함수

패치로 표현되는 고차 서피스를 점, 선, 삼각형과 같은 작은 프리미티브로 분할하는 역할을 수행한다.

테셀레이션 이벨류에이션 쉐이더의 호출에 사용될 인자를 생성하는 역할을 수행한다.

https://ogldev.org/www/tutorial30/tutorial30.html

Primitive Generator라고도 부르는 것 같다. 위의 링크에서 보면 여러가지 설정들을 통해서

glDrawElements(GL_PATCHES, m_Entries[i].NumIndices, GL_UNSIGNED_INT, 0);

이 부분에서 GL_PATCHES 이 부분에 테셀레이션 관련 레벨 및 데이터들을 작성해서 넣어주는 형식이다.

이 프리미티브 부분에는 설정을 해주지 않아도 GL_POINTS, GL_LINES, GL_LINE_STRIP 등등 여러가지 만들어져있는 옵션이 있다. 이 부분은 나중에 삼각형을 그릴 때 다시 알아보도록 하자.

* 테셀레이션 이벨류에이션 쉐이더

테셀레이터에 의해 생성된 각 버텍스에 대해 한 번씩 호출을 수행된다.

레이아웃 지시어로 테셀레이션 모드를 설정한다.

--------------------------------------------------------------------------------------------------------------------------------------------

아무래도 이전에 올렸던 것들은 수업시간에 교수님의 도움을 받아 했던 것들인데

꽤 적지 않은 분들이 openGL에 대해 관심이 있는 것 같아서 공부도 할겸 내가 직접 여러가지 자료들을 참고하여서 만들어보려고 한다.

일단 나는 VisualStudio 2017을 사용할 것이다.

프로젝트를 만들고 main.cpp를 소스 추가해주고

프로젝트(P) → 속성(P) 을 클릭하여 프로젝트의 속성을 킨다.

1. C/C++ → 일반 → 추가 포함 디렉터리

2. 링커 → 일반 → 추가 포함 디렉터리

3. 링커 → 입력 → 추가 종속성

에 GLFW와 gl3w라이브러리를 추가해준다.

GLFW 라이브러리 : https://www.glfw.org/

GLFW는 데스크탑에서 OpenGL, OpenGL ES 및 Vulkan 개발을 위한 오픈 소스 다중 플랫폼 라이브러리이다.
창, 컨텍스트 및 표면 생성, 입력 및 이벤트 수신을 위한 간단한 API를 제공해준다.
glfwinit(), glfwCreateWindow() 등과 같은 함수를 포함하고 있다.

gl3w 라이브러리 : https://github.com/skaslev/gl3w (cmake 이용해서 빌드해야할듯)

gl3w는 glew를 대체할 수 있는 라이브러리로 glew는 옛날 버전의 OpenGL까지 지원한다.
gl3w 라이브러리는 OpenGL 3와 4의 코어 프로파일에 초점을 맞추고 있다.

만약 LNK2001 에러가 뜬다면 해당 함수의 초기화가 되지 않은 것이니 gl3w.c 파일을 프로젝트 안에 소스로 추가하자. 해결 방법 찾은 링크

main에 기본형을 적어주고(https://www.khronos.org/opengl/wiki/OpenGL_Loading_Library#GL3W 을 참고함)

그리고 

#include <GL/gl3w.h> #include <GLFW/glfw3.h>

이부분은 꼭 순서를 다르게 적지 말고 똑같이 적어야 한다.

그리고 컴파일해보면

이 창이 뜨면 정상이다. 에러가 뜨면 다시 라이브러리 경로가 잘못되진 않았는지,  64비트 32비트 잘 확인했는지 한번 더 체크해보자.

필자는 오픈소스인 ImGUI를 이용하여서 프로젝트를 진행하도록 하겠다.

참고 링크 : https://github.com/ocornut/imgui

다시 한 번 라이브러리를 추가 포함 디렉터리에 넣는다.

ImGUI는 라이브러리를 따로 자체적으로 제작하거나 아니면 통짜로 소스코드를 내부에 넣어서 빌드하면 된다.

나는 라이브러리 제작 아래 링크의 블로그를 따라서 제작해서 사용하였다.

https://swstar.tistory.com/229#gref

라이브러리 설정이 끝나면

https://github.com/ocornut/imgui/blob/master/examples/opengl3_example/main.cpp

이 쪽으로 들어가면 imgui와 glfw3,gl3w에 관한 예제를 찾을 수 있다.

이것을 조금 참고하여서 넣어보자.

--------------------------------------------------------------------------------------------------------------

최근에 다시 들어가보니 몇가지 URL도 사라지고 해서 간단한 방법을 쓰길 바란다.

아무래도 업데이트를 자주 하시다 보니 방법을 바꾼듯 한데

간단하게 https://github.com/ocornut/imgui 여기서 초록색 Code 버튼 -> download Zip -> 압축해제 후 imgui 관련 소스들을 프로젝트에 포함시켜서 진행하면 될 것 같다.

나는 위 그림과 같이 ImGUI 소스들을 추가하였고 속성들을 다시 재설정하였다.

glfw 라이브러리를 속성에 추가하여주었고

glviewport, glclearcolor, glclear 함수를 찾을 수 없는 LNK2019 에러가 뜨는 경우에는

위의 그림과 같이 추가 종속성에 glfw3.lib와 opengl32.lib를 넣어보길 바란다.

opengl3_loader.h의 경우 현재 gl3w.h의 최소한의 기능들을 땡겨서 오므로 나중에 gl3w.lib를 추가하고 땡겨오는 경우 재정의 문제가 발생한다.

https://github.com/ocornut/imgui/issues/4445

위의 링크는 해당 에러에 대한 imgui 제작자가 답변한 경우이며 gl3w_stripped라는 파일을 제작하여 두 개의 라이브러리를 충돌시키지 않게끔 만들라는 것인데

https://github.com/dearimgui/gl3w_stripped

나의 경우 cmake를 통해 프로젝트를 다시 만들어서 돌리니까 imgui_loader.h에 필요한 gl3w 파일들이 제작되어서 gl3w.h 헤더파일 대신 imgui_impl_opengl3_loader.h 파일을 사용하니까 해결되었다.

https://github.com/ocornut/imgui/blob/master/examples/example_glfw_opengl3/main.cpp

이 예제를 사용하여서 main 함수를 제작하였다.

본 화면이 떳다면 성공한 것이다. 앞으로 이 ImGUI와 함께 openGL을 공부해보도록 하자!

이에 몇 가지 참고할만한 사이트의 링크들을 좀 남겨놓겠습니다

저도 제 일이 정리가 되면 아마 포스팅을 다시 시작하게 될 것 같습니다~!

LearnOpenGL

learnopengl.com/

LearnOpenGL 번역 블로그

heinleinsgame.tistory.com/4

P.S 혹여나 문제가 되거나 틀린 사항은 가르쳐주시면 감사합니다 :)