jPCT로 2D 렌더링을 구현해보자 - line, fillRect

이번에는 3D세계에서 2D 렌더링을 하는 것에 대해 공부해봅니다.
다른 분들도 이렇게 할 지는 모르겠지만 아무튼 저는 이렇게 만들었습니다.

우선 FillRect부터 해 봅시다.

2차원에서 직사각형을 표현하는 방법은 대개 두가지로 나뉩니다

• 왼쪽 위 좌표와(x, y) 사각형의 너비와 높이(w, h)
• 왼쪽 위 좌표와(x1, y1) 오른쪽 아래 좌표(x2, y2)

다른 창의적인 방법이 있을 수도 있겠지만 최소한의 필요한 좌표가 2개임은 변하지 않습니다.

여기서 저는 두번째 방법을 사용하겠습니다.

package cau.rpg.maker.object;

import java.awt.Color;

import javax.vecmath.Vector2f;

import com.threed.jpct.Object3D;

public class RMFillBox extends RMObject2D {

	public RMFillBox(float x1, float y1, float x2, float y2, Color color)
	{
		init(x1, y1, x2, y2, color);
	}
	
	public RMFillBox(Vector2f vStart, Vector2f vEnd, Color color)
	{
		init(vStart.x, vStart.y, vEnd.x, vEnd.y, color);
	}
	
	private void init(float x1, float y1, float x2, float y2, Color color)
	{
		if(x1 >= x2 || y1 >= y2)
			return;
		
		float z = -10f;
		
		float[] coords = {
			x1, y1, z,
			x1, y2, z,
			x2, y1, z,
			x2, y2, z
		};
		
		float[] uvs = {
			0f, 0f,
			0f, 1f,
			1f, 0f,
			1f, 1f
		};
		
		int[] indices = {
			0, 1, 2,
			2, 1, 3
		};
		
		m_polygon = new Object3D(coords, uvs, indices, getTextureIDByColor(color));
	}
}

이제 직선을 살펴보겠습니다.

직선의 경우는 조금 복잡합니다. 수학에서의 직선은 너비는 0이고 길이만 있는 것으로 정의되지만, 실제 세계에서 보이는 선은 대개 충분히 가까운 거리에서는 너비를 가진 것을 알고 있습니다.

3차원 그래픽에서도 직선은 너비가 0이면 1픽셀도 차지하지 않을테니 당연히 보이지 않습니다.

따라서 우리가 생각하는 직선은 다음과 같은 구조일 것입니다.

역시 사각형입니다. 조금이라도 정확한 직선이 되려면 사각형의 중심을 vLine이 가로지르게끔 만들어야 합니다.

이렇게 만든다면 선의 너비도 자유로이 조절이 가능할 것입니다.

직선은 시작지점(vStart)과 끝지점(vEnd)만 알면 되지만, 이를 토대로 선을 감싸는 사각형의 네 귀퉁이를 구해야 하기 때문에 좀 더 계산이 복잡해집니다.

package cau.rpg.maker.object;

import java.awt.Color;

import javax.vecmath.Vector2f;
import javax.vecmath.Vector3f;

import com.threed.jpct.Object3D;

public class RMLine extends RMObject2D {
	
	private static final Vector3f vectorZ = new Vector3f(0, 0, -1);
	
	public RMLine(Vector2f vStart, Vector2f vEnd, float width, Color color)
	{
		super();
		
		float z = -10f;
		Vector3f v3Start = new Vector3f(vStart.x, vStart.y, z);
		Vector3f v3End = new Vector3f(vEnd.x, vEnd.y, z);
		
		Vector3f lineVector = new Vector3f();
		lineVector.sub(v3End, v3Start);
		
		Vector3f normal = new Vector3f();
		normal.cross(lineVector, vectorZ);
		normal.normalize();
		normal.scale(width/2.0f);
		
		float[] coords = {
			(vStart.x + normal.x), (vStart.y + normal.y), z,
			(vStart.x - normal.x), (vStart.y - normal.y), z,
			(vEnd.x + normal.x), (vEnd.y + normal.y), z,
			(vEnd.x - normal.x), (vEnd.y - normal.y), z
		};
		
		float[] uvs = {
			0f, 0f,
			0f, 1f,
			1f, 0f,
			1f, 1f
		};
		
		int[] indices = {
			0, 2, 1,
			1, 2, 3
		};
		
		m_polygon = new Object3D(coords, uvs, indices, getTextureIDByColor(color));
	}

}

위 두 클래스를 이용해 만든 직선과 직사각형 예제입니다.