Tiếng Việt

Hướng dẫn WebGL

Ứng dụng WebGL

Ví dụ WebGL

WebGL - Vẽ mô hình: Hướng dẫn cho người mới bắt đầu

Xin chào các pháp sư WebGL tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị này vào thế giới lập trình đồ họa 3D. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể nói rằng việc vẽ mô hình trong WebGL giống như xây dựng bằng các khối Lego số - nó khó khăn, nhưng lại rất thú vị! Hãy cùng nhau lặn sâu và tạo ra một chút phép thuật trên màn hình của chúng ta.

WebGL - Drawing a Model

Hiểu về cơ bản

Trước khi chúng ta bắt đầu vẽ mô hình, hãy nhanh chóng回顾 lại WebGL là gì. WebGL (Web Graphics Library) là một API JavaScript cho phép chúng ta render đồ họa 3D trong trình duyệt web mà không cần bất kỳ plugin nào. Nó giống như tặng cho trang web của bạn siêu năng lực!

Bây giờ, khi nói đến việc vẽ mô hình trong WebGL, chúng ta có hai phương thức chính để sử dụng:

Phương thức vẽ

Phương thức Mô tả Trường hợp sử dụng
drawArrays() Vẽ các primitive sử dụng dữ liệu mảng Hình dạng đơn giản, địa hình không được chỉ định
drawElements() Vẽ các primitive chỉ định Mô hình phức tạp, render tối ưu

Hãy cùng khám phá từng phương thức này chi tiết.

Phương thức drawArrays() : Vẽ Đơn giản Hóa

drawArrays() là gì?

Phương thức drawArrays() giống như vẽ bằng bút chì - nó trực quan và非常适合 cho các hình dạng đơn giản. Phương thức này vẽ các primitive địa hình sử dụng một mảng dữ liệu đỉnh.

Cú pháp và tham số

gl.drawArrays(mode, first, count);
  • mode: Loại primitive để vẽ (ví dụ: gl.TRIANGLES, gl.LINES)
  • first: Index bắt đầu trong mảng
  • count: Số lượng đỉnh để vẽ

Ví dụ: Vẽ một tam giác

Hãy vẽ một tam giác đơn giản sử dụng drawArrays():

// Dữ liệu đỉnh cho một tam giác
const vertices = [
0.0,  0.5,  0.0,  // Đỉnh trên
-0.5, -0.5,  0.0,  // Đỉnh dưới bên trái
0.5, -0.5,  0.0   // Đỉnh dưới bên phải
];

// Tạo và liên kết bộ nhớ đệm
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Thiết lập điểm chỉ thị attribute
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Vẽ tam giác
gl.drawArrays(gl.TRIANGLES, 0, 3);

Trong ví dụ này, chúng ta xác định ba đỉnh cho tam giác của mình, tạo một bộ nhớ đệm để lưu trữ dữ liệu này, thiết lập điểm chỉ thị attribute để WebGL biết cách đọc dữ liệu đỉnh của chúng ta, và cuối cùng gọi drawArrays() để render tam giác.

Phương thức drawElements() : Xây dựng Mô hình Phức tạp

drawElements() là gì?

Nếu drawArrays() giống như vẽ bằng bút chì, thì drawElements() giống như vẽ bằng cọ - nó cho phép bạn có nhiều kiểm soát và hiệu quả hơn khi vẽ các hình dạng phức tạp. Phương thức này sử dụng render chỉ định, cho phép chúng ta tái sử dụng dữ liệu đỉnh.

Cú pháp và tham số

gl.drawElements(mode, count, type, offset);
  • mode: Loại primitive để vẽ
  • count: Số lượng phần tử để vẽ
  • type: Loại giá trị trong bộ nhớ đệm phần tử
  • offset: Offset vào bộ nhớ đệm phần tử

Ví dụ: Vẽ một hình vuông

Hãy vẽ một hình vuông sử dụng drawElements():

// Dữ liệu đỉnh cho một hình vuông
const vertices = [
-0.5,  0.5,  0.0,  // Góc trên bên trái
0.5,  0.5,  0.0,  // Góc trên bên phải
0.5, -0.5,  0.0,  // Góc dưới bên phải
-0.5, -0.5,  0.0   // Góc dưới bên trái
];

