WebGL - Sample Application: A Beginner's Guide

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ị vào thế giới WebGL. Như một giáo viên khoa học máy tính với nhiều năm kinh nghiệm, tôi đã thấy biết bao nhiêu sinh viên ánh lên khi họ tạo ra hình ảnh 3D đầu tiên trên web. Hôm nay, chúng ta sẽ cùng bắt đầu cuộc phiêu lưu đó. Vậy, hãy thắt dây an toàn và cùng lặn sâu vào!

WebGL - Sample Application

What is WebGL?

Trước khi bắt đầu lập mã, hãy hiểu WebGL là gì. WebGL (Web Graphics Library) là một API JavaScript cho phép chúng ta render hình ảnh 3D và 2D tương tác trong các trình duyệt web mà không cần sử dụng plugin. Nó giống như tặng cho trang web của bạn siêu năng lực để tạo ra những hình ảnh ấn tượng!

Structure of WebGL Application

Một ứng dụng WebGL thường bao gồm nhiều thành phần chính. Hãy cùng phân tích chúng:

1. HTML Canvas

Canvas là bảng vẽ của chúng ta. Đó là nơi tất cả phép thuật xảy ra!

<canvas id="myCanvas" width="640" height="480">
Trình duyệt của bạn không hỗ trợ thẻ HTML5 canvas.
</canvas>

Điều này tạo ra một canvas 640x480 pixel trên trang web của bạn. Hãy tưởng tượng nó như một khung vẽ của nghệ sĩ, sẵn sàng cho kiệt tác của bạn!

2. JavaScript Code

Đây là nơi chúng ta viết các lệnh WebGL. Nó giống như đưa ra hướng dẫn cho nghệ sĩ ảo của chúng ta.

3. Vertex Shader and Fragment Shader

Đây là những chương trình đặc biệt chạy trên GPU. Chúng giống như cọ và palet màu cho hình ảnh 3D của chúng ta.

4. Buffers

Buffers lưu trữ dữ liệu cho các đối tượng 3D của chúng ta. Hãy tưởng tượng chúng như là nguyên liệu thô cho các tác phẩm điêu khắc 3D của chúng ta.

Bây giờ chúng ta đã biết các nguyên liệu, hãy cùng nấu một ứng dụng WebGL ngon lành!

Sample Application

Hãy cùng tạo một ứng dụng WebGL đơn giản để vẽ một tam giác màu sắc. Chúng ta sẽ đi qua từng bước chi tiết.

Step 1: Set up the 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>
<body>
<canvas id="myCanvas" width="640" height="480">
Trình duyệt của bạn không hỗ trợ thẻ HTML5 canvas.
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

Điều này tạo ra canvas của chúng ta và liên kết đến tệp JavaScript mà chúng ta sẽ tạo tiếp theo.

Step 2: Initialize WebGL

Bây giờ, hãy tạo tệp webgl-demo.js và thiết lập WebGL:

function main() {
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!");
return;
}

// WebGL đã sẵn sàng để sử dụng!
}

window.onload = main;

Hàm này lấy canvas của chúng ta, khởi tạo WebGL và kiểm tra xem nó có được hỗ trợ hay không. Nó giống như kiểm tra xem chúng ta đã có tất cả các dụng cụ vẽ trước khi bắt đầu.

Step 3: Create Shaders

Bây giờ, hãy tạo các vertex và fragment shaders:

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('Đã xảy ra lỗi khi biên dịch các shader: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

Những shader này xác định cách tam giác của chúng ta sẽ được đặt vị trí và màu sắc. Vertex shader định vị tam giác của chúng ta, trong khi fragment shader cho nó một màu hồng đẹp.

Step 4: Create a Program

Bây giờ, hãy liên kết các shaders của chúng ta vào một chương trình:

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

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Không thể khởi tạo chương trình shader: ' + gl.getProgramInfoLog(program));
return null;
}

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

Điều này giống như ráp các dụng cụ vẽ của chúng ta lại với nhau và sẵn sàng để vẽ!

Step 5: Create a Buffer

Bây giờ, hãy tạo một buffer để lưu trữ các đỉnh của tam giác:

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

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

Điều này xác định hình dạng của tam giác của chúng ta. Nó giống như phác thảo hình dạng cơ bản trước khi bắt đầu vẽ.

Step 6: Render the Triangle

Cuối cùng, hãy vẽ tam giác của chúng ta:

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

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);

gl.drawArrays(gl.TRIANGLES, 0, 3);

Đây là nơi phép thuật xảy ra! Chúng ta làm sạch canvas, thiết lập chương trình và buffer, và cuối cùng vẽ tam giác.

Conclusion

Chúc mừng! Bạn vừa tạo ra ứng dụng WebGL đầu tiên của mình. Bạn đã迈出了第一步进入网络上的3D图形世界。 Nhớ rằng, giống như bất kỳ hình thức nghệ thuật nào, việc thành thạo WebGL đòi hỏi sự thực hành và kiên nhẫn. Nhưng với mỗi dòng mã, bạn đang vẽ một web phong phú và tương tác hơn. Hãy tiếp tục khám phá, tiếp tục sáng tạo, và quan trọng nhất, hãy vui vẻ!

Dưới đây là bảng tóm tắt các phương thức chính chúng ta đã sử dụng:

Phương thức	Mô tả
`getContext("webgl")`	Khởi tạo WebGL
`createShader()`	Tạo một shader
`shaderSource()`	Định nghĩa mã nguồn shader
`compileShader()`	Biên dịch một shader
`createProgram()`	Tạo một chương trình
`attachShader()`	Gắn một shader vào một chương trình
`linkProgram()`	Liên kết một chương trình
`createBuffer()`	Tạo một buffer
`bindBuffer()`	Gắn một buffer
`bufferData()`	Điền dữ liệu vào buffer
`viewport()`	Đặt viewport
`clearColor()`	Đặt màu làm sạch
`clear()`	Làm sạch canvas
`useProgram()`	Sử dụng một chương trình
`getAttribLocation()`	Lấy vị trí của một thuộc tính
`enableVertexAttribArray()`	Kích hoạt một mảng thuộc tính vertex
`vertexAttribPointer()`	Xác định bố cục dữ liệu vertex
`drawArrays()`	Render các hình học

Giữ bảng này bên cạnh bạn khi bạn tiếp tục hành trình WebGL. Chúc bạn may mắn!

Credits: Image by storyset

Hướng Dẫn Trước:

WebGL - Tuber lòng đồ họa

Hướng Dẫn Tiếp Theo:

WebGL - ngữ cảnh