Tiếng Việt

Hướng dẫn WebGL

Ứng dụng WebGL

Ví dụ WebGL

WebGL - Giới thiệu

Xin chào các pháp sư WebGL tương lai! Chào mừng các bạn đến với hành trình đầy.exciting vào thế giới đồ họa 3D trên web. Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình khám phá thế giới kỳ diệu của WebGL. Với vai trò là người đã dạy đồ họa máy tính hơn một thập kỷ, tôi có thể đảm bảo rằng尽管道路 phía trước có thể看起来 khó khăn, nhưng nó cũng vô cùng thú vị. Hãy thắt dây an toàn và cùng nhau lặn sâu!

WebGL - Introduction

OpenGL là gì?

Trước khi chúng ta nhảy vào WebGL, hãy tạm dừng một chút để hiểu về tiền nhiệm của nó, OpenGL. Hãy tưởng tượng bạn là một nghệ sĩ đang cố gắng vẽ một kiệt tác. OpenGL giống như bộ cọ và sơn ma thuật của bạn, cho phép bạn tạo ra những tác phẩm nghệ thuật thị giác stunning trên màn hình máy tính.

OpenGL, viết tắt của Open Graphics Library, là một API (Application Programming Interface) cross-platform để render đồ họa vector 2D và 3D. Nó đã có từ năm 1992 và đã là xương sống của vô số trò chơi, mô phỏng và ứng dụng thị giác.

Dưới đây là một ví dụ đơn giản: Nếu màn hình máy tính của bạn là một canvas, thì OpenGL là bộ công cụ giúp các lập trình viên vẽ lên canvas đó với độ chi tiết và tốc độ tuyệt vời.

WebGL là gì?

Bây giờ, hãy chuyển sự tập trung của chúng ta sang ngôi sao của chương trình: WebGL. Nếu OpenGL là cọ vẽ cho các ứng dụng desktop, thì WebGL là cọ vẽ cho web. Nó là một API JavaScript cho phép bạn tạo ra đồ họa 3D stunning ngay trong trình duyệt web của bạn, mà không cần bất kỳ plugin nào.

WebGL mang sức mạnh của OpenGL ES 2.0 (phiên bản của OpenGL cho hệ thống nhúng) lên web, cho phép các nhà phát triển tận dụng GPU (Graphics Processing Unit) trực tiếp thông qua JavaScript.

Dưới đây là một ví dụ đơn giản "Hello, World!" trong WebGL:

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("Không thể khởi tạo WebGL. Trình duyệt hoặc máy tính của bạn có thể không hỗ trợ.");
return;
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;
</script>

Mã này tạo ra một canvas đen trên trang web của bạn. Nó có thể không看起来 nhiều, nhưng đó là bước đầu tiên của bạn vào thế giới WebGL!

Ai đã phát triển WebGL

WebGL được phát triển bởi Khronos Group, những người cũng đứng sau OpenGL. Nó được giới thiệu lần đầu tiên vào năm 2011, và từ那时起, nó đã cách mạng hóa cách chúng ta nghĩ về đồ họa trên web.

Đ趣事: Sự phát triển của WebGL được启发 bởi các thí nghiệm của Vladimir Vukićević tại Mozilla. Ông đã tạo ra một phần tử canvas expose OpenGL ES cho JavaScript, mở ra cơ sở cho những gì sẽ trở thành WebGL.

Render

Render là quá trình tạo ra một hình ảnh từ một mô hình 2D hoặc 3D. Trong WebGL,这个过程发生在实时, có nghĩa là các hình ảnh được tạo ra trên-the-fly khi bạn tương tác với chúng.

Dưới đây là một ví dụ đơn giản render một tam giác đỏ:

// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

// Fragment shader program
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// ... (initialization code)

// Draw the scene
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
gl.clearDepth(1.0);                 // Clear everything
gl.enable(gl.DEPTH_TEST);           // Enable depth testing
gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// ... (set up the scene)

{
const numComponents = 2;  // pull out 2 values per iteration
const type = gl.FLOAT;    // the data in the buffer is 32bit floats
const normalize = false;  // don't normalize
const stride = 0;         // how many bytes to get from one set of values to the next
const offset = 0;         // how many bytes inside the buffer to start from
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}

