Cinevva

한국어

English
简体中文

한국어

English
简体中文

테마

WebGL & WebGPU 체커 ​

브라우저가 그래픽으로 무엇을 할 수 있는지 알아보세요. 이 도구는 브라우저가 WebGPU, WebGL 2, WebGL 1을 지원하는지 확인한 다음, GPU와 주요 한계, 장치 세부 정보를 보여줍니다. 모든 작업은 브라우저 안에서 로컬로 실행되고, 아무것도 업로드되지 않습니다.

웹 게임에서 이게 왜 중요한가 ​

브라우저 게임을 만들거나 즐긴다면, 렌더링 API가 무엇이 가능한지를 결정합니다. WebGL 2는 거의 어디서나 동작하는 믿을 만한 기준선입니다. WebGPU는 컴퓨트 셰이더와 최신 GPU 기능을 제공하는 새로운 API지만, 지원 여부는 브라우저와 장치마다 다릅니다. 장치가 실제로 보고하는 내용을 확인하는 것이 "내 컴퓨터에선 되는데" 문제를 가장 빠르게 디버깅하고, WebGL 2 폴백과 함께 WebGPU 경로를 출시할지 결정하는 방법입니다.

GPU 공급업체와 렌더러 줄은 특히 유용합니다. 브라우저가 진짜 GPU에서 돌아가는지, 아니면 느린 소프트웨어 렌더링으로 떨어졌는지 알려주는데, 후자는 알 수 없는 프레임레이트 저하의 흔한 원인입니다.

무엇을 확인하는가 ​

  • WebGPU: navigator.gpu 존재 여부, 어댑터 공급업체와 아키텍처, 최대 텍스처 크기, 최대 버퍼 크기, 컴퓨트 워크그룹 크기 같은 한계, 그리고 지원되는 기능 목록.
  • WebGL 2 및 WebGL 1: 지원 여부, GPU 공급업체와 렌더러, GLSL 버전, 그리고 최대 텍스처 크기, 렌더 버퍼 크기, 정점 속성 같은 한계.
  • 장치: 픽셀 비율, 논리 CPU 코어 수, 장치 메모리, 화면 크기, 터치 포인트.

WebGPU와 WebGL: 무엇이 다른가 ​

WebGL과 WebGPU는 둘 다 웹 페이지에서 GPU와 대화하는 방법이지만, 서로 다른 시대에서 나왔습니다.

WebGL은 2000년대의 그래픽 API인 OpenGL ES에 기반합니다. WebGL 1은 2011년에, WebGL 2는 2017년에 나왔습니다. 순수 그래픽 파이프라인이라서, 정점과 셰이더를 주면 픽셀을 그립니다. 어디에나 있고, 안정적이며, 지난 10년 동안 거의 모든 브라우저 게임이 이 위에서 돌아갔습니다.

WebGPU는 오늘날의 GPU가 실제로 동작하는 방식에 맞춰 설계된 최신 대체재입니다(내부적으로 Vulkan, Metal, Direct3D 12에 매핑됩니다). 2023년에 Chrome에서 나왔고 2025년 말에 모든 주요 브라우저에 도달했습니다. 두 가지 큰 추가 기능은 컴퓨트 셰이더(그리기뿐 아니라 GPU에서 일반 작업을 실행하는 것으로, 물리, 파티클, 컬링, AI에 중요합니다)와 훨씬 낮은 CPU 오버헤드라서, 프레임당 훨씬 더 많은 객체를 밀어 넣을 수 있습니다.

WebGL 2WebGPU
출시20172023, 2025년 말 광범위 지원
기반OpenGL ES 3.0Vulkan / Metal / D3D12
컴퓨트 셰이더아니오예
CPU 오버헤드더 높음훨씬 낮음
셰이더 언어GLSLWGSL
브라우저 지원보편적최신 브라우저만
최적 역할믿을 만한 기준선성능 및 컴퓨트 업그레이드

