If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

3D 도형이란?

이 수업은  Peter Collingridge 의 소유물이며 Peter Collingridge의 웹사이트에서 최초로 게시되었습니다.
여태까지 칸아카데미에서 프로그래밍을 배우는 동안 사각형과 타원 같은 많은 2D 도형을 그리면서 아마도 정육면체나 구와 같은 3D 도형은 어떻게 만들지 궁금했을 것입니다.
칸아카데미에서 이용하는 ProcessingJS 라이브러리는 3D 그래픽을 위해 설계되지 않았습니다. 그러나 삼각함수를 이용하면 여러분만의 3D 그래픽 엔진을 직접 만들 수 있습니다. 그러기 위해 3D 그래픽이 구현되는지(그리고 수학 선생님을 기쁘게 하는 것 외에 삼각함수를 배울 이유가 있는지)를 조금 배우도록 하겠습니다.
아래는 여러분이 만들 수 있는 프로그램의 예시입니다. 마우스를 이용해서 도넛을 돌려보세요.

3D 그래픽은 무엇일까요?

컴퓨터 스크린은 기본적으로 2-차원이기 때문에 3D 그래픽은 단지 2D 착시 이미지를 이용해서 여러분의 뇌가 3D 물체를 본다고 생각하도록 속이는 것입니다. 다음은 간단한 예입니다.
3D 정육면체
정육면체로 보이는 세 개의 평행 사변형
3D 그래픽 엔진은 3D 물체가 스크린에 어떤 2D 모양으로 비춰지는지를 계산하여 작동합니다. 그러므로 3D 엔진을 작성하기 위해 이러한 계산을 어떻게 하는지를 알아야 합니다. 여기서 만들 프로그램은 대부분의 3D 엔진만큼 빠르게 동작하지는 않지만 이를 이용하여 프로그램이 동작하는 원리를 이해할 수 있습니다.

도형 표현하기

3D 그래픽 엔진은 3D 물체를 입력받아 2D 그래픽으로 변환합니다. 그러나 코드에 3D 물체를 어떻게 표현할까요?
3D 공간에서 한 점은 세 개의 수로 구성된 배열을 이용하여 쉽게 표현할 수 있습니다. 예를 들어 가로 (x) 축을 따라 30 픽셀, 세로 (y) 축을 따라 80 픽셀, 스크린의 앞쪽과 뒷쪽으로의 축을 따라 55 픽셀에 있는 점을 표현하기 위해 [30, 80, 55] 를 이용합니다. 마우스로 회전시키고 숫자를 변경해 보면서 아래의 점을 테스트해봅시다.
선을 표현하는 것도 쉽습니다. 단지 두 점을 연결하면 됩니다. 따라서 물체를 여러개의 선으로 변환하면 3D에서 물체를 표현할 수 있습니다. 마치 물체를 와이어로 만든 것처럼 보이므로 이것은 와이어프레임(wireframe)이라 불립니다. 고체를 표현하는 데 이상적이진 않지만 좋은 시작 단계입니다.

용어

아래는 3D 도형을 참조할 때 사용할 용어들입니다. 다른 용어들도 사용될 수 있으나 다음은 꽤 많이 사용됩니다.
  • 노드(Node): 세 개의 좌표 x, y, z로 표현되는 점 (또는 꼭짓점(vertex))
  • 엣지(Edge): 두 점을 연결한 선
  • 표면(Face): 최소 세 개의 점으로 정의되는 표면
  • 와이어프레임(Wireframe): 노드와 엣지로 구성된 모양