WebGL2RenderingContext

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers.

Giao diện WebGL2RenderingContext cung cấp ngữ cảnh kết xuất OpenGL ES 3.0 cho bề mặt vẽ của phần tử HTML <canvas>.

Để lấy một đối tượng của giao diện này, gọi getContext() trên phần tử <canvas>, cung cấp "webgl2" làm đối số:

const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl2");

Note: WebGL 2 là phần mở rộng của WebGL 1. Giao diện WebGL2RenderingContext triển khai tất cả thành viên của giao diện WebGLRenderingContext. Một số phương thức của ngữ cảnh WebGL 1 có thể nhận thêm giá trị khi được sử dụng trong ngữ cảnh WebGL 2. Bạn sẽ tìm thấy thông tin này trong các trang tham chiếu WebGL 1.

Hướng dẫn WebGL có thêm thông tin, ví dụ và tài nguyên về cách bắt đầu với WebGL.

Hằng số

Xem trang hằng số WebGL.

Thông tin trạng thái

WebGL2RenderingContext.getIndexedParameter(): Trả về giá trị được lập chỉ mục cho target đã cho.

Bộ đệm

WebGL2RenderingContext.bufferData(): Khởi tạo và tạo kho dữ liệu của đối tượng bộ đệm.
WebGL2RenderingContext.bufferSubData(): Cập nhật một tập hợp con của kho dữ liệu đối tượng bộ đệm.
WebGL2RenderingContext.copyBufferSubData(): Sao chép một phần dữ liệu từ bộ đệm này sang bộ đệm khác.
WebGL2RenderingContext.getBufferSubData(): Đọc dữ liệu từ bộ đệm và ghi chúng vào ArrayBuffer hoặc SharedArrayBuffer.

Framebuffer

WebGL2RenderingContext.blitFramebuffer(): Truyền một khối pixel từ framebuffer đọc sang framebuffer vẽ.
WebGL2RenderingContext.framebufferTextureLayer(): Gắn một lớp duy nhất của texture vào framebuffer.
WebGL2RenderingContext.invalidateFramebuffer(): Vô hiệu hóa nội dung của các điểm gắn trong framebuffer.
WebGL2RenderingContext.invalidateSubFramebuffer(): Vô hiệu hóa các phần nội dung của các điểm gắn trong framebuffer.
WebGL2RenderingContext.readBuffer(): Chọn một bộ đệm màu làm nguồn cho pixel.

Renderbuffer

WebGL2RenderingContext.getInternalformatParameter(): Trả về thông tin về hỗ trợ phụ thuộc vào triển khai cho các định dạng nội bộ.
WebGL2RenderingContext.renderbufferStorageMultisample(): Tạo và khởi tạo kho dữ liệu của đối tượng renderbuffer và cho phép chỉ định số lượng mẫu được sử dụng.

Texture

WebGL2RenderingContext.texStorage2D(): Chỉ định tất cả các mức của lưu trữ texture hai chiều.
WebGL2RenderingContext.texStorage3D(): Chỉ định tất cả các mức của lưu trữ texture ba chiều hoặc texture mảng hai chiều.
WebGL2RenderingContext.texImage3D(): Chỉ định một ảnh texture ba chiều.
WebGL2RenderingContext.texSubImage3D(): Chỉ định một hình chữ nhật con của texture 3D hiện tại.
WebGL2RenderingContext.copyTexSubImage3D(): Sao chép pixel từ WebGLFramebuffer hiện tại vào một hình ảnh con của texture 3D.
WebGL2RenderingContext.compressedTexImage3D: Chỉ định một ảnh texture ba chiều ở định dạng nén.
WebGL2RenderingContext.compressedTexSubImage3D(): Chỉ định một hình chữ nhật con cho ảnh texture ba chiều ở định dạng nén.

Chương trình và shader

WebGL2RenderingContext.getFragDataLocation(): Trả về liên kết của số màu với các biến varying out do người dùng định nghĩa.

