Skip to content
Published on

WebGPU & WGSL 생태계 2026 — Chrome / Safari / Firefox 전체 GA / wgpu / naga / Tint / Three.js / Babylon / WebLLM / Transformers.js 심층 가이드

🇰🇷KO🇺🇸EN🇯🇵JA
Split View필사 모드
Authors

1장 · 2026년 WebGPU 지도 — 3대 브라우저 모두 GA

10년 동안 WebGL 1.0(2011)과 WebGL 2.0(2017)으로 버텨온 브라우저 그래픽은, 2026년 마침내 차세대 표준을 손에 넣었다. Chrome 113(2023년 5월), Safari 18(2024년 9월), Firefox 141(2025년 8월) — 모든 evergreen 브라우저가 WebGPU를 안정 지원한다.

WebGPU는 단순한 "더 빠른 WebGL"이 아니다.

  • 현대 GPU API의 추상화 — Vulkan / Metal / DirectX 12를 가린 얇은 레이어
  • 컴퓨트 셰이더 1급 시민 — GPGPU(범용 GPU 계산)가 브라우저에서 가능
  • WGSL — GLSL 대신 새 셰이딩 언어 (Rust 스타일 문법, Apple/Google/Mozilla 공동 설계)
  • 명시적 파이프라인 — drawcall 오버헤드 감소, 멀티스레딩 친화적
  • 바인딩 그룹 + 버퍼 관리 — 현대 그래픽 API의 best practice 그대로

2026년 5월 현재, "WebGPU를 쓸까 말까"의 답은 단순하다. 새 프로젝트라면 WebGPU부터 보고, fallback으로 WebGL을 두자. 이 글은 사양 → 브라우저 → WGSL → 컴파일러 → 라이브러리 → ML 응용까지 한 장씩 짚는다.

이 글의 코드는 한 줄도 폴리필이 없다. 모두 2026년 5월 evergreen 브라우저의 안정 기능을 기준으로 작성했다.

2장 · WebGPU 사양 — W3C Working Draft에서 Candidate Recommendation으로

사양의 위치

WebGPU는 W3C의 GPU for the Web Working Group이 주도한다. Apple(WebKit), Google(Chrome/Dawn), Mozilla(Firefox/wgpu), Microsoft, Intel이 공동 편집자다.

  • Working Draft — 2021~2025, 활발한 변경
  • Candidate Recommendation — 2026년 진입, 사양 안정화 신호
  • Recommendation — 향후 1~2년

CR로 진입했다는 건 호환성 테스트(WPT, Web Platform Tests)가 충분하고 implementation interoperability가 입증되었다는 뜻이다. 더 이상 "어느 브라우저에서만 동작"이 아니다.

사양의 두 축

  1. WebGPU API — JavaScript에서 GPU를 다루는 인터페이스 (디바이스 / 큐 / 파이프라인 / 바인딩)
  2. WGSL — 셰이딩 언어 사양 (vertex / fragment / compute 셰이더 작성)

두 사양은 별도 문서로 관리되지만 함께 발전한다. CR 시점의 핵심 안정 기능은 다음과 같다.

  • Render pipeline / Compute pipeline
  • Bind group / Bind group layout
  • Buffer / Texture / Sampler
  • Storage buffer / Storage texture
  • Indirect draw / Indirect dispatch
  • Timestamp query / Occlusion query
  • WGSL 1.0 핵심 (struct / function / control flow / atomic ops)

CR 이후 들어올 제안

  • Subgroups — SIMD 그룹(워프) 통신, 컴퓨트 성능 가속
  • Storage Texture 확장 — read-write storage texture
  • Mesh shaders — 정점 처리 파이프라인 재설계 (Nanite류)
  • Ray-tracing — 하드웨어 RT 노출 (Vulkan/DXR/Metal RT 추상화)
  • bfloat16 — ML 추론을 위한 16-bit float

CR은 끝이 아니라 시작이다. 2026~2027년에 이 확장들이 차례로 들어온다.

3장 · 브라우저 지원 — Chrome 113 / Safari 18 / Firefox 141

Chrome — 2023년 5월 GA

Chrome 113이 첫 GA. macOS / Windows / ChromeOS / Android에서 사용 가능. Linux는 한동안 flag 뒤에 있었으나 2024년 점진 활성화. Chrome의 백엔드는 Google이 자체 개발한 Dawn (C++).

  • Render backend
    • Windows → Direct3D 12 (D3D11 fallback)
    • macOS / iOS → Metal
    • Linux / Android → Vulkan
  • 컴파일러 → Tint (WGSL → SPIR-V / MSL / HLSL)

