Phát hiện WebGL
Ví dụ này trình bày cách phát hiện bối cảnh hiển thị WebGL và báo cáo kết quả cho người dùng.
WebGL phát hiện tính năng
Trong ví dụ đầu tiên này, chúng ta sẽ kiểm tra xem trình duyệt có hỗ trợ WebGL hay không. Vì mục đích đó, chúng tôi sẽ cố gắng lấy WebGL rendering context từ phần tử canvas. WebGL rendering context là một giao diện, qua đó bạn có thể đặt và truy vấn trạng thái của máy đồ họa, gửi dữ liệu tới WebGL và thực thi các lệnh vẽ.
Việc lưu trạng thái của máy đồ họa trong một giao diện ngữ cảnh không phải chỉ có ở WebGL. Điều này cũng được thực hiện trong các đồ họa khác API, chẳng hạn như canvas 2D rendering context. Tuy nhiên, các thuộc tính và biến bạn có thể điều chỉnh sẽ khác nhau đối với mỗi API.
<p>[ Here would go the result of WebGL feature detection ]</p>
<button>Press here to detect WebGLRenderingContext</button>
body {
text-align: center;
}
button {
display: block;
font-size: inherit;
margin: auto;
padding: 0.6em;
}
const paragraph = document.querySelector("p");
const button = document.querySelector("button");
// Adding click event handler to button.
button.addEventListener("click", detectWebGLContext);
function detectWebGLContext() {
// Create canvas element. The canvas is not added to the
// document itself, so it is never displayed in the
// browser window.
const canvas = document.createElement("canvas");
// Get WebGLRenderingContext from canvas element.
const gl = canvas.getContext("webgl");
// Report the result.
paragraph.textContent =
gl instanceof WebGLRenderingContext
? "Congratulations! Your browser supports WebGL."
: "Failed. Your browser or device may not support WebGL.";
}
Mã nguồn của ví dụ này cũng có trên [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/ detect-webgl).