현재 카메라의 평면에 vertex0-vertex1-vertex2 를 정점(Vertex)으로 하는 삼각형(Triangle)을 그립니다. triangle 을 구성하는 vertex0, vertex1, vertex2 는 항상 월드 좌표(world coordinate)이어야 합니다.

그래픽 파이프라인(Graphics pipeline)의 마지막 단계인 $Rasterization, Fragment\text{ }shader$ 를 수행하며, 이는 window.requestAnimationFrame() 에서 가장 많은 시간을 소요하는 작업입니다. 실제로 그릴 삼각형의 갯수가 지나치게 많아지면, 초당 프레임 수(fps)가 급격하게 떨어지기 시작합니다.

프로파일러에서 이 한번 호출될때, 전체의 약 45% 시간을 에서 소요하고 있음을 보여줍니다.

프로파일러에서 window.requestAnimationFrame() 이 한번 호출될때, 전체의 약 45% 시간을 Renderer.drawTriangle2D() 에서 소요하고 있음을 보여줍니다.

Syntax

Renderer.drawTriangle2D(triangle);
Renderer.drawTriangle2D(triangle, material);

Parameters

triangle

그릴 삼각형을 나타내는 Triangle . Triangle.vertex0 , Triangle.vertex1 , Triangle.vertex2 는 반드시 월드 좌표(world coordinate)이어야 합니다.

material

그릴 삼각형에 적용할 Material .

Return value

(none)

Description

$Rasterization$ 는 벡터 그래픽(vector graphic)을 픽셀 그래픽(pixel graphic)으로 바꾸는 과정입니다. 각 픽셀(pixel)의 좌표는 new Vector2(1.5, 2.2) 와 같이 부동소수점(floating-point)으로 나타낼 수 없으며, 항상 Math.round(), Math.floor(), Math.ceil() 등을 적용하여 new Vector2(2, 2) 와 같은 정수로 나타내야 합니다.

삼각형 triangle 의 정점 vertex0, vertex1, vertex2 의 위치(position)를 $\vec{p0}, \vec{p1}, \vec{p2}$ 라고 한다면, 삼각형을 그리기 위해서는 월드 좌표(world coordinate)를 스크린 좌표(screen coordinate)로 변경해야 합니다. 아래 그림들은 $Rasterization$ 을 적용하기 전과 후의 삼각형의 모습을 보여줍니다:

제목 없음1.png

월드 좌표(world coordinate)에서의 삼각형.

스크린 좌표.PNG

스크린 좌표(screen point)에서의 삼각형.