WebGL: đồ họa 2D và 3D cho web

Note: This feature is available in Web Workers.

orkers}} WebGL (Web Graphics Library) là một API JavaScript dùng để kết xuất đồ họa 3D và 2D tương tác hiệu năng cao trong bất kỳ trình duyệt web tương thích nào mà không cần dùng plug-in. WebGL làm được điều đó bằng cách giới thiệu một API tuân thủ chặt chẽ OpenGL ES 2.0, có thể dùng trong các phần tử HTML <canvas> . Sự tương thích này giúp API tận dụng được khả năng tăng tốc đồ họa phần cứng do thiết bị của người dùng cung cấp.

Hỗ trợ WebGL có sẵn trong tất cả các trình duyệt hiện đại (xem các bảng tương thích bên dưới); tuy nhiên, thiết bị của người dùng cũng phải có phần cứng hỗ trợ các tính năng này.

API WebGL 2 giới thiệu hỗ trợ cho phần lớn bộ tính năng của OpenGL ES 3.0; nó được cung cấp thông qua giao diện WebGL2RenderingContext.

Phần tử <canvas> cũng được Canvas API dùng để thực hiện đồ họa 2D trên trang web.

Tham chiếu

Giao diện chuẩn

Tiện ích mở rộng

Sự kiện

Hằng số và kiểu

WebGL 2

WebGL 2 là một bản cập nhật lớn cho WebGL, được cung cấp thông qua giao diện WebGL2RenderingContext. Nó dựa trên OpenGL ES 3.0 và các tính năng mới bao gồm:

texture 3D,
đối tượng sampler,
đối tượng Uniform Buffer,
đối tượng đồng bộ,
đối tượng truy vấn,
đối tượng Transform Feedback,
Các tiện ích mở rộng đã được nâng lên thành lõi của WebGL 2: đối tượng Vertex Array, instancing, nhiều đích kết xuất, fragment depth.

Xem thêm bài viết blog "WebGL 2 lands in Firefox" và webglsamples.org/WebGL2Samples để xem một vài bản demo.

Hướng dẫn và bài học

Dưới đây là một loạt hướng dẫn giúp bạn tìm hiểu các khái niệm WebGL và các bài học từng bước kèm ví dụ.

Hướng dẫn

Dữ liệu trong WebGL: Một hướng dẫn về biến, bộ đệm và các kiểu dữ liệu khác được dùng khi viết mã WebGL.
Các phương pháp hay nhất cho WebGL: Mẹo và gợi ý giúp bạn cải thiện chất lượng, hiệu năng và độ tin cậy của nội dung WebGL.
Sử dụng tiện ích mở rộng: Hướng dẫn cách dùng các tiện ích mở rộng WebGL.

Bài học

Hướng dẫn WebGL: Hướng dẫn nhập môn các khái niệm cốt lõi của WebGL. Đây là nơi tốt để bắt đầu nếu bạn chưa có kinh nghiệm với WebGL.

Ví dụ

Một ví dụ hoạt ảnh WebGL 2D cơ bản: Ví dụ này minh họa cách tạo hoạt ảnh đơn giản cho một hình đơn sắc. Các chủ đề được đề cập gồm thích ứng với khác biệt về aspect ratio, hàm dựng chương trình shader từ nhiều shader, và các kiến thức cơ bản về vẽ trong WebGL.
WebGL qua ví dụ: Một chuỗi mẫu chạy trực tiếp kèm giải thích ngắn, trình bày các khái niệm và năng lực của WebGL. Các ví dụ được sắp xếp theo chủ đề và độ khó, bao gồm ngữ cảnh kết xuất WebGL, lập trình shader, texture, hình học, tương tác người dùng, và hơn thế nữa.

Bài học nâng cao

