WebGL là gì? Hướng dẫn tạo đồ họa đơn giản với WebGL

Viết bởi Hướng nội
Nov 13, 2024

WebGL là API đồ họa dựa trên JavaScript, cho phép hiển thị đồ họa 2D và 3D trong trình duyệt web mà không cần cài đặt thêm bất kỳ plugin nào

7 min reads

WebGL là gì? Hướng dẫn tạo đồ họa đơn giản với WebGL

Bạn đã bao giờ vào một trang web và bị cuốn hút bởi những mô hình 3D sống động hoặc những hiệu ứng đồ họa tuyệt đẹp mà không cần cài thêm bất kỳ plugin nào? Nếu có, rất có thể đó là nhờ WebGL. Đây là một công nghệ giúp các nhà phát triển đưa đồ họa 3D và các hiệu ứng phức tạp trực tiếp vào trình duyệt chỉ với JavaScript.

Từ các game nhập vai đến các ứng dụng trực quan hóa dữ liệu, WebGL đang thay đổi cách chúng ta trải nghiệm đồ họa trên web. Vậy điều gì làm WebGL đặc biệt và tại sao nó đang được ngày càng nhiều nhà phát triển yêu thích? Hãy cùng tìm hiểu nhé!

1. WebGL là gì?

WebGL (Web Graphics Library) là API đồ họa dựa trên JavaScript, cho phép hiển thị đồ họa 2D và 3D trong trình duyệt web mà không cần cài đặt thêm bất kỳ plugin nào.

Dựa trên OpenGL ES 2.0, WebGL được thiết kế để hoạt động với JavaScript và HTML5, giúp trình duyệt tận dụng sức mạnh của GPU (card đồ họa) nhằm xử lý các hiệu ứng đồ họa phức tạp.

Dù tên là "Library" (Thư viện), WebGL thực chất hoạt động như một API – tức là tập hợp các lệnh và hàm để lập trình viên điều khiển đồ họa. Tên gọi "Library" chỉ là cách nhấn mạnh rằng WebGL là bộ công cụ cần thiết cho đồ họa trên web.

Các developer có thể tạo ra những mô hình 3D, hiệu ứng ánh sáng, và các hoạt cảnh phong phú mà trước đây chỉ có thể làm được qua các ứng dụng cài đặt trên máy người dùng.

2. WebGL hoạt động như thế nào?

Để tạo ra hình ảnh 3D trên WebGL, đầu tiên chúng ta cần hiểu về Rendering Pipeline, hay còn gọi là Quy trình Xử lý Đồ họa. Đây là chuỗi các bước mà WebGL thực hiện để "vẽ" đồ họa 3D. Mô hình xử lý này hoạt động rất hiệu quả trên GPU, vì GPU là bộ xử lý có khả năng chạy nhiều giai đoạn cùng lúc – các bước trong pipeline đều được xử lý song song.

Dưới đây là các bước quan trọng trong quy trình này:

Vertex Processing (Xử lý Đỉnh)
Đây là bước đầu tiên, nơi WebGL xử lý các đỉnh của hình ảnh, tức là các điểm 3D cơ bản để xây dựng hình khối. Ở đây, Vertex Shader sẽ thực hiện các phép biến đổi như xoay, dịch chuyển, và phóng to/thu nhỏ các đỉnh. Đỉnh đầu vào được lấy ra, xử lý và cho ra đầu ra dưới dạng các tọa độ 3D mới.
Primitive Assembly (Lắp ráp các hình khối)
Sau khi các đỉnh đã được xử lý, chúng sẽ được kết nối lại để tạo thành các hình khối cơ bản như tam giác, đường thẳng hay điểm. Các hình khối này là nền tảng của các hình ảnh phức tạp trong 3D.
Rasterization
Ở bước này, WebGL chuyển đổi các hình khối từ không gian 3D thành không gian 2D dưới dạng các điểm ảnh (pixel). Đây là bước quan trọng để hình ảnh có thể hiển thị trên màn hình. Mỗi hình khối 3D sẽ được "vẽ" lên màn hình bằng các "fragment" – các phần tử nhỏ chứa thông tin màu sắc và độ sâu.
Fragment Shader Processing
Fragment Shader tiếp nhận từng fragment và xử lý để tạo ra màu sắc và giá trị độ sâu cho mỗi pixel. Đây là bước giúp chúng ta thêm các hiệu ứng màu sắc, texture, hay thậm chí ánh sáng cho hình ảnh. Các hiệu ứng hình ảnh được tạo ra ở đây là yếu tố làm nên sự sống động của đồ họa.
Depth and Blending
Cuối cùng, các fragment sẽ trải qua một quy trình kiểm tra độ sâu để xác định phần nào của hình ảnh nằm ở phía trước hoặc phía sau khi hiển thị. Bước kết hợp màu sắc sẽ làm hình ảnh mượt mà hơn, đặc biệt là khi các vật thể chồng lên nhau hoặc có phần trong suốt.

