Маскирование цвета

• Предыдущая
• Следующая

В этом примере WebGL случайные цвета изменяются, применяя маскирование цвета для ограничения диапазона отображаемых цветов до определенных оттенков.

В этом примере анимация случайных цветов изменяется, применяя маскирование цвета с помощью colorMask(). Можно представить операцию маскирования цвета как просмотр цветного холста через окрашенное стекло или цветовой фильтр. Таким образом, замаскировав синие и зелёные каналы, вы разрешаете обновление только красной составляющей пикселей, что равносильно просмотру через красное стекло.

Маскирование цвета позволяет продемонстрировать некоторые основы теории цвета. Замаскировав некоторые каналы, мы фактически смещаем отображаемые цвета в сторону дополнительного цвета. Таким образом, замаскировав и синий, и красный, мы получим оттенки зелёного. Замаскировав только синий канал, мы получим оттенки жёлтого (включая оттенки оранжевого, коричневого, оливкового и жёлто-зелёного), дополнительного к синему. Аналогично, замаскировав только зелёный, мы получим оттенки пурпурного (также фиолетовые, алые и т.д.), а замаскировав только красный — оттенки сине-зелёного (также морские зелёные, синие и т.д.).

Обратите внимание, что вызовы colorMask() происходят только при нажатии на одну из кнопок переключателей. Но отрисовка выполняется каждую секунду с использованием таймера. Состояние маски цвета в WebGL сохраняется, поэтому нам не нужно вызывать colorMask() каждый кадр, чтобы установить маску цвета. Это важный аспект машины состояний WebGL. Это позволяет нам настроить WebGL в одной фазе инициализации, а затем просто выполнять команды рисования для каждого кадра.

Маскирование цвета даёт вам точный контроль над обновлением значений пикселей на экране. Ограничивая цветовые каналы, которые записываются каждой командой рисования, вы можете использовать каждый канал, например, для хранения разного градационного изображения. В качестве альтернативы можно использовать составляющие RGB для цвета, а альфа-компоненту — для некоторых пользовательских данных пикселей вашего изобретения.

Наконец, маскирование цвета учит нас тому, что WebGL — это не только машина состояний, но и графическая труба. Это означает, что графические операции в WebGL выполняются в определённом порядке, где результат каждой операции служит входом для следующей. Например, операция очистки устанавливает значение каждого пикселя в выбранный цвет очистки. Маскирование происходит позже в графической трубе и изменяет значение цвета пикселя, так что конечный результат на экране — это цвет очистки, затемнённый маской цвета.

<p>Tinting the displayed colors with color masking.</p>
<canvas>Your browser does not seem to support HTML canvas.</canvas>
<button id="red-toggle">On</button>
<button id="green-toggle">On</button>
<button id="blue-toggle">On</button>

body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
button {
  display: inline-block;
  font-family: serif;
  font-size: inherit;
  font-weight: 900;
  color: white;
  margin: auto;
  padding: 0.6em 1.2em;
}
#red-toggle {
  background-color: red;
}
#green-toggle {
  background-color: green;
}
#blue-toggle {
  background-color: blue;
}

window.addEventListener(
  "load",
  function setupAnimation(evt) {
    "use strict";
    window.removeEventListener(evt.type, setupAnimation, false);

    const canvas = document.querySelector("canvas");
    const gl =
      canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if (!gl) {
      document.querySelector("p").textContent =
        "Failed to get WebGL context. Your browser or device may not support WebGL.";
      return;
    }
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

    const timer = setInterval(drawAnimation, 1000);

    const mask = [true, true, true];
    const redToggle = document.querySelector("#red-toggle");
    const greenToggle = document.querySelector("#green-toggle");
    const blueToggle = document.querySelector("#blue-toggle");
    redToggle.addEventListener("click", setColorMask, false);
    greenToggle.addEventListener("click", setColorMask, false);
    blueToggle.addEventListener("click", setColorMask, false);

    function setColorMask(evt) {
      const index =
        (evt.target === greenToggle && 1) ||
        (evt.target === blueToggle && 2) ||
        0;
      mask[index] = !mask[index];
      evt.target.textContent = mask[index] ? "On" : "Off";
      gl.colorMask(mask[0], mask[1], mask[2], true);
      drawAnimation();
    }

    function drawAnimation() {
      const color = getRandomColor();
      gl.clearColor(color[0], color[1], color[2], 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    }

    function getRandomColor() {
      return [Math.random(), Math.random(), Math.random()];
    }
  },
  false,
);

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

• Предыдущая
• Следующая