본문 바로가기
카테고리 없음

AI 개발을 가속화하고 대중화하는 WebGPU 기술

by 스마트파베르 2024. 10. 26.
반응형
 

WebGPU 개요

WebGPU는 브라우저 내에서 GPU(Graphics Processing Unit)를 직접 활용할 수 있게 해주는 새로운 웹 표준이며 기존 WebGL의 후속 기술로, 더욱 현대적인 GPU 기능과 고성능 연산을 지원합니다.

특히, WebGPU는 그래픽 렌더링뿐만 아니라 범용 GPU 연산(GPGPU)도 지원하기 때문에 머신러닝과 같은 고성능 연산 작업에도 활용될 수 있습니다.

WebGPU는 구글, 애플, 마이크로소프트, 모질라 등 여러 브라우저 개발사와 협력해 만들어지고 있으며, W3C(Wide Web Consortium)에서 표준화가 되고 있습니다.

 

WebGL과 차이

WebGL은 그래픽 렌더링에 집중된 API로, 주로 게임 개발이나 데이터 시각화에 사용됩니다. 반면, WebGPU는 그래픽뿐만 아니라 고성능 병렬 연산을 GPU에서 직접 수행할 수 있어 AI와 머신러닝 작업에 최적화되어 있습니다.

 

  • WebGL 활용 예:
    • 3D 데이터 시각화 (예: 딥러닝 모델의 학습 경과를 그래프로 보여주기)
    • 게임 개발 및 인터랙티브 애니메이션에서 AI 기반 캐릭터 움직임 제어
  • WebGPU 활용 예:
    • 브라우저에서 AI 모델의 실시간 추론 (예: 얼굴 인식, 자연어 처리)
    • 대규모 신경망의 웹 기반 학습 및 추론 (TensorFlow.js와 결합)
    • 실시간 이미지 및 비디오 처리 (예: 필터 적용, 객체 탐지)

 

WebGPU의 표준화 동향

  1. W3C 주도의 표준화:
    • WebGPU는 **W3C(Wide Web Consortium)**에서 개발되고 있으며, 여러 기술 작업 그룹(WebGPU Working Group)이 참여 https://www.w3.org/TR/webgpu/
  2. 브라우저 지원 현황:
    • 2024년 기준, Chrome, Edge, Safari에서 WebGPU가 부분적으로 활성화되어 있으며, Firefox도 실험적 지원을 제공
    • WebGPU 지원률은 약 70%로 점차 확대되고 있음
  3. WebGPU와 WASM 연계:
    • WebAssembly(WASM)와의 결합을 통해 고성능 컴퓨팅 애플리케이션의 성능을 극대화 가능.
    • 머신러닝, 과학 연산, 데이터 시각화와 같은 영역에서 활용 확대 예상
  4. 오픈소스 생태계 확장:
    • WebGPU를 활용한 여러 오픈소스 엔진과 라이브러리가 개발 중. Babylon.js, Three.js와 같은 라이브러리들이 WebGPU를 지원하고 있음

따라서, 사용자는 WebGPU를 통하여 웹에서 AI 기반 솔루션을 직접 구현하고 활용할 수 있어서  WebGL과 달리 WebGPU는 GPU 자원을 더 효율적으로 사용해 고성능 AI 응용 프로그램 개발을 가능하게 합니다.

 

Hugging Face는 Transformers.js v3 릴리스에 WebGPU 적용 발표

https://huggingface.co/blog/transformersjs-v3?utm_source=newsletter.genai.works&utm_medium=newsletter&utm_campaign=google-s-ai-watermarking-hugging-face-update-and-runway-s-film-revolution&_bhlid=5a0a4bf8d303de3ebae388b043b093b40642f5dc#webgpu-support

 

Transformers.js v3: WebGPU Support, New Models & Tasks, and More…

Transformers.js v3: WebGPU Support, New Models & Tasks, and More… After more than a year of development, we're excited to announce the release of 🤗 Transformers.js v3! Highlights include: Installation You can get started by installing Transformers.js

huggingface.co

 

1. Transformer.js vs 주요 기능

  • WebGPU 지원: 기존의 WASM보다 최대 100배 빠른 성능
  • 새로운 양자화(Quantization) 형식 지원: 다양한 dtype 옵션으로 모델 정밀도를 선택가능
  • 120개의 아키텍처 지원: 이전보다 더 많은 모델 아키텍처 사용 가능
  • 25개의 새로운 예제 프로젝트 및 템플릿 제공.
  • 1200개 이상의 미리 변환된 모델이 Hugging Face Hub에 업로드되어 사용 가능
  • Node.js, Deno, Bun 호환: 여러 환경에서 호환되는 ESM, CJS 모듈을 지원

