WebGPU 1.0 Rehberi 2026: Tarayıcıda 3D Render ve AI Modellerini GPU ile Hızlandırma

WebGPU Nedir? (What is WebGPU?)

WebGPU (Web Graphics and Compute API), W3C tarafından standartlaştırılan, modern GPU'ların tüm yeteneklerine tarayıcıdan erişim sağlayan yeni nesil API'dir. WebGL'in 2011'den beri sunduğu OpenGL ES 2.0 / 3.0 tarzının yerine; Vulkan, Metal ve Direct3D 12 gibi modern düşük seviye API'leri tarayıcıya getiriyor.

Temel hedefleri:

• Modern GPU özelliklerine erişim — compute shaders, indirect drawing, storage buffers
• Daha düşük overhead — sürücü çağrıları minimum
• Cross-platform tutarlılık — tüm OS'larda aynı davranış
• Açık güvenlik modeli — sandbox içinde çalışır

Tarayıcı Desteği 2026 (Browser Support 2026)

if (!navigator.gpu) {
  throw new Error("WebGPU bu tarayıcıda desteklenmiyor (WebGPU not supported)");
}

const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
  throw new Error("Uygun GPU adapter bulunamadı (no suitable GPU adapter found)");
}

const device = await adapter.requestDevice();
console.log("WebGPU device hazır:", device);

WebGL vs WebGPU Karşılaştırma

İlk WebGPU Kodu (First WebGPU Code)

Ekrana basit bir kırmızı üçgen çizen minimal WebGPU programı:

<canvas id="gpu-canvas" width="800" height="600"></canvas>
<script type="module" src="main.js"></script>

const canvas = document.getElementById('gpu-canvas');
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();

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

const shaderCode = `
@vertex
fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4<f32> {
    var pos = array<vec2<f32>, 3>(
        vec2<f32>( 0.0,  0.5),
        vec2<f32>(-0.5, -0.5),
        vec2<f32>( 0.5, -0.5),
    );
    return vec4<f32>(pos[i], 0.0, 1.0);
}

@fragment
fn fs() -> @location(0) vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0); // kırmızı
}
`;

const module = device.createShaderModule({ code: shaderCode });

const pipeline = device.createRenderPipeline({
    layout: 'auto',
    vertex: { module, entryPoint: 'vs' },
    fragment: { module, entryPoint: 'fs', targets: [{ format }] },
    primitive: { topology: 'triangle-list' }
});

function render() {
    const encoder = device.createCommandEncoder();
    const pass = encoder.beginRenderPass({
        colorAttachments: [{
            view: context.getCurrentTexture().createView(),
            clearValue: [0, 0, 0, 1],
            loadOp: 'clear',
            storeOp: 'store'
        }]
    });
    pass.setPipeline(pipeline);
    pass.draw(3);
    pass.end();
    device.queue.submit([encoder.finish()]);
}

render();

Bu kadar — 50 satır WebGPU kodu ile ekranda kırmızı bir üçgen var. WebGL'de aynı işi 80+ satırda yapardınız.

Compute Shaders ve WGSL (Compute Shaders in WGSL)

WebGPU'nun WebGL'den ayrılan en büyük özelliği compute shader desteği. Render pipeline'dan ayrı, GPU üzerinde genel amaçlı hesaplama yapabiliyorsunuz. Matrix multiplication, image processing, fiziksel simülasyon — hepsi GPU'da paralel.

@group(0) @binding(0) var<storage, read_write> data: array<f32>;

@compute @workgroup_size(64)
fn cs(@builtin(global_invocation_id) id: vec3<u32>) {
    let idx = id.x;
    if (idx < arrayLength(&data)) {
        data[idx] = data[idx] * 2.0;  // her elemanı 2 ile çarp
    }
}

Bu shader 1 milyon elemanlı bir dizinin her elemanını 2 ile çarpar — modern bir GPU'da 1ms altında. CPU'da aynı iş 50ms+ alabilir. Bu fark 50x hız demek, Alesta Web olarak görüntü işleme ve fiziksel simülasyon projelerinde sürekli faydalandığımız bir kapasite.

Tarayıcıda LLM ve AI Inference (Browser-based AI)

WebGPU'nun en heyecan verici uygulaması: LLM (Large Language Models) ve AI modellerini tarayıcıda yerel olarak çalıştırma. Sunucu maliyeti yok, kullanıcı verisi cihazdan çıkmıyor, latency milisaniyeler.

Hazır Kütüphaneler (Ready Libraries)

• Transformers.js (Hugging Face) — BERT, GPT, Whisper, Stable Diffusion tarayıcıda
• ONNX Runtime Web — Microsoft'un ONNX modelleri için WebGPU backend
• MediaPipe (Google) — Face detection, pose estimation, hand tracking
• WebLLM — Llama, Mistral, Phi-3 tarayıcıda çalıştırma

import { pipeline } from '@xenova/transformers';

const classifier = await pipeline(
    'sentiment-analysis',
    'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
    { device: 'webgpu' }  // WebGPU backend!
);

const result = await classifier('I love using WebGPU!');
console.log(result);
// [{ label: 'POSITIVE', score: 0.99 }]

Pratik Kütüphaneler (Practical Libraries)

WebGPU'yu doğrudan kullanmak istemiyorsanız, üzerine yazılmış olgun kütüphaneler var:

• Three.js — Klasik 3D engine, WebGPU renderer Tipi r170+ ile
• Babylon.js — Microsoft destekli 3D engine, WebGPU support v6+
• PlayCanvas — Browser-based 3D oyun motoru
• gpu-curtains — DOM'a senkronize WebGPU 3D engine
• TSL (Three.js Shading Language) — WGSL yazmadan shader yazma

import * as THREE from 'three';
import { WebGPURenderer } from 'three/webgpu';

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, 1, 0.1, 1000);
camera.position.z = 5;

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

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

📚 Kaynaklar ve Referanslar / Sources and References

• WebGPU W3C Specification — Resmi spesifikasyon
• WGSL Specification — Shading language standardı
• WebGPU Samples — Resmi örnek galerisi
• Transformers.js Documentation — Tarayıcıda AI modelleri
• Three.js WebGPU Guide — Three.js ile WebGPU

Alesta Web ekibi olarak tüm kod örneklerini Chrome 128 ve Firefox 147'de test ettik.