CS/그래픽스

[홍정모의 그래픽스 새싹코스 Part1] 원 만들기

겜도리도리 2023. 12. 5. 12:11
반응형

앞서

이 포스팅은 홍정모의 그래픽스 Part1을 수강하고 작성한 내용입니다.

강의의 세부 코드는 첨부하지 않고, 결과와 이론 위주로 포스팅했습니다.

Case 1 : Screen 좌표

2차원 원을 그리고자 한다.

원은 중심과 그 반지름을 알면 2차원에서의 원을 그릴 수 있다.

모든 픽셀을 순환하면서 해당 픽셀이 원의 반지름보다 가깝거나 같으면 색칠을 해주고, 반지름보다 크면 색칠해주지 않으면 된다.

IMGUI로 원의 중심, 반지름, 색칠할 RGB값이 미리 세팅되어 있다.

 

원을 그리는 코드는 Update에 있는데, 여기서 모든 픽셀을 순환하면서 원의 영역 안에 있으면 픽셀을 색칠해 주면 되었다.

"영역 안에 있다"는 Circle.h 안의 IsInside 함수를 사용했는데, 해당 점의 좌표가 원 안에 있으면 true를, 원 밖에 있으면 false를 return 해주었고 여기에는 glm::distance를 활용했다.

참고로 distance 연산에는 sqrt과정이 들어가는데, 이는 부하가 꽤 있는 연산이므로 제곱을 비교하면 더 최적의 연산을 할 수 있다.

결과

 

원 하나만 그릴 수 있기는 하지만, 주어진 조건에 맞게 올바른 원이 그려지는 것을 볼 수 있다.

 

Case 2 : World 좌표

이번에는 픽셀이 아니고, 월드 좌표계를 활용한다.

현재 예시창의 픽셀이 1280, 720 이므로 종횡비는 1.7이다. 이를 aspect라고 하자.

그렇다면 화면의 World 좌표는 다음과 같다.

위 그림처럼 좌상단이 (-aspect, 1), 우하단이 (aspect, -1)이 되어야 한다. 즉 화면의 중심이 (0, 0)이 된다.

Screen좌표에서 가로의 길이는 1280, World 좌표에서 가로 길이는 2aspect, 시작점은 -aspect이다.

Screnn좌표를 (xPos, yPos)라고 하면 Wolrd 좌표는 다음과 같다.

x좌표 : -aspect + 2aspect * (posX / 1279)

y좌표 : 1.0f - 2 * (posY/719)

 

결과

위 좌표를 적용시키면 위와 같이 원이 정상적으로 나온다.

반응형