[6기 수원 최웅엽] WebGL 기초

WebGL은 웹에서 동작하는 그래픽 기반 라이브러리입니다.

정확히는 GPU로 바인딩되는 자바스크립트 API입니다.

웹이기 때문에 다른 어떠한 플러그인도 필요로 하지 않다는 것이 큰 장점으로 특히나 3D를 표현할 경우 좋은 방법이 됩니다.

1. WebGL 시작

간단하게 canvas태그를 붙이고 javascript를 사용하여 만들 수 있습니다.

위의 코드는 캔버스에 WebGL을 세팅하는 과정입니다. 이때 GL을 지원하지 않는 브라우저는 경고가 뜨게 됩니다.

또한 clearColor는 canvas를 구성하는 gl의 배경색을 지정하는 것입니다.

그 결과로 회색의 canvas화면을 볼 수 있습니다.

2. WebGL의 셰이더

물체를 화면에 그릴 때 Directx나 openGL을 사용할 경우 직접 그리거나 3D파일을 로드합니다. 그리고 물체의 겉에 텍스쳐와 셰이더를 이용하여 보다 사실적인 그래픽 효과를 구현하게 됩니다.

WebGL에서도 이와 마찬가지로 Shader를 사용할 수 있습니다. 

shader는 c언어와 비슷한 형태를 가지고 있습니다.

위의 코드는 shader를 설정하는 코드입니다. 셰이더에는 두가지 설정이 필요합니다. 버텍스 셰이더와 픽셀 셰이더 입니다. 

첫 script는 버텍스 셰이더를 설정하는 것으로 이때 vec3와 vec4는 3차원 벡터와 4차원 벡터를 나타내는 것입니다. 

aVertexPosition이 3차원 벡터이므로 이에 1.0을 더 넣은 gl_Position은 4차원 벡터가 됩니다.

아래의 script는 픽셀 셰이더를 설정하는 것으로 간단하게 하얀색의 픽셀 색을 설정하였습니다.

이 코드는 앞에서와 마찬가지로 gl을 세팅하고 배경을 설정하고 있습니다. 그리고 gl이 초기화가 된다면 셰이더를 세팅하고 그려주게 됩니다.

위의 코드는 셰이더를 나타내는 코드를 Shader로 compile하게 만들어 주는 과정입니다. 그리고 이 셰이더를 사용할 프로그램을 만들어 사용하게 됩니다.

마지막으로 x, y, z로 이루어진 3차원 좌표로 물체를 나타내고 이를 VBO라는 buffer객체를 사용하여 그려주는 과정입니다.

지금은 기본적인 2차원 그림을 그리기 때문에 z의 값이 0.0로 초기화 했습니다. 

그리고 drawScene함수에서 program에 attach한 shader의 변수에 담긴 정보를 가져와서 그 정보를 통해 그리게 됩니다.

그리고 이를 실행하면 위와 같은 두개의 삼각형이 그려지는 것을 확인할 수 있습니다. 

3. 3차원 물체를 그리는 방법과 이해

Directx와 openGL, WebGL은 모두 3차원의 물체를 그릴 수 있습니다. 그리고 물체가 3차원처럼 보이게 만들기 위해서 rendering pipline을 가지고 있습니다. 

첫번째로 모든 물체를 배치합니다. 이때의 물체는 자신의 좌표를 가지고 있지 않습니다.

다음으로 물체를 원하는 위치에 배치합니다. 그리고 물체의 회전이나 크기변환도 하게 됩니다.

다음으로 물체를 바라볼 view를 설정하고 

이 view에 따라 viewport를 설정하여 물체의 위치나 원근감을 표현하게 됩니다.

그리고 절두체 컬링이나 멀리있는 물체를 자세하게 그리지 않거나 하는 여러가지 기법이 적용되어 우리가 볼 수 있는 3차원의 그림이 완성됩니다.

현재는 기본적인 view로 설정이 되어 있기 때문에 조금만 설정을 해 보겠습니다.

3. 뷰 

간단하게 view port를 변경해 보았습니다. 

아까와 달리 물체가 멀어진 것을 볼 수 있습니다.

후에 카메라를 만들고 카메라 이동을 구현할 때 조금 더 자세히 변경해 보겠습니다.

4. 셰이더 색 넣기

지금까지는 하얀색의 물체지만 이 물체에 색을 넣을 수 있습니다. 보통 이 작업은 셰이더로만 하는 것이 아니라 텍스쳐를 입힌 후 텍스쳐의 광채나 그림자 빛의 정반사 난반사 등을 셰이더를 통해 처리하여 보다 좋은 퀄리티의 물체를 랜더링합니다.

지금은 간단하게 셰이더에 색을 어떻게 넣는지만 알아보겠습니다.

버텍스 셰이더의 코드에 Color에 관한 코드를 추가하였습니다. 

이때 아까와는 다르게 색에 관한것을 버텍스 셰이더에서 처리한 후 픽셸 세이더는 이를 이용하는 것을 볼 수 있습니다. 픽셸 셰이더에서 하는 일을 버텍스 셰이더에서도 할 수 있고 반대의 경우도 있는데, 어디에 일을 할당하는 것이 더 좋은지는 물체를 어떻게 그리려고 하는지에 따라 달라집니다.

이것은 나중에 더 알아보겠습니다.

color를 설정하기 위한 variable이 늘어난 것을 알 수 있습니다.

셰이더를 만드는 코드는 바뀌지 않습니다.

triangleVerticeColors라는 array를 만들어 각 픽셀에 대한 색을 지정해 주고 있습니다.

순서대로 r,g,b값으로 간단하게 1.0 과 0.0으로 이루어져 있습니다.

그리고 다른 부분은 기존의 물체를 그리는 것과 똑같은 방법입니다.

코드를 실행하면 색이 들어가 있는 삼각형을 보실 수 있습니다.

실제로 물체를 그릴 경우에는 지금과 같이 직접 정점을 찍는 것이 아니라 3DMAX나 MAYA로 만들어진 obj를 불러오고 텍스쳐를 입혀서 셰이더를 적용해 물체를 배치시키는 작업을 하게 됩니다.

이번 목표는 webgl에서 물체를 그리는 법과 셰이더를 사용하는 법 그리고 전체적인 flow를 설명하는 것이었습니다. 

다음에는 물체를 이동하고 카메라를 만들어 보겠습니다.