Очистка цветом

Пример, демонстрирующий, как очистить контекст отрисовки WebGL до сплошного цвета.

Очистка контекста WebGL сплошным цветом

Простейшая программа WebGL. Настройте контекст отрисовки и затем просто очистите его сплошным зелёным цветом. Обратите внимание, что CSS устанавливает цвет фона холста в чёрный, поэтому, когда холст становится зелёным, мы знаем, что магия WebGL сработала.

Кроме того, вы можете заметить, что очистка буфера отрисовки сплошным цветом — это двухэтапный процесс. Во-первых, мы устанавливаем цвет очистки на зелёный, используя метод clearColor(). Это только изменяет некоторые внутренние состояния WebGL, но ничего ещё не рисует. Далее, мы фактически выполняем отрисовку, вызывая метод clear(). Это типично для того, как выполняется отрисовка с помощью WebGL. Существует всего несколько методов для фактической отрисовки (clear() — один из них). Все остальные методы предназначены для установки и запроса переменных состояния WebGL (таких как цвет очистки).

Существует множество «регуляторов» и «переключателей», которые влияют на отрисовку с помощью WebGL. Цвет очистки — это всего лишь первый из многих, которые вы узнаете. Именно поэтому WebGL/OpenGL часто называют машиной состояний. Изменяя эти «регуляторы» и «переключатели», вы можете изменить внутреннее состояние машины WebGL, что, в свою очередь, меняет то, как входные данные (в данном случае команда очистки) преобразуются в выходные данные (в данном случае все пиксели устанавливаются в зелёный).

Наконец, обратите внимание, что цвет в WebGL обычно в формате RGBA, то есть четыре числовых компонента для красного, зелёного, синего и альфа (непрозрачность). Поэтому clearColor() принимает четыре аргумента.

<p>A very simple WebGL program that shows some color.</p>
<!-- Text within a canvas element is displayed
    only if canvas is not supported. -->
<canvas>Your browser does not seem to support HTML canvas.</canvas>

body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}

// Run everything inside window load event handler, to make sure
// DOM is fully loaded and styled before trying to manipulate it,
// and to not mess up the global scope. We are giving the event
// handler a name (setupWebGL) so that we can refer to the
// function object within the function itself.
window.addEventListener(
  "load",
  function setupWebGL(evt) {
    "use strict";

    // Cleaning after ourselves. The event handler removes
    // itself, because it only needs to run once.
    window.removeEventListener(evt.type, setupWebGL, false);

    // References to the document elements.
    const paragraph = document.querySelector("p"),
      canvas = document.querySelector("canvas");

    // Getting the WebGL rendering context.
    const gl =
      canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

    // If failed, inform user of failure. Otherwise, initialize
    // the drawing buffer (the viewport) and clear the context
    // with a solid color.
    if (!gl) {
      paragraph.textContent =
        "Failed to get WebGL context. Your browser or device may not support WebGL.";
      return;
    }
    paragraph.textContent = "Congratulations! Your browser supports WebGL.";
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    // Set the clear color to darkish green.
    gl.clearColor(0.0, 0.5, 0.0, 1.0);
    // Clear the context with the newly set color. This is
    // the function call that actually does the drawing.
    gl.clear(gl.COLOR_BUFFER_BIT);
  },
  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/Clearing_with_colors