웹지엘 소개

https://book.naver.com/bookdb/book_detail.nhn?bid=9188545 

WebGL을 활용한 3D 그래픽 프로그래밍

어렵다.. 

---

그래픽 장치 다이어그램

그래픽 장치와 연관된 하드웨어를 간단히 표시한 다이어그램

GPU

• 화면에 그려지는 그래픽 데이터를 생성하는 역할을 전담하도록 설계된 장치
• 보통 파이프라인을 통과해 여러 단계별로 데이터가 이동하는 방식으로 작동(아래에서 GPU 그래픽 파이프라인에 대응하는 개념적인 웹지엘 그래픽 파이프라인에 대해 알아볼 것)

프레임 버퍼

• 그래픽 데이터가 GPU 파이프라인을 순회할 때, 마지막으로 도착하는 곳, 화면에 그려지는 최종 이미지 정보를 담고 있는 메모리
• 보통 GPU에 부착된 매우 빠른 메모리를 사용하거나, GPU와 매우 근접한 별도의 칩으로 분리
• 세 개의 하부 버퍼로 구성
  • 색상 버퍼
  • Z 버퍼
  • 스텐실 버퍼

색상 버퍼

 

• RGB 또는 RGBA 포맷으로 표현되는 색상 정보를 담고 있는 스크린상의 각 픽셀 정보를 저장하는 직사각형 형태의 메모리 구조

Z 버퍼

• 특정 시점에서 관측 가능한 3D 장면의 오브젝트를 표현하는 색상 정보를 담고있는 버퍼. 가려진 오브젝트를 판별하기 위해 그래픽 하드웨어는 깊이 버퍼라 불리는 Z 버퍼의 지원을 받음.

스텐실 버퍼

• 색상 버퍼의 특정 위치에 오브젝트가 그려지는 모양을 조정함. 대표적으로 그림자를 표현하는 데 사용됨.

텍스쳐 메모리

3D 그래픽의 매우 중요한 기능은 표면에 텍스쳐를 입히는 것.

 

텍스쳐를 입힌다는 것은 접착제를 이용해 기하 오브젝트의 표면에 이미지를 붙이는 것으로 생각할 수 있고, 이를 빠르고 효율적으로 접근 가능하도록 GPU 안에 저장하는 메모리.

 

비디오 컨트롤러(비디오 제너레이터)

색상 버퍼를 라인 단위로 일정 주기로 훑으며 화면을 갱신

---

웹지엘 그래픽 파이프라인

웹지엘을 이용하고자 하는 웹 애플리케이션은 보통 HTML + CSS + 자바스크립트 + 셰이더 코드와 3D 모델을 구성하는 데이터로 이루어져 있다.

웹지엘 실행에 필요한 것은 모두 브라우저에 내장되어 있다. 자바스크립트가 웹지엘 API를 호출해 렌더링할 3D 오브젝트의 정보를 웹지엘 파이프라인으로 전송한다. 이 정보는 버텍스 셰이더, 프래그먼트 셰이더, 3D 오브젝트의 정보를 포함한다.

데이터가 웹지엘 파이프라인을 다 순회하고 나면, 결과는 그리기 버퍼에 쓰여진다. 그리기 버퍼는 프레임 버퍼와 같이 색상 버퍼, Z 버퍼, 스텐실 버퍼를 포함한다. 그러나 그리기 버퍼의 결과는 화면에 그려질 정보를 저장하는 물리적 버퍼에 그려지기 전에 나머지 HTML 페이지의 내용과 결합된다.

웹지엘 그래픽 파이프라인