// Dữ liệu chỉ thị
const indices = [
0, 1, 2,  // Tam giác đầu tiên
0, 2, 3   // Tam giác thứ hai
];

// Tạo và liên kết bộ nhớ đệm đỉnh
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Tạo và liên kết bộ nhớ đệm chỉ thị
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// Thiết lập điểm chỉ thị attribute
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Vẽ hình vuông
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

Trong ví dụ này, chúng ta xác định bốn đỉnh cho hình vuông của mình và sử dụng chỉ thị để xác định cách các đỉnh này nên được kết nối để tạo thành hai tam giác. Chúng ta tạo cả bộ nhớ đệm đỉnh và bộ nhớ đệm chỉ thị, thiết lập điểm chỉ thị attribute, và cuối cùng gọi drawElements() để render hình vuông.

Các thao tác cần thiết: Công thức cho thành công

Để vẽ mô hình thành công trong WebGL, có một số bước quan trọng chúng ta cần tuân theo. Hãy nghĩ về nó như một công thức cho một chiếc bánh美味的 đồ họa 3D!

Danh sách kiểm tra vẽ WebGL

  1. Tạo bộ nhớ đệm: Thiết lập bộ nhớ đệm đỉnh và chỉ thị để lưu trữ dữ liệu mô hình của bạn.
  2. Biên dịch các bộ vi xử lý: Viết và biên dịch các bộ vi xử lý đỉnh và fragment.
  3. Tạo chương trình: Kết nối các bộ vi xử lý đã biên dịch thành một chương trình.
  4. Thiết lập các điểm chỉ thị attribute: Báo cho WebGL biết cách giải thích dữ liệu đỉnh của bạn.
  5. Đặt các giá trị đồng nhất: Truyền bất kỳ giá trị đồng nhất nào cần thiết cho các bộ vi xử lý của bạn.
  6. Liên kết các bộ nhớ đệm: Kích hoạt các bộ nhớ đệm bạn muốn sử dụng để vẽ.
  7. Vẽ: Gọi drawArrays() hoặc drawElements() để render mô hình của bạn.

Hãy cùng kết hợp tất cả trong một ví dụ hoàn chỉnh hơn:

// Vertex shader
const vsSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

// Fragment shader
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Màu đỏ
}
`;

// Hàm biên dịch shader
function compileShader(gl, source, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}

// Hàm tạo chương trình
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
return program;
}

// Hàm vẽ mô hình chính
function drawModel(gl) {
// Biên dịch các bộ vi xử lý
const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

// Tạo chương trình
const program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);

// Tạo bộ nhớ đệm và đặt dữ liệu (như trong các ví dụ trước)
// ...

// Thiết lập các điểm chỉ thị attribute
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Vẽ
gl.drawArrays(gl.TRIANGLES, 0, 3);  // Or gl.drawElements() for indexed geometry
}

Ví dụ này kết hợp tất cả các bước cần thiết để vẽ một mô hình trong WebGL. Chúng ta biên dịch các bộ vi xử lý, tạo chương trình, thiết lập bộ nhớ đệm và các điểm chỉ thị attribute, và cuối cùng gọi drawArrays() hoặc drawElements() để render mô hình.

Kết luận

Chúc mừng! Bạn đã chính thức bước vào thế giới kỳ diệu của đồ họa 3D với WebGL. Nhớ rằng, giống như học bất kỳ kỹ năng mới nào, việc thành thạo WebGL đòi hỏi sự luyện tập và kiên nhẫn. Đừng nản lòng nếu mọi thứ không hoạt động hoàn hảo lần đầu tiên - ngay cả những nhà lập trình đồ họa có kinh nghiệm đôi khi cũng vẽ phải những khối màu hồng thay vì những con rồng hùng vĩ!

Tiếp tục thử nghiệm, học hỏi, và quan trọng nhất là hãy vui vẻ với nó. Trước khi bạn biết, bạn sẽ tạo ra những thế giới 3D tuyệt vời ngay trong trình duyệt web của mình. Chúc may mắn, những nghệ sĩ 3D tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:
Liên kết các thuộc tính và đối tượng bộ đệm
Hướng Dẫn Tiếp Theo:
WebGL - Vẽ Điểm