2026년의 실질적인 결론은 이렇습니다. WebGPU는 더 빠르고 능력이 뛰어나지만, WebGL 2는 여전히 더 넓게 도달합니다. 대부분의 팀은 WebGL 2를 기준선으로 출시하고, 가능한 곳에 WebGPU 경로를 추가합니다. Three.js, Babylon.js, PlayCanvas 같은 엔진은 이미 WebGL 2 폴백과 함께 이걸 자동으로 처리하는데, 위 체커가 둘 다 테스트하는 이유가 바로 이것입니다.

WebGPU 기능 설명 ​

WebGPU는 핵심 기능 외에 선택적 기능 묶음을 가지고 있습니다. 체커는 이 기능들을 게임에 중요한 방식대로 묶어서 보여주는데, 각 그룹이 하는 일은 다음과 같습니다. 아래의 모든 기능 이름은 W3C WebGPU 명세의 정의로 연결됩니다.

텍스처 압축: BC, ETC2, ASTC ​

GPU 압축 텍스처는 비디오 메모리에서 압축된 상태로 유지되므로, PNG나 JPEG보다 VRAM 사용량과 다운로드 크기를 훨씬 더 줄여줍니다. 문제는 이 포맷들이 하드웨어마다 다르다는 점입니다. 데스크톱 GPU는 BC(S3TC 또는 DXT라고도 함)를 쓰고, 대부분의 Android 장치는 ETC2를, 최신 모바일은 ASTC를 씁니다. 모든 장치로 출시하려면 보통 한 가지 이상의 포맷을 제공해야 하는데, 흔히 Basis Universal이 들어간 KTX2 컨테이너를 통해 장치가 지원하는 포맷으로 트랜스코딩합니다. "sliced 3D" 변형은 BC와 ASTC를 입체 3D 텍스처로 확장합니다. 체커가 각 포맷을 따로 나열하는 이유가 이것입니다. 이 장치로 어떤 압축 텍스처를 출시할 수 있는지 정확히 알려주니까요.

셰이더와 컴퓨트 ​

여기가 WebGPU가 WebGL을 앞서는 지점입니다. 컴퓨트 셰이더는 그리기뿐 아니라 GPU에서 일반 작업을 실행하게 해주는데, 이것이 GPU 파티클, 물리, 컬링, 온디바이스 AI를 굴리는 힘입니다. shader-f16은 16비트 부동소수점을 추가해, 전체 정밀도가 필요 없을 때 연산 처리량을 대략 두 배로 늘립니다. subgroups는 GPU 웨이브 안의 스레드들이 메모리를 거치지 않고 직접 데이터를 공유하게 해주는데, 리덕션과 prefix sum에서 큰 이득입니다. float32-filterable은 고정밀 텍스처의 부드러운 필터링을 허용하며, HDR과 데이터 중심 효과에 쓰입니다.

렌더링과 블렌딩 ​

이 기능들은 더 높은 품질의 출력을 가능하게 합니다. float32-blendable과 rg11b10ufloat-renderable은 HDR과 고동적범위 렌더 타깃을 활성화합니다. dual-source-blending은 제대로 된 서브픽셀 텍스트와 특정 투명도 기법 같은 고급 블렌드 효과를 지원합니다. bgra8unorm-storage는 셰이더가 흔한 스왑체인 포맷에 직접 쓰게 해줍니다.

깊이와 클리핑 ​

depth-clip-control과 depth32float-stencil8은 깊이 버퍼를 정밀하게 제어하게 해주는데, 그림자와 대규모 오픈 월드, z-fighting 방지에 중요합니다. clip-distances는 셰이더가 사용자 정의 평면으로 지오메트리를 잘라내게 해주며, 포털과 물 반사, 거울에 유용합니다.

프로파일링과 코어 ​

timestamp-query는 GPU 측 타이밍을 읽어, 각 패스가 정확히 얼마나 걸리는지 프로파일링하게 해주는데, 프레임레이트 문제를 고치는 열쇠입니다. indirect-first-instance는 GPU가 무엇을 그릴지 결정하는 GPU 주도 렌더링을 지원합니다. core-features-and-limits는 모든 적합한 WebGPU 장치가 반드시 지원해야 하는 기준선입니다.

