해당 글은, WebGL을 공부하며, 느낀 부분을 일기장 형식으로 기록해 둔 것입니다. 2025년 05월 10일을 기준, 공부하며 느낀 부분을 기록하고, 이후 틀린 부분이 있거나 제가 잘못 알고 있는 지식을 정정하기 위해 글을 남기려 합니다.

따라서, 해당 글을 참조로써 개념을 정의하시면 곤란합니다. 아래의 글은 제가 공부하며 느낀 감상을 주제로 적은, 하나의 성장기로써 읽어주시길 바랍니다.

2025년 5월 10일의 나는

1. Three.js와 gsap을 사용한 3D animation 작업을 완성시켰다.
2. 위 작업은, Next.js, TS를 기반으로 빌드 되었으며, firebase hosting, functions 서비스를 사용해 production 상태로 만들었다 (shinmini.com)
3. Three.js와 gsap을 이용한 animation, 그리고 Next.js의 SSR, CSR rendering, 마지막으로 해당 객체 및 API들의 타입(TS)을 모두 맞물리게 하기 위해 상당한 고생을 했다.
4. 이렇듯 Three.js에 대해 잘 모르는 상태에서, 몸으로 부딪치며, 수많은 에러를 겪고 개념을 쌓았지만, Three.js의 내부 상태 관리, 그리고 브라우저 내에서 맞물리는 렌더링 상태 관리에 대한 궁금증이 더 커져, Three.js를 구성한 WebGL 그 내부에 대해 더 파헤쳐 보고자 한다.
5. 하지만, YouTube, Googling을 통해 검색해 보아도, 내가 원하는 형식의 정리 글이 나오지 않아 천천히, 공부하며 글을 정리해, 누군가에게 도움이 되길 바라며 포스팅을 해보기로 결심한다.

WebGL이란 무엇인가?

WebGL(Web Graphics Library)은 웹 브라우저에서 플러그인 없이 2D 및 3D 그래픽을 렌더링하기 위한 JavaScript API입니다. OpenGL ES 2.0을 기반으로 하며, HTML5 <canvas> 요소와 함께 사용되어 웹 페이지 내에서 하드웨어 가속을 통해 인터랙티브한 그래픽을 구현할 수 있도록 합니다.

한줄요약: Web에서, 랜더링을 위해 GPU를 활용할 수 있게 해주는 JS API이다.

WebGL은 두 가지 버전으로 구분된다.

1. webgl
   • used in a previous version of WebGL
2. webgl2
   • necessary for WebGL2
   • provides new functions, optimizations, and speed improvements

해당 글에서는 webgl2에 대해 집중적으로 다룰 예정이다.

먼저, 코드를 통해 webgl을 사용해보고, 직관적으로 파악해보자.

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2');

const program = gl.createProgram();

gl.useProgram(program);

이때 콘솔창을 살펴보면, 아래와 같은 경고 메세지를 준다.