3. Hướng dẫn tạo đồ họa đơn giản với WebGL

WebGL có thể trông phức tạp lúc đầu, nhưng đừng lo! Trong hướng dẫn này, chúng ta sẽ cùng nhau tạo ra một hình tam giác 2D đơn giản, hiển thị trên trình duyệt chỉ bằng vài bước cơ bản.

Bước 1: Đầu tiên, chúng ta sẽ tạo một trang HTML đơn giản và thêm một canvas, nơi WebGL sẽ vẽ đồ họa lên đó.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo WebGL</title>
</head>
<body>
    <canvas id="webgl-canvas" width="500" height="500"></canvas>
    <script src="webgl-demo.js"></script>
</body>
</html>

Bước 2: Tạo một file webgl-demo.js với nội dung như sau:

// Khởi tạo WebGL
const canvas = document.getElementById("webgl-canvas");
const gl = canvas.getContext("webgl");

if (!gl) {
    alert("WebGL không được hỗ trợ trong trình duyệt của bạn!");
}

// Vertex Shader: Xác định vị trí của các đỉnh
const vertexShaderSource = `
    attribute vec2 a_position;
    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
    }
`;

// Fragment Shader: Xác định màu sắc cho hình tam giác
const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); // Màu cam
    }
`;

// Hàm tạo shader
function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

// Tạo và liên kết các shader vào chương trình WebGL
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program));
}
gl.useProgram(program);

// Cung cấp tọa độ cho hình tam giác
const positions = new Float32Array([
    0, 1, 
    -1, -1, 
    1, -1,
]);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// Liên kết buffer với Vertex Shader
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Xóa màn hình và vẽ tam giác
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

Giải thích đoạn Code trên:

Khởi tạo WebGL: Chúng ta lấy ngữ cảnh WebGL từ canvas và kiểm tra xem trình duyệt có hỗ trợ hay không.
Vertex Shader: Xác định vị trí của các đỉnh (a_position). Shader này nhận dữ liệu về vị trí từ bộ nhớ và xác định tọa độ cho từng đỉnh của tam giác.
Fragment Shader: Shader này định nghĩa màu sắc cho từng pixel của tam giác. Ở đây, chúng ta đặt màu cam cho tất cả các điểm ảnh trong tam giác.
Tạo Shader: Hàm createShader giúp tạo và kiểm tra lỗi của shader.
Tạo và liên kết chương trình WebGL: Chúng ta liên kết cả hai shader vào một chương trình để WebGL sử dụng chúng cùng nhau.
Cung cấp tọa độ cho hình tam giác: Chúng ta tạo một buffer để lưu trữ vị trí các đỉnh của tam giác và chuyển nó đến GPU.
Liên kết buffer với Vertex Shader: Liên kết dữ liệu vị trí trong buffer với thuộc tính a_position trong Vertex Shader, đảm bảo WebGL biết tọa độ của các đỉnh cần vẽ.
Xóa màn hình và vẽ tam giác: Cuối cùng, chúng ta xóa màn hình, đặt màu nền, và yêu cầu WebGL vẽ tam giác bằng lệnh drawArrays.

Khi mở file index.html trong trình duyệt, bạn sẽ thấy một hình tam giác màu cam được vẽ trên nền đen.

4. Kết luận

Với WebGL, bạn có thể tạo nên những mô hình 3D phức tạp, hình ảnh động sống động, hay thậm chí cả trò chơi và ứng dụng trực quan trên trình duyệt. Nếu bạn vừa hoàn thành ví dụ đầu tiên với tam giác 2D, chúc mừng! Bạn đã thực hiện những bước đầu tiên trên hành trình khám phá đồ họa 3D trên web.

Hãy thử nghiệm thêm, tạo ra các hình dạng mới, thêm màu sắc, ánh sáng, hoặc thậm chí cả chuyển động. Với WebGL, giới hạn duy nhất là trí tưởng tượng của bạn mà thôi.

Các bài viết liên quan: