Ага

в теории еще на сервере можно настройки кэширования посмотреть, хотя опять же у браузера могут быть свои идеи

смотря как собирать, по идее можно настроить автобилд

ребята, вопрос) есть задача сделать такой фон в 2d: два спрайта на весь канвас, у верхнего спрайта мягкая маска для перехода между спрайтами. верхний спрайт будет само собой двигаться приоткрывая нижний слой. как это можно сразу сделать правильно и максимально производительно (кэши там всякие)? раньше фон делали через html, и 30% канваса были прозрачные, а теперь фон нужно анимировать. хочу сразу сделать как следует)

что такое мягкая маска?

такие вопросы должны сопровождаться картинкой

градиентная

если хочешь полностью контролировать что происходит - пиши шейдер.

беспокоит только размер контейнера на фоне во весь канвас

тебе пикси или что?

пикси да

фоллбэк на 2д надо или webgl достаточно?

мы на webgl только ориентируемся, был только один случай для китайского рынка когда пришлось вставить легаси, но там все лагало

как по мне тут просто 1 шейдер и все

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

если ты применишь spectorjs ты увидишь там опр. последовательность webgl операций

из-за маски градиентной будет доп . bindFramebuffer и дроуколл полноэкранный который нахер нужен

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

в таком случае один дроуколл, каждый пиксель заливается один раз - всё оптимально :)

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