Uniform và attribute

WebGL2RenderingContext.uniform[1234][uif][v](): Các phương thức chỉ định giá trị của biến uniform.
WebGL2RenderingContext.uniformMatrix[234]x[234]fv(): Các phương thức chỉ định giá trị ma trận cho biến uniform.
WebGL2RenderingContext.vertexAttribI4[u]i[v](): Các phương thức chỉ định giá trị số nguyên cho thuộc tính đỉnh chung.
WebGL2RenderingContext.vertexAttribIPointer(): Chỉ định định dạng dữ liệu số nguyên và vị trí của các thuộc tính đỉnh trong mảng thuộc tính đỉnh.

Không gian màu

WebGL2RenderingContext.drawingBufferColorSpace: Chỉ định không gian màu của bộ đệm vẽ WebGL.
WebGL2RenderingContext.unpackColorSpace: Chỉ định không gian màu để chuyển đổi khi nhập texture.

Bộ đệm vẽ

WebGL2RenderingContext.vertexAttribDivisor(): Sửa đổi tốc độ mà các thuộc tính đỉnh chung tiến lên khi kết xuất nhiều phiên bản của hình nguyên với gl.drawArraysInstanced() và gl.drawElementsInstanced().
WebGL2RenderingContext.drawArraysInstanced(): Kết xuất hình nguyên từ dữ liệu mảng. Ngoài ra, nó có thể thực thi nhiều phiên bản của dải phần tử.
WebGL2RenderingContext.drawElementsInstanced(): Kết xuất hình nguyên từ dữ liệu mảng. Ngoài ra, nó có thể thực thi nhiều phiên bản của một tập hợp phần tử.
WebGL2RenderingContext.drawRangeElements(): Kết xuất hình nguyên từ dữ liệu mảng trong một dải đã cho.
WebGL2RenderingContext.drawBuffers(): Chỉ định danh sách các bộ đệm màu sẽ được vẽ vào.
WebGL2RenderingContext.clearBuffer[fiuv](): Xóa các bộ đệm từ framebuffer hiện đang được liên kết.

Đối tượng truy vấn

Các phương thức làm việc với đối tượng WebGLQuery.

WebGL2RenderingContext.createQuery(): Tạo một đối tượng WebGLQuery mới.
WebGL2RenderingContext.deleteQuery(): Xóa một đối tượng WebGLQuery đã cho.
WebGL2RenderingContext.isQuery(): Trả về true nếu một đối tượng đã cho là đối tượng WebGLQuery hợp lệ.
WebGL2RenderingContext.beginQuery(): Bắt đầu một truy vấn không đồng bộ.
WebGL2RenderingContext.endQuery(): Đánh dấu kết thúc của một truy vấn không đồng bộ.
WebGL2RenderingContext.getQuery(): Trả về một đối tượng WebGLQuery cho một target đã cho.
WebGL2RenderingContext.getQueryParameter(): Trả về thông tin về một truy vấn.

Đối tượng sampler

WebGL2RenderingContext.createSampler(): Tạo một đối tượng WebGLSampler mới.
WebGL2RenderingContext.deleteSampler(): Xóa một đối tượng WebGLSampler đã cho.
WebGL2RenderingContext.bindSampler(): Liên kết một WebGLSampler đã cho với một đơn vị texture.
WebGL2RenderingContext.isSampler(): Trả về true nếu một đối tượng đã cho là đối tượng WebGLSampler hợp lệ.
WebGL2RenderingContext.samplerParameter[if](): Đặt các tham số sampler.
WebGL2RenderingContext.getSamplerParameter(): Trả về thông tin tham số sampler.

Đối tượng đồng bộ