Định dạng texture nén: Cách bật và dùng các định dạng texture nén để cải thiện hiệu năng bộ nhớ.
Mô hình, khung nhìn, phép chiếu trong WebGL: Giải thích chi tiết ba ma trận cốt lõi thường được dùng để biểu diễn khung nhìn của một đối tượng 3D: các ma trận model, view và projection.
Phép toán ma trận cho web: Một hướng dẫn hữu ích về cách hoạt động của các ma trận biến đổi 3D, và có thể được dùng trên web - cả cho các phép tính WebGL lẫn các phép biến đổi trong CSS.

Tài nguyên

Trang WebGL của Khronos Trang web chính về WebGL của Khronos Group.
WebGL Fundamentals Một bài hướng dẫn cơ bản với các nền tảng của WebGL.
Raw WebGL: An introduction to WebGL Bài nói của Nick Desaulniers giới thiệu các kiến thức cơ bản về WebGL.
WebGL Academy Một trình biên tập HTML/JavaScript kèm hướng dẫn để học lập trình WebGL cơ bản.
WebGL Stats Trang web thống kê khả năng WebGL trong các trình duyệt trên các nền tảng khác nhau.

Thư viện

three.js là một thư viện WebGL 3D mã nguồn mở, đầy đủ tính năng.
Babylon.js là một công cụ kết xuất 3D mạnh mẽ, đơn giản và mã nguồn mở, được đóng gói trong một framework JavaScript thân thiện.
Pixi.js là một bộ kết xuất WebGL 2D nhanh, mã nguồn mở.
Phaser là một framework mã nguồn mở, nhanh, miễn phí và thú vị cho các trò chơi trình duyệt dùng Canvas và WebGL.
PlayCanvas là một công cụ game mã nguồn mở.
glMatrix là một thư viện ma trận và vector JavaScript cho các ứng dụng WebGL hiệu năng cao.
twgl là một thư viện giúp WebGL bớt rườm rà hơn.
RedGL là một thư viện WebGL 3D mã nguồn mở.
vtk.js là một thư viện JavaScript để trực quan hóa khoa học ngay trong trình duyệt của bạn.
webgl-lint sẽ giúp tìm lỗi trong mã WebGL của bạn và cung cấp thông tin hữu ích.

Thông số kỹ thuật

Specification
WebGL Specification # 5.14
WebGL 2.0 Specification # 3.7

Khả năng tương thích với trình duyệt

api.WebGLRenderingContext

api.WebGL2RenderingContext

Ghi chú tương thích

Ngoài trình duyệt, bản thân GPU cũng cần hỗ trợ tính năng này. Vì vậy, ví dụ như S3 Texture Compression (S3TC) chỉ có sẵn trên các máy tính bảng dựa trên Tegra. Hầu hết trình duyệt đều cung cấp ngữ cảnh WebGL thông qua tên ngữ cảnh webgl, nhưng các trình duyệt cũ hơn còn cần experimental-webgl. Ngoài ra, WebGL 2 sắp ra mắt hoàn toàn tương thích ngược và sẽ dùng tên ngữ cảnh webgl2.

Ghi chú Gecko

Gỡ lỗi và kiểm thử WebGL

Firefox cung cấp hai tùy chọn mà bạn có thể dùng để kiểm soát khả năng của WebGL cho mục đích kiểm thử:

webgl.min_capability_mode: Một thuộc tính Boolean, khi đặt là true, sẽ bật chế độ năng lực tối thiểu. Trong chế độ này, WebGL được cấu hình để chỉ hỗ trợ tập tính năng và khả năng tối thiểu theo yêu cầu của đặc tả WebGL. Điều này giúp bạn đảm bảo mã WebGL của mình sẽ chạy trên bất kỳ thiết bị hoặc trình duyệt nào, bất kể năng lực của chúng. Mặc định là false.
webgl.disable_extensions: Một thuộc tính Boolean, khi đặt là true, sẽ vô hiệu hóa tất cả các tiện ích mở rộng WebGL. Mặc định là false.

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content