Будни разработчика

#статья дня

В чатике всплыл очередной вопрос про эффект ambilight.

Если кто не помнит, фоновая интерактивная подсветка ambilight — от Ambient Light — пришла к нам от телевизоров Филипс, а нынче есть даже на YouTube.

Мы уже рассматривали пару вариантов создания такого эффекта, но не для видео.

А для видео же — есть прекрасная статья на Smashing Magazine: https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/

Описывается создание нужного эффекта на основе canvas, со всеми пояснениями и кодом. Даже хук для React по пути сделали.

Вообще, до меня не сразу дошло, почему именно холст. Почему бы просто не запустить два видео и одно размыть?

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

#ambilight #video #canvas

👍8❤2

www.tgoop.com/htmlshit/3478

3.32K viewsSergey Bekharsky, edited  Mar 3 at 07:05

#статья дня

В чатике всплыл очередной вопрос про эффект ambilight.

Если кто не помнит, фоновая интерактивная подсветка ambilight — от Ambient Light — пришла к нам от телевизоров Филипс, а нынче есть даже на YouTube.

Мы уже рассматривали пару вариантов создания такого эффекта, но не для видео.

А для видео же — есть прекрасная статья на Smashing Magazine: https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/

Описывается создание нужного эффекта на основе canvas, со всеми пояснениями и кодом. Даже хук для React по пути сделали.

Вообще, до меня не сразу дошло, почему именно холст. Почему бы просто не запустить два видео и одно размыть?

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

#ambilight #video #canvas

BY Будни разработчика