Graphite — новый графический бекенд

Что? какой еще бекенд?

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

А раньше что было?

Ganesh! Бекенд который использовал ANGLE! Если понятнее:

— Чтобы что-то нарисовать Chrome использует Skia, библиотеку, которая все рисует.

— Изначально Skia использовала программную растеризацию (CPU), но с ростом сложности веб-страниц (анимации, сложные эффекты) этого стало недостаточно.

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

— OpenGL устаревает и плохо поддерживается на некоторых платформах (например, Windows использует Direct3D, а macOS — Metal).

— Ganesh изначально работал через OpenGL, но Chrome не мог напрямую полагаться на него из-за проблем с совместимостью.

— Но появился ANGLE. Без него пришлось бы писать отдельные реализации Ganesh под каждый графический API, что сложно и неэффективно.

—————

🤬 Так зачем новый бекенд если они разобрались там уже?

Если кратко — скорость, засчет многопоточности. Graphite вместо ANGLE использует Dawn, который является кроссплатформенной имплементацией WebGPU, который лучше параллелится на разные потоки.

Короче теперь ПОЛНЫЙ ответ на знаменитый вопрос с собеседований "что происходит от ввода адреса до пикселей на экране" стал еще сложнее. 😀

Оригинальная статья: https://blog.chromium.org/2025/07/introducing-skia-graphite-chromes.html

Видео монтаж на веб-технологиях

Не без удивления узнал, что автор канала Onigiri использует веб-технологии для создания графики для видео. Там где стандартом давно является After Effects (22.9$/мес), появляется новый игрок: JavaScript (15 бессонных ночей/мес).

Однажды Кирилл рассказывал доклад про монтаж видеороликов используя браузер. Там он объяснял идею, которая выглядело весьма перспективно. А раз до одной идеи не договариваясь додумались как минимум двое, может она начнет новый тренд?

Кстати, визуализация с видео из поста сделана при помощи техники Ray marching, так как она лучше всего подходит для построения фигур из математических формул. Само видео с кучей других визуализаций, да еще и по-русски тут: https://www.youtube.com/watch?v=DzLKsbY1idg

Теперь мой генарт еще и в игре

Не уверен что будет в таком виде, но посмотрим. Огромное спасибо Ване, который сделал возможность писать шейдеры на TypeScript, отчего их можно компилировать как для WebGL так и WebGPU.

Почему код шейдеров сложный, или Заговор хранителей GLSL

1. Числа — это не числа, а целые миры

В обычном коде float x = 0.5; — это просто число. В шейдерах это:

— 0.5 для одного пикселя,
— -42.0 для другого,
— NaN для третьего (потому что почему бы и нет).

А если переменная зависит от времени, то поздравляю: теперь ты должен держать в голове 4D-пространство. Представь, что пытаешься объяснить коту, почему мячик, который он видит, на самом деле — это волна в пространстве-времени. Кот не поймёт. И ты тоже.

Весело? А ведь именно так и надо размышлять чтобы сделать отражения, как я показывал недавно.

2. Оптимизация, или "Ты что, делишь? Ты смеешь делить?!"

Если в обычном программировании деление — это просто /, то в шейдерах это красная тряпка для быка.

Умножение на обратное? Да, конечно, мы же не варвары.
Деление? Только если готов объяснить на собеседовании, почему твой шейдер тормозит на Intel HD Graphics 2008 года.
Однажды я использовал деление в тестовом задании. Меня не взяли. Теперь я пишу a * 0.001 вместо a / 1000 даже в блокноте.

3. Циклы и IF — это русская рулетка

— Написал for? Прекрасно, а теперь угадай, развернёт ли его компилятор или оставит как есть.
— Добавил if? Отлично, теперь твой шейдер может работать быстрее… или в 10 раз медленнее, потому что ветвления на GPU — это как игра в кости с Сатаной.

Совет: Если у заказчика видеокарта старше него самого — просто беги. Беги без оглядки.

4. Функции? Какие функции?

В шейдерах нет стека вызовов. Вообще. Это значит:

Хочешь использовать функцию? Инлайнь или умри.
Любишь DRY (Don’t Repeat Yourself)? Забудь. Теперь ты — CTRL+C, CTRL+V с молитвой.
Потому что через месяц, когда придётся менять одну строчку в этом "удобном" шейдере, ты проклянёшь себя за красивую архитектуру.

Вывод

Код шейдеров сложный не потому, что он действительно сложный. А потому что так хочет культ GLSL-жрецов. Они сидят в своих чёрных мантиях, шепчут discard; в полночь и смеются, глядя, как мы пытаемся оптимизировать ветвления.

Но если серьёзно — шейдеры это магия. А магию никогда не бывает просто понять. 🧙‍♂️💻 или нет?

Ссылка на шейдер с видео: https://www.shadertoy.com/view/33VGzW

Археология JavaScript, new Date() между прошлым и будущим

Мы думали, что отменили Судный день (Y2K). Ан нет — просто отсрочили его, запрятав в недрах new Date().

Когда-то из-за "проблемы 2000 года" (Y2K) COBOL-разработчики стоили дороже золота. Их вытаскивали из пенсии, чтобы те переводили "98" в "1998"за бешеные деньги. А потом... 2000 год наступил, мир не рухнул, и COBOL снова отправили в музей. Но JavaScript, как истинный археолог, сохранил эту логику на века.

1. "0", "00", "0000" — магия или безумие?
Передаёшь строку в new Date() и попадаешь в лабиринт временных парадоксов:

new Date("0")    // 1 января 2000 (логично? нет)  
new Date("00")   // 1 января 2000 (ну ладно...)  
new Date("0000") // 1 января 0000 (💀 эпоха Иисуса?)  
new Date("000000") // 1 января 2000 (а это уже издевательство)  

