WebGL / WebGPU

WebGL : 브라우저에서 OpenGL ES 기반 3D 렌더링.

WebGPU : 후계자로 컴퓨트 셰이더와 멀티스레딩 지원.

 

왜 브라우저가 GPU가 필요한가

-> 브라우저의 진화

 

초기 웹

- HTML + CSS -> GPU가 2D 화면 그림 -> 애니메이션 = 느린 CPU 연산

 

Canvas 2D API (2004)

- CPU 기반 2D 드로잉

- 게임/시각화에는 너무 느리다

 

WebGL 1.0 (2011)

- 브라우저에서 처음으로 GPU 직접 활용

- OpenGL ES 2.0 기반

- 3D 게임, 시각화 가능

 

WebGL 2.0 (2017)

- OpenGL ES 3.0 기반

- 컴퓨트 셰이더 제외한 대부분 지원

 

WebGPU (2023~)

- Vulkan/DX12/Metal 수준 저수준 제어

- 컴퓨트 셰이더 완전 지원

- 브라우저에서 본격 GPU 연산 가능

 

WebGL vs WebGPU

WebGL	WebGPU
OpenGL ES 2.0/3.0 기반	Vulkan/DX12/Metal 수준
2011년 등장	2023년 정식 출시
전역 상태 머신	명시적 커맨드 버퍼
싱글 스레드	멀티스레드 가능 ( Web Worker )
GLSL ES	WGSL (WebGPU Shading Language)
드라이버가 많이 처리	개발자가 직접 제어
현재 모든 브라우저 지원	최신 브라우저에서 지원 중
안정적이지만 구식	복잡하지만 미래 표준

 

브라우저에서 그래픽스 API가 동작하는 방식

브라우저 내부 계층

 

JavaScript / WASM

↓

WebGL API / WebGPU API

↓

브라우저 내부 변환 레이어

Chorme : ANGLE (WebGL) / Dawn (WebGPU)

Firefox : WebGL 자체 구현 / wgpu

Safari : WebKit WebGL / WebGPU

↓

네이티브 그래픽스 API

Windows : OpenGL -> DX11 / DX12 (ANGLE 변환)

macOS : OpenGL -> Metal (ANGLE/MoltenGL)

Android : OpenGL ES

Linux : OpenGL / Vulkan

↓

GPU 드라이버 ->  GPU 하드웨어

 

브라우저에서 WebGL을 쓰면 실제로는 DX12나 Metal이 실행되는 경우가 많다

 

WebGL 기본 코드

// HTML Canvas 연결
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl'); // WebGL 1.0
// const gl = canvas.getContext('webgl2'); // WebGL 2.0

// 셰이더 (GLSL ES - OpenGL ES와 동일)
const vertexShaderSource = `
    attribute vec4 aPosition;
    attribute vec2 aTexCoord;
    varying vec2 vTexCoord;
    uniform mat4 uMVPMatrix;
    
    void main() {
         gl_Position = uMVPMatrix * aPosition;
         vTexCoord = aTexCoord;
    }
`;

const fragmentShaderSource = `
    precision mediump float; // 정밀도 명시
    varying vec2 vTexCoord;
    uniform sampler2D uTexture;
    
    void main() {
        gl_FragColor = texture2D(uTexture, vTexCoord);
    }
`;

// 셰이더 컴파일
function createShader(gl, type, source) 
{
     const shader = gl.createShader(type);
     gl.shaderSource(shader, source);
     gl.complieShader(shader);
     return shader;
}

// VBO 생성
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 드로우콜
gl.drawArrays(gl.TRIANGLES, 0, 3);

WebGL이 OpenGL ES 2.0 기반인게 코드에서 보인다.

 

WebGPU - 차세대 표준

