WebGL - Đổi tamaño: Hướng dẫn dành cho người mới bắt đầu

Xin chào các bạn đang học WebGL! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của việc đổi tamanho trong WebGL. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ dẫn dắt bạn qua từng bước với sự chăm sóc và kiên nhẫn mà tôi đã sử dụng trong lớp học trong nhiều năm. Hãy cùng bắt đầu hành trình thú vị này nhé!

WebGL - Scaling

什么是 WebGL 中的 Đổi tamanho?

Trước khi chúng ta nhảy vào mã, hãy hiểu rõ đổi tamanho có nghĩa là gì trong ngữ cảnh đồ họa máy tính. Hãy tưởng tượng bạn có một con玩具 bạn yêu thích. Đổi tamanho giống như có một cây phép màu có thể làm con玩具 này lớn hơn hoặc nhỏ hơn trong khi giữ nguyên hình dạng của nó. Trong WebGL, chúng ta có thể thực hiện phép màu này với các đối tượng 3D của mình!

Tầm quan trọng của Đổi tamanho

Đổi tamanho rất quan trọng trong việc tạo ra các cảnh 3D thực tế và sống động. Nó cho phép chúng ta:

Điều chỉnh kích thước đối tượng để phù hợp với cảnh
Tạo ra các animation mà trong đó các đối tượng lớn lên hoặc nhỏ lại
Giữ nguyên tỷ lệ trong các mô hình phức tạp

Các bước cần thiết để Đổi tamanho trong WebGL

Để đổi tamanho các đối tượng trong WebGL, chúng ta cần thực hiện một loạt các bước. Hãy cùng phân tích chúng:

Bước	Mô tả
1. Tạo Ma trận Đổi tamanho	Chúng ta bắt đầu bằng cách tạo một ma trận đặc biệt cho WebGL biết cách đổi tamanho đối tượng của mình
2. Nhân với Ma trận Mô hình	Chúng ta kết hợp ma trận đổi tamanho với ma trận mô hình hiện tại của đối tượng
3. Truyền đến Shader	Chúng ta gửi ma trận mới này đến chương trình shader của mình
4. Áp dụng trong Vertex Shader	Shader sử dụng ma trận này để điều chỉnh vị trí của mỗi đỉnh

Đừng lo lắng nếu các bước này听起来 phức tạp - chúng ta sẽ khám phá từng bước chi tiết với ví dụ của mình!

Ví dụ - Đổi tamanho một Tam giác

Hãy áp dụng những gì chúng ta đã học vào việc đổi tamanho một tam giác đơn giản. Chúng ta sẽ bắt đầu với một cấu hình WebGL cơ bản và sau đó thêm chức năng đổi tamanho.

Bước 1: Thiết lập Context WebGL

Đầu tiên, chúng ta cần thiết lập context WebGL của mình. Đây là cách chúng ta làm:

const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL không được hỗ trợ');
return;
}

Mã này tìm kiếm phần tử canvas của chúng ta và tạo một context WebGL. Nó giống như chuẩn bị canvas và cọ trước khi chúng ta bắt đầu vẽ tranh!

Bước 2: Định nghĩa Vertex Shader

Bây giờ, hãy tạo vertex shader của mình. Đây là nơi xảy ra phép màu đổi tamanho:

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;

void main() {
vec3 position = u_matrix * vec3(a_position, 1);
gl_Position = vec4(position.xy, 0, 1);
}
`;

Shader này lấy vị trí của mỗi đỉnh và nhân nó với ma trận của chúng ta (sẽ bao gồm đổi tamanho). Nó giống như đưa ra hướng dẫn cho mỗi điểm của tam giác về cách di chuyển.

Bước 3: Định nghĩa Fragment Shader

Fragment shader xác định màu sắc của tam giác của chúng ta:

const fragmentShaderSource = `
precision mediump float;

void main() {
gl_FragColor = vec4(1, 0, 0, 1);  // Màu đỏ
}
`;

Chúng ta giữ nó đơn giản ở đây - tam giác của chúng ta sẽ có màu đỏ. Hãy thử nghiệm với các màu khác nếu bạn muốn!

Bước 4: Tạo và Kết nối Chương trình Shader

Bây giờ, hãy biên dịch và kết nối các shader của mình:

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}

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

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

Quá trình này giống như ráp các bộ phận của một máy móc - mỗi shader là một thành phần, và chúng ta đang ráp chúng lại với nhau để tạo ra chương trình của mình.

Bước 5: Tạo dữ liệu Tam giác

Hãy xác định tam giác của mình:

const positions = new Float32Array([
0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);

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

Các tọa độ này xác định một tam giác đơn giản. Hãy tưởng tượng nó như việc vẽ điểm trên một biểu đồ để tạo hình của mình.

Bước 6: Thực hiện Đổi tamanho

Bây giờ đến phần thú vị - đổi tamanho tam giác của mình! Chúng ta sẽ sử dụng một hàm để tạo ma trận đổi tamanho:

function createScaleMatrix(scaleX, scaleY) {
return new Float32Array([
scaleX, 0, 0,
0, scaleY, 0,
0, 0, 1
]);
}

// Ví dụ: Đổi tamanho tam giác gấp đôi kích thước
const scaleMatrix = createScaleMatrix(2, 2);

Ma trận này giống như một bộ hướng dẫn cho WebGL biết bao nhiêu làStretch hoặc thu nhỏ tam giác của chúng ta trong mỗi hướng.

Bước 7: Vẽ Tam giác Đổi tamanho

Cuối cùng, hãy kết hợp tất cả và vẽ tam giác đổi tamanho của mình:

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

const matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
gl.uniformMatrix3fv(matrixUniformLocation, false, scaleMatrix);

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

Mã này áp dụng ma trận đổi tamanho của chúng ta và vẽ tam giác. Nó giống như cuối cùng tiết lộ tác phẩm nghệ thuật của mình sau tất cả các bước chuẩn bị!

Kết luận

Chúc mừng! Bạn vừa đổi tamanho tam giác WebGL đầu tiên của mình. Nhớ rằng, đổi tamanho chỉ là một trong nhiều transformation bạn có thể áp dụng trong WebGL. Khi bạn tiếp tục hành trình của mình, bạn sẽ khám phá cách kết hợp đổi tamanho với xoay, dịch chuyển và nhiều hơn nữa để tạo ra các cảnh 3D phức tạp và sống động.

Thực hành làm hoàn hảo, vì vậy đừng ngại thử nghiệm với các giá trị đổi tamanho khác nhau và hình dạng. Ai biết được? Trò chơi video lớn tiếp theo hoặc ứng dụng web 3D có thể bắt đầu.right here, với tam giác đổi tamanho của bạn!

Chúc bạn may mắn với mã lập trình, và hy vọng các đối tượng WebGL của bạn luôn đạt được những tầm cao mới!

Credits: Image by storyset