[WebGL] 셰이더(Shader)란 무엇인가?

 

셰이더가 무엇인가?

셰이더(Shader)는 그래픽 처리 장치(GPU)에서 실행되는 프로그램이다. 3D 장면의 렌더링 과정에서 빛, 그림자, 색상 등 시각적 효과를 계산하고 조절하여 사실적인 렌더링을 구현한다. 셰이더는 버텍스 셰이더(Vertex Shader, 위치 계산)와 프래그먼트 셰이더(Fragment Shader, 픽셀)로 나뉜다. 이를 통해 빛의 반사, 표면 질감 표현, 물결 효과 등 다양한 시각 효과를 만드는데 사용된다.

 

이게 쉐이더랑 무슨 관련이 있는 그림인가?

왜 셰이더가 필요한가?

GPU는 CPU처럼 일반 명령어를 실행하는 구조가 아니다. WebGL은 GPU 파이프라인에 셰이더 프로그램(vertex + fragment)을 올려놓고, 데이터를 버퍼에 넣어 GPU에 전달한다. CPU는 "데이터를 GPU에 넘기고 > 어떤 방식으로 처리할지(셰이더 코드) > 언제 그릴지"만 결정한다. 결국 GPU가 이해할 수 있는 건 셰이더 코드뿐이다.

WebGL 파이프라인의 기본 구성 요소

WebGL에서 가장 기본적인 파이프라인은 다음과 같이 나눠진다.

Vertex Shader

• 입력: 각 버텍스(vertex) 좌표, 속성(색상, 텍스처 좌표 등)
• 출력: 화면 공간 좌표(clip space)
• matrix 인자를 여기서 곱해 projection/view 변환을 처리합니다.

Fragment Shader

• 입력: vertex shader에서 보간된 값
• 출력: 픽셀 색상 (최종적으로 화면에 보이는 결과)

최소 셰이더 예시 (GLSL)

// Vertex Shader (단순 좌표 변환)
attribute vec2 a_position;
uniform mat4 u_matrix;

void main() {
  gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);
}

// Fragment Shader (단색 출력)
precision mediump float;

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 빨간색
}

Reference

• https://thebookofshaders.com/