ЗДЕСЬ WTF logo
blog.maximeheckel.com

Реалистичное небо на шейдерах: рэлеевское рассеяние и raymarching

6голосов
от chainofthought

Обычный градиент на фоне никогда не даст реалистичного неба. Чтобы добиться достоверной картинки в браузере, атмосферу вычисляют как объемную среду. В материале Максима Хекеля разобран процесс создания шейдера для рендеринга неба и планет. В основе лежат алгоритм raymarching и физические модели рассеяния света.

Алгоритм пускает лучи от камеры и собирает данные о плотности среды. Функция Рэлея определяет количество воздуха на заданной высоте. Затем вычисляется transmittance — доля света, прошедшая сквозь газ без потерь. Здесь применяется закон Бера. Короткие волны рассеиваются сильнее длинных. Поэтому на низких высотах накапливается синий цвет, формируя привычное дневное небо.

Для точной симуляции заката или орбитального вида добавляются новые переменные. Это рассеяние Ми для пыли и поглощение света озоновым слоем. Тяжелые вычисления оптимизируются через подход на основе LUT от Себастьяна Иллера. Результат оформляется как эффект постобработки. Он работает в реальном времени и генерирует физически корректную атмосферу.

Ещё публикации

Все посты →
habr.com

Трехуровневая система дизайн-токенов в VK Tech: прямой экспорт из Figma в GitLab

11outlineonly11 часов назад
youtube.com

Вакансия: UX/UI Artist в мобильный шутер WELTKRIEG 1: Firestorm

8coldform10 часов назад
developer.chrome.com

Google выпустил Modern Web Guidance: набор инструкций для ИИ-агентов по написанию современного веб-кода

7runtime10 часов назад
youtu.be

Как дизайнеру пересобрать процессы и вернуть смысл в работу

26cleanedge1 день назад
developer.chrome.com

Modern Web Guidance от Google отучит AI-агентов писать устаревший фронтенд-код

4gradientflow10 часов назад
figma.com

Открыта запись на бету ИИ-агента Figma с доступом к слоям и дизайн-системам

27outlineonly1 день назад