WebGL에서 Shader 활용 - 커스텀 머터리얼 만들기

WebGL에서 Shader 활용 - 커스텀 머터리얼 만들기

🖌 셰이더(Shader)란?

셰이더(Shader)는 GPU에서 실행되는 프로그램으로, WebGL에서는 GLSL(오픈GL 셰이딩 언어)를 사용하여 커스텀 머터리얼을 만들 수 있음. 기본적으로 **Vertex Shader**와 **Fragment Shader** 두 가지가 있음.

🧩 Vertex Shader vs Fragment Shader

셰이더 유형	설명
Vertex Shader	각 정점(vertex)의 위치를 계산함.
Fragment Shader	각 픽셀(Fragment)의 색상을 계산하여 머터리얼을 생성함.

📌 기본적인 WebGL 셰이더 코드

javascript
// Vertex Shader
const vertexShaderSrc = `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
    }
`;

// Fragment Shader (기본 빨간색 출력)
const fragmentShaderSrc = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 빨간색
    }
`;

🎨 커스텀 머터리얼 만들기

위 코드를 활용하여 WebGL에서 다양한 머터리얼을 만들 수 있음. 예를 들어, GLSL을 사용하여 텍스처를 추가하면 보다 사실적인 머터리얼을 제작할 수 있음.

// 텍스처를 적용한 Fragment Shader 예제
const fragmentShaderSrc = `
    precision mediump float;
    uniform sampler2D u_texture;
    varying vec2 v_texCoord;

    void main() {
        gl_FragColor = texture2D(u_texture, v_texCoord);
    }
`;

🎯 결론

- **WebGL에서 셰이더를 사용하면 커스텀 머터리얼을 만들 수 있음.** - **Vertex Shader는 정점 위치를, Fragment Shader는 픽셀 색상을 결정함.** - **텍스처 및 조명을 추가하면 더 현실적인 그래픽을 구현 가능!**

---