OpenGL
컴퓨터 상에서 2차원 또는 3차원의 그래픽을 처리하는 라이브러리이다. Open Graphics Library라는 뜻으로, 1992년에 실리콘 그래픽스사에서 제작했다. 그래픽, 사용자 입력, 음향 컨트롤러 제어까지 하는 DirectX와 달리 그래픽 처리만 가능하다. 현재는 그로노스 그룹(Khronos Group)이라는 비영리 산업체 컨소시엄에서 관리하고 있다.
웹에서는 OpenGL ES를 래핑한 WebGL을 사용하고 있다. WebGPU라는 최신 그래픽스 API가 나왔으나, 아직 브라우저 호환성이 부족하고 작품을 만들기위한 레퍼런스가 많이 없다.
WebGL
웹에서 그래픽을 처리할 때 사용하는 기술. 쉽게 말해 웹에 그림을 그리는 기술이다. 그래픽 연산 비용이 많이 필요한 화려하고 인터랙션이 많은 그래픽을 웹에서 처리할 때 사용한다.
OpenGL ES의 API를 웹에서 사용할 수 있도록 개발되었다.
WebGL을 사용하는 가장 큰 이유 중 하나는 GPU를 통해 계산이 이뤄지기 때문에 CPU에 의해 렌더링 계산이 이루어지는 일반적인 자바스크립트 코드보다 훨씬 더 빠른 그래픽 처리가 가능하다. 그래서 매 프레임마다 화면이 바뀌고 화려하면서 인터랙션이 많은 사이트를 개발하기 위해선 WebGL을 사용해야 하는 것이다.
WebGL 작업 과정
- Canvas API로 WebGL Context를 가져온다.
1-1. html에서 canvas 태그를 작성
1-2. querySelector로 가져온 후 webGL context를 가져와 작업 (canvas가 일종의 브릿지 역할) - 정점 셰이더와 색상 셰이더 코드를 작성해 WebGL Context로 전달한다.
2-1. createShader 쉐이더 생성
2-2. compileShader 호출 - GPU Process에서 WebGL Rendering Pipeline에 따라 각 픽셀이 계산된다.
- 계산된 픽셀값이 Canvas에 렌더링 된다.
Shader는 뭔가요?
색의 농도, 색조, 명암 효과를 준다는 뜻의 단어 Shade에서 파생된 단어.
컴퓨터 그래픽스에서는 그래픽 하드웨어의 렌더링 데이터를 계산하는데 사용되는 함수이다. 쉽게 말해 셰이더 = 그림을 그리는 함수!
- 정점 셰이더 Vertex Shader
- 클립 공간의 좌표를 생성하는 함수
셰이더 함수를 작성할 때 쓰는 언어는 JS는 아니고 C언어와 유사한 GLSL이라는 언어이다.
- 색상 셰이더 Fragment Shader
- 영역 안에 있는 각 픽셀의 색상을 지정해주는 함수
- gl_FragColor라는 전역변수에 색상 데이터를 넘겨주면 색상을 지정할 수 있다.
WebGL 라이브러리
한땀한땀 말고.. 라이브러리 쓰면 쉽다.
대표적인 라이브러리로는 PixiJS, three.js, babylon.js 등이 있다.
Three.js
- 웹 브라우저에서 3차원 컴퓨터 그래픽스를 처리하기 위해 사용하는 자바스크립트 라이브러리
- WebGL에서 자주 쓰이는 함수를 래핑해서 손쉽게 사용할 수 있는 인스턴스를 제공
- 커뮤니티가 활성화 되어있고 레퍼런스가 가장 많음
- Creative coding 하는 사람들에게 일반적으로 추천
Three.js 작업 과정
Three.js 작업 과정은 영화 촬영 과정과 유사하다.
1. 씬(장면) 인스턴스를 생성한다.
2. 장면에 넣고 싶은 물체 인스턴스를 생성한다.
렌더러를 생성 후 카메라에 담긴 씬을 렌더링 한다.
물체(Mesh)는 Geometry와 Material로 이루어져 있다.
참고
