최초의 삼각형, Hello, World!를 외치다.

모든 프로그래밍 언어에는 일종의 통과의례가 있다. 화면에 “Hello, World!”라는 문자열을 출력하는 것. 그것은 새로운 언어와의 첫 만남이자, 가장 기본적인 입출력 구조가 성공적으로 동작함을 확인하는 의식과도 같다.

WebGL의 세계에도 그와 같은 ‘Hello, World!’가 있었다.
그것은 바로, ‘화면에 삼각형 하나를 그리는 것’이었다.

WebGL 1.0 공식 발표 이후, 전 세계의 호기심 많은 개발자들은 너도나도 이 새로운 세계의 ‘Hello, World!’에 도전하기 시작했다. 그들은 빈 HTML 파일을 열고, 키보드 위에 손을 올렸다.

하지만 그 과정은 결코 간단치 않았다. console.log("Hello, World!"); 단 한 줄로 끝나는 자바스크립트와는 차원이 달랐다. 삼각형 하나를 그리기 위해, 개발자는 GPU와 대화하는 지난하고도 정교한 절차를 모두 따라야 했다.

1. HTML 설정:
   먼저, 그림을 그릴 도화지, <canvas> 태그를 HTML 문서에 추가해야 했다.

2. WebGL 컨텍스트 얻기:
   자바스크립트로 캔버스 요소를 가져와 getContext('webgl')을 호출한다. 만약 브라우저가 WebGL을 지원하지 않으면 이 함수는 null을 반환할 것이므로, 예외 처리는 필수였다.

3. 셰이더 작성 및 컴파일:
   가장 기본적인 정점 셰이더와 프래그먼트 셰이더 코드를 자바스크립트 문자열로 작성해야 했다.

• 정점 셰이더: 입력으로 들어온 정점 위치를 그대로 출력(gl_Position)으로 내보낸다.
• 프래그먼트 셰이더: 모든 픽셀을 특정 단색(예: 빨간색)으로 칠한다(gl_FragColor).

그리고 이 문자열들을 gl.createShader, gl.shaderSource, gl.compileShader 함수를 통해 각각 컴파일했다.

4. 셰이더 프로그램 링크:
   컴파일된 두 셰이더를 하나의 ‘프로그램’으로 묶어야 했다. gl.createProgram, gl.attachShader, gl.linkProgram, gl.useProgram 함수를 차례대로 호출하는 과정이었다.

5. 데이터 준비 및 버퍼 생성:
   삼각형을 구성할 세 개의 정점 좌표 데이터를 Float32Array 형태로 준비했다.
   const vertices = new Float32Array([ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]);
   그리고 이 데이터를 gl.createBuffer, gl.bindBuffer, gl.bufferData를 통해 GPU 메모리에 업로드했다.

6. 데이터와 셰이더 연결:
   GPU에 올라간 데이터가 정점 셰이더의 a_position이라는 attribute 변수에 해당함을 알려줘야 했다. gl.getAttribLocation으로 변수의 위치를 찾고, gl.vertexAttribPointer와 gl.enableVertexAttribArray로 연결고리를 완성했다.

7. 렌더링:
   마침내, 이 모든 준비가 끝난 후에야 gl.drawArrays(gl.TRIANGLES, 0, 3) 함수를 호출할 수 있었다. 이 한 줄의 명령이 GPU에게 “지금까지 준비된 모든 것을 바탕으로, 3개의 정점을 이용해 삼각형을 그려라!”고 최종 지시를 내리는 것이다.

수십 줄에 달하는 이 복잡한 코드를 모두 작성하고 브라우저에서 실행했을 때, 화면 중앙에 붉은색 삼각형 하나가 덩그러니 나타나는 순간.

수많은 개발자들이 환호성을 질렀다.

그것은 단순한 도형이 아니었다. 그것은 개발자가 CPU와 GPU, 자바스크립트와 GLSL, 브라우저와 드라이버 사이의 복잡한 통신 과정을 모두 자신의 손으로 직접 조율하여 얻어낸 값진 결과물이었다.

그들은 자신의 블로그와 트위터에 직접 그린 삼각형 이미지를 인증샷처럼 올리기 시작했다. “나도 WebGL의 Hello World에 성공했다!”는 글들이 커뮤니티를 가득 메웠다. 코드 몇 줄을 복사-붙여넣기 한 사람부터, 각 함수의 의미를 하나하나 파헤치며 며칠 밤을 새운 사람까지, 모두가 새로운 시대의 개막을 자신만의 방식으로 자축했다.

이 ‘최초의 삼각형’ 열풍은 WebGL의 높은 진입 장벽을 역설적으로 보여주는 동시에, 그 장벽을 넘었을 때의 성취감이 얼마나 큰지를 증명하는 현상이 되었다. 개발자들은 이 복잡한 과정을 통해 GPU가 어떻게 그림을 그리는지에 대한 근본적인 원리를 온몸으로 체감할 수 있었다.

WebGL의 ‘Hello, World!’는 단순히 기술의 동작을 확인하는 것을 넘어, 개발자들에게 3D 그래픽스의 기본 원리를 가르치는 훌륭한 튜토리얼이 되어주고 있었다. 새로운 세대의 그래픽스 프로그래머들이, 바로 이 삼각형 위에서 탄생하고 있었다.