GPU 한계의 의미 ​

세부 정보 패널은 GPU가 노출하는 한계를 보고합니다. 게임에 가장 중요한 것들은 다음과 같습니다.

  • GPU 렌더러 / 공급업체 — 브라우저가 실제로 사용하는 그래픽 칩입니다. SwiftShader나 llvmpipe라고 나오면 소프트웨어 렌더링 중이라 게임이 느릴 것입니다.
  • 최대 텍스처 크기 — GPU가 받아들이는 가장 큰 텍스처 차원(흔히 8192 또는 16384 px)입니다. 텍스처와 렌더 타깃의 해상도 상한을 정합니다.
  • 최대 컴퓨트 워크그룹 크기 (WebGPU) — 컴퓨트 셰이더가 그룹당 몇 개의 스레드를 실행할 수 있는지로, 물리나 파티클을 GPU로 넘긴다면 중요합니다.
  • 최대 버퍼 크기 (WebGPU) — 단일 GPU 버퍼의 최대 크기로, 한 번에 얼마나 많은 지오메트리나 데이터를 업로드할 수 있는지의 상한입니다.
  • 장치 픽셀 비율 — CSS 픽셀 하나를 물리 픽셀 몇 개가 받치는지입니다. 고DPI 화면(2x, 3x)은 훨씬 더 많은 픽셀을 렌더링하는데, 이는 휴대폰에서 낮은 프레임레이트의 흔한 숨은 원인입니다.

자주 묻는 질문 ​

내 브라우저는 WebGPU를 지원하나요? ​

위의 체커를 실행하세요. WebGPU가 "지원됨"으로 나오면, 브라우저가 WebGPU API를 노출하고 호환되는 GPU 어댑터를 찾았다는 뜻입니다. 2026년 기준으로 WebGPU는 Chrome과 Edge(113+), Firefox, 그리고 macOS, iOS, iPadOS의 Safari 26에서 기본으로 제공되지만, 오래된 브라우저와 일부 장치는 여전히 WebGL 2만 가지고 있습니다. 이 도구는 실제 성능을 읽어내므로, 정확히 당신의 환경에 대해 가장 믿을 만한 답입니다.

WebGL과 WebGPU의 차이는 무엇인가요? ​

WebGL은 OpenGL ES에 기반한 오래된 브라우저 그래픽 API이고, WebGL 2는 그중 널리 지원되는 버전입니다. WebGPU는 최신 GPU가 실제로 동작하는 방식에 맞춰 설계된 새로운 API로, 컴퓨트 셰이더와 더 낮은 오버헤드를 추가합니다. WebGPU는 더 빠르고 능력이 뛰어나지만 WebGL 2가 더 넓게 지원되므로, 대부분의 웹 게임은 WebGL 2를 기준선으로 출시하고 가능한 곳에서 WebGPU를 사용합니다.

왜 내 GPU가 소프트웨어 또는 "SwiftShader"로 표시되나요? ​

렌더러 줄에 SwiftShader, llvmpipe, "Software" 같은 것이 나온다면, 브라우저가 GPU 대신 CPU로 렌더링하고 있는 것입니다. 보통 하드웨어 가속이 꺼져 있거나, 드라이버가 차단 목록에 올라 있거나, 제한된 환경에 있다는 뜻입니다. 브라우저 설정에서 하드웨어 가속을 켜거나 GPU 드라이버를 업데이트하면 대개 해결되며, 이는 웹 게임 성능 저하의 잦은 원인입니다.

이 WebGL 체커는 안전한가요? 뭔가 업로드하나요? ​

안전하고 완전히 로컬에서 동작합니다. 이 도구는 브라우저가 이미 모든 웹 페이지에 노출하는 성능 정보만 읽고, 전적으로 브라우저 안에서 실행됩니다. 아무것도 업로드되거나 저장되지 않습니다.

관련 글 ​