1.1 WebGL이란 뭘까요?

WebGL은 웹 브라우저에서 하드웨어 가속 그래픽을 구현할 수 있게 해주는 JavaScript API예요. 쉽게 말하면, 여러분의 컴퓨터나 스마트폰에 있는 GPU(그래픽 처리 장치)의 파워를 웹에서 활용할 수 있게 해주는 마법 같은 기술이죠! ✨

WebGL 2.0은 WebGL 1.0의 업그레이드 버전으로, OpenGL ES 3.0을 기반으로 만들어졌어요. 더 많은 기능과 더 나은 성능을 제공하기 때문에 진짜 대박 업그레이드라고 할 수 있죠! 🚀

1.2 WebGL 2.0의 새로운 기능들

WebGL 2.0에서 추가된 기능들이 진짜 많은데요, 몇 가지만 살펴볼게요:

1. 3D 텍스처: 볼륨 렌더링 같은 고급 효과를 구현할 수 있어요.
2. 트랜스폼 피드백: GPU에서 계산한 결과를 다시 GPU로 피드백할 수 있어요.
3. 인스턴싱: 같은 객체를 여러 번 효율적으로 그릴 수 있어요.
4. 멀티플 렌더 타겟: 한 번의 렌더링 패스로 여러 텍스처에 동시에 그릴 수 있어요.
5. GLSL 3.00 ES: 더 강력한 셰이더 언어를 사용할 수 있어요.

이런 기능들 덕분에 WebGL 2.0으로는 진짜 미쳤다고 할 만한 그래픽 효과들을 구현할 수 있게 됐어요! 🎮

1.3 WebGL 렌더링 파이프라인

WebGL의 렌더링 파이프라인은 3D 객체가 화면에 그려지기까지의 과정을 말해요. 이 과정을 이해하는 것이 고급 기법을 마스터하는 첫 걸음이랍니다! 👣

기본적인 파이프라인은 이렇게 구성되어 있어요:

1. 버텍스 셰이더: 3D 공간의 점들(버텍스)을 처리해요.
2. 프리미티브 어셈블리: 점들을 삼각형 같은 기본 도형으로 조립해요.
3. 래스터라이제이션: 도형을 픽셀로 변환해요.
4. 프래그먼트 셰이더: 각 픽셀의 색상을 계산해요.
5. 출력 병합: 최종 이미지를 화면에 그려요.

고급 WebGL 프로그래밍은 이 파이프라인의 각 단계를 최적화하고 커스터마이징하는 것에 초점을 맞추고 있어요. 특히 셰이더 프로그래밍이 핵심이죠! 💻

2.1 GLSL 3.00 ES 소개

WebGL 2.0에서는 GLSL 3.00 ES라는 새로운 셰이더 언어를 사용해요. 이전 버전보다 훨씬 더 강력하고 유연한 기능들을 제공한답니다.

GLSL은 C 언어와 비슷한 문법을 가지고 있지만, 벡터와 행렬 연산에 특화되어 있어요. 그래픽스 프로그래밍에 딱이죠! 📐

간단한 버텍스 셰이더 예제를 볼까요?

#version 300 es
in vec3 a_position;
in vec2 a_texcoord;
out vec2 v_texcoord;
uniform mat4 u_modelViewProjection;

void main() {
    v_texcoord = a_texcoord;
    gl_Position = u_modelViewProjection * vec4(a_position, 1.0);
}

그리고 프래그먼트 셰이더 예제:

#version 300 es
precision highp float;
in vec2 v_texcoord;
uniform sampler2D u_texture;
out vec4 outColor;

void main() {
    outColor = texture(u_texture, v_texcoord);
}

이런 기본 셰이더에서 시작해서 점점 더 복잡하고 멋진 효과를 만들어 갈 수 있어요! 🌈

2.2 고급 셰이더 테크닉

이제 좀 더 고오급 테크닉으로 넘어가볼게요! 이런 기술들은 재능넷같은 플랫폼에서 인터랙티브한 포트폴리오를 만들 때 완전 꿀팁이 될 수 있어요!

1. 프로시저럴 텍스처링: 수학 함수를 이용해 텍스처를 동적으로 생성해요.
2. 노멀 매핑: 평면 표면에 입체감을 부여해요.
3. 환경 매핑: 주변 환경을 반사하는 효과를 만들어요.
4. 셰이더 기반 애니메이션: 셰이더로 객체를 변형하고 움직이게 해요.
5. 레이 마칭: 복잡한 3D 형태를 수학적으로 렌더링해요.

예를 들어, 이런 프로시저럴 패턴을 만드는 셰이더 코드를 볼까요?

#version 300 es
precision highp float;
in vec2 v_texcoord;
out vec4 outColor;
uniform float u_time;

float random(vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}

void main() {
    vec2 st = v_texcoord;
    float noise = random(st * 10.0 + u_time * 0.1);
    
    // 웨이브 패턴 생성
    float wave = sin(st.x * 50.0 + u_time) * 0.5 + 0.5;
    wave *= sin(st.y * 40.0 + u_time * 0.7) * 0.5 + 0.5;
    
    vec3 color = mix(
        vec3(0.2, 0.5, 0.9),
        vec3(0.9, 0.4, 0.1),
        wave * noise
    );
    
    outColor = vec4(color, 1.0);
}

이 코드는 시간에 따라 변화하는 웨이브 패턴을 만들어내요. 완전 힙하죠? 😎

2.3 컴퓨트 셰이더와 대안 기법

WebGL 2.0에는 아직 컴퓨트 셰이더가 없지만, 비슷한 효과를 내는 방법들이 있어요. 트랜스폼 피드백이나 렌더 타겟을 활용하는 거죠!

예를 들어, 파티클 시스템을 구현할 때 트랜스폼 피드백을 사용할 수 있어요:

// 트랜스폼 피드백 설정
const tf = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, outputBuffer);

// 트랜스폼 피드백 시작
gl.beginTransformFeedback(gl.POINTS);
gl.drawArrays(gl.POINTS, 0, numParticles);
gl.endTransformFeedback();

이런 방식으로 GPU에서 파티클의 위치를 계산하고, 그 결과를 다시 GPU 메모리에 저장할 수 있어요. 엄청 효율적이죠! 🚀

WebGPU가 더 널리 지원되면 진짜 컴퓨트 셰이더를 사용할 수 있게 될 텐데, 그때는 더 미친 성능을 기대할 수 있을 거예요! 기대됩니다~ 🤩

3.1 효율적인 지오메트리 관리

3D 모델의 지오메트리(점, 선, 면)를 효율적으로 관리하는 것은 성능에 큰 영향을 미쳐요. 몇 가지 핵심 전략을 살펴볼게요:

1. 인덱스 버퍼 사용: 중복 버텍스를 제거해 메모리 사용량을 줄여요.
2. LOD(Level of Detail): 카메라와의 거리에 따라 모델의 복잡도를 조절해요.
3. 인스턴싱: 같은 객체를 여러 번 그릴 때 CPU 오버헤드를 줄여요.
4. 지오메트리 배칭: 여러 객체를 하나의 드로우 콜로 합쳐요.

인스턴싱은 WebGL 2.0의 킬러 기능 중 하나인데요, 이렇게 구현할 수 있어요:

// 인스턴스 데이터 설정
const instancePositions = new Float32Array([
    // 여러 인스턴스의 위치 데이터
    -5.0, 0.0, 0.0,
    0.0, 0.0, 0.0,
    5.0, 0.0, 0.0,
    // ... 더 많은 인스턴스
]);

// 인스턴스 버퍼 생성
const instanceBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, instanceBuffer);
gl.bufferData(gl.ARRAY_BUFFER, instancePositions, gl.STATIC_DRAW);

// 인스턴스 속성 설정
const instanceLoc = gl.getAttribLocation(program, 'a_instancePosition');
gl.enableVertexAttribArray(instanceLoc);
gl.vertexAttribPointer(instanceLoc, 3, gl.FLOAT, false, 0, 0);
gl.vertexAttribDivisor(instanceLoc, 1); // 인스턴스당 하나의 값

// 인스턴스 드로잉
gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount);

이렇게 하면 수천 개의 같은 객체를 효율적으로 그릴 수 있어요. 예를 들어 숲의 나무나 우주의 별 같은 것들이요! 🌳✨

3.2 멀티패스 렌더링 기법

복잡한 효과를 구현하기 위해 여러 번의 렌더링 패스를 사용하는 기법이에요. 그림자, 반사, 후처리 효과 등을 구현할 때 필수적이죠!

기본적인 멀티패스 렌더링 과정은 이렇습니다:

1. 프레임버퍼 객체(FBO)를 생성해요.
2. 첫 번째 패스에서 FBO에 렌더링해요.
3. 결과 텍스처를 다음 패스의 입력으로 사용해요.
4. 최종 결과를 화면에 그려요.

예를 들어, 그림자 매핑을 구현하는 코드를 간략히 살펴볼게요:

// 1. 그림자 맵 생성을 위한 FBO 설정
const shadowFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, shadowFBO);

const shadowTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, shadowTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT24, 
              shadowMapSize, shadowMapSize, 0, 
              gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
// ... 텍스처 파라미터 설정

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, 
                       gl.TEXTURE_2D, shadowTexture, 0);

// 2. 첫 번째 패스: 광원 시점에서 깊이 렌더링
gl.bindFramebuffer(gl.FRAMEBUFFER, shadowFBO);
gl.viewport(0, 0, shadowMapSize, shadowMapSize);
gl.clear(gl.DEPTH_BUFFER_BIT);
// ... 그림자 셰이더로 씬 렌더링

// 3. 두 번째 패스: 그림자 맵을 이용해 최종 씬 렌더링
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, shadowTexture);
gl.uniform1i(gl.getUniformLocation(program, "u_shadowMap"), 0);
// ... 최종 셰이더로 씬 렌더링

이런 방식으로 그림자, 반사, 글로우 효과 등 다양한 고급 효과를 구현할 수 있어요! 🌟

3.3 오클루전 컬링과 가시성 최적화

화면에 보이지 않는 객체를 그리지 않는 것은 성능 향상의 기본이에요. WebGL에서 사용할 수 있는 몇 가지 기법을 살펴볼게요:

1. 뷰 프러스텀 컬링: 카메라 시야 밖의 객체는 그리지 않아요.
2. 오클루전 컬링: 다른 객체에 가려진 객체는 그리지 않아요.
3. 포털 컬링: 복잡한 실내 공간에서 방 단위로 렌더링을 제한해요.
4. HZB(Hierarchical Z-Buffer): 깊이 정보를 계층적으로 활용해 가시성을 빠르게 판단해요.

이런 기법들은 주로 JavaScript 측에서 구현하게 되는데, 특히 복잡한 3D 씬에서 큰 성능 향상을 가져올 수 있어요! 🏎️

뷰 프러스텀 컬링만 구현해도 렌더링 성능이 2~3배 향상되는 경우가 많아요. 특히 많은 객체가 있는 씬에서는 필수죠!

4.1 버퍼 및 텍스처 최적화

GPU 메모리를 효율적으로 사용하는 방법에 대해 알아볼게요:

1. 적절한 데이터 타입 선택: 필요 이상으로 정밀한 타입은 피해요.
2. 텍스처 압축: 가능하면 압축된 텍스처 포맷을 사용해요.
3. 미리 계산된 데이터 활용: 런타임에 계산하지 말고 미리 계산해 저장해요.
4. 텍스처 아틀라스: 여러 작은 텍스처를 하나로 합쳐요.

예를 들어, 텍스처 압축을 사용하는 코드를 볼까요?

// 압축 텍스처 지원 확인
const ext = gl.getExtension('WEBGL_compressed_texture_s3tc');
if (ext) {
    // 압축 텍스처 생성
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    // DXT1 압축 포맷 사용 (원본 대비 1/6 크기)
    gl.compressedTexImage2D(
        gl.TEXTURE_2D, 
        0, 
        ext.COMPRESSED_RGBA_S3TC_DXT1_EXT,
        width, 
        height, 
        0, 
        compressedData
    );
    
    // ... 텍스처 파라미터 설정
}

이렇게 압축 텍스처를 사용하면 메모리 사용량을 크게 줄일 수 있어요. 특히 고해상도 텍스처를 많이 사용하는 게임이나 시각화 앱에서 효과적이죠! 🎮

4.2 VAO와 UBO 활용

WebGL 2.0에서는 VAO(Vertex Array Object)와 UBO(Uniform Buffer Object)라는 강력한 기능을 제공해요. 이것들을 활용하면 성능을 크게 향상시킬 수 있어요!

VAO는 버텍스 속성 설정을 캡슐화해서 상태 변경을 최소화해요:

// VAO 생성 및 설정
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// 버텍스 속성 설정
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLoc);

gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.vertexAttribPointer(normalLoc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(normalLoc);

// ... 다른 속성들 설정

// 나중에 렌더링할 때는 간단히:
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);

UBO는 여러 셰이더 프로그램 간에 공유되는 유니폼 데이터를 효율적으로 관리해요:

// UBO 생성 및 설정
const uboData = new Float32Array([
    // 변환 행렬들
    ...matrixData,
    // 조명 데이터
    ...lightData
]);

const ubo = gl.createBuffer();
gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
gl.bufferData(gl.UNIFORM_BUFFER, uboData, gl.DYNAMIC_DRAW);

// 바인딩 포인트에 연결
gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);

// 셰이더 프로그램과 연결
const blockIndex = gl.getUniformBlockIndex(program, "SceneUniforms");
gl.uniformBlockBinding(program, blockIndex, 0);

이런 기법들을 사용하면 CPU와 GPU 간의 통신 오버헤드를 크게 줄일 수 있어요. 특히 복잡한 씬이나 여러 객체를 그릴 때 효과적이죠! 🚀

4.3 리소스 생명주기 관리

WebGL 리소스(버퍼, 텍스처, 셰이더 등)를 제대로 관리하지 않으면 메모리 누수가 발생할 수 있어요. 특히 SPA(Single Page Application)에서는 더 주의해야 해요!

리소스 관리를 위한 몇 가지 팁을 알려드릴게요:

1. 더 이상 필요 없는 리소스는 즉시 삭제: gl.deleteBuffer(), gl.deleteTexture() 등을 호출해요.
2. 리소스 풀링: 자주 생성/삭제되는 리소스는 재사용해요.
3. 지연 로딩: 필요할 때만 리소스를 로드해요.
4. LOD 시스템: 상황에 따라 적절한 품질의 리소스를 사용해요.

리소스 관리를 위한 간단한 클래스 예제를 볼까요?

class WebGLResourceManager {
    constructor(gl) {
        this.gl = gl;
        this.resources = {
            buffers: new Set(),
            textures: new Set(),
            programs: new Set(),
            framebuffers: new Set()
        };
    }
    
    createBuffer(data, usage = this.gl.STATIC_DRAW) {
        const buffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
        this.gl.bufferData(this.gl.ARRAY_BUFFER, data, usage);
        this.resources.buffers.add(buffer);
        return buffer;
    }
    
    createTexture(/* 파라미터들 */) {
        // 텍스처 생성 로직
        this.resources.textures.add(texture);
        return texture;
    }
    
    // 다른 리소스 생성 메서드들...
    
    deleteResource(resource) {
        if (this.resources.buffers.has(resource)) {
            this.gl.deleteBuffer(resource);
            this.resources.buffers.delete(resource);
        } else if (this.resources.textures.has(resource)) {
            this.gl.deleteTexture(resource);
            this.resources.textures.delete(resource);
        }
        // 다른 타입 처리...
    }
    
    cleanup() {
        // 모든 리소스 정리
        this.resources.buffers.forEach(b => this.gl.deleteBuffer(b));
        this.resources.textures.forEach(t => this.gl.deleteTexture(t));
        // 다른 리소스 정리...
        
        this.resources.buffers.clear();
        this.resources.textures.clear();
        // 다른 컬렉션 정리...
    }
}

이런 관리자 클래스를 사용하면 리소스 누수를 방지하고 메모리를 효율적으로 관리할 수 있어요! 👍

특히 SPA에서 컴포넌트가 언마운트될 때 WebGL 리소스를 정리하는 것이 매우 중요해요. React나 Vue 같은 프레임워크를 사용할 때 useEffect나 onUnmounted 훅에서 cleanup 함수를 호출하는 것을 잊지 마세요!

5.1 3D 텍스처와 볼륨 렌더링

WebGL 2.0의 가장 흥미로운 기능 중 하나는 3D 텍스처 지원이에요. 이를 통해 볼륨 데이터를 직접 렌더링할 수 있게 되었죠!

3D 텍스처를 생성하고 사용하는 방법을 알아볼게요:

// 3D 텍스처 생성
const texture3D = gl.createTexture();
gl.bindTexture(gl.TEXTURE_3D, texture3D);

// 텍스처 데이터 설정 (예: 64x64x64 볼륨)
const size = 64;
const volumeData = new Uint8Array(size * size * size);

// 볼륨 데이터 채우기 (예: 구 형태)
for (let z = 0; z < size; z++) {
    for (let y = 0; y < size; y++) {
        for (let x = 0; x < size; x++) {
            const dx = x - size/2;
            const dy = y - size/2;
            const dz = z - size/2;
            const distance = Math.sqrt(dx*dx + dy*dy + dz*dz);
            
            // 구 내부는 255, 외부는 0
            const index = x + y * size + z * size * size;
            volumeData[index] = distance < size/3 ? 255 : 0;
        }
    }
}

gl.texImage3D(
    gl.TEXTURE_3D,
    0,                // 밉맵 레벨
    gl.R8,            // 내부 포맷
    size, size, size, // 너비, 높이, 깊이
    0,                // 테두리
    gl.RED,           // 포맷
    gl.UNSIGNED_BYTE, // 타입
    volumeData        // 데이터
);

// 텍스처 파라미터 설정
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE);

이렇게 생성한 3D 텍스처는 프래그먼트 셰이더에서 이렇게 사용할 수 있어요:

#version 300 es
precision highp float;
precision highp sampler3D;

in vec3 v_texCoord;
uniform sampler3D u_volumeTexture;
out vec4 outColor;

void main() {
    // 3D 텍스처에서 샘플링
    float density = texture(u_volumeTexture, v_texCoord).r;
    
    // 밀도에 따라 색상 결정
    vec3 color = mix(
        vec3(0.0, 0.0, 0.2), // 낮은 밀도 색상
        vec3(1.0, 0.5, 0.0), // 높은 밀도 색상
        density
    );
    
    outColor = vec4(color, density);
}

이 기술은 의료 영상, 기상 데이터, 유체 시뮬레이션 등 다양한 분야에서 활용될 수 있어요. 완전 쩔죠? 😎

5.2 HDR 렌더링과 톤 매핑

HDR(High Dynamic Range) 렌더링은 더 넓은 범위의 밝기를 표현할 수 있게 해주는 기술이에요. 이를 통해 더 사실적인 조명 효과를 구현할 수 있죠!

HDR 렌더링의 기본 과정은 이렇습니다:

1. 높은 정밀도의 포맷(RGBA16F, RGBA32F)으로 렌더링해요.
2. 조명 계산을 물리적으로 정확하게 수행해요.
3. 톤 매핑을 통해 HDR 값을 LDR(Low Dynamic Range) 디스플레이에 맞게 변환해요.

HDR 렌더링을 위한 프레임버퍼 설정 코드를 볼까요?

// HDR 프레임버퍼 설정
const hdrFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, hdrFBO);

// 16비트 부동소수점 텍스처 생성
const hdrTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, hdrTexture);
gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA16F, // 높은 정밀도 포맷
    canvas.width,
    canvas.height,
    0,
    gl.RGBA,
    gl.HALF_FLOAT,
    null
);
// ... 텍스처 파라미터 설정

// 깊이 버퍼 설정
const depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
gl.renderbufferStorage(
    gl.RENDERBUFFER,
    gl.DEPTH_COMPONENT16,
    canvas.width,
    canvas.height
);

// 프레임버퍼에 텍스처와 깊이 버퍼 연결
gl.framebufferTexture2D(
    gl.FRAMEBUFFER,
    gl.COLOR_ATTACHMENT0,
    gl.TEXTURE_2D,
    hdrTexture,
    0
);
gl.framebufferRenderbuffer(
    gl.FRAMEBUFFER,
    gl.DEPTH_ATTACHMENT,
    gl.RENDERBUFFER,
    depthBuffer
);

그리고 톤 매핑을 위한 프래그먼트 셰이더는 이렇게 작성할 수 있어요:

#version 300 es
precision highp float;

in vec2 v_texCoord;
uniform sampler2D u_hdrTexture;
uniform float u_exposure;
out vec4 outColor;

// 톤 매핑 함수 (Reinhard)
vec3 reinhardToneMapping(vec3 color, float exposure) {
    color *= exposure;
    return color / (1.0 + color);
}

// ACES 필름 톤 매핑
vec3 ACESFilmToneMapping(vec3 color, float exposure) {
    color *= exposure;
    
    // ACES 파라미터
    float a = 2.51;
    float b = 0.03;
    float c = 2.43;
    float d = 0.59;
    float e = 0.14;
    
    return clamp((color * (a * color + b)) / (color * (c * color + d) + e), 0.0, 1.0);
}

void main() {
    // HDR 텍스처에서 색상 가져오기
    vec3 hdrColor = texture(u_hdrTexture, v_texCoord).rgb;
    
    // 톤 매핑 적용
    vec3 mappedColor = ACESFilmToneMapping(hdrColor, u_exposure);
    
    // 감마 보정 (선택 사항)
    mappedColor = pow(mappedColor, vec3(1.0 / 2.2));
    
    outColor = vec4(mappedColor, 1.0);
}

이런 HDR 렌더링을 통해 밝은 부분과 어두운 부분의 디테일을 모두 살릴 수 있어요. 특히 블룸(Bloom) 같은 효과와 함께 사용하면 더욱 아름다운 결과를 얻을 수 있죠! ✨

5.3 텍스처 배열과 텍스처 아틀라스

WebGL 2.0에서는 텍스처 배열이라는 새로운 기능을 사용할 수 있어요. 이를 통해 여러 텍스처를 효율적으로 관리할 수 있죠!

텍스처 배열을 생성하고 사용하는 방법을 알아볼게요:

// 텍스처 배열 생성
const textureArray = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D_ARRAY, textureArray);

// 텍스처 배열 초기화 (4개의 512x512 텍스처)
gl.texImage3D(
    gl.TEXTURE_2D_ARRAY,
    0,                // 밉맵 레벨
    gl.RGBA,          // 내부 포맷
    512, 512, 4,      // 너비, 높이, 레이어 수
    0,                // 테두리
    gl.RGBA,          // 포맷
    gl.UNSIGNED_BYTE, // 타입
    null              // 데이터 (나중에 채울 예정)
);

// 각 레이어에 텍스처 데이터 채우기
for (let i = 0; i < 4; i++) {
    // 이미지 데이터 로드 (예: 이미지 객체에서)
    gl.texSubImage3D(
        gl.TEXTURE_2D_ARRAY,
        0,            // 밉맵 레벨
        0, 0, i,      // x, y, 레이어 오프셋
        512, 512, 1,  // 너비, 높이, 레이어 수
        gl.RGBA,      // 포맷
        gl.UNSIGNED_BYTE, // 타입
        images[i]     // 이미지 데이터
    );
}

// 밉맵 생성 및 파라미터 설정
gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

텍스처 배열은 프래그먼트 셰이더에서 이렇게 사용할 수 있어요:

#version 300 es
precision highp float;
precision highp sampler2DArray;

in vec2 v_texCoord;
in float v_texIndex;  // 텍스처 인덱스
uniform sampler2DArray u_textureArray;
out vec4 outColor;

void main() {
    // 텍스처 배열에서 샘플링
    outColor = texture(u_textureArray, vec3(v_texCoord, v_texIndex));
}

텍스처 배열은 특히 지형 렌더링이나 타일 기반 게임에서 유용해요. 다양한 지형 타입이나 타일을 효율적으로 렌더링할 수 있거든요! 🏞️

텍스처 아틀라스도 비슷한 목적으로 사용되는 기법이에요. 여러 작은 텍스처를 하나의 큰 텍스처로 합쳐서 드로우 콜을 줄이는 방식이죠. 특히 WebGL 1.0에서는 텍스처 배열이 없기 때문에 더 많이 사용되는 기법이에요!

6.1 PBR의 기본 원리

PBR의 핵심 원리는 물리 법칙에 기반한 빛 반사 모델을 사용하는 것이에요. 주요 개념들을 살펴볼게요:

1. 미세면 이론(Microfacet Theory): 표면은 미세한 거울 같은 면들로 구성되어 있다고 가정해요.
2. 에너지 보존(Energy Conservation): 표면에 도달한 빛의 에너지는 보존되어야 해요.
3. 금속성(Metalness): 표면이 금속인지 비금속인지를 나타내요.
4. 거칠기(Roughness): 표면의 미세한 거칠기를 나타내요.
5. 프레넬 효과(Fresnel Effect): 시야각에 따라 반사율이 변화해요.

PBR은 이런 원리들을 바탕으로 다양한 재질(금속, 플라스틱, 유리 등)을 사실적으로 표현할 수 있어요. 진짜 대박이죠? 😮

6.2 PBR 셰이더 구현

WebGL 2.0에서 PBR을 구현하는 것은 꽤 복잡하지만, 기본적인 접근 방식을 알아볼게요. 먼저 필요한 텍스처들이에요:

1. 알베도 맵: 기본 색상을 나타내요.
2. 금속성 맵: 표면의 금속성을 나타내요.
3. 거칠기 맵: 표면의 거칠기를 나타내요.
4. 노멀 맵: 표면의 미세한 굴곡을 나타내요.
5. AO(Ambient Occlusion) 맵: 환경광 차폐를 나타내요.

PBR 프래그먼트 셰이더의 핵심 부분을 살펴볼게요:

#version 300 es
precision highp float;

// 입력 변수들
in vec3 v_position;
in vec3 v_normal;
in vec2 v_texCoord;
in mat3 v_TBN; // 탄젠트 공간 변환 행렬

// 텍스처 유니폼
uniform sampler2D u_albedoMap;
uniform sampler2D u_metallicMap;
uniform sampler2D u_roughnessMap;
uniform sampler2D u_normalMap;
uniform sampler2D u_aoMap;
uniform samplerCube u_envMap;
uniform samplerCube u_irradianceMap;
uniform sampler2D u_brdfLUT;

// 기타 유니폼
uniform vec3 u_cameraPosition;
uniform vec3 u_lightPositions[4];
uniform vec3 u_lightColors[4];

out vec4 outColor;

const float PI = 3.14159265359;

// PBR 함수들
// 법선 분포 함수 (GGX/Trowbridge-Reitz)
float DistributionGGX(vec3 N, vec3 H, float roughness) {
    float a = roughness * roughness;
    float a2 = a * a;
    float NdotH = max(dot(N, H), 0.0);
    float NdotH2 = NdotH * NdotH;
    
    float nom   = a2;
    float denom = (NdotH2 * (a2 - 1.0) + 1.0);
    denom = PI * denom * denom;
    
    return nom / denom;
}

// 기하 함수 (Smith's Schlick-GGX)
float GeometrySchlickGGX(float NdotV, float roughness) {
    float r = (roughness + 1.0);
    float k = (r * r) / 8.0;
    
    float nom   = NdotV;
    float denom = NdotV * (1.0 - k) + k;
    
    return nom / denom;
}

float GeometrySmith(vec3 N, vec3 V, vec3 L, float roughness) {
    float NdotV = max(dot(N, V), 0.0);
    float NdotL = max(dot(N, L), 0.0);
    float ggx2 = GeometrySchlickGGX(NdotV, roughness);
    float ggx1 = GeometrySchlickGGX(NdotL, roughness);
    
    return ggx1 * ggx2;
}

