사각형 만들기

OpenGL ES 2.0에서 사각형(Quad) 그리기를 지원하지 않습니다. 그렇기 때문에 삼각형 두개를 조합해서 그리는 방법을 이용합니다.

Note: OpenGL은 OpenGL ES와 달리 사각형을 직접 그리는 것이 가능하지만, 잘쓰이지 않으며 기본적으로 삼각형으로 조합하여 그립니다.

지난 포스팅에서 삼각형을 그려보았다면, 사각형 그리기도 쉽게 따라 할수 있을 것입니다.

사각형 그리기 위한 정점 찍기

삼각형 두개를 그리기 위해 정점을 다음과 같이 선언합니다.

val quadVertices: Buffer = GlUtil.createFloatBuffer(arrayOf(
            -0.5f, 0.5f,  //0번 정점
            -0.5f, -0.5f,  //1번 정점
            0.5f, -0.5f,  //2번 정점

            -0.5f, 0.5f,  //0번 정점
            0.5f, -0.5f,  //2번 정점
            0.5f, 0.5f  ///3번 정점
    ).toFloatArray())

삼각형을 두개 그립니다.

glDrawArrays(GL_TRIANGLES, 0, 6)
Note:삼각형 그리기와 동일 하여 삼각형을 그리는 중간 과정은 생략합니다. 삼각형을 그리는 방법은 이전 포스트를 참고해주세요.

사각형이 잘 그려진다면 성공입니다.

다른 방법으로 사각형 그리기

사각형의 꼭짓점은 4개인데 삼각형 두개를 그리기 위해 정점 6개를 찍었습니다. 공통적인 정점을 재사용하여 정점 4개로만 4각형을 그려보겠습니다.

다음과 같이 정점 4개를 선언합니다.

val quadVertices: Buffer = GlUtil.createFloatBuffer(arrayOf(
            -0.5f,  0.5f, //0번 정점 
            -0.5f, -0.5f, //1번 정점
            0.5f, -0.5f,  //2번 정점
            0.5f,  0.5f  //3번 정점
    ).toFloatArray())

정점을 이어 그릴 순서의 배열을 선언합니다.

val order = arrayOf(0,1,2,0,2,3).toIntArray() //삼각형 그리는 순서 (012),(023)

val orderBuffer = ByteBuffer.allocateDirect(order.size * 4).let { //
    it.order(ByteOrder.nativeOrder())
    it.asIntBuffer()
}.apply {
    put(order)
    position(0)
} //드로잉 순서 버퍼를 만듭니다.

기존 glDrawArrays(int, int, int)가 아닌 glDrawElements(int, int, int, Buffer) 메소드로 삼각형을 순서대로 그립니다.

glDrawElements(GL_TRIANGLES, order.size, GL_UNSIGNED_INT, orderBuffer)
  • 1번째 파라미터 : 도형을 그리는 종류
  • 2번째 파라미터 : 그리는 순서배열의 사이즈
  • 3번째 파라미터 : 그리는 순서배열의 자료형
  • 4번째 파라미터 : 그리는 순서배열의 버퍼

Conclusion

이제 빌드를 해서 결과를 확인해보시기 바랍니다.  glDrawArrays와 glDrawElements로 사각형을 그린 결과물은 크게 차이가 없으나 glDrawArrays 주어진 정점배열을 순서대로 그리는 반면에 glDrawElements는 주어진 정점배열에서 원하는 정점을 골라 순서를 정해 그릴수 있습니다.

본 프로젝트는 github에서 확인 가능합니다.

카테고리: Graphics

0개의 댓글

답글 남기기

Avatar placeholder

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.