WebGL : Web Graphics Library

• 화려하고 인터랙션이 많은 그래픽을 처리할 때 사용
• OpenGL ES의 API를 웹에서 사용할 수 있도록 개발됨
• webGL 1 ver: OpenGL ES 2.0v
• WebGL 2 ver : OpenGL ES 3.0v
• GPU를 통해 렌더링 계산이 이뤄짐
• GLSL 을 지원하는 네이티브 API
• 캔버스 내부에서 작동

OpenGL

• 2차원 및 3차원 그래픽스 표준 API 규격
• 1992년 실리콘 그래픽스사에서 제작
• 그래픽, 사용자 입력, 음향 컨트롤러까지 제어하는 Direct X 와 달리 그래픽 처리만 가능
• 비영리 컨소시엄 크로노스 그룹이 관리
• OpenGL > OpenGL ES > WebGL

Shader

• 색의 농도, 색조, 명암 효과를 준다는 뜻의 단어 Shade에서 파생
• 컴퓨터 그래픽스에서는 그래픽 하드웨어의 렌더링 데이터를 게산하는데 사용되는 함수
• 정점 셰이더 Vertex Shader
• 색상 셰이더 Fragment Shader
• 컴퓨터 그래픽스에서 면을 가진 모든 물체는 가장 작은 단위, 삼각형으로 이루어져 있다.

Vertex Shader

• 3D 모델의 정점 위치, 변환, 조명 등을 계산하는 역할
• 모델을 화면에 표시하기 위한 변환 작업이 이 단계에서 수행된다.

Fragment Shader

• 픽셀 단위의 색상 계산을 담당
• 모델 표면에 있는 각 픽셀의 색상, 텍스처, 그림자 등을 계산해 최종 출력 이미지를 생성한다.

GLSL (Graphics Library Shader Language)

• OpenGL 과 WebGL 에서 사용되는 셰이더 프로그래밍 언어
• C 언어와 유사한 문법

Rendering Pipeline

• 3D 모델 데이터를 화면에 표시하는 과정을 순서대로 나타낸 개념

1. Vertex Processing
2. Fragment Processing
3. Rasterization and Output
   
   출처