웹 GPU(WebGPU)는 웹 애플리케이션에서 고성능 그래픽과 계산 작업을 수행할 수 있는 새로운 API로, 웹 그래픽 처리를 해주는 기술이라고 보면 된다. (아마도) 일반 PC들의 전반적인 사양이 좋아지면서 서버의 부담을 줄일 수 있는 방법으로 클라이언트측의 GPU를 활용하여 처리를 하는 것이다. 그래서 주로 게임이나 AI 등에서 활용된다.
웹 GPU를 활용해서 파란색 배경을 만드는 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebGPU Life</title>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script type="module">
const canvas = document.querySelector("canvas");
if (!navigator.gpu) {
throw new Error("WebGPU not supported on this browser.");
}
// WebGPU 어댑터 요청
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
throw new Error("No appropriate GPUAdapter found.");
}
// GPU 디바이스 생성
const device = await adapter.requestDevice();
// WebGPU 컨텍스트 설정
const context = canvas.getContext("webgpu");
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: canvasFormat,
});
// 명령 인코더 생성
const encoder = device.createCommandEncoder();
// GPUTextureView 생성
const textureView = context.getCurrentTexture().createView();
// Render Pass Descriptor 생성
const renderPassDescriptor = {
colorAttachments: [{
view: textureView,
clearValue: { r: 0, g: 0, b: 1, a: 1 }, // 파란색 배경
loadOp: 'clear',
storeOp: 'store',
}],
};
// Render Pass 시작
const passEncoder = encoder.beginRenderPass(renderPassDescriptor);
passEncoder.end(); // 여기서 end()로 수정
// 명령 제출
const commandBuffer = encoder.finish();
device.queue.submit([commandBuffer]);
</script>
</body>
</html>
참고 자료 : https://codelabs.developers.google.com/your-first-webgpu-app?hl=ko#0
첫 번째 WebGPU 앱 | Google Codelabs
이 Codelab에서는 새로운 WebGPU API의 기본 개념을 소개합니다. 그리고 GPU에서 실행되는 Conway의 Game of Life 버전을 빌드하는 방법을 안내합니다. WebGPU의 렌더링 기능은 보드를 그리는 데 사용되고 WebG
codelabs.developers.google.com
https://www.wikiwand.com/ko/articles/%EC%9B%B9GPU
웹GPU - Wikiwand
웹GPU(WebGPU)는 현대적인 3차원 그래픽스와 연산 능력을 제공할 목적으로 가속화된 그래픽스와 연산을 위한 잠재적인 웹 표준 및 자바스크립트 API의 작업 중인 이름이다. W3C GPU for the Web Community Gro
www.wikiwand.com
'programming' 카테고리의 다른 글
| [Codeforce Tools ] 크롬 익스텐션 개발 (0) | 2023.08.07 |
|---|