Safari — 2024년 9월 GA

Safari 18, iOS 18에서 GA. WebKit의 백엔드는 자체 구현. macOS / iOS / iPadOS / visionOS 모두 Metal 기반. visionOS의 공간 컴퓨팅 그래픽도 WebGPU로 가능.

  • iOS Safari WebGPU는 모바일 GPU를 활용하는 게임 / ML 추론에 의미가 크다
  • WebKit은 사양 제정에 깊게 관여, "JS 엔진의 WebGPU 보안"을 강조

Firefox — 2025년 8월 GA

Firefox 141이 최종 GA. 백엔드는 wgpu (Mozilla/gfx-rs, Rust). 컴파일러는 naga (WGSL/SPIR-V/GLSL/MSL/HLSL cross-compile, Rust).

  • Linux 데스크탑에서 wgpu + Vulkan 조합은 매우 안정적
  • Firefox는 데스크탑 우선, 모바일은 단계적

feature detection

if (!navigator.gpu) {
  throw new Error('WebGPU not supported by this browser')
}

const adapter = await navigator.gpu.requestAdapter()
if (!adapter) {
  throw new Error('No GPU adapter available')
}

const device = await adapter.requestDevice({
  requiredFeatures: ['timestamp-query'],
  requiredLimits: {
    maxStorageBufferBindingSize: 1024 * 1024 * 1024,
  },
})

어댑터가 없는 경우는 (a) 브라우저 미지원, (b) GPU 드라이버 미지원, (c) 사용자가 정책으로 차단. 셋 다 흔하므로 fallback 경로를 항상 준비해야 한다.

WebGL과의 공존

WebGPU는 WebGL을 완전히 대체하지 않는다. 2026년에도 WebGL 1/2는 1) 구형 디바이스 호환, 2) 모바일 저전력 디바이스, 3) WebView/WKWebView 등에서 필요하다. 실전에서는 두 백엔드를 모두 지원하는 것이 정석이다.

4장 · WGSL — WebGPU 셰이딩 언어

왜 GLSL이 아닌가

GLSL은 OpenGL 시절(2004) 문법이다. 현대 그래픽 API의 명시성, 안전성, 도구 친화성과 잘 맞지 않는다. WGSL은 Apple/Google/Mozilla가 공동 설계한 Rust 스타일의 새 셰이딩 언어다.

  • 명시적 타입과 주석
  • Rust/Swift 풍의 함수 선언
  • 메모리 모델이 명확 (storage, uniform, workgroup, private)
  • 보안 친화적 (out-of-bounds 정의됨, undefined behavior 최소화)

Hello triangle (WGSL)

struct VsIn {
  @location(0) position: vec3<f32>,
  @location(1) color: vec3<f32>,
}

struct VsOut {
  @builtin(position) clip_position: vec4<f32>,
  @location(0) color: vec3<f32>,
}

@vertex
fn vs_main(input: VsIn) -> VsOut {
  var out: VsOut;
  out.clip_position = vec4<f32>(input.position, 1.0);
  out.color = input.color;
  return out;
}

@fragment
fn fs_main(input: VsOut) -> @location(0) vec4<f32> {
  return vec4<f32>(input.color, 1.0);
}

GLSL 대비 변화 포인트.

  • @location, @builtin, @vertex, @fragment 같은 속성(attribute) 으로 의도를 표현
  • 타입이 명시적 (vec3 of f32 등)
  • let/var 구분 (Rust 영향)

컴퓨트 셰이더 — GPGPU 1급 시민

@group(0) @binding(0) var<storage, read> input: array<f32>;
@group(0) @binding(1) var<storage, read_write> output: array<f32>;

@compute @workgroup_size(64)
fn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {
  let i = gid.x;
  if (i >= arrayLength(&input)) {
    return;
  }
  output[i] = input[i] * 2.0;
}

이 16줄짜리 컴퓨트 셰이더가 WebGL이 끝내 제공하지 못했던 범용 GPU 계산을 표준 웹에서 가능하게 한다. ML 추론, 입자 시뮬레이션, 이미지 처리, 정렬, 누적 합 — 전부 여기서 출발한다.

메모리 주소 공간

주소 공간용도예
storage큰 버퍼 (read / read_write)정점/입자 데이터
uniform작은 상수 (read only)카메라 행렬
workgroup워크그룹 내 공유 메모리누적 합 임시
private함수 로컬컴파일러 자동