// 프레넬 방정식 (Schlick 근사)
vec3 fresnelSchlick(float cosTheta, vec3 F0) {
    return F0 + (1.0 - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
}

// 환경 반사를 위한 프레넬 함수
vec3 fresnelSchlickRoughness(float cosTheta, vec3 F0, float roughness) {
    return F0 + (max(vec3(1.0 - roughness), F0) - F0) * 
           pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
}

void main() {
    // 텍스처에서 재질 속성 가져오기
    vec3 albedo = texture(u_albedoMap, v_texCoord).rgb;
    float metallic = texture(u_metallicMap, v_texCoord).r;
    float roughness = texture(u_roughnessMap, v_texCoord).r;
    float ao = texture(u_aoMap, v_texCoord).r;
    
    // 노멀 맵에서 노멀 가져와서 변환
    vec3 N = normalize(v_normal);
    vec3 normalMap = texture(u_normalMap, v_texCoord).rgb * 2.0 - 1.0;
    N = normalize(v_TBN * normalMap);
    
    // 뷰 방향
    vec3 V = normalize(u_cameraPosition - v_position);
    vec3 R = reflect(-V, N);
    
    // 금속 표면의 경우 F0는 알베도 값, 비금속은 0.04
    vec3 F0 = vec3(0.04);
    F0 = mix(F0, albedo, metallic);
    
    // 직접 조명 계산
    vec3 Lo = vec3(0.0);
    for(int i = 0; i < 4; i++) {
        vec3 L = normalize(u_lightPositions[i] - v_position);
        vec3 H = normalize(V + L);
        
        float distance = length(u_lightPositions[i] - v_position);
        float attenuation = 1.0 / (distance * distance);
        vec3 radiance = u_lightColors[i] * attenuation;
        
        // BRDF 항들
        float NDF = DistributionGGX(N, H, roughness);
        float G = GeometrySmith(N, V, L, roughness);
        vec3 F = fresnelSchlick(max(dot(H, V), 0.0), F0);
        
        vec3 kS = F;
        vec3 kD = vec3(1.0) - kS;
        kD *= 1.0 - metallic;
        
        vec3 numerator = NDF * G * F;
        float denominator = 4.0 * max(dot(N, V), 0.0) * max(dot(N, L), 0.0) + 0.0001;
        vec3 specular = numerator / denominator;
        
        float NdotL = max(dot(N, L), 0.0);
        Lo += (kD * albedo / PI + specular) * radiance * NdotL;
    }
    
    // 환경 조명 (IBL: Image Based Lighting)
    vec3 F = fresnelSchlickRoughness(max(dot(N, V), 0.0), F0, roughness);
    vec3 kS = F;
    vec3 kD = 1.0 - kS;
    kD *= 1.0 - metallic;
    
    vec3 irradiance = texture(u_irradianceMap, N).rgb;
    vec3 diffuse = irradiance * albedo;
    
    // 환경 반사 (스페큘러 IBL)
    const float MAX_REFLECTION_LOD = 4.0;
    vec3 prefilteredColor = textureLod(u_envMap, R, roughness * MAX_REFLECTION_LOD).rgb;
    vec2 brdf = texture(u_brdfLUT, vec2(max(dot(N, V), 0.0), roughness)).rg;
    vec3 specular = prefilteredColor * (F * brdf.x + brdf.y);
    
    vec3 ambient = (kD * diffuse + specular) * ao;
    
    // 최종 색상
    vec3 color = ambient + Lo;
    
    // 톤 매핑 및 감마 보정
    color = color / (color + vec3(1.0)); // Reinhard 톤 매핑
    color = pow(color, vec3(1.0/2.2)); // 감마 보정
    
    outColor = vec4(color, 1.0);
}

우와, 코드가 꽤 길죠? ㅋㅋㅋ 하지만 이렇게 복잡한 셰이더를 통해 정말 사실적인 재질 표현이 가능해져요! 🤩

PBR은 처음에는 어렵게 느껴질 수 있지만, 일단 기본 원리를 이해하면 다양한 재질을 일관된 방식으로 표현할 수 있어요. 이전의 비물리적 셰이딩 모델보다 훨씬 직관적이고 예측 가능한 결과를 얻을 수 있죠!

6.3 IBL(Image-Based Lighting) 구현

PBR의 완성도를 높이려면 IBL(Image-Based Lighting)이 필수적이에요. IBL은 환경 맵을 사용해 주변 환경에서 오는 간접 조명을 시뮬레이션하는 기법이에요.

IBL 구현을 위해 필요한 것들은:

1. 환경 맵(Environment Map): 주변 환경을 캡처한 큐브맵이에요.
2. 조사도 맵(Irradiance Map): 확산 조명을 위해 환경 맵을 블러 처리한 맵이에요.
3. 프리필터 맵(Prefiltered Map): 다양한 거칠기 수준에 대한 반사를 미리 계산한 맵이에요.
4. BRDF LUT(Look-Up Table): 프레넬 항과 거칠기에 따른 BRDF 값을 미리 계산한 텍스처예요.

이런 맵들은 보통 전처리 과정에서 생성하지만, WebGL에서도 실시간으로 생성할 수 있어요. 예를 들어, 조사도 맵을 생성하는 셰이더는 이렇게 작성할 수 있어요:

#version 300 es
precision highp float;

in vec3 v_position;
uniform samplerCube u_environmentMap;
out vec4 outColor;

const float PI = 3.14159265359;

void main() {
    vec3 normal = normalize(v_position);
    
    vec3 irradiance = vec3(0.0);
    vec3 up = vec3(0.0, 1.0, 0.0);
    vec3 right = normalize(cross(up, normal));
    up = normalize(cross(normal, right));
    
    float sampleDelta = 0.025;
    float nrSamples = 0.0;
    
    // 반구를 샘플링하여 조사도 계산
    for(float phi = 0.0; phi < 2.0 * PI; phi += sampleDelta) {
        for(float theta = 0.0; theta < 0.5 * PI; theta += sampleDelta) {
            // 구면 좌표를 직교 좌표로 변환
            vec3 tangentSample = vec3(sin(theta) * cos(phi), sin(theta) * sin(phi), cos(theta));
            // 탄젠트 공간에서 월드 공간으로 변환
            vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * normal;
            
            irradiance += texture(u_environmentMap, sampleVec).rgb * cos(theta) * sin(theta);
            nrSamples++;
        }
    }
    
    irradiance = PI * irradiance * (1.0 / nrSamples);
    outColor = vec4(irradiance, 1.0);
}

IBL을 구현하면 직접 조명이 없는 부분에서도 사실적인 조명 효과를 얻을 수 있어요. 특히 금속 같은 반사성 재질에서 효과가 두드러져요! ✨

7.1 포스트 프로세싱 파이프라인 구축

포스트 프로세싱을 위한 기본 파이프라인은 이렇게 구성돼요:

1. 오프스크린 렌더링을 위한 프레임버퍼 생성
2. 씬을 프레임버퍼에 렌더링
3. 프레임버퍼의 텍스처를 입력으로 사용해 효과 적용
4. 결과를 화면에 그리기

기본적인 포스트 프로세싱 셋업 코드를 볼까요?

// 포스트 프로세싱을 위한 프레임버퍼 설정
const postFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, postFBO);

// 컬러 텍스처 생성
const colorTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA,
    canvas.width,
    canvas.height,
    0,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    null
);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 깊이 렌더버퍼 생성
const depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
gl.renderbufferStorage(
    gl.RENDERBUFFER,
    gl.DEPTH_COMPONENT16,
    canvas.width,
    canvas.height
);

// 프레임버퍼에 텍스처와 렌더버퍼 연결
gl.framebufferTexture2D(
    gl.FRAMEBUFFER,
    gl.COLOR_ATTACHMENT0,
    gl.TEXTURE_2D,
    colorTexture,
    0
);
gl.framebufferRenderbuffer(
    gl.FRAMEBUFFER,
    gl.DEPTH_ATTACHMENT,
    gl.RENDERBUFFER,
    depthBuffer
);

// 렌더링 과정
function render() {
    // 1. 씬을 프레임버퍼에 렌더링
    gl.bindFramebuffer(gl.FRAMEBUFFER, postFBO);
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    
    // 씬 렌더링 코드...
    
    // 2. 포스트 프로세싱 효과 적용
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    
    // 포스트 프로세싱 셰이더 사용
    gl.useProgram(postProcessProgram);
    
    // 렌더링된 텍스처 바인딩
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, colorTexture);
    gl.uniform1i(gl.getUniformLocation(postProcessProgram, "u_texture"), 0);
    
    // 효과 파라미터 설정
    gl.uniform1f(gl.getUniformLocation(postProcessProgram, "u_time"), time);
    
    // 전체 화면 쿼드 그리기
    gl.bindVertexArray(quadVAO);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
}

이제 다양한 포스트 프로세싱 효과를 구현하는 셰이더를 작성할 수 있어요! 👨‍🎨

7.2 인기 있는 포스트 프로세싱 효과

다양한 포스트 프로세싱 효과 중에서 몇 가지 인기 있는 효과를 살펴볼게요:

1. 블룸(Bloom): 밝은 부분이 주변으로 빛이 번지는 효과
2. DOF(Depth of Field): 카메라의 초점 거리에 따른 블러 효과
3. 모션 블러(Motion Blur): 움직임에 따른 흐림 효과
4. SSAO(Screen Space Ambient Occlusion): 화면 공간에서의 환경광 차폐
5. 색보정(Color Grading): 영화 같은 색감 표현

블룸 효과를 구현하는 셰이더 코드를 예로 들어볼게요:

// 1. 밝은 부분 추출 셰이더
#version 300 es
precision highp float;

in vec2 v_texCoord;
uniform sampler2D u_texture;
uniform float u_threshold;
out vec4 outColor;

void main() {
    vec3 color = texture(u_texture, v_texCoord).rgb;
    float brightness = dot(color, vec3(0.2126, 0.7152, 0.0722));
    
    // 임계값보다 밝은 부분만 추출
    if(brightness > u_threshold) {
        outColor = vec4(color, 1.0);
    } else {
        outColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
}

// 2. 가우시안 블러 셰이더 (가로 방향)
#version 300 es
precision highp float;

in vec2 v_texCoord;
uniform sampler2D u_texture;
uniform float u_texelSize;
out vec4 outColor;

void main() {
    float weight[5];
    weight[0] = 0.227027;
    weight[1] = 0.1945946;
    weight[2] = 0.1216216;
    weight[3] = 0.054054;
    weight[4] = 0.016216;
    
    vec3 result = texture(u_texture, v_texCoord).rgb * weight[0];
    
    for(int i = 1; i < 5; i++) {
        result += texture(u_texture, v_texCoord + vec2(u_texelSize * float(i), 0.0)).rgb * weight[i];
        result += texture(u_texture, v_texCoord - vec2(u_texelSize * float(i), 0.0)).rgb * weight[i];
    }
    
    outColor = vec4(result, 1.0);
}

// 3. 가우시안 블러 셰이더 (세로 방향)
// (가로 방향과 유사하지만 텍스처 좌표 오프셋이 다름)

// 4. 최종 합성 셰이더
#version 300 es
precision highp float;

in vec2 v_texCoord;
uniform sampler2D u_sceneTexture;
uniform sampler2D u_bloomTexture;
uniform float u_bloomStrength;
out vec4 outColor;

void main() {
    vec3 sceneColor = texture(u_sceneTexture, v_texCoord).rgb;
    vec3 bloomColor = texture(u_bloomTexture, v_texCoord).rgb;
    
    // 블룸 효과 합성
    vec3 finalColor = sceneColor + bloomColor * u_bloomStrength;
    
    // 톤 매핑 (선택 사항)
    finalColor = finalColor / (finalColor + vec3(1.0));
    
    outColor = vec4(finalColor, 1.0);
}

이런 블룸 효과는 빛나는 물체, 네온 사인, 마법 효과 등을 표현할 때 정말 유용해요! ✨

7.3 다중 패스 효과와 최적화

복잡한 포스트 프로세싱 효과는 여러 패스를 통해 구현하는 경우가 많아요. 이때 성능 최적화가 중요하죠!

다중 패스 효과를 최적화하는 몇 가지 팁을 알려드릴게요:

1. 핑퐁 버퍼링: 두 개의 프레임버퍼를 번갈아 사용해 메모리 효율성을 높여요.
2. 다운샘플링: 블러 같은 효과는 해상도를 낮춰서 처리하면 성능이 크게 향상돼요.
3. 선택적 렌더링: 모든 효과를 항상 적용하지 말고, 필요할 때만 적용해요.
4. 효과 통합: 가능하면 여러 효과를 하나의 셰이더로 통합해요.

핑퐁 버퍼링을 구현하는 코드 예시를 볼까요?

// 핑퐁 버퍼링을 위한 두 개의 프레임버퍼 설정
const pingpongFBO = [
    gl.createFramebuffer(),
    gl.createFramebuffer()
];
const pingpongTexture = [
    gl.createTexture(),
    gl.createTexture()
];

// 두 텍스처 초기화
for (let i = 0; i < 2; i++) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, pingpongFBO[i]);
    gl.bindTexture(gl.TEXTURE_2D, pingpongTexture[i]);
    gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGBA,
        canvas.width,
        canvas.height,
        0,
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        null
    );
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.framebufferTexture2D(
        gl.FRAMEBUFFER,
        gl.COLOR_ATTACHMENT0,
        gl.TEXTURE_2D,
        pingpongTexture[i],
        0
    );
}

