[WebGL - regl] (2) regl 예제 속 GLSL 코드 해석

 

◼︎ 셰이더 코드 & GLSL 기본 코드해석

* 셰이더 코드:

- Graphics Programming에서 GPU가 화면에 렌더링할 그래픽을 제어하기 위해 작성하는 프로그램

- 그래픽스 카드의 GPU에서 직접 실행이 된다.

 

→ 버텍스 셰이더 (Vertex Shader)

: 각 정점의 위치를 반환하고, 정점의 속성(색상, 좌표) 처리

- 입력 : 정점 데이터 입력 받음

- 출력 : 반환된 정점 위치와 관련 정보 출력

 

→ 프래그먼트 셰이더 (Fragment Shader)

: 화면의 각 픽셀에 색상 값을 계산

- 입력 : 각 픽셀의 데이터 입력 받음

- 출력 : 최종 색상 값을 화면에 출력

---

* GLSL: GPU에서 실행되는 셰이더 프로그램을 작성하는 언어

 

◼︎ vec2 : 2차원 벡터 

- 2개의 부동 소수점 값으로 구성

(2D 좌표 표현 - 2개의 실수 값 필요)

 

◼︎ vec4 : 4차원 벡터

- 4개의 부동 소수점 값으로 구성

(3D 공간 좌표 표현 or 색상-방향-벡터 등의 4개의 값이 필요한 작업에 사용)

const vertexShaderSource = `
        attribute vec2 a_position;
        void main() {
          gl_Position = vec4(a_position, 0.0, 1.0);
        }
      `;

 

◼︎ attribute (속성)

attribute vec2 a_position;

# attribute(속성) 변수가 WebGL 버퍼에서 데이터를 가져오는 역할을 한다.
# vec2 (2개의 실수를 필요로 하는 2차원 벡터)에 
# a_position(정점의 위치 저장)의 좌표를 넣음(=> 2D임을 알 수 있다)

 

- 속성(attribute) 변수는 버퍼에서 데이터를 가져오는 역할을 한다.

(버퍼는 위치, 좌표, 색상 등을 포함하지만 원하는 것을 넣을 수 있음)

 

 

• vec2: 2차원 벡터 (x, y).
• vec4: 4차원 벡터 (x, y, z, w).
• attribute vec2 a_position;: 버텍스의 2D 위치 속성을 정의합니다.
• void main(): 셰이더의 주 함수로, 각 버텍스의 최종 위치를 계산합니다.
• gl_Position = vec4(a_position, 0.0, 1.0);: 2D 위치를 4D 위치로 변환하여, WebGL의 좌표계에서 사용할 수 있도록 합니다.