명시적 주소 공간은 GPU 메모리 hierarchy를 그대로 노출한다. GLSL의 uniform 키워드보다 훨씬 정직하다.

5장 · wgpu (Rust) — Mozilla/gfx-rs의 portable WebGPU

wgpu란 무엇인가

wgpu는 Mozilla와 gfx-rs 커뮤니티가 만드는 Rust로 작성된 WebGPU 구현체다. 두 가지 역할.

  1. Firefox의 백엔드 — Firefox WebGPU는 wgpu가 책임진다
  2. 네이티브 라이브러리 — Rust(또는 C/C++/Python)에서 WebGPU API를 그대로 쓸 수 있게 해주는 portable layer

후자가 진짜 중요하다. WebGPU 사양을 그대로 네이티브 앱에서도 쓸 수 있다는 뜻이다.

wgpu의 백엔드

wgpu (Rust crate)
├─ Vulkan   (Linux / Android / Windows / macOS via MoltenVK)
├─ Metal    (macOS / iOS)
├─ DirectX 12 (Windows)
├─ OpenGL ES 3 (구형 디바이스 호환)
└─ WebGPU (브라우저 wasm 빌드)

같은 코드를 Linux 네이티브, Mac 네이티브, Windows 네이티브, 브라우저 wasm 다섯 타깃에 빌드 가능하다.

작은 wgpu 예시 (Rust)

use wgpu::util::DeviceExt;

async fn run() {
    let instance = wgpu::Instance::default();
    let adapter = instance
        .request_adapter(&wgpu::RequestAdapterOptions::default())
        .await
        .unwrap();
    let (device, queue) = adapter
        .request_device(&wgpu::DeviceDescriptor::default(), None)
        .await
        .unwrap();

    let shader = device.create_shader_module(wgpu::ShaderModuleDescriptor {
        label: Some("triangle.wgsl"),
        source: wgpu::ShaderSource::Wgsl(include_str!("triangle.wgsl").into()),
    });

    // ... pipeline / bind groups / draw
}

Rust 게임 엔진 Bevy, GUI 프레임워크 iced, 임베디드 그래픽 Lyon 등 다수가 wgpu 위에 서 있다. WebGPU 사양이 곧 네이티브 앱의 기본기가 된 셈이다.

누가 wgpu를 쓰나

  • Mozilla / Firefox — 브라우저 백엔드
  • Deno — Deno에 WebGPU 노출 (서버 사이드 GPU)
  • Bevy — Rust 게임 엔진의 기본 렌더러
  • gfx-rs 커뮤니티 — Rust 그래픽 생태계의 토양

6장 · naga + Tint — WGSL 컴파일러 두 형제

naga (Rust, gfx-rs)

naga는 wgpu와 함께 자라는 셰이더 변환 도구다.

  • WGSL 파서 / 작성기
  • SPIR-V ↔ WGSL ↔ GLSL ↔ MSL ↔ HLSL cross-compile
  • Rust 크레이트 + CLI
# WGSL을 Metal Shading Language로 변환
cargo install naga-cli
naga shader.wgsl shader.metal

# WGSL을 SPIR-V로 변환
naga shader.wgsl shader.spv

Rust 진영의 셰이더 도구는 거의 다 naga 위에 서 있다.

Tint (C++, Google Dawn)

Tint는 Google이 Dawn(Chrome WebGPU 구현)을 위해 만든 C++ 컴파일러다.

  • WGSL → SPIR-V (Vulkan 백엔드)
  • WGSL → MSL (Metal 백엔드)
  • WGSL → HLSL (D3D12 백엔드)
  • WGSL 검증, IR 패스, 최적화

Tint는 Dawn에 통합되어 있어 단독 CLI보다는 Chromium 트리 내부에서 동작한다. WGSL 사양의 reference implementation에 가깝다.

어디서 어떤 컴파일러가 도나

환경컴파일러
Chrome (모든 OS)Tint
Safari (Mac / iOS / visionOS)WebKit 내부 자체 컴파일러(WGSL → AIR/MSL)
Firefox (모든 OS)naga
wgpu 네이티브naga
Dawn 네이티브(C++ 앱)Tint

같은 WGSL 코드가 세 가지 다른 컴파일러를 통과해 세 가지 OS의 그래픽 API로 변환된다. 사양 정합성이 어느 때보다 중요한 이유다.

