WEBGL - Chuẩn Mới Cho Đồ Họa 3D Trên Web

WEBGL - Chuẩn Mới Cho Đồ Họa 3D Trên Web

WebGL là một công nghệ cho phép vẽ, hiển thị và tương tác với đồ họa máy tính ba chiều phức tạp (đồ họa 3D) từ các trình duyệt web . Theo truyền thống, đồ họa 3D bị hạn chế với máy vi tính hay bảng điều khiển game và phải lập trình phức tạp. Khi máy tính cá nhân và trình duyệt web trở nên tinh vi hơn, nó có thể tạo ra và hiển thị đồ họa 3D bằng việc sử dụng các công nghệ web nổi tiếng.

Không giống các công nghệ đồ họa 3D như OpenGL và Direct3D, các ứng dụng WebGL có thể được xây dựng như trang web để chúng có thể chạy trực tiếp trong trình duyệt mà không cần cài đặt bất kỳ plug - in hoặc thư viện đặc biệt nào. Do đó , bạn có thể phát triển nhanh chóng và thử chương trình mẫu với môi trường PC chuẩn ; bởi vì mọi thứ đều dựa trên web, bạn dễ dàng xuất các chương trình đã xây dựng trên web . Một trong những lời hứa của WebGL , đó là do các ứng dụng WebGL được xây dựng dưới dạng web, chương trình có thể chạy như nhau trên một loạt các thiết bị , như điện thoại thông minh , máy tính bảng và trò chơi bảng điều khiển , thông qua trình duyệt . Mô hình mạnh mẽ này có nghĩa là WebGL có một tác động đáng kể đến cộng đồng nhà phát triển và sẽ trở thành một trong những công cụ ưu tiên cho lập trình đồ họa .

1. WebGL là gì?

WebGL (Web-based Graphics Library) là một công nghệ cho phép vẽ, hiển thị, và tương tác với đồ họa máy tính ba chiều phức tạp ("đồ họa 3D") từ các trình duyệt web. Dễ sử dụng và tạo giao diện trực quan cho người dùng và nội dung trang web. Theo truyền thống, đồ họa 3D sử dụng một ngôn ngữ lập trình như C hoặc C++ cùng với thư viện đồ hoạ như OpenGL và Direct3D. Tuy nhiên, với WebGL, đồ họa 3D như là một phần của trang web chuẩn với HTML5 và JavaScript. Có nghĩa là WebGL được gắn liền với trình duyệt, khi dựng hình đồ họa 3D, ta có thể sử dụng WebGL trực tiếp mà không cần các thư viện hay plugin đặc biệt.

2. Tại sao WebGL lại nổi bật?

Không phải tự nhiên mà WebGL được ưa chuộng đến vậy, bởi nó có những ưu điểm không thể bàn cãi như sau:

  • Tạo ra giao diện trực quan, các trò chơi 3D và sử dụng 3D để mô phỏng thông tin trên mạng.

  • Dễ sử dụng so với các công nghệ khác trong khi vẫn đảm bảo tính hiệu quả.

  • Bạn có thể bắt đầu phát triển các ứng dụng đồ họa 3D bằng cách sử dụng một trình soạn thảo văn bản và trình duyệt.

  • Dễ dàng xuất các ứng dụng đồ hoạ 3D trên web chuẩn

  • Tận dụng các chức năng đầy đủ của trình duyệt.

  • Có sẵn nguồn tài liệu phong phú để nghiên cứu và phát triển.

3. Bản chất của WebGL

Hai trong số công nghệ phổ biến nhất hiển thị đồ họa 3D là Direct3D and OpenGL , Direct3D , một phần công nghệ DirectX của MS , là kỹ thuật đồ họa 3D chủ yếu trên nền Windows và là giao diện chương trình ứng dụng có bản quyền của MS. Cái còn lại, OpenGL được sử dụng rộng rãi trên nhiều nền tảng bởi vì mã nguồn mở và miễn phí. OpenGL có thể dùng cho Mac, Linux, và hàng loạt thiết bị như là điện thoại thông minh, máy tính bảng và thiết bị chơi game. Nó cũng hỗ trợ tốt trên Windows và cung cấp luân phiên với Direct3D .

