Освещение в WebXR

Поскольку API WebXR Device API опирается на другие технологии, в частности WebGL и фреймворки на его основе, для рендеринга, текстурирования и освещения сцены, те же общие понятия освещения применимы к настройкам или сценам WebXR, что и к любому другому дисплею, генерируемому WebGL.

Однако при написании кода освещения, особенно для приложений дополненной реальности (AR), есть моменты и нюансы, которые следует учитывать. Этот гайд рассматривает эти темы. Хотя эта статья содержит краткие напоминания о том, как работает освещение в целом, она ни в коем случае не является руководством по освещению или гайдом по созданию правильно освещённой 3D-сцены.

Хотя эта статья не является исчерпывающим руководством по освещению 3D-сцены, полезно напомнить, как работает освещение в общем. По сути, моделирование освещения в виртуальной сцене заключается в вычислении того, сколько света от каждого источника достигает глаза после взаимодействия с каждым объектом в сцене и отражения от него.

Рисунок: Диаграмма, показывающая, как угол отражения соответствует углу падения.

Каждый объект, который мы видим, мы видим потому, что объект либо испускает, либо отражает свет (или то и другое). Входящий луч света — падающий луч — прибывает под углом, известным как угол падения. Угол падения, Θᵢ, — это угол между падающим лучом и вектором нормали поверхности.

Для шероховатых поверхностей свет отражается равномерно во всех направлениях. Однако для глянцевых, зеркальных поверхностей большая часть света отражается в направлении, где угол отражения, Θᵣ, равен углу падения, но находится с противоположной стороны от вектора нормали. Отражённый луч, тогда, уходит под этим углом от нормали. Это закон отражения. Это основа для многих аспектов затенения сцены и влияет на поведение различных типов источников света.

Конечно, цвет отражённого луча может быть изменён по интенсивности и/или оттенку из-за взаимодействия света с поверхностью, но угол всегда остаётся одинаковым.

Источник света имеет три основных компонента; каждый компонент, по сути, является типом света

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

Диффузный свет

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

Рисунок: Сфера, освещённая только диффузным светом. Обратите внимание на полное отсутствие затенения, указывающего на глубину сферы.

Эффект диффузного света вычисляется путём умножения интенсивности источника света на отражательную способность поверхности в позиции пикселя. Цвет и интенсивность каждого пикселя в сцене изменяются одинаковым образом, независимо от его местоположения в сцене или направления, в котором он смотрит. Диффузный свет обычно присутствует, чтобы предотвратить затемнение теневых областей, хотя он влияет на всю сцену; однако количество диффузного света в сцене должно быть очень низким.

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

Диффузный свет также можно использовать для применения цветового оттенка к сцене; например, в игре, в которой у игрока есть особые жёлтые очки, вы можете добавить жёлтый диффузный свет.

Рассеянный свет

Рассеянный свет — это свет, который равномерно и направленно испускается или отражается от поверхности. Это большинство света, который мы обычно видим. Рассеянный свет исходит из определённой точки или направления и создаёт тени. Благодаря направленности, стороны объекта, обращённые к источнику рассеянного света, будут ярче, чем другие.

Рисунок: Пятый по величине спутник Сатурна, Тефия, освещённый солнечным светом, приходящим слева снизу.

Поскольку интенсивность рассеянного света зависит от угла падения (угла между вектором, представляющим направление, из которого свет достигает поверхности, и вектором нормали поверхности), интенсивность или яркость отражаемого объектом света изменяется в зависимости от ориентации поверхности относительно источника света.

Фоновый свет

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

Рисунок: Фотография, сделанная космическим кораблём Кассини НАСА, показывающая отражение света от озера жидкого метана на поверхности спутника Сатурна Титан.

Каждый источник света представлен какой-то комбинацией диффузного, рассеянного и/или фонового света. Программа WebGL-шейдера берёт цвет, направленность, яркость и другие факторы для каждого источника света и вычисляет окончательный цвет каждого пикселя.

Существует четыре основных типа источников света. Каждый из них включает источник виртуального света, расстояние от объекта, который рисуется, и направленность световых волн, которые заставляют источник света приобретать определённые характеристики. В основном любой реальный источник света можно смоделировать с помощью одного или нескольких из этих типов источников света.

Источники рассеянного света

Источник рассеянного света — это источник света, описывающий уровень и цвет рассеянного света в сцене. Хотя таких источников может быть несколько в одной сцене, вы, вероятно, немного улучшите производительность, объединив их в один, так как каждый из них в любом случае всегда одинаково влияет на каждый пиксель.

Источники рассеянного света, как правило, не соответствуют ни одному объекту в сцене и не имеют реальных аналогов.

Направленные источники света

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

Рисунок: Земля и Луна оба наполовину освещены направленным светом солнца.