Transformers.js는 자바스크립트 환경에서 AI 모델을 쉽게 사용할 수 있게 해주는 라이브러리로, 브라우저와 서버에서 모두 실행 가능한 범용 머신러닝 플랫폼입니다. 특히, WebGPU 가속을 통해 고성능의 머신러닝 작업을 브라우저에서 직접 수행할 수 있으며, 텍스트, 이미지, 음성 등의 다양한 작업에 사용할 수 있습니다.

WebGPU가 1인 AI 개발자에게 주는 혜택 - AI 민주화 촉진

WebGPU는 1인 AI 개발자가 비용 효율적으로 고성능 AI 애플리케이션을 개발하고 배포할 수 있게 해주는 강력한 도구입니다.

  • 클라우드 의존도 감소로 비용 절감.
  • 실시간 AI 기능으로 사용자 경험 극대화.
  • 개발 속도와 프로토타이핑 향상.
  • 멀티플랫폼 지원으로 확장성 확보.

이러한 이점들은 1인 개발자가 경쟁력 있는 AI 응용 프로그램을 빠르게 개발하고 시장에 선보일 수 있는 기회를 제공합니다. WebGPU는 AI 개발의 진입 장벽을 낮추며, 소규모 팀이나 개인 개발자도 고성능 AI 솔루션을 구현할 수 있는 길을 열어줍니다. 따라서, WebGPU 기술도 AI의 민주화에 기여하는 인프라 기술이 됩니다.


내 PC 브라우저의 WebGPU 동작 확인 및 사용 간단한 예제

아래 HTML 코드는 내 PC 브라우저에서 WebGPU를 활용해보고, 동작되는 지 확인하고, WebGPU을 초기화하하는 간단한 예저이다. 배경을 녹색으로 설정하는 코드입니다.

 

  • WebGPU가 지원되는 경우: 녹색 배경 + "WebGPU is Supported" (흰색 글씨)
  • WebGPU가 지원되지 않는 경우: 검은색 배경 + "WebGPU is Not Supported." (빨간 글씨)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGPU Example</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: black;
        color: white;
        font-family: Arial, sans-serif;
        text-align: center;
      }
      #textCanvas {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="webgpuCanvas"></canvas>
    <canvas id="textCanvas"></canvas>

    <script>
      async function initWebGPU() {
        if (!navigator.gpu) {
          // WebGPU가 지원되지 않는 경우 메시지를 출력합니다.
          displayErrorMessage("WebGPU is Not Supported.");
          console.error("WebGPU is Not Supported.");
          return;
        }

        const webgpuCanvas = document.getElementById("webgpuCanvas");
        const textCanvas = document.getElementById("textCanvas");

        // 두 개의 캔버스를 같은 크기로 설정합니다.
        webgpuCanvas.width = textCanvas.width = window.innerWidth;
        webgpuCanvas.height = textCanvas.height = window.innerHeight;

        // WebGPU 디바이스 및 어댑터 초기화
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();

        // WebGPU 컨텍스트 설정
        const context = webgpuCanvas.getContext("webgpu");
        const format = navigator.gpu.getPreferredCanvasFormat();

        context.configure({
          device: device,
          format: format,
        });

        // 명령 버퍼 생성 및 배경색 설정 (녹색 배경)
        const commandEncoder = device.createCommandEncoder();
        const textureView = context.getCurrentTexture().createView();

        const renderPassDescriptor = {
          colorAttachments: [
            {
              view: textureView,
              clearValue: { r: 0, g: 1, b: 0, a: 1 }, // 녹색 배경
              loadOp: "clear",
              storeOp: "store",
            },
          ],
        };

        const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
        passEncoder.end();

        // GPU 명령 제출
        device.queue.submit([commandEncoder.finish()]);

        // 텍스트를 2D 캔버스에 그립니다.
        drawTextOnCanvas(textCanvas);
      }

      function drawTextOnCanvas(canvas) {
        const ctx = canvas.getContext("2d");
        ctx.font = "48px Arial";
        ctx.fillStyle = "white";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("WebGPU is Supported", canvas.width / 2, canvas.height / 2);
      }

      function displayErrorMessage(message) {
        // WebGPU 미지원 시 전체 화면에 메시지를 표시합니다.
        const textCanvas = document.getElementById("textCanvas");
        const ctx = textCanvas.getContext("2d");

        ctx.clearRect(0, 0, textCanvas.width, textCanvas.height); // 캔버스 초기화
        ctx.font = "36px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(message, textCanvas.width / 2, textCanvas.height / 2);
      }

      // WebGPU 초기화 함수 호출
      initWebGPU();
    </script>
  </body>
</html>

 

반응형
저작자표시

티스토리툴바