WebGLRenderingContext

Baseline Widely available *

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

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

Note: This feature is available in Web Workers.

Giao diện WebGLRenderingContext cung cấp một giao diện cho bối cảnh kết xuất đồ họa OpenGL ES 2.0 cho bề mặt vẽ của phần tử <canvas> HTML.

Để có quyền truy cập vào ngữ cảnh WebGL để hiển thị đồ họa 2D và/hoặc 3D, hãy gọi getContext() trên phần tử <canvas>, cung cấp "webgl" làm đối số:

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

Khi bạn đã có ngữ cảnh kết xuất WebGL cho canvas, bạn có thể kết xuất bên trong nó. WebGL hướng dẫn có nhiều thông tin, ví dụ và tài nguyên hơn về cách bắt đầu với WebGL.

Nếu bạn yêu cầu ngữ cảnh WebGL 2.0, hãy xem WebGL2RenderingContext; điều này cung cấp quyền truy cập vào việc triển khai đồ họa OpenGL ES 3.0.

Hằng số

Xem trang hằng số WebGL.

Bối cảnh WebGL

Các thuộc tính và phương thức sau đây cung cấp thông tin và chức năng chung để xử lý ngữ cảnh WebGL:

WebGLRenderingContext.canvas

Một tham chiếu ngược chỉ đọc tới HTMLCanvasElement. Có thể là null nếu nó không được liên kết với phần tử <canvas>.

WebGLRenderingContext.drawingBufferWidth

Độ rộng chỉ đọc của bộ đệm bản vẽ hiện tại. Phải khớp với chiều rộng của phần tử canvas được liên kết với ngữ cảnh này.

WebGLRenderingContext.drawingBufferHeight

Chiều cao chỉ đọc của vùng đệm vẽ hiện tại. Phải khớp với chiều cao của phần tử canvas được liên kết với ngữ cảnh này.

WebGLRenderingContext.getContextAttributes()

Trả về một đối tượng WebGLContextAttributes có chứa các tham số ngữ cảnh thực tế. Có thể trả về null, nếu ngữ cảnh bị mất.

WebGLRenderingContext.isContextLost()

Trả về true nếu ngữ cảnh bị mất, nếu không thì trả về false.

WebGLRenderingContext.makeXRCompatible()

Đảm bảo ngữ cảnh tương thích với phần cứng XR của người dùng, tạo lại ngữ cảnh nếu cần bằng cấu hình mới để làm như vậy. Điều này có thể được sử dụng để khởi động ứng dụng bằng cách sử dụng bản trình bày 2D tiêu chuẩn, sau đó chuyển sang sử dụng chế độ VR hoặc AR.

Xem và cắt

WebGLRenderingContext.scissor()

Xác định hộp cắt kéo.

WebGLRenderingContext.viewport()

Đặt khung nhìn.

Thông tin tiểu bang

WebGLRenderingContext.activeTexture()

Chọn đơn vị kết cấu hoạt động.

WebGLRenderingContext.blendColor()

Đặt hệ số hòa trộn nguồn và đích.

WebGLRenderingContext.blendEquation()

Đặt cả phương trình hòa trộn RGB và phương trình hòa trộn alpha thành một phương trình duy nhất.

WebGLRenderingContext.blendEquationSeparate()

Đặt riêng phương trình hòa trộn RGB và phương trình hòa trộn alpha.

WebGLRenderingContext.blendFunc()

Xác định hàm nào được sử dụng để trộn số học pixel.

WebGLRenderingContext.blendFuncSeparate()

Xác định hàm nào được sử dụng để trộn số học pixel cho các thành phần RGB và alpha riêng biệt.

WebGLRenderingContext.clearColor()

Chỉ định các giá trị màu được sử dụng khi xóa bộ đệm màu.

WebGLRenderingContext.clearDepth()

Chỉ định giá trị độ sâu được sử dụng khi xóa bộ đệm độ sâu.

WebGLRenderingContext.clearStencil()

Chỉ định giá trị stencil được sử dụng khi xóa bộ đệm stencil.

WebGLRenderingContext.colorMask()

Đặt thành phần màu nào sẽ bật hoặc tắt khi vẽ hoặc hiển thị thành WebGLFramebuffer.

WebGLRenderingContext.cullFace()