Наиболее распространённым примером направленного источника света является солнце. Хотя солнце фактически является единственным (большим) объектом, оно находится очень далеко, поэтому световые лучи, идущие от него, практически параллельны. Хотя солнечный свет фактически уменьшается с расстоянием, скорость изменения очень мала и замечается только на огромных расстояниях, поэтому скорость изменения интенсивности солнечного света обычно не имеет значения для рендеринга 3D-сцены.

Точечные источники света

Точечный источник света — это источник света, расположенный в определённой точке, излучающий свет равномерно во всех направлениях. Лампы, свечи и тому подобное — примеры точечных источников света. Чем ближе объект к точечному источнику света, тем ярче свет, который он на него проецирует. Скорость, с которой яркость точечного источника света уменьшается с расстоянием, называется затуханием, и это настраиваемая особенность источника света в WebGL и других системах освещения.

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

Фокусированные источники света

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

Рисунок: Фотография прожектора, направленного на штукатурную стену ночью.

На краю светового конуса свет перестаёт воздействовать на поверхность.

Вычислительные затраты на освещение

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

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

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

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

Цвет каждого пикселя в конечной, отрисованной, сцене вычисляется с помощью сложных математических вычислений, учитывающих такие факторы, как:

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

Вы можете узнать больше о том, как выполнять освещение в WebGL, в статье Освещение в WebGL.

Помимо обычных проблем, с которыми вам нужно столкнуться при освещении сцены, случай использования VR или AR добавляет дополнительные области беспокойства при написании шейдеров. В этом разделе мы предоставляем некоторые основные рекомендации по освещению смешанной реальности, которые следует учитывать при построении, рендеринге и освещении вашей сцены. Хотя некоторые из них полезны и в любой другой 3D среде, большинство относятся к виртуальной реальности и, в некоторых случаях ещё больше, к дополненной реальности.

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

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

Постарайтесь разместить источники света в реалистичных местах для данной обстановки и настроения, которое вы хотите создать. Сцена, предназначенная для ощущения естественного освещения реального мира, не имеет студийного освещения. Она имеет солнечный свет, возможно, свет, отражённый от объектов или воды в сцене, и так далее, но не лампы, направленные на лица объектов или людей в сцене.

Если ваш источник света расположен в сцене, вы, вероятно, должны убедиться, что аватар зрителя не может физически пересечься с источником света. Результаты могут быть странными.

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

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

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

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

В настоящее время WebXR не поддерживает оценку освещения. Однако спецификация в настоящее время разрабатывается под эгидой W3C. Вы можете узнать всё об предлагаемом API и многом о концепции оценки освещения в документе разъяснения, который включён в репозиторий спецификации в GitHub.

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

Подробности о том, как работает оценка освещения, особенно в контексте предлагаемого API, пока не рассматриваются. После стабилизации API мы обновим эту документацию с подробными сведениями.

Существует ряд потенциальных проблем безопасности, связанных со сбором всех этих данных для генерации и применения освещения к виртуальным объектам с использованием данных реального мира.

Конечно, многие приложения AR достаточно чётко указывают, где находится пользователь. Если пользователь запускает приложение под названием «Экскурсия по Лувру», очень вероятно, что пользователь находится в Музее Лувра в Париже, Франция. Но браузеры обязаны предпринять ряд шагов, чтобы затруднить физическое определение местоположения пользователя без его согласия.

Сбор данных о свете с помощью API датчика окружающего света вызывает различные потенциальные проблемы конфиденциальности.

• Информация об освещении может просочиться в веб-данные о пользователях и об образцах использования устройств. Такая информация может использоваться для повышения профилирования пользователей и анализа поведения.
• Если два или более устройств получают доступ к контенту, который использует один и тот же скрипт третьей стороны, этот скрипт может использоваться для корреляции информации об освещении и того, как оно меняется со временем, чтобы попытаться определить пространственные отношения между устройствами; теоретически это может указывать, что устройства находятся в одной и той же общей области, например.

Для снижения этих рисков, спецификация WebXR Lighting Estimation API требует от браузеров сообщать информацию об освещении, несколько искажённую по сравнению с истинным значением. Существует множество способов сделать это.

Точность сферических гармоник

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

Отделение ориентации от освещения

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

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

Временная и пространственная фильтрация

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

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

Спецификация API оценки освещения предписывает всем агентам пользователя выполнять временную и пространственную фильтрацию, чтобы размыть данные таким образом, что снижает их полезность для целей определения местоположения пользователя или проведения атак по побочным каналам.

• Разъяснение API оценки освещения WebXR
• Спецификация API оценки освещения WebXR уровня 1
• Использование шейдеров для применения цвета в WebGL
• Использование текстур в WebGL
• Освещение в WebGL
• GLSL шейдеры