Вывод: Если цифр не 4 — JS додумывает за вас. "0000"? Серьёзно? Кто-то явно пересмотрел "Назад в будущее".

2. "42" vs "51" — путешествие во времени

new Date("42") // 2042 (будущее! 🚀)  
new Date("51") // 1951 (прошлое! 📻)  

Почему?

В 1995 году, когда создавался JS, Y2K-паника была в разгаре.
Чтобы отличать 20XX от 19XX, придумали гениальное правило:

00–49 = 2000–2049
50–99 = 1950–1999

Результат: "51" — это 1951, а "49" — 2049. Потому что "так исторически сложилось".

3. Раз есть правило, давайте его проверим:

new Date("0")  // 1 января 2000
new Date("1")  // 1 января 2001
new Date("2")  // 1 февраля 2001 🤪 
new Date("02") // 1 февраля 2001 😅😅😅 
...
new Date("12") // 1 декабря 2001
new Date("13") // Invalid Date, верните мой 2013-й год!
...
new Date("32") // 2032 

a few moments later...

new Date("106") // 106 год, римляне завоевали Дакию, осуждаем

Ну, нормально же разговаривали...4 символа, я уже запомнил

Теперь попробуем всунуть лишний ноль

new Date("010") // 2001 🤬🤬🤬

и пунктуацию

new Date("1.4")  // 2001, 4 января
new Date("1/4")  // 2001, 4 января
new Date("1>4")  // 2001, 4 января, плевать какой знак
new Date("1+4")  // Invalid Date, а, нет, тут уже считает за таймзону

Вывод

Date — это машина времени, собранная на коленке в 90-е.

P.S. Если ваш код вдруг сломался 1 января 2050 года — вы теперь знаете, кого винить. 😈

Ну а если зашло, то на https://jsdate.wtf можно еще примеров найти

Буду снова выступать со стендапом: в этот раз про то как работается когда у тебя 2 детей)

🔥 Внимание, сенсация! Google добавил ИИ в new Date()!

"Мы долго думали, как сделать new Date() удобнее для новичков. Temporal API — это, конечно, круто, но зачем учить новые методы, если можно просто... спросить дату как у друга? Поэтому мы тайно обучили ИИ парсить любые текстовые запросы. Ну почти любые. Главное — верить в магию!"

Клод Сонне, ведущий инженер V8

Пример работы нового API:

new Date("В какой день Валенсия и Барселона сыграли 2-3?");
// Sat Feb 03 2001 00:00:00 GMT+...

Если вы дочитали до сюда, вы великолепны! что там на самом деле:

1. Любой мусор до цифр — пропускается
"В какой день Валенсия и Барселона сыграли" → игнорируется (как в коде V8: "any garbage is allowed").
Первые две цифры (2-3) → месяц-день
Автоматически превращается в 02-03 (или 03-02, если вы живёте в EN локали).

2. Год — 2001 (потому что «логично же»)

3. Вопросительный знак — это «для атмосферы» ?, !, ... — всё съедается, как пробелы.

Бонусом экзестенциальная драма:

new Date("Когда я родился? я помню что в 12-10, (но мама говорит, что это было поздно ночью)");
// Mon Dec 10 2001 00:00:00 GMT+...

"Функционал проверялся только в Chrome. В остальных браузерах возможно Invalid Date, потому что они 'не понимают искусства'."

P.S. Temporal API в ярости.

Вчера подвергся дополнительной мотивации

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

— Блин, да у них свет от факела к камере привязан, невозможно бегать с видом от 3-го лица в темноте
— Да, погоди, уже разбираюсь, говорю я
— Не, ну это совсем не удобно конечно
— Да-да, я согласен, уже правлю
— Хотя может они это для оптимизации сделали, знаете там наверное расчеты еще одного источника света нагружают, а у них же браузер...
— Да какая оптимизация! Это баг, я правлю прямо сейчас!

Так и доделал все быстро)

PS запись стрима вот: https://www.youtube.com/live/I7LwXvcDgak, где этот момент был не вспомню)

В CSS появились ветвления

Не так давно обнаружил, что уже 2 месяца как в обычном Chrome работает функция if() в CSS (статья на MDN)

Теперь можно делать так:

div {
   margin: if(media(width > 700px): 0 auto;)
}

/* if(<if-condition> : <value>) */

или так:

div {
   color: if(
      supports(color: lch(77.7% 0 0)): 3px solid lch(77.7% 0 0);
      else: 3px solid #c0c0c0;
   )
}

ну и вообще это скорее напоминает множественную if...else конструкцию:

padding: if(
  media(width < 480px), 20px;
  media(width < 960px), 40px;
  media(width < 1200px), 80px;
  else: 0px;
)

Ну и не обошлось без веселого, можно использовать сколько угодно else, но выполнится только первый, все условия после него игнорируются:

div {
  background: if(
    style(--scheme: ice): white;
    else: green;
    style(--scheme: fire): orange;
    else: red;
  );
}

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

Доделали портал для Tesera

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

Все анимации, размеры, скорости выглядят случайно, но на самом деле тут кроется одна особенность шейдеров: в них нет функции random чтобы получить случайное значение. Как же быть?

1. Идеальный шум

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

2. Числа Цикады

Числа цикад, о которых идёт речь, это 13 и 17. Эти числа являются простыми и представляют собой циклы развития некоторых видов периодических цикад в Северной Америке. Цикл в 13 или 17 лет позволяет этим цикадам избегать синхронизации с циклами развития хищников, которые обычно имеют более короткие жизненные циклы.

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

Наглядный Computer science в работах Sam Rose

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

https://samwho.dev