// WebGPU 초기화
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// WGSL 셰이더 (WebGPU Shading Language)
const shaderCode = `
     // 버텍스 셰이더
     struct VertexOutput {
          @builtin(position) position: vec4f,
          @location(0) texCoord: vec2f,
     }
     
     @group(0) @binding(0) var<uniform> mvpMatrix: mat4x4f;
     
     @vertex
     fn vertexMain(
          @location(0) position: vec3f,
          @location(1) texCoord: vec2f
     ) -> VertexOutput {
          var out: VertexOutput;
          out.position = mvpMatrix * vec4f(position, 1.0);
          out.texCoord = texCoord;
          return out;
     }
     
     // 픽셀 셰이더
     @group(0) @binding(1) var myTexture : texture_2d<f32>;
     @group(0) @binding(2) var mySampler : sampler;
     
     @fragment
     fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
          return textureSample(myTexture, mySampler, in.texCoord);
     }
`;

// 파이프라인 생성
const pipeline = device.createRenderPipeline({
    vertex: {
          module: device.createShaderModule({ code: shaderCode }),
          entryPoint: 'vertexMain',
    },
    fragment: {
          module: device.createShaderModule({ code: shaderCode }),
          entryPoint: 'fragmentMain',
          targets: [{ format: 'bgra8unorm' }],
    },
});

// 커맨드 버퍼
const commandEncoder = device.createCommandEncoder();
const renderPass = commandEncoder.beginRenderPass(renderPassDescriptor);
renderPass.setPipeline(pipeline);
renderPass.draw(3);
renderPass.end();
device.queue.submit([commandEncoder.finish()]);

WebGPU 코드 구조가 Vulkan이랑 거의 동일하다.

 

WGSL : WebGPU 셰이더 언어

- Rust  문법에 영향으 ㄹ받음

- 타입 안전성이 강함

- @builtin, @location 어노테이션 시스템

- 브라우저 샌드박스 보안 고려한 설계

- SPIR-V로 컴파일 후 네이티브 API로 전달

 

Three.js/Babylon.js - WebGL 위의 고수준 프레임워크

 

WebGL (저수준 API)

- 드로우콜 직접 관리

- 셰이더 직접 작성

- 복잡하지만 완전한 제어

 

Three.js / Babylon.js ( 고수준 프레임워크 )

- WebGL을 추상화

- UE5 / Unity처럼 씬, 메시, 머티리얼 개념 제공

- 게임 엔진의 브라우저 버전

 

UE5 대비

- DX12/Vulkan 위의 고수준 엔진

 

Babylon.js의 특징

- Microsoft 개발

- WebGPU 지원 가장 빠름

- UE5와 유사한 PBR 머티리얼 시스템

 

컴퓨트 셰이더 : WebGPU의 핵심 혁신

// WebGPU 컴퓨트 셰이더
// 브라우저에서 GPU 병렬 연산 가능

const computeShader = `
    @group(0) @binding(0)
    var<storage, read_write> data: array<f32>;
    
    @compute @workgroup_size(64)
    fn main(@builtin(global_invocation_id) id: vec3u)
    {
         let index = id.x;
         data[index] = data[index] * 2.0; // 병렬 연산
    }
`;

// 수백만 개 데이터를 GPU에서 병렬 처리
// AI 추론, 물리 시뮬레이션, 이미지 처리 등등

// TensorFlow.js -> WebGPU 백엔드로 브라우저 AI 추론
// 파티클 시뮬레이션 -> 수백만 파티클을 JS 대신 GPU에서

 

연결되는 단어들

 

ANGLE : Almost Native Graphics Layer Engine. Chorme/Firefox/Edge가 WebGL을 DX11/DX12/Metal로 변환하는 레이어. Google이 개발했고 WebGL이 모든 플랫폼에서 동작하는 이유이다.

 

Dawn : Chrome의 WebGPU 구현체. WebGPU API를 Vulkan/DX12/Metal로 변환. Vulkan의 MoltenVK와 유사한 역할

 

wgpu : Rust로 작성된 크로스플랫폼 WebGPU 구현체. Firefox WebGPU, 게임 엔진 Bevy의 렌더링 백엔드. WebGPU를 네이티브에서도 사용 가능하게 한다.

 

SPIR-V : Vulkan/WebGPU의 셰이더 중간 표현. GLSL/HLSL/WGSL을 SPIR-V로 컴파일 후 네이티브 API에 제출. 크로스플랫폼 셰이더의 공통 언어.