WGSL 유효성 검사

naga --validate shader.wgsl

빌드 시점에 셰이더를 검증하면 런타임 깨짐을 막을 수 있다. CI에 넣는 패턴이 늘고 있다.

7장 · Three.js WebGPU 렌더러 (r163+, 2024년 5월)

r163 — Three.js WebGPU 정식

2024년 5월 출시된 Three.js r163부터 WebGPU 렌더러가 정식 진입했다. 그 전에도 r137(2022)부터 실험적이었지만, r163에서 production-ready 선언.

import * as THREE from 'three'
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js'

const renderer = new WebGPURenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({ color: 0x6699ff })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

scene.add(new THREE.AmbientLight(0xffffff, 0.5))
scene.add(new THREE.DirectionalLight(0xffffff, 1))

camera.position.z = 5

renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
})

WebGL 렌더러와 거의 동일한 코드로 동작한다.

TSL — Three.js Shading Language

Three.js의 흥미로운 베팅은 TSL (Three Shading Language)이다. WGSL과 GLSL을 직접 쓰지 않고, JavaScript 함수 합성으로 셰이더를 작성한다.

import { color, uniform, mul, sin, time, attribute } from 'three/tsl'

const baseColor = uniform(color(0xff6633))
const wave = sin(mul(attribute('position').x, 2.0).add(time))
const finalColor = baseColor.mul(wave.add(1.0).mul(0.5))

material.colorNode = finalColor

TSL은 컴파일러가 자동으로 WGSL과 GLSL을 생성한다. 하나의 셰이더 코드가 WebGPU와 WebGL 모두를 타깃으로 한다는 게 핵심이다.

Three.js 마이그레이션 전략

  1. WebGLRenderer → WebGPURenderer로 import만 바꾼다
  2. 동작 확인 후, 셰이더 직접 작성 부분이 있으면 TSL로 점진 마이그레이션
  3. 컴퓨트 셰이더(파티클, GPGPU)는 신규 기능으로 활용

누가 쓰나

  • Vercel — 일부 마케팅 페이지 3D
  • 토스 — 데이터 시각화 일부 (WebGPU 컴퓨트 셰이더)
  • 카카오게임즈 — 일부 웹 프로토타입
  • Three.js journey (Bruno Simon) 강의가 WebGPU/TSL로 업데이트

8장 · Babylon.js WebGPU (5.x, 6.x)

Babylon.js의 WebGPU 베팅

Microsoft가 후원하는 Babylon.js는 WebGPU에 일찍 베팅했다. 2021년 5.0부터 WebGPU 엔진을 실험 도입, 2023년 6.0에서 안정화. 게임 엔진급 기능과 함께 가는 게 강점이다.

import { Engine, WebGPUEngine, Scene, FreeCamera, Vector3, HemisphericLight, MeshBuilder } from '@babylonjs/core'

const canvas = document.getElementById('renderCanvas')
const engine = await WebGPUEngine.IsSupportedAsync
  ? await new WebGPUEngine(canvas).initAsync().then((e) => e ?? null) || new Engine(canvas, true)
  : new Engine(canvas, true)

const scene = new Scene(engine)
const camera = new FreeCamera('cam', new Vector3(0, 5, -10), scene)
camera.setTarget(Vector3.Zero())
camera.attachControl(canvas, true)

new HemisphericLight('light', new Vector3(0, 1, 0), scene)
const box = MeshBuilder.CreateBox('box', { size: 2 }, scene)

engine.runRenderLoop(() => scene.render())

WebGPUEngine.IsSupportedAsync로 WebGPU 가능 여부 체크 후 fallback.

Babylon.js의 강점

  • PBR + IBL — 영화급 셰이더
  • Node Material Editor — 노드 기반 셰이더 GUI
  • Physics — Cannon / Havok 연동
  • GUI — 게임 UI / 데모용 위젯
  • GLTF 임포트 — 표준 모델 포맷

게임 / 시뮬레이션 / 디지털 트윈에 강하다. Three.js가 "그래픽 빌딩 블록"이라면 Babylon.js는 "엔진"에 더 가깝다.

Babylon.js + WebGPU 컴퓨트

import { ComputeShader, StorageBuffer } from '@babylonjs/core'

const cs = new ComputeShader('add', engine, {
  computeSource: `
    @group(0) @binding(0) var<storage, read_write> data: array<f32>;
    @compute @workgroup_size(64)
    fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
      data[gid.x] = data[gid.x] * 2.0;
    }
  `,
})