// 다중 패스 블러 효과 적용
function applyBlur(inputTexture, iterations) {
    // 첫 번째 패스: 입력 텍스처에서 시작
    gl.bindFramebuffer(gl.FRAMEBUFFER, pingpongFBO[0]);
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    gl.useProgram(horizontalBlurProgram);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, inputTexture);
    gl.uniform1i(gl.getUniformLocation(horizontalBlurProgram, "u_texture"), 0);
    
    // 전체 화면 쿼드 그리기
    gl.bindVertexArray(quadVAO);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    
    // 여러 번 반복하여 블러 강화
    for (let i = 1; i < iterations; i++) {
        // 수평 블러
        gl.bindFramebuffer(gl.FRAMEBUFFER, pingpongFBO[i % 2]);
        gl.clear(gl.COLOR_BUFFER_BIT);
        
        gl.useProgram(horizontalBlurProgram);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, pingpongTexture[(i - 1) % 2]);
        gl.uniform1i(gl.getUniformLocation(horizontalBlurProgram, "u_texture"), 0);
        
        gl.bindVertexArray(quadVAO);
        gl.drawArrays(gl.TRIANGLES, 0, 6);
        
        // 수직 블러
        gl.bindFramebuffer(gl.FRAMEBUFFER, pingpongFBO[(i + 1) % 2]);
        gl.clear(gl.COLOR_BUFFER_BIT);
        
        gl.useProgram(verticalBlurProgram);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, pingpongTexture[i % 2]);
        gl.uniform1i(gl.getUniformLocation(verticalBlurProgram, "u_texture"), 0);
        
        gl.bindVertexArray(quadVAO);
        gl.drawArrays(gl.TRIANGLES, 0, 6);
    }
    
    // 최종 결과는 pingpongTexture[(iterations) % 2]에 있음
    return pingpongTexture[iterations % 2];
}

이런 방식으로 여러 패스의 효과를 효율적으로 적용할 수 있어요. 특히 모바일 기기에서는 이런 최적화가 더욱 중요하죠! 📱

다운샘플링 기법은 블룸이나 DOF 같은 효과에서 특히 효과적이에요. 원본 해상도의 1/4이나 심지어 1/8 크기로 처리해도 시각적 차이는 크지 않은 경우가 많거든요!

8.1 Three.js에서 커스텀 셰이더 사용하기

Three.js는 가장 인기 있는 WebGL 프레임워크 중 하나예요. Three.js에서 커스텀 셰이더를 사용하는 방법을 알아볼게요!

Three.js에서 커스텀 셰이더를 사용하는 기본적인 방법은 ShaderMaterial을 활용하는 거예요:

// 버텍스 셰이더
const vertexShader = `
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`;

// 프래그먼트 셰이더
const fragmentShader = `
uniform float time;
uniform vec3 color;
varying vec2 vUv;

void main() {
    // 시간에 따라 변화하는 패턴
    float pattern = sin(vUv.x * 10.0 + time) * sin(vUv.y * 10.0 + time);
    
    gl_FragColor = vec4(color * (0.5 + 0.5 * pattern), 1.0);
}`;

// 셰이더 머티리얼 생성
const material = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0.0 },
        color: { value: new THREE.Color(0x00aaff) }
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

// 메쉬 생성
const geometry = new THREE.PlaneGeometry(2, 2);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 애니메이션 루프
function animate() {
    requestAnimationFrame(animate);
    
    // 시간 유니폼 업데이트
    material.uniforms.time.value += 0.05;
    
    renderer.render(scene, camera);
}

하지만 더 고급 기능을 활용하려면 Three.js의 내부 WebGL 컨텍스트에 접근해야 할 수도 있어요:

// Three.js 렌더러의 WebGL 컨텍스트 접근
const gl = renderer.getContext();

// 커스텀 WebGL 2.0 기능 사용
const ext = gl.getExtension('EXT_color_buffer_float');
if (ext) {
    console.log('EXT_color_buffer_float 지원됨');
}

// 렌더 타겟 생성 시 WebGL 2.0 포맷 사용
const renderTarget = new THREE.WebGLRenderTarget(
    window.innerWidth, 
    window.innerHeight, 
    {
        format: THREE.RGBAFormat,
        type: THREE.HalfFloatType, // 16비트 부동소수점
        depthBuffer: true,
        stencilBuffer: false
    }
);

// 렌더 패스 중간에 커스텀 WebGL 코드 삽입
renderer.onBeforeRender = function() {
    // 커스텀 WebGL 코드
    const gl = renderer.getContext();
    
    // 예: 커스텀 VAO 설정
    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);
    
    // ... 기타 WebGL 코드
};

Three.js는 정말 강력하지만, WebGL 2.0의 모든 기능을 직접 노출하지는 않아요. 그래서 정말 고급 기능을 사용하려면 이렇게 내부 WebGL 컨텍스트에 접근해야 하는 경우가 있죠! 🔍

8.2 React와 WebGL 통합하기

요즘 프론트엔드 개발에서는 React 같은 프레임워크를 많이 사용하죠. React와 WebGL을 통합하는 방법을 알아볼게요!

React에서 WebGL을 사용하는 가장 간단한 방법은 useRef와 useEffect를 활용하는 거예요:

import React, { useRef, useEffect, useState } from 'react';

function WebGLComponent() {
    const canvasRef = useRef(null);
    const [rotation, setRotation] = useState(0);
    
    // WebGL 초기화 및 렌더링
    useEffect(() => {
        const canvas = canvasRef.current;
        const gl = canvas.getContext('webgl2');
        
        if (!gl) {
            alert('WebGL 2.0을 지원하지 않는 브라우저입니다!');
            return;
        }
        
        // 셰이더, 버퍼 등 초기화 코드
        // ...
        
        // 애니메이션 루프
        let animationId;
        const render = () => {
            // 렌더링 코드
            // ...
            
            // 상태 업데이트 (필요한 경우)
            setRotation(prev => (prev + 0.01) % (Math.PI * 2));
            
            animationId = requestAnimationFrame(render);
        };
        
        render();
        
        // 클린업 함수
        return () => {
            cancelAnimationFrame(animationId);
            
            // WebGL 리소스 정리
            // 버퍼, 텍스처, 셰이더 프로그램 등 삭제
            // ...
        };
    }, []);
    
    return (
        <div className="webgl-container">
            <canvas 
                ref={canvasRef} 
                width={800} 
                height={600} 
                style={{ display: 'block', margin: '0 auto' }}
            />
            <div className="controls">
                <p>현재 회전: {rotation.toFixed(2)}</p>
                {/* 기타 UI 컨트롤 */}
            </div>
        </div>
    );
}

하지만 더 복잡한 애플리케이션에서는 React와 WebGL의 라이프사이클을 관리하는 것이 까다로울 수 있어요. 이때 react-three-fiber 같은 라이브러리가 유용하죠:

import React, { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Environment } from '@react-three/drei';

// 커스텀 셰이더 머티리얼 컴포넌트
function ShaderMaterial() {
    const materialRef = useRef();
    const [hovered, setHovered] = useState(false);
    
    // 매 프레임마다 셰이더 유니폼 업데이트
    useFrame(({ clock }) => {
        if (materialRef.current) {
            materialRef.current.uniforms.time.value = clock.getElapsedTime();
            materialRef.current.uniforms.hover.value = hovered ? 1.0 : 0.0;
        }
    });
    
    return (
        <shaderMaterial
            ref={materialRef}
            attach="material"
            args={[{
                uniforms: {
                    time: { value: 0.0 },
                    hover: { value: 0.0 },
                    color: { value: [0.2, 0.5, 0.8] }
                },
                vertexShader: `
                    varying vec2 vUv;
                    void main() {
                        vUv = uv;
                        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                    }
                `,
                fragmentShader: `
                    uniform float time;
                    uniform float hover;
                    uniform vec3 color;
                    varying vec2 vUv;
                    
                    void main() {
                        vec2 center = vUv - 0.5;
                        float dist = length(center);
                        float pulse = sin(time * 3.0) * 0.5 + 0.5;
                        float circle = smoothstep(0.2 + pulse * 0.1, 0.2 + pulse * 0.1 + 0.01, dist);
                        
                        vec3 finalColor = mix(color, color * 2.0, hover);
                        gl_FragColor = vec4(finalColor * (1.0 - circle), 1.0);
                    }
                `
            }]}
            onPointerOver={() => setHovered(true)}
            onPointerOut={() => setHovered(false)}
        />
    );
}

// 메인 씬 컴포넌트
function Scene() {
    return (
        <Canvas camera={{ position: [0, 0, 5] }}>
            <OrbitControls />
            <ambientLight intensity={0.5} />
            <pointLight position={[10, 10, 10]} />
            
            <mesh>
                <sphereGeometry args={[1, 64, 64]} />
                <ShaderMaterial />
            </mesh>
            
            <Environment preset="sunset" />
        </Canvas>
    );
}

export default Scene;

react-three-fiber는 React의 선언적 스타일로 Three.js를 사용할 수 있게 해주는 정말 멋진 라이브러리예요. 복잡한 3D 인터페이스를 React 컴포넌트처럼 구성할 수 있죠! 👨‍💻

React와 WebGL을 통합할 때는 성능에 특히 주의해야 해요. React의 리렌더링 사이클과 WebGL의 렌더링 루프가 충돌하지 않도록 관리하는 것이 중요하죠!

8.3 WebGL 컴포넌트 아키텍처 설계

대규모 WebGL 애플리케이션을 개발할 때는 잘 설계된 아키텍처가 필수적이에요. 특히 재능넷같은 플랫폼에서 복잡한 시각화 도구를 개발할 때 더욱 그렇죠!

효과적인 WebGL 컴포넌트 아키텍처의 핵심 원칙들을 살펴볼게요:

1. 관심사 분리: 렌더링, 물리, 입력 처리 등을 분리해요.
2. 리소스 관리: 텍스처, 셰이더, 지오메트리 등의 리소스를 중앙에서 관리해요.
3. 상태 관리: 렌더링 상태와 애플리케이션 상태를 명확히 구분해요.
4. 이벤트 시스템: 컴포넌트 간 통신을 위한 이벤트 시스템을 구축해요.
5. 렌더 파이프라인 추상화: 다양한 렌더링 기법을 쉽게 조합할 수 있게 해요.

간단한 엔진 아키텍처 예시를 볼까요?

// WebGL 엔진 클래스
class WebGLEngine {
    constructor(canvas) {
        this.canvas = canvas;
        this.gl = canvas.getContext('webgl2');
        
        if (!this.gl) {
            throw new Error('WebGL 2.0을 지원하지 않는 브라우저입니다!');
        }
        
        // 리소스 관리자
        this.resourceManager = new ResourceManager(this.gl);
        
        // 렌더 파이프라인
        this.renderPipeline = new RenderPipeline(this.gl, this.resourceManager);
        
        // 씬 그래프
        this.scene = new Scene();
        
        // 입력 관리자
        this.inputManager = new InputManager(this.canvas);
        
        // 이벤트 시스템
        this.eventEmitter = new EventEmitter();
        
        // 애니메이션 루프 설정
        this.lastTime = 0;
        this.running = false;
    }
    