WebGL2RenderingContext.fenceSync(): Tạo một đối tượng WebGLSync mới và chèn nó vào luồng lệnh GL.
WebGL2RenderingContext.isSync(): Trả về true nếu đối tượng được truyền là đối tượng WebGLSync hợp lệ.
WebGL2RenderingContext.deleteSync(): Xóa một đối tượng WebGLSync đã cho.
WebGL2RenderingContext.clientWaitSync(): Chặn và chờ một đối tượng WebGLSync trở thành signaled hoặc một thời gian chờ đã cho trôi qua.
WebGL2RenderingContext.waitSync(): Trả về ngay lập tức, nhưng chờ trên máy chủ GL cho đến khi đối tượng WebGLSync đã cho được signaled.
WebGL2RenderingContext.getSyncParameter(): Trả về thông tin tham số của một đối tượng WebGLSync.

Transform feedback

WebGL2RenderingContext.createTransformFeedback(): Tạo và khởi tạo các đối tượng WebGLTransformFeedback.
WebGL2RenderingContext.deleteTransformFeedback(): Xóa một đối tượng WebGLTransformFeedback đã cho.
WebGL2RenderingContext.isTransformFeedback(): Trả về true nếu đối tượng được truyền là đối tượng WebGLTransformFeedback hợp lệ.
WebGL2RenderingContext.bindTransformFeedback(): Liên kết một đối tượng WebGLTransformFeedback đã cho với trạng thái GL hiện tại.
WebGL2RenderingContext.beginTransformFeedback(): Bắt đầu một hoạt động transform feedback.
WebGL2RenderingContext.endTransformFeedback(): Kết thúc một hoạt động transform feedback.
WebGL2RenderingContext.transformFeedbackVaryings(): Chỉ định các giá trị sẽ ghi trong các bộ đệm WebGLTransformFeedback.
WebGL2RenderingContext.getTransformFeedbackVarying(): Trả về thông tin về các biến varying từ các bộ đệm WebGLTransformFeedback.
WebGL2RenderingContext.pauseTransformFeedback(): Tạm dừng một hoạt động transform feedback.
WebGL2RenderingContext.resumeTransformFeedback(): Tiếp tục một hoạt động transform feedback.

Đối tượng bộ đệm uniform

WebGL2RenderingContext.bindBufferBase(): Liên kết một WebGLBuffer đã cho với một điểm liên kết (target) đã cho tại một index đã cho.
WebGL2RenderingContext.bindBufferRange(): Liên kết một dải của WebGLBuffer đã cho với một điểm liên kết (target) đã cho tại một index đã cho.
WebGL2RenderingContext.getUniformIndices(): Truy xuất các chỉ mục của một số uniform trong một WebGLProgram.
WebGL2RenderingContext.getActiveUniforms(): Truy xuất thông tin về các uniform đang hoạt động trong một WebGLProgram.
WebGL2RenderingContext.getUniformBlockIndex(): Truy xuất chỉ mục của một khối uniform trong một WebGLProgram.
WebGL2RenderingContext.getActiveUniformBlockParameter(): Truy xuất thông tin về một khối uniform đang hoạt động trong một WebGLProgram.
WebGL2RenderingContext.getActiveUniformBlockName(): Truy xuất tên của khối uniform đang hoạt động tại một chỉ mục đã cho trong một WebGLProgram.
WebGL2RenderingContext.uniformBlockBinding(): Gán các điểm liên kết cho các khối uniform đang hoạt động.

Đối tượng mảng đỉnh

Các phương thức làm việc với đối tượng WebGLVertexArrayObject (VAO).

WebGL2RenderingContext.createVertexArray(): Tạo một WebGLVertexArrayObject mới.
WebGL2RenderingContext.deleteVertexArray(): Xóa một WebGLVertexArrayObject đã cho.
WebGL2RenderingContext.isVertexArray(): Trả về true nếu một đối tượng đã cho là WebGLVertexArrayObject hợp lệ.
WebGL2RenderingContext.bindVertexArray(): Liên kết một WebGLVertexArrayObject đã cho với bộ đệm.

Đặc tả kỹ thuật

Specification
WebGL 2.0 Specification # 3.7

Tương thích trình duyệt

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