const buffer = new StorageBuffer(engine, 1024 * 4)
cs.setStorageBuffer('data', buffer)
cs.dispatch(16, 1, 1)

게임 엔진 안에서 GPGPU를 그대로 쓸 수 있다.

9장 · Filament Web / regl / gpu.js / PlayCanvas

Filament Web — Google의 PBR 엔진

Google이 만든 Filament(C++)은 Android의 sceneform 시절부터 모바일 PBR 표준을 제시한 엔진이다. WebAssembly + WebGL 빌드를 제공해 Filament Web으로 동작한다.

  • 영화급 PBR + IBL (Image-Based Lighting)
  • 정밀한 톤매핑 / 화이트밸런스
  • glTF 표준 임포트

WebGPU 백엔드는 2025년부터 점진 마이그레이션. C++ 그래픽 엔진의 진지함이 그대로 옮겨와 있다.

regl — 함수형 WebGL/WebGPU

regl(Mikola Lysenko)은 명령형 WebGL을 함수형으로 감싼다. 작고, 빠르고, 학습 곡선이 낮다.

import regl from 'regl'

const draw = regl({
  vert: `
    precision mediump float;
    attribute vec2 position;
    void main() {
      gl_Position = vec4(position, 0, 1);
    }
  `,
  frag: `
    precision mediump float;
    uniform vec4 color;
    void main() { gl_FragColor = color; }
  `,
  attributes: { position: [[-1, 0], [0, -1], [1, 1]] },
  uniforms: { color: [1, 0, 0, 1] },
  count: 3,
})

regl.frame(() => draw())

WebGPU 백엔드(regl-gpu 등)도 등장. 그래픽을 처음 배우는 데도 좋고 데이터 시각화에 즐겨 쓰인다.

gpu.js — JavaScript로 GPU 컴퓨트

gpu.js는 JavaScript 함수를 GPU 셰이더로 변환해 실행해주는 GPGPU 도우미다. WebGL 백엔드 기반이었으나 WebGPU 백엔드도 도입 중.

import { GPU } from 'gpu.js'

const gpu = new GPU()
const multiplyMatrix = gpu
  .createKernel(function (a, b) {
    let sum = 0
    for (let i = 0; i < 512; i++) {
      sum += a[this.thread.y][i] * b[i][this.thread.x]
    }
    return sum
  })
  .setOutput([512, 512])

const c = multiplyMatrix(matA, matB)

ML이나 영상 처리의 빠른 프로토타이핑에 좋다.

PlayCanvas — 브라우저 게임 엔진

PlayCanvas는 영국 발 브라우저 게임 엔진이다. ECS 기반에 에디터까지 제공하며, WebGPU 백엔드도 정식 지원한다. 광고/마케팅의 3D 인터랙티브에 흔히 등장한다.

  • ECS 컴포넌트 모델
  • 클라우드 에디터 (브라우저에서 씬 편집)
  • glTF / 물리 / 사운드 / 애니메이션
  • WebGL2 + WebGPU 듀얼 백엔드

Disney, BMW 등 큰 브랜드의 3D 광고 사례가 많다.

10장 · WebLLM (MLC LLM) — 브라우저에서 LLM 추론

WebLLM이란

CMU/MLC 팀의 MLC LLM 프로젝트가 만든 WebLLM은 LLM(Llama, Mistral, Phi 등)을 브라우저 안에서 WebGPU로 추론하는 라이브러리다. 서버 없이, 데이터를 브라우저 밖으로 내보내지 않고 답을 받는다.

<script type="module">
  import * as webllm from 'https://esm.run/@mlc-ai/web-llm'

  const engine = await webllm.CreateMLCEngine('Llama-3-8B-Instruct-q4f32_1-MLC')

  const reply = await engine.chat.completions.create({
    messages: [
      { role: 'system', content: 'You are a helpful assistant.' },
      { role: 'user', content: '안녕, WebGPU의 미래에 대해 짧게 말해줘.' },
    ],
  })

  console.log(reply.choices[0].message.content)
</script>

OpenAI 호환 API 형태(chat.completions.create)다.

기술 스택

  • MLC LLM 컴파일러 — PyTorch 모델을 TVM 기반으로 WebGPU 셰이더로 컴파일
  • WGSL 컴퓨트 셰이더 — Matmul / Attention / RMSNorm 등 핵심 연산
  • FP16 / INT4 양자화 — 모델 크기를 줄여 브라우저에 받아들일 수 있게