    // 리소스 로딩
    async loadResources(resourceList) {
        return this.resourceManager.loadResources(resourceList);
    }
    
    // 렌더 패스 추가
    addRenderPass(pass) {
        this.renderPipeline.addPass(pass);
    }
    
    // 엔티티 추가
    addEntity(entity) {
        this.scene.add(entity);
        entity.onAdd(this);
    }
    
    // 애니메이션 시작
    start() {
        this.running = true;
        this.lastTime = performance.now();
        requestAnimationFrame(this.loop.bind(this));
    }
    
    // 애니메이션 정지
    stop() {
        this.running = false;
    }
    
    // 메인 루프
    loop(currentTime) {
        if (!this.running) return;
        
        const deltaTime = (currentTime - this.lastTime) / 1000;
        this.lastTime = currentTime;
        
        // 입력 업데이트
        this.inputManager.update();
        
        // 씬 업데이트
        this.scene.update(deltaTime, this);
        
        // 렌더링
        this.renderPipeline.render(this.scene);
        
        // 다음 프레임 요청
        requestAnimationFrame(this.loop.bind(this));
    }
    
    // 리소스 정리
    dispose() {
        this.stop();
        this.scene.dispose();
        this.renderPipeline.dispose();
        this.resourceManager.dispose();
        this.inputManager.dispose();
        this.eventEmitter.clear();
    }
}

// 사용 예시
async function initApp() {
    const canvas = document.getElementById('webgl-canvas');
    const engine = new WebGLEngine(canvas);
    
    // 리소스 로딩
    await engine.loadResources([
        { type: 'texture', id: 'albedo', url: 'textures/albedo.jpg' },
        { type: 'model', id: 'character', url: 'models/character.glb' }
    ]);
    
    // 렌더 패스 설정
    engine.addRenderPass(new ShadowPass());
    engine.addRenderPass(new MainPass());
    engine.addRenderPass(new PostProcessPass());
    
    // 엔티티 추가
    const character = new Character(engine.resourceManager.get('character'));
    engine.addEntity(character);
    
    // 이벤트 리스닝
    engine.eventEmitter.on('characterMove', (position) => {
        // 캐릭터 이동 처리
    });
    
    // 시작
    engine.start();
    
    // 정리 (필요할 때)
    // engine.dispose();
}

이런 아키텍처는 확장성이 뛰어나고, 코드 재사용성이 높으며, 유지보수가 쉬워요. 특히 여러 개발자가 함께 작업하는 대규모 프로젝트에서 더욱 중요하죠! 🏗️

9.1 WebGL 디버깅 도구

WebGL 디버깅을 위한 유용한 도구들을 알아볼게요:

1. 브라우저 개발자 도구: Chrome, Firefox 등의 내장 디버깅 도구
2. Spector.js: WebGL 호출을 캡처하고 분석하는 도구
3. WebGL Inspector: WebGL 컨텍스트를 검사하는 브라우저 확장 프로그램
4. glslang Validator: GLSL 셰이더 코드 검증 도구
5. RenderDoc: 그래픽 디버깅 도구 (일부 브라우저에서 지원)

Spector.js를 사용하는 예시를 볼까요?

// 개발 모드에서만 Spector.js 로드
if (process.env.NODE_ENV === 'development') {
    const SPECTOR = require('spectorjs');
    const spector = new SPECTOR.Spector();
    spector.displayUI();
    
    // 특정 캔버스 캡처
    const canvas = document.getElementById('webgl-canvas');
    spector.captureCanvas(canvas);
}

또한 자체 디버깅 유틸리티를 만드는 것도 좋은 방법이에요:

// WebGL 에러 체크 유틸리티
function checkGLError(gl, operation) {
    const error = gl.getError();
    if (error !== gl.NO_ERROR) {
        let errorStr;
        switch (error) {
            case gl.INVALID_ENUM: errorStr = "INVALID_ENUM"; break;
            case gl.INVALID_VALUE: errorStr = "INVALID_VALUE"; break;
            case gl.INVALID_OPERATION: errorStr = "INVALID_OPERATION"; break;
            case gl.OUT_OF_MEMORY: errorStr = "OUT_OF_MEMORY"; break;
            case gl.CONTEXT_LOST_WEBGL: errorStr = "CONTEXT_LOST_WEBGL"; break;
            default: errorStr = `Unknown Error (${error})`;
        }
        console.error(`WebGL Error: ${errorStr} during ${operation}`);
        return true;
    }
    return false;
}

// 셰이더 컴파일 상태 체크
function checkShaderCompileStatus(gl, shader, source) {
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        const info = gl.getShaderInfoLog(shader);
        console.error('셰이더 컴파일 에러:\n' + info);
        
        // 라인 번호와 함께 소스 코드 출력
        const lines = source.split('\n');
        console.log('셰이더 소스:');
        lines.forEach((line, i) => {
            console.log(`${i + 1}: ${line}`);
        });
        
        return false;
    }
    return true;
}

// 프로그램 링크 상태 체크
function checkProgramLinkStatus(gl, program) {
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        const info = gl.getProgramInfoLog(program);
        console.error('프로그램 링크 에러:\n' + info);
        return false;
    }
    return true;
}

이런 유틸리티 함수들을 사용하면 WebGL 에러를 더 쉽게 발견하고 디버깅할 수 있어요! 🔎

9.2 성능 프로파일링 기법

WebGL 애플리케이션의 성능을 측정하고 최적화하는 방법을 알아볼게요:

1. 타임스탬프 쿼리: GPU 작업의 실행 시간을 측정해요.
2. 프레임 프로파일링: 각 프레임의 CPU/GPU 시간을 측정해요.
3. 메모리 사용량 모니터링: 텍스처, 버퍼 등의 메모리 사용량을 추적해요.
4. 드로우 콜 카운팅: 프레임당 드로우 콜 수를 모니터링해요.
5. 셰이더 복잡도 분석: 셰이더의 성능 영향을 분석해요.

타임스탬프 쿼리를 사용한 프로파일링 예시를 볼까요?

// 타임스탬프 쿼리 확장 가져오기
const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
if (!ext) {
    console.warn('EXT_disjoint_timer_query_webgl2 확장이 지원되지 않습니다.');
    return;
}

// 쿼리 객체 생성
const query = gl.createQuery();

// 렌더링 시간 측정 시작
gl.beginQuery(ext.TIME_ELAPSED_EXT, query);

// 측정할 렌더링 작업 수행
drawScene();

// 측정 종료
gl.endQuery(ext.TIME_ELAPSED_EXT);

// 결과 가져오기 (비동기)
function checkQueryResult() {
    // 쿼리 결과가 준비되었는지 확인
    const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
    const disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
    
    if (available) {
        // 컨텍스트가 손상되지 않았는지 확인
        if (!disjoint) {
            // 나노초 단위의 경과 시간 가져오기
            const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
            console.log(`렌더링 시간: ${timeElapsed / 1000000} ms`);
        } else {
            console.warn('GPU 컨텍스트가 손상되었습니다. 측정 결과가 유효하지 않습니다.');
        }
        
        gl.deleteQuery(query);
    } else {
        // 결과가 아직 준비되지 않았으면 다시 확인
        setTimeout(checkQueryResult, 10);
    }
}

setTimeout(checkQueryResult, 10);

또한 프레임 프로파일링을 위한 간단한 유틸리티 클래스를 만들 수도 있어요:

class PerformanceMonitor {
    constructor() {
        this.frameCount = 0;
        this.fps = 0;
        this.frameTimes = [];
        this.lastFrameTime = performance.now();
        
        // 측정 카테고리
        this.categories = {
            update: [],
            render: [],
            physics: []
        };
        
        // 통계 UI
        this.statsElement = document.createElement('div');
        this.statsElement.style.position = 'fixed';
        this.statsElement.style.top = '10px';
        this.statsElement.style.right = '10px';
        this.statsElement.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        this.statsElement.style.color = 'white';
        this.statsElement.style.padding = '10px';
        this.statsElement.style.fontFamily = 'monospace';
        this.statsElement.style.fontSize = '12px';
        this.statsElement.style.zIndex = '1000';
        document.body.appendChild(this.statsElement);
        
        // 1초마다 FPS 업데이트
        setInterval(() => this.updateFPS(), 1000);
    }
    
    // 프레임 시작
    beginFrame() {
        this.frameStartTime = performance.now();
        this.currentFrame = {
            total: 0,
            categories: {}
        };
    }
    
    // 카테고리 측정 시작
    beginCategory(name) {
        this.categoryStartTime = performance.now();
        this.currentCategory = name;
    }
    
    // 카테고리 측정 종료
    endCategory() {
        const endTime = performance.now();
        const duration = endTime - this.categoryStartTime;
        
        if (!this.currentFrame.categories[this.currentCategory]) {
            this.currentFrame.categories[this.currentCategory] = 0;
        }
        
        this.currentFrame.categories[this.currentCategory] += duration;
    }
    
    // 프레임 종료
    endFrame() {
        const now = performance.now();
        const frameDuration = now - this.frameStartTime;
        
        this.currentFrame.total = frameDuration;
        this.frameTimes.push(this.currentFrame);
        
        // 최대 60개 프레임만 저장
        if (this.frameTimes.length > 60) {
            this.frameTimes.shift();
        }
        
        this.frameCount++;
        this.lastFrameTime = now;
        
        // 통계 UI 업데이트
        this.updateStats();
    }
    
    // FPS 계산
    updateFPS() {
        this.fps = this.frameCount;
        this.frameCount = 0;
    }
    
    // 통계 UI 업데이트
    updateStats() {
        // 최근 프레임들의 평균 계산
        const avgTotal = this.frameTimes.reduce((sum, frame) => sum + frame.total, 0) / this.frameTimes.length;
        
        let categoryStats = '';
        const categories = {};
        
        // 카테고리별 평균 시간 계산
        this.frameTimes.forEach(frame => {
            Object.entries(frame.categories).forEach(([category, time]) => {
                if (!categories[category]) {
                    categories[category] = [];
                }
                categories[category].push(time);
            });
        });
        
        // 카테고리별 통계 문자열 생성
        Object.entries(categories).forEach(([category, times]) => {
            const avg = times.reduce((sum, time) => sum + time, 0) / times.length;
            categoryStats += `${category}: ${avg.toFixed(2)} ms (${(avg / avgTotal * 100).toFixed(1)}%)<br>`;
        });
        
        // 통계 UI 업데이트
        this.statsElement.innerHTML = `
            FPS: ${this.fps}<br>
            Frame Time: ${avgTotal.toFixed(2)} ms<br>
            <br>
            ${categoryStats}
        `;
    }
}

