Мою вчерашнюю работу повторили, но в 11 строчек кода 0_0

Ночью Иван Дианов, написал в Генклубе, мол привет, форкнул твою работу, а я глянул и ахнул, там всего 11 строчек кода на GLSL:

void main() {
  vec2 uv = (gl_FragCoord.xy*2.-resolution.xy)/resolution.y;
  uv=vec2(atan(uv.y,uv.x)/6.283*128.,(log(length(uv))-time)*20.);
  uv.x+=32.*sin(time+floor(uv.y/16.));
  uv=abs(mod(uv,16.)-8.);
  uv=-abs(uv)+4.;
  uv*=mat2(sin(vec4(11,0,0,33)+.785))*sqrt(2.);
  float l=abs(uv.y-2.)-1.;
  if(uv.y<uv.x)uv.yx=uv.xy;
  gl_FragColor.r+=step(0.,min(abs(abs(uv.x)-2.)-1.,l));
  gl_FragColor.a=1.;
}

Если у вас в голове только одна мысль: "Я что-то ничего в коде не понял", то у меня та же)

Я у себя в коде подбирал прямоугольники, двигал их, совмещал вместе, а Ваня нашел небольшой повтряющийся тайл и описал его алгоритмически только кодом.

https://codepen.io/illus0r/pen/LEEYrKm

А вот и мой шейдер в реальной жизни

Код в этом посте

Когда чтобы нарисовать кружок рисуешь прямую и скручиваешь холст

Из вчерашнего поста узнал, как можно свернуть координатную ось (uv, это xy значение, но названо иначе по историческим причинам) вместо того, что высчитывать координаты для рисования линий:

uv=vec2( 
  atan(uv.y, uv.x), 
  log(length(uv))
);

1. atan(uv.y, uv.x)

Это двухаргументная версия арктангенса — atan2(y, x) — которая возвращает угол (в радианах) между положительным направлением оси X и вектором (x, y).
То есть это преобразует (uv.x, uv.y) в угол вокруг центра.
Например:
• Вектор (1, 0) даёт угол 0
• Вектор (0, 1) даёт угол π/2
• И так далее по кругу.

2. length(uv)

Это расстояние от точки (uv.x, uv.y) до центра (0,0), то есть радиус в полярной системе координат.

3. log(length(uv))

Логарифм от радиуса. Это сжимает координаты по радиальной оси — часто используется, чтобы создать “туннельный” эффект.

https://codepen.io/lekzd/pen/ogggajz

Словарик разработчика графики и почему все так

Примерно как i в циклах или "hello world" в демках, в графике очень много терминов, которые исторически сложились и без изменений копируются из одной кодовой базы в другую:

📍 Координаты и трансформации

• UV — текстурные координаты (вместо XY).
Исторически пришло из 3D-графики, где XYZ — для пространства, а UV — для поверхности (в 2D).
• ST — тоже текстурные координаты, часто в GLSL, когда UV уже занято 😆
• modelViewMatrix / projectionMatrix — составные трансформации, поначалу путаются. Ctrl+C, Ctrl+V переменные, их стоит менять только для искривления пространства, если понимаешь что делаешь.

💡 Свет и материалы

• Diffuse — это рассеянный свет, то есть освещение, которое падает на поверхность и рассеивается во всех направлениях.
• Specular — зеркальное отражение света (часто противопоставляется “diffuse”).
• Phong / Blinn-Phong — модели освещения (названия от фамилий авторов) c бликами и рефлексами. Если на поверхности виден "блинчик" блика, то значит перед нами модель Блинна-Фонга 😏.
• Lambert — простая модель рассеянного света.
• Ambient — “фоновое” освещение (не привязанное к источнику).
• Fresnel — Эффект Френеля, это когда по краям объекта, грани которого становятся почти параллельны взгляду сильно увеличивается отражения, создавая ореол в цвет окружения.
• Albedo — отражательная способность материала (просто “цвет”, но физически корректный).
• PBR — Physically Based Rendering, набор техник для более реалистичного рендеринга, использующая сразу несколько текстур для разметки карты бликов, объемов, отражений и прочих эффектов. В ААА играх он буквально везде.

🔧 Шейдеры и GLSL

