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

Xin chào các bạn未来的 WebGL maestros! Tôi rất vui mừng được làm hướng dẫn viên cho các bạn trong hành trình đầyExciting vào thế giới của hình học WebGL. Là một ai đó đã dạy đồ họa máy tính hơn một thập kỷ, tôi có thể告诉 bạn rằng việc hiểu hình học trong WebGL giống như học vẽ bằng mã. Nó khó khăn, nhưng rất đáng! Hãy cuộn lên tay áo và nhảy vào!

WebGL - Geometry

Xác định Hình học Cần Thiết

Trước khi chúng ta bắt đầu tạo ra những hình ảnh 3D ấn tượng, chúng ta cần hiểu hình học có nghĩa là gì trong WebGL. Nói chung, hình học là xương sống của mọi thứ chúng ta thấy trên màn hình. Nó được tạo thành từ các điểm, đường và hình dạng tạo nên cấu trúc của các đối tượng 3D của chúng ta.

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà bằng những viên gạch LEGO. Mỗi viên gạch đại diện cho một điểm trong không gian 3D, và khi bạn kết nối những điểm này, bạn tạo ra các cạnh và mặt. Đó chính xác là điều chúng ta làm trong WebGL, nhưng với mã thay vì những viên gạch nhựa!

Hãy bắt đầu với một ví dụ đơn giản - tạo một tam giác:

const triangleVertices = [
0.0,  1.0,  0.0,
-1.0, -1.0,  0.0,
1.0, -1.0,  0.0
];

Ở đây, chúng ta đã xác định ba điểm trong không gian 3D. Mỗi điểm được đại diện bởi ba số (x, y, z). Mảng số này là thứ chúng ta sẽ sử dụng để告诉 WebGL nơi vẽ tam giác của chúng ta.

Đối tượng Buffer

Bây giờ chúng ta đã xác định hình học của mình, chúng ta cần một cách để gửi dữ liệu này đến GPU. Đây là lúc các đối tượng buffer xuất hiện. Hãy tưởng tượng các đối tượng buffer như những容器 đặc biệt giữ dữ liệu hình học của chúng ta và làm cho nó dễ dàng truy cập đối với GPU.

Tạo một Buffer

Tạo một buffer là bước đầu tiên của chúng ta trong việc chuẩn bị hình học cho GPU. Đây là cách chúng ta làm:

const buffer = gl.createBuffer();

Dòng này tạo một đối tượng buffer trống. Nó giống như việc lấy một hộp trống sẵn sàng để.fill với những viên gạch LEGO của chúng ta.

Gắn Buffer

Sau khi tạo buffer, chúng ta cần告诉 WebGL rằng này là buffer chúng ta muốn làm việc với. Chúng ta làm điều này bằng cách gắn buffer:

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

Điều này giống như việc lấy hộp LEGO và nói, "Hey WebGL, tôi sẽ đặt một số viên gạch vào hộp này bây giờ!"

Chuyển Dữ Liệu vào Buffer

Bây giờ đến phần thú vị -.fill buffer của chúng ta với dữ liệu hình học:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

Hãy phân tích điều này:

gl.bufferData() là phương thức chúng ta sử dụng để.fill buffer.
gl.ARRAY_BUFFER告诉 WebGL rằng chúng ta đang làm việc với buffer hiện tại đang gắn.
new Float32Array(triangleVertices) chuyển đổi mảng JavaScript của chúng ta thành một mảng có typ (thêm về điều này trong một lát).
gl.STATIC_DRAW là một gợi ý cho WebGL về cách chúng ta dự định sử dụng dữ liệu này.

Mảng Có Typ

Bạn có thể đang tự hỏi tại sao chúng ta sử dụng Float32Array trong bước trước. Well, WebGL rất kén chọn về các loại dữ liệu của nó. Nó thích làm việc với các mảng có typ vì hiệu suất. Các mảng có typ đảm bảo rằng mỗi piece của dữ liệu có kích thước và loại nhất quán.

Dưới đây là bảng các mảng có typ thường được sử dụng trong WebGL:

Mảng Có Typ	Mô Tả	Use Case
Float32Array	Số nguyên động 32-bit	Vị trí đỉnh, tọa độ texture
Int8Array	Số nguyên có dấu 8-bit	Số nguyên nhỏ
Uint8Array	Số nguyên không dấu 8-bit	Thành phần màu
Int16Array	Số nguyên có dấu 16-bit	Số nguyên lớn hơn
Uint16Array	Số nguyên không dấu 16-bit	Chỉ số đỉnh
Int32Array	Số nguyên có dấu 32-bit	Số nguyên rất lớn
Uint32Array	Số nguyên không dấu 32-bit	Số nguyên rất lớn dương

Trong trường hợp của chúng ta, chúng ta sử dụng Float32Array vì vị trí đỉnh của chúng ta là số nguyên động.

Bỏ Gắn Buffer

Sau khi chúng ta hoàn thành việc làm việc với một buffer, việc làm tốt là bỏ gắn nó:

gl.bindBuffer(gl.ARRAY_BUFFER, null);

Điều này giống như việc đặt hộp LEGO trở lại lên kệ. Nó ngăn chặn sự thay đổi ngẫu nhiên đối với buffer và giữ cho trạng thái WebGL của chúng ta sạch sẽ.

Và thế là xong, các bạn! Chúng ta đã thành công xác định hình học, tạo buffer,.fill buffer với dữ liệu và học về mảng có typ. Đây là nền tảng của việc tạo bất kỳ đối tượng 3D nào trong WebGL.

Nhớ rằng, học WebGL là một hành trình. Đừng lo lắng nếu một số khái niệm ban đầu có vẻ khó hiểu. Với sự luyện tập, bạn sẽ nhanh chóng tạo ra những hình ảnh 3D ấn tượng! Trong những năm dạy học của tôi, tôi đã thấy hàng trăm sinh viên từ người mới bắt đầu trở thành phù thủy WebGL. Bạn đang trên đường gia nhập hàng ngũ của họ!

Trong bài học tiếp theo, chúng ta sẽ khám phá cách sử dụng các buffer để thực sự vẽ hình học của chúng ta lên màn hình. Hãy chuẩn bị để thấy tam giác WebGL đầu tiên của bạn sống động! Đến那时候, chúc các bạn mã hóa vui vẻ và đừng quên nghỉ ngơi và duỗi các ngón tay码!

Credits: Image by storyset