텍스처(Texture), 모델에 옷을 입히다.

버퍼를 통해 3D 모델의 기하학적 형태를 GPU에 전달하는 길이 열렸지만, 그것만으로는 충분하지 않았다. 밋밋한 단색의 모델은 생동감이 없었다. 진짜 같은 벽돌 벽, 사실적인 피부, 반짝이는 금속 표면을 표현하려면 그 위에 ‘이미지’를 입혀야 했다.

그래픽스 세계에서 이 ‘이미지’를 텍스처(Texture) 라고 불렀다.
텍스처는 단순히 2D 이미지를 넘어, 3D 모델의 표면에 대한 무한한 시각 정보를 담는 데이터의 보고였다. 워킹 그룹의 다음 과제는 이 텍스처를 어떻게 WebGL로 가져와 사용할 것인지를 정의하는 것이었다.

텍스처를 다루는 과정은 버퍼와 놀랍도록 유사한 패턴을 따랐다.

1. 텍스처 객체 생성 (Create):
   gl.createTexture() 함수를 호출하여 비어있는 텍스처 객체를 만든다.

2. 텍스처 바인딩 (Bind):
   gl.bindTexture(target, texture) 함수를 사용해 작업할 텍스처를 지정한다. 버퍼와 마찬가지로 WebGL은 한 번에 하나의 텍스처에만 집중한다. target 인자로는 주로 gl.TEXTURE_2D(일반적인 2D 이미지)나 gl.TEXTURE_CUBE_MAP(하늘이나 주변 환경을 표현하는 데 쓰이는 6장의 이미지)이 사용되었다.

3. 데이터 업로드 (Upload):
   gl.texImage2D() 함수를 통해 실제 이미지 데이터를 GPU 메모리에 업로드한다. 바로 이 함수에서 WebGL의 진정한 힘, 즉 웹 플랫폼과의 완벽한 통합이 빛을 발했다.

네이티브 OpenGL에서는 보통 파일에서 읽어온 픽셀 데이터 배열을 이 함수에 넘겨주었다. 하지만 WebGL에서는 그럴 필요가 없었다. texImage2D 함수의 data 인자에는 웹 개발자에게 너무나도 익숙한 HTML 요소들을 직접 전달할 수 있었다.

<img> (이미지 태그)
<canvas> (캔버스 태그)
<video> (비디오 태그)

“이것이 바로 우리가 플러그인을 거부하고 네이티브 방식을 고집한 이유입니다.”
블라디미르가 회의에서 힘주어 말했다. “상상해 보십시오. 사용자가 업로드한 프로필 사진(<img>)을 3D 아바타의 얼굴에 바로 입힐 수 있습니다. 다른 캔버스에 그린 그림(<canvas>)을 3D 책 표지로 사용할 수도 있습니다. 심지어 재생 중인 비디오(<video>)를 3D 공간의 TV 화면에 실시간으로 스트리밍할 수도 있습니다!”

그의 말은 회의장에 있던 모든 엔지니어들의 머릿속에 새로운 가능성을 그려주었다. 텍스처는 더 이상 정적인 이미지가 아니었다. 웹페이지의 살아있는 모든 시각적 요소가 3D 공간의 재료가 될 수 있었다.

4. 텍스처 파라미터 설정 (Configure):
   이미지를 그냥 입히는 것만으로는 부족했다. 이미지가 모델보다 크거나 작을 때 어떻게 처리할지(Wrapping), 이미지를 확대하거나 축소할 때 픽셀을 어떻게 부드럽게 처리할지(Filtering) 등을 결정해야 했다.

gl.texParameteri() 함수를 통해 이러한 세부 사항들을 설정할 수 있었다. gl.TEXTURE_WRAP_S, gl.TEXTURE_WRAP_T 옵션으로 이미지 반복 여부를, gl.TEXTURE_MIN_FILTER, gl.TEXTURE_MAG_FILTER 옵션으로 필터링 방식을 지정했다.

5. 셰이더에서 사용 (Use):
   모든 준비가 끝나면, 개발자는 프래그먼트 셰이더에서 sampler2D라는 특별한 타입의 uniform 변수를 선언하고, texture2D() 함수를 사용해 텍스처의 특정 좌표(텍스처 좌표, UV)에 해당하는 색상 값을 읽어올 수 있었다.

// 프래그먼트 셰이더 코드
varying vec2 v_texCoord; // 정점 셰이더로부터 보간된 텍스처 좌표
uniform sampler2D u_sampler; // 텍스처 데이터

void main() {
    // 텍스처의 특정 좌표에서 색상 값을 가져와 최종 색상으로 결정
    gl_FragColor = texture2D(u_sampler, v_texCoord);
}

이 구조는 WebGL에 생명을 불어넣었다. 버퍼가 3D 모델의 뼈와 근육을 만들었다면, 텍스처는 그 위에 피부와 옷, 그리고 표정을 입히는 역할을 했다.

워킹 그룹은 이 강력하고 유연한 텍스처 시스템을 WebGL 표준으로 확정했다. 이제 웹 개발자들은 웹페이지의 모든 시각적 자산을 활용하여 무한에 가까운 질감을 표현할 수 있는 도구를 갖게 될 터였다. 3D 모델을 움직이게 할 수학적 기반을 논의할 때가 다가오고 있었다.