Chỉ định xem có thể loại bỏ các đa giác mặt trước và/hoặc mặt sau hay không.

WebGLRenderingContext.depthFunc()

Chỉ định hàm so sánh độ sâu pixel đến với giá trị bộ đệm độ sâu hiện tại.

WebGLRenderingContext.depthMask()

Đặt xem việc ghi vào bộ đệm độ sâu được bật hay tắt.

WebGLRenderingContext.depthRange()

Chỉ định ánh xạ phạm vi độ sâu từ tọa độ thiết bị được chuẩn hóa đến tọa độ cửa sổ hoặc khung nhìn.

WebGLRenderingContext.disable()

Vô hiệu hóa các khả năng WebGL cụ thể cho bối cảnh này.

WebGLRenderingContext.enable()

Kích hoạt các khả năng WebGL cụ thể cho bối cảnh này.

WebGLRenderingContext.frontFace()

Chỉ định xem đa giác là mặt trước hay mặt sau bằng cách đặt hướng cuộn.

WebGLRenderingContext.getParameter()

Trả về giá trị cho tên tham số đã truyền.

WebGLRenderingContext.getError()

Trả về thông tin lỗi.

WebGLRenderingContext.hint()

Chỉ định gợi ý cho một số hành vi nhất định. Việc giải thích những gợi ý này phụ thuộc vào việc thực hiện.

WebGLRenderingContext.isEnabled()

Kiểm tra xem một khả năng WebGL cụ thể có được bật hay không cho bối cảnh này.

WebGLRenderingContext.lineWidth()

Đặt độ rộng đường của các đường rasterized.

WebGLRenderingContext.pixelStorei()

Chỉ định chế độ lưu trữ pixel

WebGLRenderingContext.polygonOffset()

Chỉ định các hệ số và đơn vị tỷ lệ để tính giá trị độ sâu.

WebGLRenderingContext.sampleCoverage()

Chỉ định các tham số bao phủ nhiều mẫu cho hiệu ứng khử răng cưa.

WebGLRenderingContext.stencilFunc()

Đặt cả chức năng trước và sau cũng như giá trị tham chiếu để kiểm tra stencil.

WebGLRenderingContext.stencilFuncSeparate()

Đặt chức năng mặt trước và/hoặc mặt sau và giá trị tham chiếu để kiểm tra stencil.

WebGLRenderingContext.stencilMask()

Kiểm soát việc bật và tắt cả chức năng ghi mặt trước và mặt sau của các bit riêng lẻ trong các mặt phẳng khuôn tô.

WebGLRenderingContext.stencilMaskSeparate()

Điều khiển việc bật và tắt chức năng ghi mặt trước và/hoặc mặt sau của các bit riêng lẻ trong các mặt phẳng khuôn tô.

WebGLRenderingContext.stencilOp()

Đặt cả hành động kiểm tra stencil mặt trước và mặt sau.

WebGLRenderingContext.stencilOpSeparate()

Đặt các hành động kiểm tra stencil mặt trước và/hoặc mặt sau.

Bộ đệm

WebGLRenderingContext.bindBuffer()

Liên kết một đối tượng WebGLBuffer với một mục tiêu nhất định.

WebGLRenderingContext.bufferData()

Cập nhật dữ liệu bộ đệm.

WebGLRenderingContext.bufferSubData()

Cập nhật dữ liệu bộ đệm bắt đầu từ phần bù được chuyển.

WebGLRenderingContext.createBuffer()

Tạo một đối tượng WebGLBuffer.

WebGLRenderingContext.deleteBuffer()

Xóa một đối tượng WebGLBuffer.

WebGLRenderingContext.getBufferParameter()

Trả về thông tin về bộ đệm.

WebGLRenderingContext.isBuffer()

Trả về Boolean cho biết bộ đệm đã truyền có hợp lệ hay không.

Bộ đệm khung

WebGLRenderingContext.bindFramebuffer()

Liên kết một đối tượng WebGLFrameBuffer với một mục tiêu nhất định.

WebGLRenderingContext.checkFramebufferStatus()

Trả về trạng thái của bộ đệm khung.

WebGLRenderingContext.createFramebuffer()

Tạo một đối tượng WebGLFrameBuffer.

WebGLRenderingContext.deleteFramebuffer()

Xóa một đối tượng WebGLFrameBuffer.

WebGLRenderingContext.framebufferRenderbuffer()

