WebGL - Vẽ một Hình Tứ Giác
Xin chào, những người học lập trình web! 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, nơi chúng ta sẽ học cách vẽ một hình tứ giác (hoặc简称 "quad"). Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ hướng dẫn bạn từng bước với sự kiên nhẫn của một giáo viên dày dạn kinh nghiệm đã giúp đỡ biết bao sinh viên như bạn.
WebGL là gì?
Trước khi chúng ta bắt đầu vẽ hình tứ giác, hãy dành một chút thời gian để 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 những hình ảnh 2D và 3D ấn tượng trong các trình duyệt web. Nó giống như một c这支魔法 cọ có thể biến trí tưởng tượng của bạn thành hiện thực trên một trang web!
Các bước để vẽ một Hình Tứ Giác
Bây giờ, hãy chia quá trình vẽ hình tứ giác thành các bước dễ quản lý. Hãy tưởng tượng như chúng ta đang xây dựng một ngôi nhà - chúng ta sẽ bắt đầu từ nền móng và dần dần xây dựng lên.
Bước 1: Thiết lập HTML Canvas
Trước tiên, chúng ta cần một canvas để vẽ. Trong HTML, chúng ta sử dụng thẻ <canvas>. Nó giống như việc.setup một khung vẽ tranh.
<canvas id="myCanvas" width="600" height="400">
Trình duyệt của bạn không hỗ trợ thẻ HTML5 canvas.
</canvas>Bước 2: Khởi tạo Context WebGL
Tiếp theo, chúng ta cần lấy context WebGL. Điều này giống như việc chọn một c这支 cọ WebGL ma thuật.
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL không được hỗ trợ, chuyển sang sử dụng experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Trình duyệt của bạn không hỗ trợ WebGL');
}Bước 3: Tạo Vertex Shader
Bây giờ, chúng ta sẽ tạo một vertex shader. Vertex shader này sẽ告诉 WebGL何处绘制我们的四边形的角落。
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);Bước 4: Tạo Fragment Shader
Fragment shader sẽ quyết định màu sắc của hình tứ giác. Hãy làm nó có màu xanh vui tươi!
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);Bước 5: Tạo và Liên kết Chương Trình
Bây giờ, chúng ta sẽ tạo một chương trình và liên kết các shader vào nó. Điều này giống như việc kết hợp c这支 cọ và màu sắc của chúng ta.
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);Bước 6: Tạo Buffer và Tải Vertex Data
Đã đến lúc xác định các góc của hình tứ giác của chúng ta!
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);Bước 7: Kết nối Position Buffer với Attribute
Chúng ta cần告诉 WebGL làm thế nào để đọc dữ liệu vị trí của chúng ta.
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);Bước 8: Vẽ Hình Tứ Giác
Cuối cùng, đã đến lúc chúng ta chờ đợi - hãy vẽ hình tứ giác của chúng ta!
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);Ví dụ - Vẽ một Hình Tứ Giác
Bây giờ, hãy kết hợp tất cả lại trong một ví dụ hoàn chỉnh:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Quad</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
Trình duyệt của bạn không hỗ trợ thẻ HTML5 canvas.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('Trình duyệt của bạn không hỗ trợ WebGL');
}
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>Và thế là bạn đã có một hình tứ giác WebGL của riêng mình. Khi bạn mở tệp HTML này trong trình duyệt, bạn nên thấy một hình tứ giác xanh tươi trên canvas.
Kết luận
Chúc mừng bạn đã vẽ thành công hình tứ giác WebGL đầu tiên! Hôm nay, chúng ta đã bao quát rất nhiều nội dung, từ việc thiết lập canvas đến việc tạo shader và cuối cùng là vẽ hình của chúng ta. Hãy nhớ rằng học WebGL giống như học vẽ tranh - nó đòi hỏi sự thực hành và kiên nhẫn. Đừng nản lòng nếu bạn không thể làm ngay lập tức. Hãy tiếp tục thử nghiệm, và sớm bạn sẽ tạo ra những hình ảnh 3D tuyệt vời trên web!
Trong bài học tiếp theo, chúng ta sẽ khám phá cách thêm tương tác vào các tác phẩm WebGL của mình. Đến那时候, chúc các bạn viết mã vui vẻ!
Credits: Image by storyset