• Lerp(a, b, t) — Linear Interpolate — название из HLSL, в GLSL это mix(a, b, t). Путает, потому что названия разные в разных языках.
• fragColor — переменная для выходного цвета фрагмента (в шейдере пикселей).
• varying — переменные, передаваемые от вершинного шейдера к фрагментному (в GLSL 1.0).
• attribute — данные на вершину (в GLSL 1.0); заменено на in в GLSL 3.0.
• uniform — значения, одинаковые для всех вершин/фрагментов на вызов шейдера.
• discard — команда в фрагментном шейдере, чтобы “выкинуть” пиксель.

🧠 Математика и алгоритмы

• Euler — понятный способ представления вращения 3-мя осями как у гироскопа, прост для понимания, но при определенном повороте устраивает полную дичь
• Quaternion — менее понятный способ представления вращения 4-мя осями, но исправляет глюки Эйлера.
• Dot / Cross — скалярное и векторное произведение (звучит как операция с числами, но делает векторную магию).
• Normal — вектор, перпендикулярный поверхности.

🧱 Моделирование и геометрия

• BufferGeometry — сырая геометрия из массивов чисел (без удобных объектов).
• Index / indices — способ “шарить” вершины между треугольниками.
• Instancing — отрисовка множества копий одной геометрии с разными параметрами в один проход, как будто рисуется только 1 объект.
• Culling — техника отрезания невидимых плоскостей модели ради оптимизации, например если они чем-то перекрыты или не попадают в камеру
• Frustum — усечеченная пирамида, модель которой используется для рассчетов попадания чего-либо в область камеры
• Occlusion — это затемнение тех мест, куда свет плохо попадает, потому что они “спрятаны” от света другими частями геометрии. Так же называется AO и имеет разные подвиды, которые можно встретить в настройках графики в играх: RTAO, SSAO, HBAO или HDAO короче штука настолько важная для графона, что каждая крупная компания посчитала нужным изобрести свой алгоритм.
• Render pass — это один “проход” рендера сцены. Визуально это как накладывание слоёв — ты рендеришь сцену несколько раз, каждый раз с разными эффектами.

Для тех кто осилил хотя бы прочитать названия, вот вам видео где реальные разработчики игр, очень пытаются говорить понятно, но слова из словарика выше у них регулярно проскакивают 😄, когда узнаешь эти термины слушать профессионалов становится куда приятнее https://www.youtube.com/watch?v=I-w-w5SoJok

Сегодня у меня стало 200+ подписчиков в канале и 2 ребенка в семье

Было не до генарта сегодня, на какое-то время быть мной станет еще труднее)

Рефракция

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

https://codepen.io/lekzd/pen/vEEXeoY

Воронка

Продолжаю генерировать славянские орнаменты, теперь уже с морфингом одного в другой

https://codepen.io/lekzd/pen/emmEZex

Долгая дорога к генератору славянских вышитых орнаментов

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

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

2. Кажется хочется больше и труднее, чтобы с эффектами, взял шейдер, SDF и пошел ваять славянский кайф

3. Захотелось упростить форму, чтобы получилась более выраженная лента заштрихованная полосочками, сделал

4. Подвернулась Пасха и я натянул свой шейдер как текстуру на 3д сцену с пасхальными яйцами, там научился рисовать SDF примитивы линиями, а не заливкой

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

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

https://codepen.io/lekzd/pen/MYYvqKj

Как можно сделать славянский орнамент в 7 строк

Я по пальцам могу пересчитать тех, кто глянув код из поста, понял откуда берется орнамент и почему так, Ваня Дианов записал целое видео где поясняет шаг за шагом как это пишется.

Это буквально самое понятное и заботливое видео про то как можно рисовать в шейдерах.

https://youtu.be/zblepnHHCSA

Выжигающие эмоджи

Corri Haines написал статью как, можно использовать HDR мониторы ради издевательства над любителями темной темы в Slack, по факту работает в Chromium браузерах и веб-вью на hi-end экранах c поддержкой HDR.

Так как скриншот эффекта сделать невозможно, я сфотографировал его с экрана, сверху Safari, снизу — Chrome. Вживую похоже на лампочку, выжигающую глаза. А на SDR мониках выглядит как будто картинка просто не вышла.

brew install imagemagick

# Adjust the Multiply value up or down to preserve color as opposed to brightness
magick input.png \
  -define quantum:format=floating-point \
  -colorspace RGB \
  -auto-gamma \
  -evaluate Multiply 1.5 \
  -evaluate Pow 0.9 \
  -colorspace sRGB \
  -depth 16 \
  -profile 2020_profile.icc \
  output.png

файл 2020_profile.cc

✅ Работает:

