API의 큰 틀과 보안 아키텍처에 대한 논의가 어느 정도 일단락되자, WebGL 워킹 그룹은 마침내 기술의 가장 깊고 핵심적인 부분으로 들어갔다. 바로 ‘셰이더(Shader)’였다.
만약 WebGL이 GPU와 대화하는 언어라면, 셰이더는 그 대화의 내용 그 자체였다.
셰이더는 개발자가 직접 작성하여 GPU 위에서 직접 실행시키는 작은 프로그램이다. GPU 내부에 존재하는 수천 개의 병렬 코어가 동시에 이 프로그램을 실행하며, 3D 객체의 형태를 만들고 표면의 색을 결정하는, 그래픽 렌더링 파이프라인의 가장 핵심적인 두 단계를 책임진다.
이것은 WebGL이 과거의 고정 기능 파이프라인을 버리고 프로그래머블 모델을 택했기 때문에 가능한, 가장 혁신적인 부분이었다.
워킹 그룹의 테이블 위에 두 종류의 셰이더가 안건으로 올랐다.
첫 번째는 ‘정점 셰이더(Vertex Shader)’였다.
3D 모델은 수많은 ‘정점(Vertex)’ 즉, 3차원 공간상의 점(x, y, z)들의 집합으로 이루어져 있다. 정점 셰이더의 임무는 이 각각의 점 하나하나에 대해 실행되며, 그 점의 최종 위치를 결정하는 것이다.
“정점 셰이더의 입력은 모델의 원래 정점 좌표가 될 겁니다.”
엔비디아의 엔지니어가 화이트보드에 그림을 그리며 설명했다. “그리고 이 셰이더는 그 좌표를 받아서, 모델의 위치, 회전, 크기 변환, 그리고 카메라의 시점까지 모두 계산한 최종 결과, 즉 2D 화면상의 좌표를 출력으로 내보내야 합니다.”
쉽게 말해, 3D 공간에 놓인 모델의 점들을 우리가 보는 2D 모니터 화면의 어느 위치에 찍어야 할지를 계산하는 프로그램이다. 이 셰이더 코드를 어떻게 짜느냐에 따라, 캐릭터가 앞으로 걸어가거나, 깃발이 바람에 펄럭이는 등의 모든 움직임이 구현될 수 있었다.
두 번째는 ‘프래그먼트 셰이더(Fragment Shader)’였다. 정점 셰이더가 형태를 결정했다면, 프래그먼트 셰이더는 색상을 결정한다.
정점 셰이더에 의해 형태가 잡힌 3D 모델(주로 삼각형들의 집합)은 2D 화면에 투영된 후, 화면을 구성하는 작은 점들, 즉 ‘픽셀(Pixel)’로 변환된다. 이 과정을 ‘래스터라이제이션(Rasterization)’이라 부른다.
프래그먼트 셰이더의 임무는 바로 이 각각의 픽셀 하나하나에 대해 실행되며, 그 픽셀을 최종적으로 어떤 색으로 칠할지를 결정하는 것이다.
“프래그먼트 셰이더는 픽셀의 최종 색상을 결정하는 예술가와 같습니다.”
AMD의 엔지니어가 말을 이었다. “조명의 방향, 물체의 색상, 표면의 질감(텍스처) 등 다양한 정보를 입력으로 받아서, 복잡한 계산을 통해 최종 RGBA(빨강, 초록, 파랑, 투명도) 값을 출력으로 내보냅니다.”
이 셰이더 코드를 어떻게 짜느냐에 따라, 물체의 표면이 매끄러운 금속처럼 보일 수도, 거친 나무처럼 보일 수도 있었다. 사실적인 그림자를 만들고, 물에 비친 반사 효과를 구현하는 모든 마법이 바로 이 프래그먼트 셰이더 안에서 일어난다.
블라디미르는 이 두 셰이더의 개념을 웹으로 가져오는 것이 WebGL의 성패를 가를 것이라 직감했다. 이것은 웹 개발자들에게 전에는 상상도 할 수 없었던 권한을 주는 것이기 때문이다.
지금까지 웹 개발자는 브라우저가 제공하는 기능(HTML 렌더링, CSS 스타일링)을 사용하는 ‘소비자’에 가까웠다. 하지만 셰이더를 통해, 그들은 이제 브라우저의 렌더링 과정에 직접 개입하여 GPU를 제어하는 ‘생산자’가 될 수 있었다.
하지만 이 강력한 권한에는 책임이 따랐다.
개발자가 작성한 셰이더 코드는 어떻게 브라우저에 전달하고, 어떻게 컴파일하며, 어떻게 보안을 검증할 것인가? 셰이더를 작성하기 위한 언어는 무엇을 써야 하는가?
가장 본질적인 부분에 다다르자, 워킹 그룹의 논쟁은 다시 한번 깊어지기 시작했다. 그들은 지금 GPU의 영혼에 코드를 새겨 넣는 방법, 즉 웹의 미래를 그리는 가장 근본적인 규칙을 정하고 있었다.
