오다기리 박의 알고리즘 노트

[OpenGL로 배우는 컴퓨터 그래픽스] Chapter 11. 텍스쳐 (Texture) 본문

컴퓨터 그래픽스/OpenGL

[OpenGL로 배우는 컴퓨터 그래픽스] Chapter 11. 텍스쳐 (Texture)

오다기리 박 2019. 2. 14. 21:15

OpenGL로 배우는 3차원 컴퓨터 그래픽스


Chapter 11. 텍스쳐 (Texture)

Section 01. 텍스쳐 맵

Light mapping

Texture mapping

Environment mapping

Bump mapping


Section 02. 텍스쳐 매핑 기법

텍스쳐 매핑 : (s, t) 좌표로 표현된 텍스쳐 영상을 (x, y, z) 좌표로 표현된 물체면으로 프로젝션하는 것


  • 평면 다각형의 경우

    • 수작업
      물체 다각형 정점을 대상으로 해당 정점의 텍스쳐 좌표 (s, t)값을 할당한다.

    • 무게중심 좌표(Barycentric Coordinates)이용
      <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>V</mi><mo>=</mo><mi>&#x3B1;</mi><mi>P</mi><mo>+</mo><mi>&#x3B2;</mi><mi>Q</mi><mo>+</mo><mi>&#x3B3;</mi><mi>R</mi></math>를 이용하여 V의 무게중심 좌표 <math xmlns="http://www.w3.org/1998/Math/MathML"><mfenced><mrow><mi>&#x3B1;</mi><mo>,</mo><mi>&#x3B2;</mi><mo>,</mo><mi>&#x3B3;</mi></mrow></mfenced></math>를 구하고
      <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>V</mi><mo>'</mo><mo>=</mo><mi>&#x3B1;</mi><mi>P</mi><mo>'</mo><mo>+</mo><mi>&#x3B2;</mi><mi>Q</mi><mo>'</mo><mo>+</mo><mi>&#x3B3;</mi><mi>R</mi><mo>'</mo></math>를 이용하여 텍스쳐 도메인의 V’ 를 구한다.

    • 에일리어싱

      • 언더샘플링으로 인한 에일리어싱

      • Projection 이후에 텍스쳐 가함으로 인한 에일리어싱

  • 곡면의 경우
    왜곡을 최소화시켜야 한다.


    • Parameter Surface
      곡면을 수학적으로 정의할 수 있는 경우

      <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>u</mi><mo>=</mo><mn>2</mn><mi>&#x3C0;</mi><mi>s</mi><mo>,</mo><mo>&#xA0;</mo><mi>v</mi><mo>=</mo><mn>2</mn><mi>&#x3C0;</mi><mi>t</mi><mspace linebreak="newline"/><mi>S</mi><mfenced><mrow><mi>u</mi><mo>,</mo><mi>v</mi></mrow></mfenced><mo>=</mo><mfenced><mrow><mi>r</mi><mo>&#xA0;</mo><mi>cos</mi><mi>v</mi><mo>,</mo><mo>&#xA0;</mo><mi>r</mi><mo>&#xA0;</mo><mi>sin</mi><mi>v</mi><mo>&#xA0;</mo><mi>cos</mi><mi>u</mi><mo>,</mo><mo>&#xA0;</mo><mi>r</mi><mo>&#xA0;</mo><mi>sin</mi><mi>v</mi><mo>&#xA0;</mo><mi>sin</mi><mi>u</mi></mrow></mfenced><mo>&#xA0;</mo><mspace linebreak="newline"/><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>=</mo><mo>&#xA0;</mo><mfenced><mrow><mi>r</mi><mo>&#xA0;</mo><mi>cos</mi><mn>2</mn><mi>&#x3C0;</mi><mi>t</mi><mo>,</mo><mo>&#xA0;</mo><mi>r</mi><mo>&#xA0;</mo><mi>sin</mi><mn>2</mn><mi>&#x3C0;</mi><mi>t</mi><mo>&#xA0;</mo><mi>cos</mi><mn>2</mn><mi>&#x3C0;</mi><mi>s</mi><mo>,</mo><mo>&#xA0;</mo><mi>r</mi><mo>&#xA0;</mo><mi>sin</mi><mn>2</mn><mi>&#x3C0;</mi><mi>t</mi><mo>&#xA0;</mo><mi>sin</mi><mn>2</mn><mi>&#x3C0;</mi><mi>s</mi></mrow></mfenced></math>

    • Polygon Surface

      • 곡면을 수학적으로 정의할 수 없는 경우 2단계 매핑이 사용된다

      • 1단계 : S 매핑

        • 텍스쳐를 중개면(Intermediate Surface) (원기둥, 원구, 육면체…)에 입히는 단계

          <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>u</mi><mo>=</mo><mn>2</mn><mi>&#x3C0;</mi><mi>s</mi><mo>,</mo><mo>&#xA0;</mo><mi>v</mi><mo>=</mo><mi>t</mi><mspace linebreak="newline"/><mi>S</mi><mfenced><mrow><mi>u</mi><mo>,</mo><mi>v</mi></mrow></mfenced><mo>=</mo><mfenced><mrow><mi>r</mi><mo>&#xA0;</mo><mi>cos</mi><mi>u</mi><mo>,</mo><mo>&#xA0;</mo><mi>r</mi><mo>&#xA0;</mo><mi>sin</mi><mi>u</mi><mo>,</mo><mo>&#xA0;</mo><mi>v</mi></mrow></mfenced><mspace linebreak="newline"/><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>=</mo><mfenced><mrow><mi>r</mi><mo>&#xA0;</mo><mi>cos</mi><mn>2</mn><mi>&#x3C0;</mi><mi>s</mi><mo>,</mo><mo>&#xA0;</mo><mi>r</mi><mo>&#xA0;</mo><mi>sin</mi><mn>2</mn><mi>&#x3C0;</mi><mi>s</mi><mo>,</mo><mo>&#xA0;</mo><mi>t</mi></mrow></mfenced></math>

      • 2단계 : O 매핑

        • 중개면 내부에 실제로 텍스쳐를 가할 물체를 넣고 텍스쳐를 입히는 과정



    • Mesh Parameterization

      • 3D 메쉬를 2D 파라미터 도메인으로 펼치는 과정

      • 텍스쳐 매핑, remeshing, surface 복원 및 압축에 쓰임

      • Barycentric mapping 방식 (경계선을 convex polygon에 고정시키는 방식)





        • 3D 메쉬가 주어지면, 경계선의 정점의 (u, v)좌표가 convex polygon에 놓이고 내부 정점 좌표가 이웃들의 convex 조합으로 표현된다.

        • ex)

  • 환경 매핑 / 반사 매핑 (Environmental Mapping, Reflective Mapping)

    • 1단계 : S 매핑

      • 상하전후좌우 사진을 이어붙여 접어서 육면체 중개면(Intermediate surface)을 만든다.

      • 어안렌즈를 이용하여 구한 사진을 이용하여 원구 중개면을 만들기도 한다.

    • 2단계 : O 매핑

      • 시점에서 물체면을 향한 벡터가 정반사되어 벽면에 부딪히는 곳의 텍스처를 해당 물체면의 텍스처로 프로젝션시킨다.

        <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>r</mi><mo>=</mo><mi>e</mi><mo>-</mo><mn>2</mn><mfenced><mrow><mi>n</mi><mo>&#xB7;</mo><mi>e</mi></mrow></mfenced><mi>n</mi></math>

      • 물체면 p(x, y, z)의 좌표로부터 텍스쳐 (s, t) 구하기

        <math xmlns="http://www.w3.org/1998/Math/MathML"><mi>r</mi><mo>=</mo><msqrt><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><msup><mi>y</mi><mn>2</mn></msup><mo>+</mo><msup><mi>z</mi><mn>2</mn></msup></msqrt><mspace linebreak="newline"/><mi>u</mi><mo>=</mo><mi>a</mi><mi>r</mi><mi>c</mi><mi>tan</mi><mfrac><mi>x</mi><mi>y</mi></mfrac><mo>,</mo><mo>&#xA0;</mo><mi>v</mi><mo>=</mo><mi>a</mi><mi>r</mi><mi>c</mi><mi>sin</mi><mfrac><mi>z</mi><mi>r</mi></mfrac><mspace linebreak="newline"/><mi>u</mi><mo>=</mo><mi>&#x3C0;</mi><mi>s</mi><mo>,</mo><mo>&#xA0;</mo><mi>v</mi><mo>=</mo><mi>&#x3C0;</mi><mi>t</mi><mspace linebreak="newline"/><mi>s</mi><mo>=</mo><mfrac><mi>u</mi><mi>&#x3C0;</mi></mfrac><mo>,</mo><mo>&#xA0;</mo><mi>t</mi><mo>=</mo><mfrac><mi>v</mi><mi>&#x3C0;</mi></mfrac></math>