• Chrome на Windows/macOS с HDR-совместимыми мониторами (экран макбука, например).
• Slack на десктопе, если устройство поддерживает HDR.
• В некоторых случаях — на iPhones с HDR-дисплеем (например, iPhone X и новее), но не гарантировано.

❌ Не работает:

• Android-устройства — Slack там не поддерживает HDR-контент вообще.
• Safari — часто неправильно обрабатывает HDR-изображения, либо понижает их до SDR.
• Старые мониторы и экраны без HDR.

Разводящиейся мосты

Пытаюсь что-то выдумать с логотипом @spb_frontend, первого фронтенд-сообщества, к которому я присоединился и уже много лет помогаю организовывать митапы, которые собирают все больше людей, кому интересны новые знания о фронтенде.

Нет, ничего не курил

https://codepen.io/lekzd/pen/bNNYRmj

Как долго человек может оставаться безымянным?

В нашем случае — 10 дней, но можно растянуть до месяца, спустя месяц врачи перестают приходить домой и требуют завести карту в поликлинике, а там уже необходимо имя.

Ко второму ребенку просто поняли, что имя в первые дни жизни — не главное.

Подавайся с докладом на HolyJS!

Я уже который год работаю в над программой конференции и ни одна из конференций не обходится без новых людей, кто тыкнул на ссылку выше и как-нибудь заполнил форму. Никто не рождался хорошим спикером, (кроме Зара, он был рожден для сцены), потому поможем в подготовке даже тем, кому непросто.

— Нужна ли готовая презентация?
— нет, достаточно просто сформированной идеи о которой, можешь рассказать и раскрыть ее за 30-40 минут, все равно созвонимся и подробнее распросим о ней.

— А с какими темами лучше податься?
— у нас обычно просят глубокие темы, а так технари всегда ценят технарей, от которых деплоем пахнет. А если уже не пахнет, ждем историй как отмыться от всего этого и не выгореть.

— Починил баг, получил еще 5, поправил их и потом внес исправления в популярную либу и разобрался как она работает?
— у нас такое любят, подавайся

— Используешь JS чтобы выводить графику, создавать 3д миры, игры или делать роботов?
— такое у нас особено любят, точно подавайся

— Кто-то из спикеров прошлых сезонов рассказал мало чего полезного, а ты можешь больше и лучше?
— так чего ты ждешь, подай доклад!

https://holyjs.ru/callforpapers/

Важнейший обман всей игровой индустрии

Нет, речь не о тех случаях, когда разработчики нам обещали открытый мир, 10 уникальных биомов и 50 часов сюжета, а к релизу дали 3 деревни, качан капусты и 20 часов багов за 25$.
Обман, о котором пойдёт речь, куда тоньше. Его вы даже не замечаете — но без него любая сцена кажется пластиковой и фальшивой.

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

🤔 Что такое Ambient Occlusion?

AO — это метод затенения, который симулирует то, как свет не проникает в узкие щели, под столы, между ящиками и вдоль углов.
Он не зависит от солнца или ламп — AO создаёт ощущение “контактных теней”: будто предмет реально стоит на полу, а не парит.

🧪 SSAO — самый простой (и шумный)

Screen Space Ambient Occlusion стал стандартом с конца 2000-х. Он быстрый и простой: в шейдере проверяется, насколько другие пиксели вокруг близко и могут заслонять текущий.
Если таких много — пиксель затемняется. Всё это работает только на основе глубины и нормали, без знания всей сцены.

🧠 HBAO — тени с горизонтом

Horizon-Based AO — более умный вариант. Он не просто проверяет “близко ли что-то”, а оценивает высоту объекта относительно горизонта вокруг точки.
Если перед точкой есть “стена” — она заслоняет часть света, AO возрастает. Это ближе к реальности и даёт более плавные и точные тени.

🎯 GTAO — почти правда

Ground Truth AO — это попытка добиться почти трассировочного качества, не выходя из screen space.
Он аккуратно отслеживает лучи вдоль поверхности, считает углы обзора и даже применяет физически обоснованные формулы (Lambertian освещённость).

💡 А что насчёт трассировки?

Ray-Traced AO (RTAO) — это уже не фейк. Тут всё честно: из каждой точки запускаются лучи, которые проверяют, есть ли что-то перед ними.
Результат — максимально правдоподобные мягкие тени и реалистичное затенение, особенно в динамике. Но…трассировка это удел бояр с игровыми видеокартами высокого уровня, мы с WebGL стоим в сторонке и пуляем лучи только внутри виртуального мира шейдера, наводя страх и ужас на остальных фронтендеров, своими скиллами в математике.

