OpenGL 끄적임 - Image Crop

Requirement

crop the texture into the rect.

 

How to

change the texture vertices. 

change the projection matrix.

change the glsl.

 

Texture vertices

It is quick and the easy way.

Load Texture -> Mapping Texture. 

Load Texture -> Mapping Texture with stretched vertecies.

 

Issues

But when add the other textures, also change those vertices.

The direction of the texture coordinate is different to what I thought.

-> There is no inherent orientation for an OpenGL texture, since we can use different coordinates to orient it any which way we like. However, there is a default orientation for most computer image files: they are usually specified with the y-axis pointing downward (as seen in Figure 38, Computer images: the y-axis points downward, on page 118): the y value increases as we move toward the bottom of the image. This doesn’t cause any trouble for us so long as we remember that if we want to view our image with the right orientation, then our texture coordinates need to take this into account.

 

Projection matrix

-1, 1 사이 값으로 지정하면 Device 너비/높이에 맞게 그려지게 된다. 그런데 가로 모드로 했을 때, 세로모드에서 제대로 보여지던 이미지는 엄청 늘어져서 보이게 된다. 

GL은 -1~1사이의 범위는 정사각형이라고 생각하기 때문에 비율을 유지하려면 우리가 직접 알려줘야한다. 

세로의 경우 720x1280이므로 너비 범위를 [-1, 1]로 유지하고 높이 범위를 [-1280/720, 1280/720] 또는 [-1.78 , 1.78]. 

가로의 경우 1280x720이므로 [-1.78, 1.78]로 설정하고 높이 범위를 [-1, 1]로 설정하면 된다. 

좌표공간을 -1.78~1.78 사이로 조정함으로써 사물은 그대로 -1~1사이의 범위를 가지므로 사물은 세로/가로모드 상관 없이 아래와같이 보이게 된다. 

직교 투영(OrthoGraphic matrix)

이 때 사용하는 개념이 투영(Projection)이다. Orthographic projection만 다루면 멀리 떨어진 물체도 동일한 크기처럼 보인다. 2D 투영 개념만 우선 다룬다. 

우리는 특정 범위를 지정하고 해당 영역 안에 부분만 화면에 표시되며, 외부의 영역은 화면 밖으로 잘리게 됩니다. 

 

Matrix 연산

항등 행렬(Identity matrix)와 x,y,z,w의 vector이다. 4x1 행렬로 나타내며, vercot는 1차원 점하나이거나 color값을 의미한다. 
이 앞에 붙는 matrix는 4x4 행렬이고 projection이나 translation(rotation, scale, ..) 등의 행렬이다. 
Identity matrix는 *1을 하는 것과 같은 의미이다. 

결과는 오른쪽 원래 좌표와 동일한 좌표이다.

가장 간단한 Matrix인 Translation matrix를 살펴보자. 이 Matix를 이용하면 단순히 좌표를 x, y, z, w 방향으로 옮길 수 있다. 

예를 들어 (2,2,0,1) 좌표를 (3,3) 만큼 이동시켜보자.

 

결과는

(5,5,0,1) 이다. 

이것이 동작하는 이유는 x,y,z,w 부분이 항등 행렬(identity matrix) 에 움직일 x, y 좌표만 값을 입력했기 때문이다. 

 

이제 orthographic projection을 사용해보자. android.opengl.matrix class에 

 

orthoM(float[] m, int mOffset, float left, float right, float bottom, float top, float near, float far) 

함수를 사용하면 된다. right-left = width, bottom-top = height, far-near = z좌표 범위 만큼 파라미터를 넣어주면 된다. 

Matrix 공식은 아래와 같다.

 

이를 실제 프로젝트에 적용해보면, 아래와 같다. 

if (width >= height) {
    // Landscape
    Matrix.orthoM(matrixView, 0, -(width / height.toFloat()), (width / height.toFloat()), -1f, 1f, -1f, 1f)
} else {
    // Portrait or square
    Matrix.orthoM(matrixView, 0, -1f, 1f, -(height / width.toFloat()), (height / width.toFloat()), -1f, 1f)
}

 

Projection 적용전

 

Projection 적용후

 

이미지가 화면 크기에 관계 없이 일정 비율을 유지하고 있는 것을 볼 수 있다. 

 

그렇다면 이미지를 자르는 것은 어떻게 해야할까? 위와 마찬가지로 Projection 좌표를 이용해 -1~1 사이의 범위 내에서 보여지는 부분만 지정하면 된다. 

if (width >= height) {
    // Landscape
    Matrix.orthoM(matrixView, 0, 0f, 1, -1f, 1f, -1f, 1f)
} else {
    // Portrait or square
    Matrix.orthoM(matrixView, 0, -1f, 1f, 0f, 1f, -1f, 1f)
}

 

ex - https://github.com/google/grafika