Gắn một đối tượng WebGLRenderingBuffer vào một đối tượng WebGLFrameBuffer.

WebGLRenderingContext.framebufferTexture2D()

Đính kèm một hình ảnh họa tiết vào đối tượng WebGLFrameBuffer.

WebGLRenderingContext.getFramebufferAttachmentParameter()

Trả về thông tin về bộ đệm khung.

WebGLRenderingContext.isFramebuffer()

Trả về một giá trị Boolean cho biết đối tượng WebGLFrameBuffer đã truyền có hợp lệ hay không.

WebGLRenderingContext.readPixels()

Đọc một khối pixel từ WebGLFrameBuffer.

Bộ đệm kết xuất

WebGLRenderingContext.bindRenderbuffer()

Liên kết một đối tượng WebGLRenderBuffer với một mục tiêu nhất định.

WebGLRenderingContext.createRenderbuffer()

Tạo một đối tượng WebGLRenderBuffer.

WebGLRenderingContext.deleteRenderbuffer()

Xóa một đối tượng WebGLRenderBuffer.

WebGLRenderingContext.getRenderbufferParameter()

Trả về thông tin về bộ đệm kết xuất.

WebGLRenderingContext.isRenderbuffer()

Trả về một giá trị Boolean cho biết liệu WebGLRenderingBuffer đã được truyền có hợp lệ hay không.

WebGLRenderingContext.renderbufferStorage()

Tạo kho dữ liệu bộ đệm kết xuất.

Kết cấu

WebGLRenderingContext.bindTexture()

Liên kết một đối tượng WebGLTexture với một mục tiêu nhất định.

WebGLRenderingContext.compressedTexImage2D()

Chỉ định hình ảnh kết cấu 2D ở định dạng nén.

WebGLRenderingContext.compressedTexSubImage2D()

Chỉ định hình ảnh phụ kết cấu 2D ở định dạng nén.

WebGLRenderingContext.copyTexImage2D()

Sao chép hình ảnh kết cấu 2D.

WebGLRenderingContext.copyTexSubImage2D()

Sao chép hình ảnh phụ kết cấu 2D.

WebGLRenderingContext.createTexture()

Tạo một đối tượng WebGLTexture.

WebGLRenderingContext.deleteTexture()

Xóa một đối tượng WebGLTexture.

WebGLRenderingContext.generateMipmap()

Tạo ra một tập hợp các bản đồ mipmap cho một đối tượng WebGLTexture.

WebGLRenderingContext.getTexParameter()

Trả về thông tin về kết cấu.

WebGLRenderingContext.isTexture()

Trả về một giá trị Boolean cho biết liệu WebGLTexture đã được truyền có hợp lệ hay không.

WebGLRenderingContext.texImage2D()

Chỉ định hình ảnh kết cấu 2D.

WebGLRenderingContext.texSubImage2D()

Cập nhật một hình chữ nhật phụ của WebGLTexture hiện tại.

WebGLRenderingContext.texParameterf()

Đặt tham số kết cấu.

WebGLRenderingContext.texParameteri()

Đặt tham số kết cấu.

Chương trình và shader

WebGLRenderingContext.attachShader()

Gắn WebGLShader vào WebGLProgram.

WebGLRenderingContext.bindAttribLocation()

Liên kết một chỉ mục đỉnh chung với một biến thuộc tính được đặt tên.

WebGLRenderingContext.compileShader()

Biên dịch một WebGLShader.

WebGLRenderingContext.createProgram()

Tạo một WebGLProgram.

WebGLRenderingContext.createShader()

Tạo một WebGLShader.

WebGLRenderingContext.deleteProgram()

Xóa một WebGLProgram.

WebGLRenderingContext.deleteShader()

Xóa một WebGLShader.

WebGLRenderingContext.detachShader()

Tách một WebGLShader.

WebGLRenderingContext.getAttachedShaders()

Trả về danh sách các đối tượng WebGLShader được gắn vào WebGLProgram.

WebGLRenderingContext.getProgramParameter()

Trả về thông tin về chương trình.

WebGLRenderingContext.getProgramInfoLog()

Trả về nhật ký thông tin cho đối tượng WebGLProgram.

WebGLRenderingContext.getShaderParameter()

Trả về thông tin về shader.

