하루공부 ] WebGL

WebGL

- web에서 script를 통해 그래픽을 구현하는 것

- 필요에 따라 간단하게 학습하면서 생각나는 일부분을 정리합니다.

 

버텍스 셰이더(Vertex shader)

버텍스 셰이더는 한국말로 꼭지점 및 정점 셰이더라고 불려도 될까요? 어쨌든 각 정점의 위치를 계산하는 역할을 하기 위해 버텍스 셰이더 함수가 호출됩니다. 작성된 함수가 최종적으로 반환하는 정점을 기준으로 점, 선 또는 삼각형을 비롯한 다양한 종류의 도형을 래스터화 할 수 있습니다. 이렇게 래스터화되면 그 다음으로 프래그먼트 셰이더의 함수가 호출됩니다.

 

프래그먼트 셰이더(fragment shader)

프래그먼트 셰이더는 버텍스 셰이더에 의해 래스터화된 도형 내에 각 픽셀에 들어가는 색상을 계산합니다.

2개의 셰이더의 역할을 더 쉽게 설명하자면, 버텍스 셰이더는 흰 도화지에 윤곽선을 그리는 행위를 한다면, 프래그먼트 셰이더는 물감으로 색을 칠하는 행위를 담당한다고 하면 이해가 편할까요? 사실은 셰이더가 그린다기 보다 셰이더는 GPU에게 그림을 그리도록 명령하는 것하는 것이고 그 결과가 모니터 화면에 출력되는 것이겠지요. ^^

버퍼 (바이너리 배열 데이터)

- 위치, 법선, 텍스처 좌표, 버텍스 색 정보

 

애트리뷰트 

- 버텍스 세이더에 버퍼의 정보를 전달하는 방법을 지정
- 3개 위치 32비트 => 버퍼에 쓰인 데이터가 버퍼의 어느 위치에 있고 몇 개를 어느 정도의 크기로 가져와야 하는 지 알려줌
( 1,1,0,1,1,1,1,1,1 를 

1,1,0,   이런 형태로 알려줌 )
1,1,1,
1,1,1

 

유니폼

- 세이더를 실행하기 전 정의하는 전역 변수
- 행렬 정보, 특정 필터 정보, 뷰포트 정보를 정의 해주면 셰이더가 이를 참고할 수 있음

텍스쳐

- 셰이더에서 무작위로 접근이 가능한 배열 데이터
- 쉽게 이미지 데이터 정보

배어링

- 버텍스 셰이더에서 프래그먼트 셰이더로 데이터를 전달하는 방법을 제공
- 특정 보간 처리를 수행
- 배어링은 버텍스 셰이도, 프래그먼트 셰이더 둘 다에서 선언되어야 함