Section 03. 안티에일리어싱

텍스쳐매핑을 할 때 텍셀은 곡선사변형이 된다.

역매핑을 할 때에도 화소도 사각형 유지가 되지 않는다. 즉 화소 1234에 해당하는 텍스쳐 abcd 내부에 청백과 백색 텍셀이 반복되고 있음에도 불구하고, 하나의 텍셀만 선택해야하기 때문에 언더샘플링으로 인한 에일리어싱이 일어난다.


  1. 텍스쳐. 점은 (b)의 화소 중앙점

  2. 정사각형에 원근투상을 가한 결과. 점은 화소 중앙점

  3. 점 샘플링 결과 -> 샘플속도가 텍스쳐의 반복속도를 따라가지 못하기 때문에 에일리어싱 발생


확장관계 : 텍셀보다 작은 크기의 텍스쳐가 한 화소로 매핑되는 것

축소관계 : 여러 텍셀에 걸친 텍스쳐가 한 화소로 매핑되는 것


  • Bilinear Interpolation(확장관계에서의 안티-에일리어싱)

    • 어떤 화소의 중앙점이 p로 매핑되었다면 선형보간으로 텍스쳐 색을 결정한다.

    • 블러링 발생

  • MIP Mapping(축소관계에서의 안티-에일리어싱)
    (축소관계)

    • 축소관계의 경우 텍셀의 평균을 구하여 해당 화소를 칠함으로써 안티-에일리어싱을 할 수 있다.

    • 텍스쳐 도메인에서 이러한 계산을 미리 수행해서 저장함으로써 처리 속도를 높인 것이 밉매핑.

    • RGB별, 해상도 별로 평균치를 계산하여 하나의 텍스쳐 맵에 저장한다.

    • = Pre-Filtering = Multi Resolution Texture

    • 결과 영상이 흐려질 수 있음