// 사용 예시
const perfMonitor = new PerformanceMonitor();

function gameLoop() {
    perfMonitor.beginFrame();
    
    perfMonitor.beginCategory('update');
    updateGame();
    perfMonitor.endCategory();
    
    perfMonitor.beginCategory('physics');
    updatePhysics();
    perfMonitor.endCategory();
    
    perfMonitor.beginCategory('render');
    renderScene();
    perfMonitor.endCategory();
    
    perfMonitor.endFrame();
    
    requestAnimationFrame(gameLoop);
}

이런 성능 모니터링 도구를 사용하면 애플리케이션의 병목 지점을 찾고 최적화하는 데 큰 도움이 돼요! 📊

9.3 일반적인 성능 병목 현상과 해결책

WebGL 애플리케이션에서 자주 발생하는 성능 병목 현상과 그 해결책을 알아볼게요:

1. CPU 병목
   • 증상: 높은 JavaScript 실행 시간, 낮은 GPU 사용률
   • 원인: 과도한 상태 변경, 많은 드로우 콜, 비효율적인 JavaScript 코드
   • 해결책: 인스턴싱 사용, 배칭 적용, 상태 변경 최소화, Web Worker 활용
2. GPU 병목
   • 증상: 낮은 JavaScript 실행 시간, 높은 GPU 사용률
   • 원인: 복잡한 셰이더, 고해상도 렌더링, 과도한 오버드로우
   • 해결책: 셰이더 최적화, LOD 적용, 오클루전 컬링, 해상도 조정
3. 메모리 병목
   • 증상: 주기적인 프레임 드롭, 메모리 사용량 증가
   • 원인: 텍스처 누수, 불필요한 리소스 생성, 가비지 컬렉션
   • 해결책: 리소스 풀링, 텍스처 압축, 메모리 사용량 모니터링
4. 대역폭 병목
   • 증상: 텍스처 업데이트 시 성능 저하
   • 원인: 과도한 텍스처/버퍼 업데이트, 큰 데이터 전송
   • 해결책: 부분 업데이트 사용, 압축 텍스처 활용, 업데이트 빈도 줄이기

성능 최적화를 위한 체크리스트를 만들어볼게요:

// WebGL 성능 최적화 체크리스트

// 1. 드로우 콜 최적화
- 비슷한 객체는 배칭으로 합치기
- 인스턴싱 사용하기
- 정적 객체는 미리 결합하기

// 2. 상태 변경 최소화
- 재질/텍스처별로 객체 정렬하기
- VAO 사용하기
- 불필요한 바인딩 피하기

// 3. 셰이더 최적화
- 복잡한 수학 함수 피하기 (pow, exp 등)
- 분기문 최소화하기
- 루프 풀어쓰기
- 정밀도 적절히 선택하기 (highp/mediump/lowp)

// 4. 텍스처 최적화
- 밉맵 사용하기
- 적절한 텍스처 포맷 선택하기
- 텍스처 압축 활용하기
- 텍스처 아틀라스 사용하기

// 5. 지오메트리 최적화
- 폴리곤 수 줄이기
- LOD 구현하기
- 오클루전 컬링 적용하기
- 인덱스 버퍼 사용하기

// 6. 메모리 관리
- 불필요한 리소스 삭제하기
- 리소스 풀링 구현하기
- 가비지 컬렉션 최소화하기
- 텍스처/버퍼 재사용하기

// 7. 렌더링 최적화
- 오프스크린 렌더링 해상도 조절하기
- 포스트 프로세싱 효과 단순화하기
- 투명 객체 최소화하기
- 그림자 해상도/품질 조절하기

성능 최적화는 항상 측정에서 시작해야 해요. 추측이 아닌 실제 데이터를 바탕으로 최적화하는 것이 중요하죠! 📏

10.1 인터랙티브 데이터 시각화

대용량 데이터를 WebGL로 시각화하는 프로젝트를 살펴볼게요. 이런 프로젝트는 재능넷같은 플랫폼에서 데이터 분석가나 시각화 전문가들이 제공할 수 있는 고급 서비스의 좋은 예시가 될 수 있어요!

예를 들어, 수백만 개의 데이터 포인트를 인터랙티브하게 시각화하는 프로젝트를 생각해볼게요:

1. 도전 과제: 수백만 개의 데이터 포인트를 60fps로 렌더링하고 실시간 필터링/줌/회전 지원
2. 해결 방법:
   • 인스턴싱을 사용해 데이터 포인트 렌더링
   • GPU에서 데이터 필터링을 위한 트랜스폼 피드백 활용
   • LOD 시스템으로 시점에 따라 데이터 밀도 조절
   • 색상/크기 매핑을 위한 커스텀 셰이더 사용
3. 결과: 기존 Canvas 2D나 SVG 기반 솔루션보다 100배 이상 빠른 성능

이런 프로젝트의 핵심 코드 일부를 살펴볼게요:

// 데이터 포인트를 위한 버퍼 설정
const dataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, dataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(dataPoints), gl.STATIC_DRAW);

// 색상 매핑을 위한 텍스처 설정
const colorMapTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, colorMapTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, colorMapWidth, 1, 0, 
              gl.RGBA, gl.UNSIGNED_BYTE, colorMapData);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 필터링을 위한 트랜스폼 피드백 설정
const tf = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);

const filteredDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, filteredDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(dataPoints.length), gl.DYNAMIC_COPY);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, filteredDataBuffer);

// 필터링 셰이더
const filterVertexShader = `#version 300 es
in vec4 a_data;
out vec4 v_filteredData;

uniform vec2 u_filterRange;
uniform int u_filterAttribute;

void main() {
    // 특정 속성이 범위 내에 있는지 확인
    float value = a_data[u_filterAttribute];
    if(value >= u_filterRange.x && value <= u_filterRange.y) {
        // 필터 통과
        v_filteredData = a_data;
    } else {
        // 필터 실패 (마커로 -1 사용)
        v_filteredData = vec4(-1.0);
    }
}`;

// 렌더링 셰이더
const renderVertexShader = `#version 300 es
in vec4 a_data;
uniform mat4 u_matrix;
uniform float u_pointSize;
uniform int u_colorAttribute;
out float v_value;

void main() {
    // 위치 계산 (x, y, z 좌표는 데이터의 처음 3개 값)
    vec3 position = vec3(a_data.xyz);
    gl_Position = u_matrix * vec4(position, 1.0);
    
    // 색상 매핑을 위한 값 전달
    v_value = a_data[u_colorAttribute];
    
    // 거리에 따른 점 크기 조절
    float distance = length(gl_Position.xyz);
    gl_PointSize = u_pointSize / distance;
}`;

