Explore the massively parallel architecture of GPUs, distinguish between CPU sequential threading and GPU SIMT execution models, request GPUDevice context in JavaScript, and configure a complete Render Pipeline.

This lesson is currently only available in Vietnamese. Please switch the language toggle in the menu to Vietnamese to read the full guide and take the interactive quiz.

Chào mừng bạn đến với bài học đầu tiên trong series Lập trình WebGPU. Trước khi viết dòng mã thiết lập WebGPU đầu tiên, chúng ta cần tìm hiểu xem tại sao GPU (Graphics Processing Unit) lại khác biệt so với CPU, và cơ chế thiết lập đường ống dựng hình (Render Pipeline) của WebGPU hoạt động ra sao.

1. Kiến trúc song song GPU vs. CPU tuần tự

Bộ vi xử lý trung tâm (CPU) được tối ưu hóa để chạy các luồng lệnh tuần tự cực nhanh. CPU sở hữu số lượng nhân ít (thường từ 4 đến 32 nhân) nhưng có bộ nhớ đệm Cache rất lớn và khả năng rẽ nhánh dòng lệnh phức tạp.

Ngược lại, GPU được thiết kế cho kiến trúc SIMT (Single Instruction, Multiple Threads) nhằm xử lý hàng vạn luồng tính toán cùng một lúc. Một chip GPU chứa hàng ngàn nhân xử lý nhỏ (ALU). Điều này làm GPU trở thành cỗ máy hoàn hảo cho đồ họa 3D (nơi ta phải tính toán màu sắc cho hàng triệu pixel độc lập mỗi giây) và tính toán khoa học song song.

2. Khởi tạo WebGPU Context trong JavaScript

Quy trình thiết lập WebGPU trên trình duyệt gồm 4 bước tuần tự:

Dưới đây là đoạn mã khởi tạo WebGPU và lấy context của Canvas:

async function initWebGPU() {
  // 1. Kiểm tra hỗ trợ
  if (!navigator.gpu) {
    throw new Error("Trình duyệt không hỗ trợ WebGPU!");
  }

  // 2. Request adapter mô tả card đồ họa vật lý
  const adapter = await navigator.gpu.requestAdapter();
  
  // 3. Khởi tạo logical device
  const device = await adapter.requestDevice();

  // 4. Lấy context và configure
  const canvas = document.getElementById("gpuCanvas");
  const context = canvas.getContext("webgpu");
  const format = navigator.gpu.getPreferredCanvasFormat();

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

  return { device, context, format };
}

3. Thiết lập Render Pipeline vẽ tam giác đầu tiên

Khác với WebGL sử dụng máy trạng thái toàn cục (global state machine), WebGPU yêu cầu chúng ta khai báo đầy đủ và đóng băng cấu hình trong một Render Pipeline trước khi vẽ. Điều này giúp loại bỏ overhead kiểm tra lỗi runtime của GPU.

Để vẽ một tam giác, ta cần nạp mã nguồn shader WGSL để xác định tọa độ đỉnh (Vertex Shader) và màu sắc (Fragment Shader). Đây là mã nguồn WGSL tối giản không dùng Vertex Buffer (tọa độ đỉnh được sinh trực tiếp dựa trên chỉ mục @builtin(vertex_index)):

// Khai báo struct nhận màu từ Uniform Buffer
struct ColorUniform {
  color: vec4<f32>,
};
@group(0) @binding(0) var<uniform> u_color: ColorUniform;

struct VertexOutput {
  @builtin(position) pos: vec4<f32>,
};

@vertex
fn vs_main(@builtin(vertex_index) in_vertex_index: u32) -> VertexOutput {
  var pos = array<vec2<f32>, 3>(
    vec2<f32>(0.0, 0.5),    // đỉnh chóp
    vec2<f32>(-0.5, -0.5),  // góc trái
    vec2<f32>(0.5, -0.5)    // góc phải
  );

  var out: VertexOutput;
  out.pos = vec4<f32>(pos[in_vertex_index], 0.0, 1.0);
  return out;
}

@fragment
fn fs_main() -> @location(0) vec4<f32> {
  return u_color.color; // Sử dụng màu truyền động từ Uniform Buffer
}

Sân chơi tương tác: WebGPU Setup Sandbox

Dưới đây là sân chơi trực quan hóa WebGPU đầu tiên của bạn. Nếu trình duyệt của bạn hỗ trợ WebGPU, bạn sẽ thấy một hình tam giác neon được vẽ trực tiếp bằng GPU Render Pipeline. Hãy sử dụng thanh chọn màu để truyền màu sắc động thông qua Uniform Buffer lên Fragment Shader:

<!-- Canvas vẽ WebGPU -->
<canvas id="canvas-webgpu" width="360" height="360"></canvas>