성능 (2026년 기준)

  • M3 MacBook Pro에서 Llama-3 8B(q4 양자화) 초당 30~60 토큰
  • M2 iPad에서 Phi-3.5-mini(3.8B) 초당 20~30 토큰
  • 데스크탑 RTX 4070 + WebGPU(Chrome) 초당 80~120 토큰

서버 추론 대비 50~70% 수준. 그러나 추론 비용이 0이라는 점이 압도적이다.

누가 쓰나

  • Chatbot 데모 — 로컬 LLM 체험
  • 개인정보 민감 서비스 — 의료 / 법률 / 학교 (데이터가 브라우저 밖을 나가지 않음)
  • 오프라인 PWA — 비행기 모드에서도 동작
  • on-device 에이전트 — 브라우저 확장 / extension

11장 · Transformers.js (Xenova) — WebGPU 가속

Transformers.js란

Hugging Face의 Transformers를 브라우저로 옮긴 Transformers.js(저자 Xenova)는 거의 모든 작은 모델(BERT, DistilBERT, Whisper, CLIP, ViT, SAM 등)을 브라우저에서 추론한다. 2024년부터 WebGPU 백엔드가 정식 진입.

import { pipeline } from '@xenova/transformers'

// WebGPU 백엔드로 강제
const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
  device: 'webgpu',
})

const result = await pipe('I love WebGPU in 2026.')
console.log(result)
// [{ label: 'POSITIVE', score: 0.9998 }]

지원 태스크

  • NLP — sentiment-analysis, fill-mask, summarization, translation, question-answering
  • 음성 — Whisper (자동 음성 인식), VAD
  • 비전 — CLIP, SAM, DINO, ViT, OWL-ViT
  • 멀티모달 — LLaVA-Phi, Florence-2

거의 모든 Hugging Face 작은 모델이 ONNX → WebGPU 변환으로 동작한다.

활용 사례

  • 검색 UI에 의미 검색 추가 — sentence-transformers를 브라우저에서
  • 녹음 → 자막 — Whisper-tiny / base
  • 이미지 분류 / 임베딩 — CLIP을 브라우저에서

성능

큰 모델(70B급)은 어렵지만 작은 모델(< 500M)은 굉장히 빠르다. distilbert-base 추론이 데스크탑 WebGPU에서 5~10ms.

12장 · Three Fiber WebGPU / ONNX Runtime WebGPU

React Three Fiber (R3F) WebGPU

React Three Fiber는 Three.js를 React 컴포넌트로 감싼 라이브러리다. 2025년부터 WebGPU 렌더러를 정식 지원.

import { Canvas } from '@react-three/fiber'
import { WebGPURenderer } from 'three/addons/renderers/webgpu/WebGPURenderer.js'

export default function Scene() {
  return (
    <Canvas
      gl={(canvas) => {
        const renderer = new WebGPURenderer({ canvas, antialias: true })
        return renderer
      }}
    >
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="#6699ff" />
      </mesh>
    </Canvas>
  )
}

선언적 React API + WebGPU 가속. 마케팅 / 제품 페이지의 3D 인터랙티브에 최적이다.

ONNX Runtime Web — WebGPU 백엔드

Microsoft의 ONNX Runtime Web은 ONNX 모델을 브라우저에서 돌리는 라이브러리다. 백엔드로 WebGL / WASM / WebGPU를 선택할 수 있다.

import * as ort from 'onnxruntime-web/webgpu'

const session = await ort.InferenceSession.create('./model.onnx', {
  executionProviders: ['webgpu'],
})

const feeds = { input: new ort.Tensor('float32', new Float32Array(224 * 224 * 3), [1, 3, 224, 224]) }
const results = await session.run(feeds)
console.log(results.output.data)

PyTorch / TensorFlow에서 학습한 모델을 ONNX로 export → 브라우저에서 WebGPU 추론. 엔터프라이즈 워크로드에서 가장 무난한 선택지다.

어디서 어떤 라이브러리?

시나리오라이브러리
LLM 채팅 데모WebLLM
BERT/Whisper 작은 모델Transformers.js
사내 ONNX 모델ONNX Runtime Web (WebGPU)
3D 마케팅Three.js / R3F WebGPU
게임 / 시뮬레이션Babylon.js / PlayCanvas
Rust 네이티브 + 브라우저 통합wgpu

13장 · Web Stable Diffusion — 브라우저에서 SD

Web Stable Diffusion

