Основные операции обрезки

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

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

Это демонстрация рендеринга с scissor().

Хотя команда рисования clear() записывает цвет очистки (установленный с помощью clearColor()) во все пиксели буфера рисования, scissor() определяет маску, которая позволяет обновлять только пиксели внутри указанной прямоугольной области.

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

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

Здесь мы видим еще один пример различия между фрагментами и пикселями. Обрезка — это отдельный этап в графическом pipeline WebGL/OpenGL (он происходит после очистки цвета, но перед маскированием цвета). Перед фактическим обновлением пикселей фрагменты должны пройти тест обрезки. Если фрагменты проходят тест обрезки, они продолжают проходить графический pipeline, и соответствующие пиксели обновляются на экране. Если они не проходят тест, они сразу же отбрасываются, дальнейшая обработка не выполняется, и пиксели не обновляются. Поскольку только фрагменты внутри указанной прямоугольной области успешно проходят тест обрезки, только пиксели внутри этой области обновляются, и мы получаем прямоугольник на экране.

Этап обрезки pipeline по умолчанию отключен. Мы включаем его здесь с помощью метода enable() (вы также будете использовать enable() для активации многих других функций WebGL; следовательно, использование константы SCISSOR_TEST в качестве аргумента в этом случае). Это снова демонстрирует типичный порядок команд в WebGL. Сначала мы настраиваем состояние WebGL. В этом случае включение теста обрезки и установление прямоугольной маски. Только когда состояние WebGL будет удовлетворительно настроено, мы выполняем команду рисования (в этом случае clear()), которая запускает обработку фрагментов в графическом pipeline.

<p>Result of scissoring.</p>
<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;
}

window.addEventListener(
  "load",
  function setupWebGL(evt) {
    "use strict";
    window.removeEventListener(evt.type, setupWebGL, false);
    const paragraph = document.querySelector("p");
    const canvas = document.querySelector("canvas");

    // The following two lines set the size (in CSS pixels) of
    // the drawing buffer to be identical to the size of the
    // canvas HTML element, as determined by CSS.
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;

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

    // Enable scissoring operation and define the position and
    // size of the scissoring area.
    gl.enable(gl.SCISSOR_TEST);
    gl.scissor(40, 20, 60, 130);

    // Clear the drawing buffer solid yellow.
    gl.clearColor(1.0, 1.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  },
  false,
);

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

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