Section 04. GL 텍스쳐 매핑

  1. Enable Texturing

  • glEnable(GL_TEXTURE_1~3D)
    glDisable(GL_TEXTURE_1~3D)

  1. Texture Image 명시

  • 텍스쳐 이미지를 배열 형태로 메인 메모리에 올리기 위해 일정 크기의 텍셀로 분할하고 해당 색을 명시한다.

    • GLubyte MyTexture[Width][Height][3];
      ex)

  • 배열로 표현된 이미지를 텍스쳐 이미지로 사용하기 위해서 glTexImage2D 호출

    • void glTexImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLint format, GLenum type, const GLvoid  *pixels);
      ex) glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 8, 8, 0, GL_RGB, GL_UNSIGNED_BYTE, MyTexture);

      • target : GL_TEXTURE_1D, GL_TEXTURE_2D

      • level : 텍스쳐의 밉맵 레벨

      • internelformat : 텍셀을 기술하는데 사용된 요소

상수명

텍셀 구성요소

GL_RGBA

R, G, B, A

GL_RGB

R, G, B

GL_ALPHA

A

GL_LUMINANCE

Intensity

GL_LUMINANCE_ALPHA

Intensity, A


      • width, height : 텍셀단위로 텍스쳐 폭과 높이

      • border : 텍스쳐 윤곽선 두께 몇 텍셀로 할것인가

      • format, type : 픽셀데이터의 포맷과 타입

파라미터

상수명

의미






format

GL_COLOR_INDEX

컬러 인덱스

GL_RGB

R, G, B 값

GL_RGBA

R, G, B, A 값

GL_RED

Red 값

GL_GREEN

Green 값

GL_BLUE

Blue 값

GL_ALPHA

Alpha 값





type

GL_UNSIGNED_BYTE

unsigned 8 bit 정수

GL_BYTE

signed 8 bit 정수

GL_UNSIGNED_SHORT

unsigned 16 bit 정수

GL_SHORT

signed 16 bit 정수

GL_INT

signed 32 bit 정수

GL_FLOAT

single precision 부동소수

      • pixels : 실제 텍스쳐 이미지가 저장된 배열명

  1. Texture Mapping

  • 수동 텍스쳐 매핑(Mannual Texture Generation)

  • 자동 텍스쳐 매핑(Automatic Texture Generation)

    • GL의 텍스쳐좌표는 동차좌표(s, t, r, q)로 표시

      • q값의 변화에 의해 s, t, r값을 조절하여 텍스쳐의 원근변환 가능

      • void glHint(GLenum target, GLenum hint)을 이용하여 원근에 따른 텍스쳐 보정(Perspective Correction) 가능

    • 자동 텍스쳐 매핑을 사용하면 물체 내부의 모든 정점마다 텍스쳐 좌표가 자동으로 할당된다.이후 다각형 내부의 텍스쳐 좌표는 보간에 의해 할당된다.

    • 자동 매핑을 위해 void glTexGen*(GLenum coord, GLenum pname, TYPE param) 호출