CMU/MLC 팀이 또 만든 Web Stable Diffusion은 Stable Diffusion 1.5/2.1을 브라우저 안에서 WebGPU로 돌린다. 텍스트 → 이미지를, 서버 호출 없이.

  • 모델 크기 ~ 2.1GB (양자화)
  • 초기 로드 후 캐시 (IndexedDB)
  • M2 MacBook에서 한 장 생성에 약 20~40초
  • RTX 4070 + Chrome WebGPU에서 8~15초

작동 흐름

  1. UNet / VAE / Text Encoder를 ONNX/MLC로 컴파일
  2. 가중치를 IndexedDB에 캐시
  3. 텍스트 → CLIP → UNet 디퓨전 루프 → VAE 디코딩
  4. 캔버스에 그려서 표시

전 과정이 브라우저 안에서 진행된다. 서버 비용이 들지 않는다.

응용

  • 개인용 이미지 생성기 — 가입/카드 없이 즉시
  • 교육 데모 — 디퓨전 모델 시연
  • 창작 도구 — 오프라인 작동 PWA

한계

  • 첫 로드 시 모델 다운로드(2~3GB)가 진입장벽
  • 큰 SDXL(7GB+) 모델은 아직 현실적이지 않음
  • 모바일은 NPU 지원이 없어 데스크탑 위주

이 한계를 푸는 게 2026~2027년 WebGPU 확장(bfloat16, mesh shaders, ray-tracing)의 숙제다.

14장 · Compute shaders + Storage Texture + Subgroups + mesh shaders 미래

컴퓨트 셰이더가 가져온 변화

WebGPU의 진짜 혁명은 그래픽이 아니라 GPGPU다.

  • 파티클 시스템 — CPU → GPU 이전 (백만 입자)
  • 물리 시뮬레이션 — 위치 기반 동역학(PBD), MLS-MPM
  • 이미지 / 비디오 처리 — 실시간 필터, OpenCV 대체
  • ML 추론 — Matmul, Attention, Conv2D
  • 데이터 시각화 — 수백만 점 클러스터링 / KDE

토스 데이터 시각화 팀의 사례가 한국에서 자주 인용된다. 수십만 점의 인터랙티브 차트가 60fps로 동작한다.

Storage Texture

@group(0) @binding(0) var<storage, read_write> output: texture_storage_2d<rgba8unorm, write>;

@compute @workgroup_size(8, 8)
fn cs_main(@builtin(global_invocation_id) gid: vec3<u32>) {
  let coord = vec2<i32>(i32(gid.x), i32(gid.y));
  let color = vec4<f32>(0.5, 0.7, 1.0, 1.0);
  textureStore(output, coord, color);
}

읽기 전용 또는 쓰기 전용 storage texture. 2026년 후반에 read-write storage texture 확장이 들어올 예정.

Subgroups (워프 통신)

enable subgroups;

@compute @workgroup_size(64)
fn cs_main(@builtin(subgroup_invocation_id) sid: u32) {
  let value = some_input[sid];
  let sum = subgroupAdd(value);
  // 워프 내부에서 32~64배 빠른 reduction
}

CUDA의 warp shuffle, Metal의 SIMD-group 메시지에 해당. 정렬 / scan / Matmul / Attention 최적화의 핵심.

Mesh shaders

전통적 정점 → 인덱스 버퍼 → 정점 셰이더 → 래스터의 파이프라인 대신, 메시 셰이더가 직접 작은 메시(meshlet)를 출력한다. Unreal Engine의 Nanite류 가상화 마이크로폴리곤이 가능해진다.

2026년 시점 W3C 제안 단계. 안정화는 2027~2028년 예상.

Ray-tracing

DXR / Vulkan RT / Metal RT의 브라우저 추상화. 글로벌 일루미네이션, 반사, 굴절을 셰이더에서 직접. 제안 단계 — 그러나 실현 시 게임 / 시각화에 큰 변화.

15장 · 한국 / 일본 — 토스, 카카오게임즈, ピクシブ, CyberAgent

한국

토스 (Toss)

토스 데이터 시각화 팀이 2024년부터 WebGPU 컴퓨트 셰이더를 도입했다. 수십만 건의 거래 데이터를 인터랙티브하게 보여주는 차트, 클러스터링 알고리즘이 브라우저에서 GPU로 동작한다. SLASH 컨퍼런스 발표가 한국 개발자 커뮤니티에 자극을 줬다.

  • 큰 데이터 시각화 (수십만 점)
  • 실시간 필터링 / 줌
  • WebGL fallback도 유지

