WebGPU في 2026: رسومات وحوسبة عالية الأداء في المتصفح

يجلب WebGPU قدرات وحدة معالجة الرسوميات الحديثة إلى الويب، مما يتيح أعباء عمل رسومية وحوسبية عالية الأداء كانت مستحيلة سابقاً في المتصفّحات.

WebGPU مقابل WebGL

• واجهة حديثة: مبنية على Vulkan/Metal/D3D12
• مظلّلات الحوسبة (Compute Shaders): حوسبة عامة الغرض على وحدة الرسوميات
• أداء أفضل: عبء أقل على المُشغّل (driver)
• تحكّم صريح: أدِر موارد وحدة الرسوميات مباشرةً

البداية

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");
context.configure({
  device,
  format: navigator.gpu.getPreferredCanvasFormat(),
});

// Create shader module
const shaderModule = device.createShaderModule({
  code: `
    @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
      const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
      return vec4f(pos[i], 0, 1);
    }
    @fragment fn fs() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }
  `
});

حالات الاستخدام

• التصوّر ثلاثي الأبعاد والألعاب
• استدلال الذكاء الاصطناعي/تعلّم الآلة في المتصفّح
• معالجة الفيديو
• الحوسبة العلمية