🎬 Заключение

AO — это невидимый клей, который скрепляет объекты в сцене. Без него — всё кажется оторванным от реальности.

Почему я про нормальные тени не рассказал? Ну давайте это на следующий раз оставим…

Потыкать демку с видео можно тут

Шикарный момент из лекции про Фурье образы на тему отношений сеньоров/лидов и джунов/мидлов

Я даже не поленился и нашел лекцию, откуда это: https://youtu.be/nukL-PkB1g0

Продолжаю разводить мосты

В продолжение темы с разводными мостами: выстроил их вдоль, чтобы получилось как будто плаванье по Неве через мосты.

https://codepen.io/lekzd/pen/XJJZGKq

Доклад о том как на канвасе быстро рисовать

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

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

https://news.1rj.ru/str/tbilisi_js/403

Книжка на эльфийском с переводчиком

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

Хотя может там эльфы работают и были в ужасе от того как я поступил с их языком: у меня английские слова набраны эльфийским шрифтом. А что вы хотели за три часа?

https://codepen.io/lekzd/pen/LEEdNQQ

Спонца

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

Почему именно Спонца?

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

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

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

Немного демок

Three.js и еще одна
PlayCanvas
WebGPU

Однажды я случайно попал в этот дворец, буквально увидев с улицы ОЧЕНЬ ЗНАКОМЫЙ интерьер, было тяжело объяснить жене что же в нем такого. Кстати в реальности он немного отличается от демок, нашел модель, которая лучше повторяет оригинал.

Browser DOOM. Stage 1

На выходных реализовал свой первый намеченный шаг, чтение из WAD файла и отображение карты. Как и многие, кто хотел сделать свой DOOM, я взял за основу проект DIYDoom. Приходилось читать и перепеписывать код с C++ на TypeScript и иногда смотреть в похожие проекты.

О WAD файле

По утверждению id Software происходит от Where's All the Data. Специальный формат данных разработанный также внутри компании и использовался для ранних версий DOOM, Heretic и Hexen. WAD файл хранит описание уровня, текстуры, музыку. WAD состоит из заголовка, наборов сущностей (lumps) и директорий, с которыми необходимо работать, считывая определенные диапазоны байт.

После получения WAD файл через Fetch API, первое, что мне пришло в голову использовать Response.prototype.bytes, который возвращал UInt8Array. Однако это оказалось опрометчивым. Cогласно описанию формата вам придется работать как со знаковыми и беззнаковыми числами, к тому же "различной длины". Здесь приходится Response.prototype.arrayBuffer и работа с DataView и его методами типа getInt16, getUint16, getInt32, getUint32. В результате получилась вот такая читалка: WADLoader и WADReader.

Браузерный Game Loop

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

Помимо этого игровой цикл позволяет устранить зависимость игрового времени от пользовательского ввода и скорости процессора. Все это может выглядеть так:

double lastTime = getCurrentTime();
while (true)
{
  double current = getCurrentTime();
  double elapsed = current - lastTime;
  processInput();
  update(elapsed);
  render();
  lastTime = current;
}

Проблема браузера здесь в том, что мы не можем сделать бесконечный цикл в JavaScript. На каждый тик внутри браузерного Event Loop выполняется задача, микрозадачи и происходит отрисовка. Бесконечный цикл напросто "положит" вкладку браузер. Чтобы этого избежать и чтобы как можно раньше выполнить тик, но уже внутри Game Loop, нам необходимо использовать requestAnimationFrame, в рамках которого мы будем занимать всем вышеперечисленным. Реализация game loop и использование в проекте.

Отрисовка

В проектах написанных на C++ или Python в качестве инструмента для отрисовки используется кросс-платформенная библиотека Simple DirectMedia. Мы же ограничимся CanvasRenderingContext2D и я очень надеюсь, что нам этого хватит более чем. Как ни как в оригинальной игре Doom не использовались ни OpenGL, ни Direct3D.

Что дальше

Следующий большой шаг — отрисовка уроня в (псевдо?) 3D. В прошлом месяце, мне не удалось на основе пары прочитанных статей снаскока ее реализовать. Жду, когда у меня появится очередной большой перерыв, чтобы поработать с деревьями и "школьной" геометрией.

Следить за развитием проекта можно посмотреть здесь:
— repo: https://github.com/ufocoder/browser-doom
— demo: https://ufocoder.github.io/browser-doom