WebGL - Vẽ Điểm
Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của WebGL, cụ thể là tập trung vào việc vẽ điểm. Là người giáo viên máy tính gần gũi của bạn, tôi sẽ hướng dẫn bạn từng bước trong chuyến phiêu lưu này. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản nhất và dần dần nâng cao. Vậy, hãy chuẩn bị bút vẽ ảo của bạn và cùng nhau bắt đầu!
WebGL là gì?
Trước khi chúng ta bắt đầu vẽ điểm, hãy hiểu WebGL là gì. WebGL (Web Graphics Library) là một API mạnh mẽ của JavaScript cho phép chúng ta tạo ra hình ảnh 2D và 3D trong các trình duyệt web. Nó giống như một cọ vẽ ma thuật có thể vẽ trực tiếp lên trang web của bạn!
Các bước cần thiết
Để vẽ điểm bằng WebGL, chúng ta cần phải theo một loạt các bước. Hãy nghĩ về nó như một công thức để tạo ra nghệ thuật số. Dưới đây là bảng tóm tắt các bước:
| Bước | Mô tả |
|---|---|
| 1 | Lấy phần tử canvas |
| 2 | Lấy ngữ cảnh vẽ WebGL |
| 3 | Định nghĩa hình học (điểm) |
| 4 | Tạo vertex shader |
| 5 | Tạo fragment shader |
| 6 | Tạo chương trình shader |
| 7 | Tải dữ liệu vào GPU |
| 8 | Đặt viewport |
| 9 | Xóa canvas |
| 10 | Vẽ điểm |
Bây giờ, hãy phân tích từng bước và xem chúng nasıl kết hợp lại để tạo ra kiệt tác của chúng ta!
Ví dụ - Vẽ Ba Điểm bằng WebGL
Hãy cùng nhau qua một ví dụ nơi chúng ta sẽ vẽ ba điểm màu sắc trên canvas của chúng ta. Tôi sẽ giải thích từng phần của mã để bạn hiểu rõ chính xác điều gì đang diễn ra.
Bước 1: Thiết lập HTML
Đầu tiên, chúng ta cần tạo một tệp HTML với phần tử canvas:
<!DOCTYPE html>
<html>
<head>
<title>Điểm WebGL Đầu Tiên Của Tôi</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Trình duyệt của bạn không hỗ trợ phần tử canvas.
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>Điều này tạo ra một canvas sẽ là bảng vẽ của chúng ta. Tệp JavaScript mà chúng ta sẽ tạo tiếp theo sẽ thực hiện tất cả phép thuật!
Bước 2: Tạo tệp JavaScript
Bây giờ, hãy tạo một tệp có tên webgl-points.js và bắt đầu viết mã ứng dụng WebGL của chúng ta:
// Bước 1: Lấy phần tử canvas
const canvas = document.getElementById('myCanvas');
// Bước 2: Lấy ngữ cảnh vẽ WebGL
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL không được hỗ trợ');
throw new Error('WebGL không được hỗ trợ');
}
// Bước 3: Định nghĩa hình học (điểm)
const vertices = new Float32Array([
0.0, 0.5, // Điểm 1
-0.5, -0.5, // Điểm 2
0.5, -0.5 // Điểm 3
]);
// Bước 4: Tạo vertex shader
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Bước 5: Tạo fragment shader
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Bước 6: Tạo chương trình shader
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Bước 7: Tải dữ liệu vào GPU
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Bước 8: Đặt viewport
gl.viewport(0, 0, canvas.width, canvas.height);
// Bước 9: Xóa canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Bước 10: Vẽ điểm
gl.drawArrays(gl.POINTS, 0, 3);Bây giờ, hãy phân tích mã này và hiểu rõ từng phần:
Hiểu mã
Bước 1 và 2: Thiết lập WebGL
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');Ở đây, chúng ta lấy phần tử canvas và lấy ngữ cảnh vẽ WebGL. Điều này tương tự như chuẩn bị cọ và bảng màu!
Bước 3: Định nghĩa hình học
const vertices = new Float32Array([
0.0, 0.5, // Điểm 1
-0.5, -0.5, // Điểm 2
0.5, -0.5 // Điểm 3
]);Chúng ta định nghĩa ba điểm trong không gian 2D. Các tọa độ này dao động từ -1 đến 1 trong cả hai hướng x và y. Hãy tưởng tượng canvas của chúng ta chia thành bốn phần, với (0,0) ở giữa.
Bước 4 và 5: Tạo Shaders
Shaders là các chương trình đặc biệt chạy trên GPU. Chúng ta có hai loại:
- Vertex Shader: Xác định vị trí của các điểm của chúng ta.
- Fragment Shader: Xác định màu sắc của các điểm.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;Vertex shader xác định vị trí và kích thước của các điểm. Fragment shader xác định màu sắc của các điểm là đỏ (1.0, 0.0, 0.0 trong RGB).
Bước 6 và 7: Tạo chương trình và tải dữ liệu
Những bước này liên quan đến việc tạo một chương trình shader và tải dữ liệu vertex vào bộ nhớ GPU.
Bước 8 và 9: Thiết lập viewport
Chúng ta đặt viewport để khớp với kích thước của canvas và xóa canvas để màu đen.
Bước 10: Vẽ điểm
gl.drawArrays(gl.POINTS, 0, 3);Cuối cùng, chúng ta vẽ ba điểm!
Kết luận
Chúc mừng! Bạn đã tạo ra ứng dụng WebGL đầu tiên của mình để vẽ điểm. Đây chỉ là bước đầu tiên trong hành trình vào thế giới fascinante của đồ họa máy tính. Khi bạn tiếp tục khám phá, bạn sẽ có thể tạo ra các hình dạng phức tạp hơn, thêm animation, và thậm chí bước vào thế giới đồ họa 3D.
Nhớ rằng, học WebGL giống như học vẽ - nó đòi hỏi sự thực hành 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. Hãy tiếp tục thử nghiệm, và sớm bạn sẽ có thể tạo ra kiệt tác số!
Trong bài học tiếp theo, chúng ta sẽ khám phá cách thêm màu sắc khác nhau cho các điểm và tạo ra các hình dạng phức tạp hơn. Đến那个时候, chúc bạn viết mã vui vẻ!
Credits: Image by storyset