const renderFragmentShader = `#version 300 es
precision highp float;

in float v_value;
uniform sampler2D u_colorMap;
uniform float u_valueMin;
uniform float u_valueMax;
out vec4 outColor;

void main() {
    // 원형 점 모양 만들기
    vec2 center = gl_PointCoord - vec2(0.5);
    float dist = length(center);
    if(dist > 0.5) discard;
    
    // 값을 0-1 범위로 정규화
    float normalizedValue = clamp((v_value - u_valueMin) / (u_valueMax - u_valueMin), 0.0, 1.0);
    
    // 색상 맵에서 색상 가져오기
    outColor = texture(u_colorMap, vec2(normalizedValue, 0.5));
    
    // 가장자리를 부드럽게
    outColor.a *= smoothstep(0.5, 0.4, dist);
}

이런 방식으로 WebGL 2.0의 고급 기능들을 활용하면 기존 웹 기술로는 불가능했던 수준의 대규모 데이터 시각화가 가능해져요! 📊

10.2 3D 제품 구성기

다음으로, WebGL을 활용한 인터랙티브 3D 제품 구성기 사례를 살펴볼게요. 이런 애플리케이션은 사용자가 제품을 실시간으로 커스터마이징하고 3D로 확인할 수 있게 해줘요!

1. 도전 과제: 수백 개의 부품 옵션을 가진 제품을 실시간으로 렌더링하고 사용자 커스터마이징 지원
2. 해결 방법:
   • PBR 렌더링으로 사실적인 재질 표현
   • GLTF 모델 스트리밍 및 캐싱
   • 동적 텍스처 합성으로 사용자 패턴/색상 적용
   • 환경 맵 기반 조명으로 다양한 환경에서의 제품 모습 시연
3. 결과: 사용자 참여도 증가, 반품률 감소, 평균 주문 금액 상승

이런 프로젝트의 핵심 코드 일부를 살펴볼게요:

// 제품 구성기 클래스
class ProductConfigurator {
    constructor(canvas) {
        // Three.js 설정
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.1, 1000);
        this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
        this.renderer.physicallyCorrectLights = true;
        this.renderer.outputEncoding = THREE.sRGBEncoding;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
        
        // 컨트롤 설정
        this.controls = new THREE.OrbitControls(this.camera, canvas);
        this.controls.enableDamping = true;
        
        // 환경 맵 로드
        this.envMapLoader = new THREE.RGBELoader();
        this.envMapLoader.load('assets/environment.hdr', (texture) => {
            texture.mapping = THREE.EquirectangularReflectionMapping;
            this.scene.environment = texture;
            this.scene.background = new THREE.Color(0xffffff);
        });
        
        // 모델 로더 설정
        this.gltfLoader = new THREE.GLTFLoader();
        
        // 제품 부품 관리
        this.parts = {};
        this.materials = {};
        
        // 애니메이션 루프 시작
        this.animate();
    }
    
    // 부품 로드
    async loadPart(partId, url) {
        return new Promise((resolve) => {
            this.gltfLoader.load(url, (gltf) => {
                const part = gltf.scene;
                
                // 기존 부품이 있으면 제거
                if (this.parts[partId]) {
                    this.scene.remove(this.parts[partId]);
                }
                
                // 새 부품 추가
                this.parts[partId] = part;
                this.scene.add(part);
                
                // 재질 참조 저장
                part.traverse((child) => {
                    if (child.isMesh) {
                        this.materials[`${partId}_${child.name}`] = child.material;
                    }
                });
                
                resolve(part);
            });
        });
    }
    
    // 재질 색상 변경
    setMaterialColor(materialId, color) {
        const material = this.materials[materialId];
        if (material) {
            material.color.set(color);
            
            // 금속성 재질인 경우 특별 처리
            if (material.metalness > 0.5) {
                // 금속은 색상이 반사색에 영향을 줌
                material.metalnessMap = null;
                material.metalness = 0.9;
                material.roughness = 0.3;
            }
        }
    }
    
    // 텍스처 패턴 적용
    async applyPattern(materialId, patternUrl, scale = 1.0) {
        const material = this.materials[materialId];
        if (!material) return;
        
        return new Promise((resolve) => {
            new THREE.TextureLoader().load(patternUrl, (texture) => {
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set(scale, scale);
                
                // 기존 맵 백업
                const originalMap = material.map;
                
                // 패턴 적용을 위한 캔버스 생성
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = 1024;
                canvas.height = 1024;
                
                // 원본 텍스처 그리기
                if (originalMap) {
                    const img = originalMap.image;
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                }
                
                // 패턴 오버레이
                const patternImg = texture.image;
                ctx.globalCompositeOperation = 'multiply';
                ctx.drawImage(patternImg, 0, 0, canvas.width, canvas.height);
                
                // 새 텍스처 생성
                const newTexture = new THREE.CanvasTexture(canvas);
                newTexture.encoding = THREE.sRGBEncoding;
                
                // 재질에 적용
                material.map = newTexture;
                material.needsUpdate = true;
                
                resolve();
            });
        });
    }
    
    // 환경 변경
    changeEnvironment(envMapUrl) {
        this.envMapLoader.load(envMapUrl, (texture) => {
            texture.mapping = THREE.EquirectangularReflectionMapping;
            this.scene.environment = texture;
        });
    }
    
    // 애니메이션 루프
    animate() {
        requestAnimationFrame(this.animate.bind(this));
        
        this.controls.update();
        this.renderer.render(this.scene, this.camera);
    }
    
    // 스크린샷 생성
    takeScreenshot() {
        this.renderer.preserveDrawingBuffer = true;
        this.renderer.render(this.scene, this.camera);
        const screenshot = this.renderer.domElement.toDataURL('image/png');
        this.renderer.preserveDrawingBuffer = false;
        return screenshot;
    }
}

이런 3D 제품 구성기는 온라인 쇼핑 경험을 완전히 바꿀 수 있어요! 사용자들이 제품을 더 잘 이해하고 자신에게 맞는 옵션을 선택할 수 있게 도와주죠. 🛒

10.3 웹 기반 3D 게임 엔진

마지막으로, WebGL 2.0을 활용한 웹 기반 3D 게임 엔진 사례를 살펴볼게요. 이런 프로젝트는 웹에서도 고품질 게임을 개발할 수 있는 가능성을 보여줘요!

1. 도전 과제: 모바일 기기를 포함한 다양한 플랫폼에서 60fps로 작동하는 3D 게임 엔진 개발
2. 해결 방법:
   • WebGL 2.0의 모든 고급 기능 활용 (인스턴싱, VAO, UBO 등)
   • 멀티스레딩을 위한 Web Worker 활용
   • 적응형 렌더링 파이프라인으로 디바이스 성능에 맞게 품질 조절
   • 물리 엔진, 애니메이션 시스템, 파티클 시스템 등 게임 기능 구현
3. 결과: 설치 없이 바로 플레이 가능한 고품질 3D 게임 제공

이런 게임 엔진의 렌더링 파이프라인 코드 일부를 살펴볼게요:

// 적응형 렌더링 파이프라인 클래스
class AdaptiveRenderPipeline {
    constructor(gl, capabilities) {
        this.gl = gl;
        this.capabilities = capabilities;
        
        // 성능 모니터
        this.performanceMonitor = new PerformanceMonitor();
        
        // 렌더 타겟 설정
        this.setupRenderTargets();
        
        // 렌더 패스 설정
        this.passes = {
            shadow: new ShadowPass(gl, this.shadowTarget),
            gbuffer: new GBufferPass(gl, this.gBufferTarget),
            lighting: new DeferredLightingPass(gl, this.gBufferTarget, this.lightingTarget),
            transparent: new TransparentPass(gl, this.lightingTarget),
            postprocess: new PostProcessPass(gl, this.lightingTarget)
        };
        
        // 품질 설정
        this.qualityLevels = {
            low: {
                shadowMapSize: 1024,
                renderScale: 0.75,
                maxLights: 8,
                enableSSAO: false,
                enableBloom: false,
                particleDensity: 0.5
            },
            medium: {
                shadowMapSize: 2048,
                renderScale: 1.0,
                maxLights: 16,
                enableSSAO: true,
                enableBloom: true,
                particleDensity: 0.75
            },
            high: {
                shadowMapSize: 4096,
                renderScale: 1.0,
                maxLights: 32,
                enableSSAO: true,
                enableBloom: true,
                particleDensity: 1.0
            }
        };
        
        // 초기 품질 설정
        this.setQualityLevel('medium');
        
        // 자동 품질 조정 활성화
        this.enableAdaptiveQuality = true;
    }
    
    // 렌더 타겟 설정
    setupRenderTargets() {
        const width = this.gl.drawingBufferWidth;
        const height = this.gl.drawingBufferHeight;
        
        // 그림자 맵
        this.shadowTarget = new RenderTarget(this.gl, {
            width: 2048,
            height: 2048,
            colorFormat: null, // 깊이만 필요
            depthFormat: this.gl.DEPTH_COMPONENT24
        });
        
        // G-버퍼 (지오메트리 정보 저장)
        this.gBufferTarget = new RenderTarget(this.gl, {
            width,
            height,
            colorAttachments: [
                { format: this.gl.RGBA8 },  // 알베도 + 투명도
                { format: this.gl.RGBA8 },  // 노멀 + 거칠기
                { format: this.gl.RGBA8 }   // 위치 + 금속성
            ],
            depthFormat: this.gl.DEPTH_COMPONENT24
        });
        
        // 라이팅 결과
        this.lightingTarget = new RenderTarget(this.gl, {
            width,
            height,
            colorFormat: this.gl.RGBA16F,
            depthFormat: this.gl.DEPTH_COMPONENT24
        });
        
        // 후처리 타겟 (핑퐁 버퍼)
        this.postprocessTargets = [
            new RenderTarget(this.gl, {
                width,
                height,
                colorFormat: this.gl.RGBA16F
            }),
            new RenderTarget(this.gl, {
                width,
                height,
                colorFormat: this.gl.RGBA16F
            })
        ];
    }
    
    // 품질 레벨 설정
    setQualityLevel(level) {
        const quality = this.qualityLevels[level];
        if (!quality) return;
        
        this.currentQuality = quality;
        
        // 그림자 맵 크기 조정
        this.shadowTarget.resize(quality.shadowMapSize, quality.shadowMapSize);
        
        // 렌더 스케일 적용
        const width = this.gl.drawingBufferWidth * quality.renderScale;
        const height = this.gl.drawingBufferHeight * quality.renderScale;
        this.gBufferTarget.resize(width, height);
        this.lightingTarget.resize(width, height);
        this.postprocessTargets[0].resize(width, height);
        this.postprocessTargets[1].resize(width, height);
        
        // 각 패스에 품질 설정 적용
        for (const pass of Object.values(this.passes)) {
            pass.setQualitySettings(quality);
        }
    }
    
    // 렌더링 실행
    render(scene, camera) {
        this.performanceMonitor.beginFrame();
        
        // 그림자 패스
        this.performanceMonitor.beginCategory('shadows');
        this.passes.shadow.render(scene, camera);
        this.performanceMonitor.endCategory();
        
        // G-버퍼 패스
        this.performanceMonitor.beginCategory('gbuffer');
        this.passes.gbuffer.render(scene, camera);
        this.performanceMonitor.endCategory();
        
        // 라이팅 패스
        this.performanceMonitor.beginCategory('lighting');
        this.passes.lighting.render(scene, camera);
        this.performanceMonitor.endCategory();
        
        // 투명 객체 패스
        this.performanceMonitor.beginCategory('transparent');
        this.passes.transparent.render(scene, camera);
        this.performanceMonitor.endCategory();
        
        // 후처리 패스
        this.performanceMonitor.beginCategory('postprocess');
        this.passes.postprocess.render(scene, camera);
        this.performanceMonitor.endCategory();
        
        this.performanceMonitor.endFrame();
        
        // 적응형 품질 조정
        if (this.enableAdaptiveQuality) {
            this.updateAdaptiveQuality();
        }
    }
    
    // 적응형 품질 조정
    updateAdaptiveQuality() {
        const fps = this.performanceMonitor.fps;
        const currentLevel = Object.keys(this.qualityLevels).find(
            key => this.qualityLevels[key] === this.currentQuality
        );
        
        // FPS가 너무 낮으면 품질 낮추기
        if (fps < 30 && currentLevel !== 'low') {
            const levels = Object.keys(this.qualityLevels);
            const currentIndex = levels.indexOf(currentLevel);
            if (currentIndex > 0) {
                this.setQualityLevel(levels[currentIndex - 1]);
                console.log(`성능 최적화: 품질 레벨을 ${currentLevel}에서 ${levels[currentIndex - 1]}로 낮춤 (FPS: ${fps})`);
            }
        }
        // FPS가 충분히 높으면 품질 높이기
        else if (fps > 55 && currentLevel !== 'high') {
            const levels = Object.keys(this.qualityLevels);
            const currentIndex = levels.indexOf(currentLevel);
            if (currentIndex < levels.length - 1) {
                this.setQualityLevel(levels[currentIndex + 1]);
                console.log(`품질 향상: 품질 레벨을 ${currentLevel}에서 ${levels[currentIndex + 1]}로 높임 (FPS: ${fps})`);
            }
        }
    }
    
    // 리소스 정리
    dispose() {
        this.shadowTarget.dispose();
        this.gBufferTarget.dispose();
        this.lightingTarget.dispose();
        this.postprocessTargets[0].dispose();
        this.postprocessTargets[1].dispose();
        
        for (const pass of Object.values(this.passes)) {
            pass.dispose();
        }
    }
}

이런 웹 기반 게임 엔진은 설치 없이 바로 플레이할 수 있는 게임을 만들 수 있게 해줘요. 특히 HTML5 게임 시장이 성장하면서 이런 기술의 중요성이 더욱 커지고 있죠! 🎮

WebGL 2.0의 고급 기능들을 활용하면 웹에서도 거의 네이티브 앱 수준의 그래픽 성능을 달성할 수 있어요. 이는 웹 플랫폼의 가능성을 크게 확장시키는 중요한 발전이죠!