// Tell WebGL to use our program when drawing
gl.useProgram(programInfo.program);

{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}

Mã này thiết lập các shader và buffer cần thiết để render một tam giác đỏ đơn giản trên màn hình.

GPU

GPU viết tắt của Graphics Processing Unit. Đây là một bộ vi xử lý chuyên dụng được thiết kế để xử lý các phép toán phức tạp liên quan đến việc render đồ họa. Trong khi CPU rất tốt cho việc tính toán tổng quát, GPU lại vượt trội trong việc thực hiện nhiều phép toán đơn giản cùng lúc, điều này rất phù hợp cho công việc đồ họa.

Hãy tưởng tượng như vậy: Nếu việc render một cảnh 3D phức tạp là như vẽ một bức tranh khổng lồ, thì CPU giống như một nghệ sĩ tài năng, trong khi GPU giống như hàng ngàn nghệ sĩ trung bình làm việc cùng nhau.

Tính toán được tăng tốc bởi GPU

Tính toán được tăng tốc bởi GPU đề cập đến việc sử dụng GPU cùng với CPU để tăng tốc các ứng dụng khoa học, phân tích, kỹ thuật, tiêu dùng và doanh nghiệp. Trong ngữ cảnh của WebGL, điều này có nghĩa là các phép toán đồ họa của bạn được offload cho GPU, giải phóng CPU để thực hiện các nhiệm vụ khác và kết quả là đồ họa mượt mà, nhanh hơn.

Trình duyệt hỗ trợ

Sự tuyệt vời của WebGL là sự hỗ trợ rộng rãi trên các trình duyệt hiện đại. Tính đến năm 2023, WebGL được hỗ trợ bởi:

Trình duyệt Phiên bản
Chrome 9+
Firefox 4+
Safari 5.1+
Opera 12+
Internet Explorer 11+
Microsoft Edge 12+

Ưu thế của WebGL

WebGL mang lại nhiều ưu thế:

  1. Tương thích cross-platform: Viết một lần, chạy mọi nơi (nếu có trình duyệt).
  2. Không cần plugin: Nó được tích hợp sẵn trong trình duyệt.
  3. Tăng tốc phần cứng: Sử dụng GPU để có hiệu suất tốt hơn.
  4. Tích hợp với các công nghệ web: Có thể kết hợp với các API web khác để tạo ra những trải nghiệm tương tác phong phú.
  5. Tiêu chuẩn mở: Bất kỳ ai cũng có thể đóng góp vào sự phát triển của nó.

Thiết lập môi trường

Thiết lập môi trường WebGL của bạn là tương đối đơn giản. Bạn cần:

  1. Một trình duyệt web hiện đại
  2. Một编辑器 văn bản (Tôi khuyên dùng Visual Studio Code)
  3. Một máy chủ web本地 (Bạn có thể sử dụng máy chủ tích hợp của Python hoặc http-server của Node.js)

Dưới đây là một quy trình thiết lập đơn giản:

  1. Tạo một thư mục mới cho dự án của bạn
  2. Tạo một tệp HTML (ví dụ: index.html) và một tệp JavaScript (ví dụ: script.js)
  3. Trong tệp HTML của bạn, bao gồm tệp JavaScript và thiết lập một canvas:
<!DOCTYPE html>
<html>
<head>
<title>Đự án WebGL Đầu Tiên Của Tôi</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="script.js"></script>
</body>
</html>
  1. Trong tệp JavaScript của bạn, khởi tạo WebGL:
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("Không thể khởi tạo WebGL. Trình duyệt hoặc máy tính của bạn có thể không hỗ trợ.");
return;
}

// Mã WebGL của bạn ở đây
}

window.onload = main;

Và thế là xong! Bạn đã sẵn sàng để bắt đầu hành trình WebGL của mình. Nhớ rằng, học WebGL giống như học骑自行车 - nó có thể看起来 lung lay ban đầu, nhưng với sự thực hành, bạn sẽ nhanh chóngzooming xung quanh trong không gian 3D. Chúc các bạn may mắn với mã code!

Credits: Image by storyset

Hướng Dẫn Trước:
WebGL - Trang chủ
Hướng Dẫn Tiếp Theo:
WebGL - Tổng quan về Canvas HTML5