Mặc dù WebGL xuất phát từ OpenGL , nó thực sự bắt nguồn từ phiên bản của OpenGL được thiết kế cụ thề cho máy tính nhúng như là điện thoại thông minh và các thiết bị chơi game . Phiên bản này được biết như là OpenGIES ( cho hệ thống nhúng) , được phát triển lần đầu năm 2003-2004 và cập nhật năm 2007 ( ES 2.0 ) và tiếp tục năm 2012 ( ES3.0 ) . WebGL dựa trên phiên bản ES 2.0 . Trong những năm gần đây , số các thiết bị và các xử lý hỗ trợ đặc tả đã tăng nhanh , bao gồm điện thoại thông minh iPhone và Android ) , máy tính bảng và bảng điều khiển trò chơi . Một phần của lý do này là OpenGL ES đã bổ sung các tính năng mới đồng thời loại bỏ nhiều tính năng không cần thiết hoặc lỗi thời từ OpenGL , dẫn đến việc giảm đặc tả nhưng vẫn đủ mạnh để tạo ra sự hấp dẫn

Như hình mô tả phía dưới cho thấy mối quan hệ giữa OpenGL, OpenGL ES 1.0 2.0 3.0 và WebGL Bởi vì chính OpenGL đã tiếp tục phát triển từ 1.5 , 2.0 đến 4.3, OpenGL ES đã được chuẩn hóa như một tập con của các phiên bản cụ thể OpenGL ( OpenGL 1.5 và OpenGL 2.0 ) .

Như chỉ ra trong hình trên , với việc chuyển sang OpenGL 2.0, thì có sự xuất hiện của các hàm shader có thể lập trình (programmable shader functions) . Tính năng này đã được thực hiện thông qua OpenGL ES 2.0 và là phần cốt lõi của WebGL 1.0.

Các hàm shader hoặc shaders là các chương trình máy tính có hiệu ứng hình ảnh phức tạp bằng cách sử dụng một ngôn ngữ lập trình đặc biệt tựa như C. Nó giải thích các hàm, shader theo từng bước, cho phép bạn nhanh chóng nắm vững khả năng của WebGL. Ngôn ngữ lập trình được sử dụng để tạo các shinder được gọi là ngôn ngữ tô bóng (shading language) . Ngôn ngữ tô bóng được sử dụng trong OpenGL ES 2.0 dựa trên OpenGL shading language (GLSL) và được gọi là OpenGL ES shading language ( GLSL ES ). Bởi vì WebGL dựa trên OpenGL ES 2.0 , nó cũng sử dụng GLSL ES để tạo shaders.

4. Cấu trúc ứng dụng WebGL như thế nào?

Các trang web sử dụng WebGL được tạo ra bằng cách sử dụng ba ngôn ngữ : HTML5, JavaScript và GLSL ES . Hình bên dưới chỉ ra các kiến trúc phần mềm của các trang web động truyền thống ( bên trái ) và các trang web sử dụng WebGL ( bên phải ) .

Tuy nhiên, vì GLSL ES thường được viết trong JavaScript, nên chỉ có các tệp HTML và JavaScript thực sự cần thiết cho các ứng dụng WebGL. Vì vậy , mặc dù WebGL làm phức tạp thêm cho JavaScript, nó vẫn giữ nguyên cấu trúc giống như web động chuẩn , chỉ sử dụng các tệp HTML và JavaScript .

5. Tổng kết

Phần này nói ngắn gọn tổng quan về WebGL, giải thích một số tính năng chính và chỉ ra kiến trúc phần mềm của các ứng dụng WebGL. Nói tóm lại, vấn đề chính của phần này là các ứng dụng WebGL được phát triển bằng cách sử dụng ba ngôn ngữ : HTML5 , JavaScript , và GLSL ES . Tuy nhiên , bởi vì mã lệnh shader (GLSL ES) thường được nhúng trong JavaScript, bạn có chính xác cấu trúc tập tin giống như một trang web truyền thống . Phần tiếp theo sẽ giải thích làm thế nào để tạo ứng dụng sử dụng WebGL đơn giản.