Z-порядок¶

Z-порядок (англ. z-order, z-буфер, порядок по оси Z) — это порядок расположения двухмерных или трёхмерных объектов вдоль оси, перпендикулярной плоскости экрана (оси Z), определяющий, какие объекты отображаются поверх других. В компьютерной графике, веб-дизайне и настольных интерфейсах Z-порядок управляет видимостью перекрывающихся элементов: объекты с более высоким значением Z-порядка отображаются ближе к зрителю и закрывают собой объекты с меньшим значением.

¶Принцип работы

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

В двухмерных интерфейсах (например, в оконных менеджерах операционных систем, веб-браузерах или графических редакторах) Z-порядок задаётся явно — через порядок размещения элементов в коде или с помощью специальных свойств (например, CSS-свойство z-index). Чем выше числовое значение, тем ближе элемент к пользователю.

¶История

Концепция Z-порядка возникла в ранних системах компьютерной графики 1960-х годов. Первые алгоритмы, такие как алгоритм художника (painter’s algorithm), требовали сортировки полигонов по глубине перед выводом, что было вычислительно дорого. В 1974 году Эдвин Кэтмулл (впоследствии сооснователь Pixar) предложил алгоритм Z-буферизации, который стал основой для аппаратного ускорения графики. В 1980-х годах Z-буфер был реализован в первых графических ускорителях, а с 1990-х стал стандартной функцией видеокарт.

В веб-дизайне Z-порядок появился с внедрением CSS2 (1998 год), где свойство z-index было введено для управления наложением позиционированных элементов. В операционных системах концепция Z-порядка используется с первых графических интерфейсов (Xerox Alto, 1973; Mac OS, 1984; Microsoft Windows, 1985) для управления окнами.

¶Z-порядок в трёхмерной графике

¶Z-буферизация

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

¶Проблемы и ограничения

• Z-файтинг (z-fighting) — артефакт, возникающий, когда два объекта находятся на почти одинаковом расстоянии от камеры. Из-за ограниченной точности Z-буфера пиксели могут «мерцать», переключаясь между объектами. Решается увеличением точности буфера, смещением глубины (depth bias) или использованием алгоритмов с большей разрядностью.
• Прозрачность — алгоритм Z-буфера не работает корректно с полупрозрачными объектами, так как требует сортировки по глубине для правильного смешивания цветов. Для прозрачных объектов часто используется отдельный проход рендеринга с сортировкой.
• Производительность — Z-буферизация требует дополнительной памяти и вычислительных ресурсов, но современные видеокарты обрабатывают её аппаратно.

¶Альтернативные методы

• Алгоритм художника — сортировка всех полигонов по глубине и отрисовка от дальних к ближним. Прост, но неэффективен для сложных сцен и не работает с взаимопроникающими объектами.
• BSP-деревья (binary space partitioning) — разбиение пространства на полуплоскости для определения порядка отрисовки без сортировки на каждом кадре. Использовался в ранних 3D-играх (например, Doom, 1993).
• Трассировка лучей — не использует Z-буфер, а вычисляет пересечение лучей с объектами напрямую, что даёт точный порядок, но требует больших вычислительных затрат.

¶Z-порядок в веб-дизайне (CSS)

¶Свойство z-index

В CSS Z-порядок управляется свойством z-index, которое принимает целые числа (в том числе отрицательные). Элемент с большим значением z-index отображается поверх элемента с меньшим значением. По умолчанию z-index равен auto (0), и порядок определяется последовательностью в HTML-коде (поздние элементы — выше).

¶Контекст наложения

Важнейшая особенность CSS-модели — контекст наложения (stacking context). Новый контекст наложения создаётся для:

• корневого элемента (<html>);
• элементов с позиционированием (position: relative, absolute, fixed, sticky) и значением z-index, отличным от auto;
• элементов с opacity менее 1;
• элементов с transform, filter, perspective, clip-path, mask и некоторыми другими свойствами.

Внутри каждого контекста наложения Z-порядок действует изолированно: дочерние элементы не могут выйти за пределы своего контекста, даже если у них очень высокий z-index. Это часто приводит к ошибкам в веб-вёрстке, когда элемент с большим z-index не перекрывает другой, потому что находится в другом контексте.

¶Примеры использования

• Модальные окна и всплывающие подсказки — обычно имеют высокий z-index (например, 1000), чтобы перекрывать всё остальное содержимое.
• Слои навигации — меню, выпадающие списки и хлебные крошки.
• Параллакс-эффекты — использование Z-порядка для создания иллюзии глубины при прокрутке.
• Игры и интерактивные элементы — управление порядком карт, фигур или элементов интерфейса.

¶Z-порядок в операционных системах

В оконных менеджерах (например, в Windows, macOS, Linux с X11 или Wayland) Z-порядок определяет, какое окно находится поверх других. Обычно активное окно имеет наивысший Z-порядок, а свёрнутые или фоновые — низкий. Пользователь может изменять порядок, кликая на окна или используя комбинации клавиш (например, Alt+Tab в Windows).

¶Особенности

• Всегда наверху (always on top) — режим, при котором окно сохраняет максимальный Z-порядок независимо от активности.
• Прозрачные окна — требуют дополнительной обработки Z-порядка для корректного отображения.
• Виртуальные рабочие столы — окна на разных столах имеют независимые Z-порядки.

¶Z-порядок в графических редакторах

В растровых и векторных редакторах (Adobe Photoshop, GIMP, Figma, Inkscape) Z-порядок управляет слоями и объектами. Каждый слой или фигура имеет свой порядок, который можно изменять перетаскиванием или через меню («На передний план», «На задний план»). Это позволяет создавать сложные композиции из перекрывающихся элементов.

¶Инструменты

• Панель слоёв — визуальное представление Z-порядка, где верхние слои отображаются поверх нижних.
• Группировка — объекты внутри группы имеют свой Z-порядок, независимый от других групп.
• Маски и прозрачность — влияют на видимость, но не на Z-порядок.

¶Применение

Z-порядок используется в:

• Компьютерных играх — для отображения персонажей, объектов окружения, интерфейса и спецэффектов.
• Веб-разработке — для создания сложных интерфейсов, модальных окон, анимаций и игр.
• Графическом дизайне — для компоновки многослойных изображений.
• Системах автоматизированного проектирования (САПР) — для управления видимостью слоёв чертежа.
• Научной визуализации — для отображения трёхмерных данных (например, в медицинской томографии).

¶Интересные факты

• В ранних версиях Windows (до Windows 95) Z-порядок окон был фиксированным — активное окно всегда было поверх, и его нельзя было изменить без потери фокуса.
• В CSS свойство z-index может принимать значения от -2147483648 до 2147483647 (32-битное целое), но на практике используются значения от 0 до 9999.
• В некоторых графических движках (например, Unreal Engine) Z-порядок может быть заменён алгоритмом «отложенного рендеринга» (deferred shading), где Z-буфер используется для других целей.
• Термин «Z-порядок» иногда применяется в пользовательских интерфейсах для обозначения порядка элементов в списке или таблице, хотя это не связано с глубиной.

¶Источники

• Foley, J. D., van Dam, A., Feiner, S. K., Hughes, J. F. «Computer Graphics: Principles and Practice» (2nd ed.). Addison-Wesley, 1990.
• CSS Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, W3C Recommendation, 2011.
• Microsoft documentation: «Window Z-Order» (Windows App Development).
• Кэтмулл, Э. «A Subdivision Algorithm for Computer Display of Curved Surfaces» (докторская диссертация, 1974).
• Статья «Z-fighting» в документации Unity и Unreal Engine.