Обнаружение WebGL

Этот пример демонстрирует, как обнаружить контекст отрисовки WebGL и сообщить пользователю результат.

Обнаружение поддержки WebGL

В этом первом примере мы проверим, поддерживает ли браузер WebGL. Для этого мы попробуем получить контекст отрисовки WebGL из элемента canvas. Контекст отрисовки WebGL — это интерфейс, с помощью которого можно устанавливать и запрашивать состояние графического процессора, отправлять данные в WebGL и выполнять команды отрисовки.

Сохранение состояния графического процессора в рамках одного контекстного интерфейса не уникально для WebGL. Это также делается в других графических API, таких как контекст отрисовки 2D для холста. Однако свойства и переменные, которые можно настраивать, различны для каждого 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;
}

// Run everything inside window load event handler, to make sure
// DOM is fully loaded and styled before trying to manipulate it.
window.addEventListener(
  "load",
  () => {
    const paragraph = document.querySelector("p");
    const button = document.querySelector("button");

    // Adding click event handler to button.
    button.addEventListener("click", detectWebGLContext, false);
    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") || canvas.getContext("experimental-webgl");

      // Report the result.
      paragraph.textContent =
        gl instanceof WebGLRenderingContext
          ? "Congratulations! Your browser supports WebGL."
          : "Failed. Your browser or device may not support WebGL.";
    }
  },
  false,
);

Исходный код этого примера также доступен на GitHub.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Detect_WebGL