카카오게임즈

일부 웹 게임 프로토타입에서 PlayCanvas + WebGPU 조합으로 실험 중. 모바일 브라우저(iOS Safari 18, Android Chrome) 호환이 게임의 진입장벽을 낮춘다.

네이버 D2 / 클로바

NAVER LABS와 D2가 WebGPU 관련 글을 정기적으로 낸다. CLOVA 팀의 ML 추론 데모에서 Transformers.js와 ONNX Runtime Web을 활용한 사례가 있다.

일본

ピクシブ (pixiv)

크리에이터 플랫폼 pixiv에서 일부 인터랙티브 컴포넌트(스티커, 효과)에 WebGPU를 적용 중. JavaScript의 한계로 풀지 못하던 실시간 이펙트가 WebGPU 컴퓨트로 해결된다.

CyberAgent

광고 / 게임 부문에서 WebGPU 도입이 활발하다. 3D 광고, 시뮬레이션, 라이브 방송 효과 — 모두 WebGPU로 이전 중. AbemaTV의 일부 인터랙티브 콘텐츠도 이 흐름에 있다.

LINE / Yahoo Japan

대규모 데이터 시각화에 WebGPU 컴퓨트 셰이더 도입 시범. 토스와 비슷한 동기다.

글로벌

  • Vercel — 마케팅 페이지 3D
  • Figma — 일부 렌더 파이프라인 평가 중
  • Adobe — Photoshop Web의 GPU 가속 일부
  • Google Earth Web — WebGPU 백엔드 평가
  • Unreal Engine Pixel Streaming — WebGPU 클라이언트 검토

16장 · 누가 WebGPU를 배워야 하나 — 게임 / 데이터 시각화 / 브라우저 ML

시나리오별 추천

게임 / 인터랙티브 3D

  • Three.js (낮은 진입장벽, 큰 커뮤니티) 또는 Babylon.js (엔진급 기능)
  • 셰이더는 TSL 또는 WGSL 직접
  • 모바일 호환은 WebGL2 fallback 유지

데이터 시각화 (수십만~수백만 점)

  • regl 또는 Three.js BufferGeometry + 컴퓨트 셰이더
  • 토스 패턴 — 클러스터링 / KDE / 히트맵을 GPU에서
  • Observable / D3와 결합 가능

브라우저 ML 추론

  • 작은 모델(BERT, Whisper-tiny, CLIP) → Transformers.js
  • 사내 ONNX 모델 → ONNX Runtime Web
  • LLM 채팅 데모 → WebLLM
  • SD / 이미지 생성 → Web Stable Diffusion

네이티브 + 웹 통합

  • Rust로 wgpu 위에 코어를 작성
  • 같은 코드를 wasm 빌드로 브라우저에
  • Bevy / iced 같은 Rust 그래픽 생태계 활용

학습 경로

  1. WGSL 기본 — @vertex / @fragment / @compute 작은 예제부터
  2. WebGPU 직접 호출 — pipeline / bind group / buffer를 직접 만져보기
  3. Three.js / Babylon.js — 고수준 라이브러리로 빠른 결과
  4. 컴퓨트 셰이더 — GPGPU 패턴 (reduce / scan / matmul)
  5. ML 추론 통합 — Transformers.js나 ONNX Runtime Web 응용

흔한 함정

  • 모든 브라우저가 같지 않다 — Chrome / Safari / Firefox 모두에서 테스트
  • WGSL 컴파일 차이 — Tint / WebKit / naga의 차이가 가끔 드러난다
  • WebGL fallback 필수 — 구형 디바이스 / WebView
  • 첫 로드 비용 — 셰이더 컴파일 / 가중치 다운로드 시간을 측정
  • 메모리 한계 — 모바일 GPU는 메모리가 작다(2~4GB), 모델 크기 관리 필요

결론 — 2026년의 GPU 웹

WebGPU는 더 이상 "곧 올 것"이 아니다. 이미 와 있다. Chrome / Safari / Firefox 모두 GA. 사양도 CR. 라이브러리 생태계도 익었다. 2026년의 답은 단순하다.

새 그래픽 / GPGPU 프로젝트라면 WebGPU부터 시작하고, WebGL을 안전망으로 두자. 브라우저 ML은 WebGPU 없이는 더 이상 무리다.

참고 / References

Discuss on Twitter • View on GitHub