용어부터 헷갈렸다
이미 만들어진 3D 소스코드를 따라가려니 용어들이 한꺼번에 나왔다. Geometry, Material, uniforms, fragmentShader. 각 단어의 설명을 들었지만, 머릿속에서 하나의 장면으로 연결되지 않았다.
Three.js를 모르는 상태에서 완성된 코드를 보고 있었다. 따라가기 어렵다고 말하고, 상자 하나를 보고 움직이는 것부터 다시 배우기로 했다.
상자와 카메라를 따로 생각하기
첫 질문은 단순했다. 상자를 회전하면 화면의 모양이 왜 달라질까? 물체의 방향이 달라져서 보이는 면이 바뀌기 때문이다. 상자의 크기를 바꾼 것과는 구분해야 한다.
다음에는 상자는 고정하고, 카메라를 오른쪽으로 옮기면서 상자의 중심을 바라본다고 생각했다. 그러면 상자의 오른쪽 면이 더 보일 것이다. 화면은 물체의 정보뿐 아니라 어디서 바라보는지에 따라서도 달라진다.
여기서 기억할 것3D 렌더링은 가상 공간의 물체와 카메라 정보를 바탕으로, 화면에 보일 한 장의 그림을 계산하는 과정이다.
Three.js 아래에는 무엇이 있을까?
브라우저에서 WebGL로 장면을 그릴 때 계산하는 기기는 내 노트북이다. Three.js는 물체와 카메라를 다루기 편하게 도와주는 라이브러리이고, 선택한 렌더러에 따라 WebGL 또는 WebGPU 같은 브라우저 API를 이용한다.
이 관계를 이해하고 나니 기술 이름을 모두 외우는 것보다 역할을 나누는 편이 쉬워졌다. 물체를 다루는 도구, 브라우저에 작업을 요청하는 창구, 실제 계산을 수행하는 장치를 구분하면 된다.
내 코드 → Three.js → WebGL 또는 WebGPU → GPU
※ 브라우저 내부와 드라이버 등의 중간 계층을 생략한 그림
다음에는 작은 장면을 직접 만들기
지금 확인한 것은 기본 관계를 설명하고 화면의 변화를 예측하는 단계다. 렌더러를 직접 구현했거나 셰이더를 숙달한 단계는 아니다.
다음에는 Three.js로 상자 하나를 만들고, 좌표 하나씩 바꿔 보려 한다. 이후 같은 삼각형을 WebGL과 WebGPU로 그리면서 도구가 대신해 주던 일을 알아볼 계획이다. WebGL을 전부 익혀야 WebGPU로 넘어갈 수 있는 것은 아니다.