coord

pname

param


GL_S

GL_T

GL_R

GL_Q


GL_TEXTURE_GEN_MODE

GL_OBJECT_LINEAR

GL_EYE_LINEAR

GL_SPHERE_MAP

GL_OBJECT_PLANE

평면 계수 배열(단위벡터)

GL_EYE_PLANE

평면 계수 배열(단위벡터)


자동매핑 방법에 의하면 GL의 텍스쳐 좌표는 기준평면과 물체면 정점간의 거리 d에 의해 결정된다.

  1. Texture Parameter 명시

  • 파라미터를 할당하기 위한 함수 : void glTexParameteri(GLenum target, GLenum pname, GLint  param)

target

pname(텍스쳐를 어떻게 확장할 것인가)

param(텍스쳐를 어떻게 계산할 것인가)





GL_TEXTURE_2D,

GL_TEXTURE_3D

GL_TEXTURE_WRAP_S

GL_REPEAT, GL_CLAMP

GL_TEXTURE_WRAP_T

GL_REPEAT, GL_CLAMP

GL_TEXTURE_MAG_FILTER(확장관계)

GL_NEAREST(점샘플링), GL_LINEAR(양선형 보간)



GL_TEXTURE_MIN_FILTER(축소관계)

GL_NEAREST, GL_LINEAR,

GL_NEAREST_MIPMAP_NEAREST,

GL_NEAREST_MIPMAP_LINEAR,

GL_LINEAR_MIPMAP_LINEAR,

GL_LINEAR_MIPMAP_NEAREST

GL_TEXTURE_BORDER_COLOR

Any 4 Values in [0, 1]

    • ex)

  • 하기 위한 함수 : void gluBuild2DMipmaps(GLenum target, GLint  components, GLint width, GLInt  height, GLenum format, GLenum type, const void   *data)

    • ex) gluBuild2DMipmaps(GL_TEXTURE_2D, GL_RGB, 8, 4, GL_RGB, GL_UNSIGNED_BYTE, &MyTexture)가 호출되면 이 함수는 내부적으로 다음과 같이 레벨 별 밉맵 생성 함수를 호출한다.
      - glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 8, 4, 0, GL_RGB, GL_UNSIGNED_BYTE, &MyTexture);
      - glTexImage2D(GL_TEXTURE_2D, 1, GL_RGB, 8, 4, 0, GL_RGB, GL_UNSIGNED_BYTE, &MyTexture);
      - glTexImage2D(GL_TEXTURE_2D, 2, GL_RGB, 8, 4, 0, GL_RGB, GL_UNSIGNED_BYTE, &MyTexture);
      - glTexImage2D(GL_TEXTURE_2D, 3, GL_RGB, 8, 4, 0, GL_RGB, GL_UNSIGNED_BYTE, &MyTexture);

    • 실제로 밉맵을 적용하기 위해 다음과 같은 텍스쳐 함수를 호출한다.
      - glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR_MIPMAP_LINEAR);
      - glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);

  1. Texture Environment 명시

  • 텍스쳐를 물체면에 입힐 때 물체색과 조합하기 위한 텍스쳐 환경 명시 함수 : void glTexEnv{if}(GLenum target, GLenum pname, GLenum TYPEparm);

target

pname

TYPEparm




GL_TEXTURE_ENV



GL_TEXTURE_ENV_MODE

(텍스쳐 색과 면체면 색을 어떻게 조합할 것인가)

GL_DECAL

GL_REPLACE

GL_MODULATE

GL_BLEND

GL_TEXTURE_ENV_COLOR (GL_BLEND호출 이후 사용가능)

RGBA 배열


  1. 텍스쳐 객체

  • 장면 내에 여러 물체가 있고 물체별로 서로 다른 텍스쳐를 적용하기 위해 텍스쳐 객체 개념을 사용한다.

  • 텍스쳐와 해당 텍스쳐에 적용되는 파라미터 값을 묶어서 하나의 텍스쳐 객체를 정의할 수 있다.

  • 별도의 텍스쳐 메모리에 여러 개의 텍스쳐 객체를 저장할 수 있다.