WebGLRenderingContext.getShaderPrecisionFormat()

Trả về một đối tượng WebGLShaderPrecisionFormat mô tả độ chính xác cho định dạng số của shader.

WebGLRenderingContext.getShaderInfoLog()

Trả về nhật ký thông tin cho đối tượng WebGLShader.

WebGLRenderingContext.getShaderSource()

Trả về mã nguồn của WebGLShader dưới dạng một chuỗi.

WebGLRenderingContext.isProgram()

Trả về một giá trị Boolean cho biết liệu WebGLProgram đã được truyền có hợp lệ hay không.

WebGLRenderingContext.isShader()

Trả về một giá trị Boolean cho biết liệu WebGLShader đã được truyền có hợp lệ hay không.

WebGLRenderingContext.linkProgram()

Liên kết đối tượng WebGLProgram đã được truyền.

WebGLRenderingContext.shaderSource()

Đặt mã nguồn trong WebGLShader.

WebGLRenderingContext.useProgram()

Sử dụng WebGLProgram được chỉ định như một phần của trạng thái kết xuất hiện tại.

WebGLRenderingContext.validateProgram()

Xác thực một WebGLProgram.

Đồng phục và thuộc tính

WebGLRenderingContext.disableVertexAttribArray()

Vô hiệu hóa mảng thuộc tính đỉnh tại một vị trí nhất định.

WebGLRenderingContext.enableVertexAttribArray()

Cho phép mảng thuộc tính đỉnh tại một vị trí nhất định.

WebGLRenderingContext.getActiveAttrib()

Trả về thông tin về một biến thuộc tính đang hoạt động.

WebGLRenderingContext.getActiveUniform()

Trả về thông tin về một biến thống nhất đang hoạt động.

WebGLRenderingContext.getAttribLocation()

Trả về vị trí của một biến thuộc tính.

WebGLRenderingContext.getUniform()

Trả về giá trị của một biến thống nhất tại một vị trí nhất định.

WebGLRenderingContext.getUniformLocation()

Trả về vị trí của một biến thống nhất.

WebGLRenderingContext.getVertexAttrib()

Trả về thông tin về thuộc tính đỉnh tại một vị trí nhất định.

WebGLRenderingContext.getVertexAttribOffset()

Trả về địa chỉ của một thuộc tính đỉnh đã cho.

WebGLRenderingContext.uniform[1234][fi][v]()

Chỉ định một giá trị cho một biến thống nhất.

WebGLRenderingContext.uniformMatrix[234]fv()

Chỉ định một giá trị ma trận cho một biến thống nhất.

WebGLRenderingContext.vertexAttrib[1234]f[v]()

Chỉ định giá trị cho thuộc tính đỉnh chung.

WebGLRenderingContext.vertexAttribPointer()

Chỉ định định dạng dữ liệu và vị trí của các thuộc tính đỉnh trong mảng thuộc tính đỉnh.

Vẽ bộ đệm

WebGLRenderingContext.clear()

Xóa bộ đệm được chỉ định về giá trị đặt trước.

WebGLRenderingContext.drawArrays()

Hiển thị các giá trị nguyên thủy từ dữ liệu mảng.

WebGLRenderingContext.drawElements()

Hiển thị các giá trị nguyên thủy từ dữ liệu mảng phần tử.

WebGLRenderingContext.finish()

Chặn thực thi cho đến khi tất cả các lệnh được gọi trước đó kết thúc.

WebGLRenderingContext.flush()

Làm trống các lệnh đệm khác nhau, khiến tất cả các lệnh được thực thi nhanh nhất có thể.

Không gian màu

WebGLRenderingContext.drawingBufferColorSpace

Chỉ định không gian màu của vùng đệm vẽ WebGL.

WebGLRenderingContext.unpackColorSpace

Chỉ định không gian màu cần chuyển đổi khi nhập họa tiết.

Làm việc với tiện ích mở rộng

Các phương thức này quản lý các phần mở rộng WebGL:

WebGLRenderingContext.getSupportedExtensions()

Trả về một chuỗi Array chứa tất cả các phần mở rộng WebGL được hỗ trợ.

WebGLRenderingContext.getExtension()

Trả về một đối tượng mở rộng.

Thông số kỹ thuật

Specification
WebGL Specification
# 5.14

Khả năng tương thích của trình duyệt

Xem thêm