Fabri cJS v3.4.0: Filters & maxTextureSize - ограничения производительности / размера

Question

Введение:

Я возился с функциями фильтрации изображений fabri cJS, пытаясь использовать их в своем веб-приложении, но столкнулся с следующее.

Кажется, fabri cJS по умолчанию только устанавливает ограничение размера изображения (textureSize) для фильтров на 2048, то есть самое большое изображение составляет 2048x2048 пикселей.

I Я пытался повысить значение по умолчанию, вызвав fabric.isWebGLSupported(), а затем установив fabric.textureSize = fabric.maxTextureSize, но это все еще ограничивает его размером 4096x4096 пикселей, даже если мой maxTextureSize на моем устройстве находится в диапазоне 16000 ~.

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

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

1 - блокировка рендеринга applyFilters() метод:

Кажется, что текущая функция приложения фильтра блокирует рендеринг в браузере, есть ли способ вызвать ее у вас не блокировать рендеринг, чтобы я мог показать неопределенный c загрузчик или что-то в этом роде?

это так просто, как сделать метод применения фильтра asyn c и вызвать его из другого места в приложении? (Я использую vue для контекста, с webpack / babel, который заполняет async / await et c.)

2 - ограничения по размеру:

Is Есть ли способ обойти ограничение размера изображений? Я пытаюсь отфильтровать изображения размером до 4800x7200 пикселей

Я могу придумать, по крайней мере, один из способов сделать это: «разбить» изображение на более мелкие изображения, применить фильтры и затем сшить их обратно. все вместе. Но я волнуюсь, что это может повлиять на производительность, так как в этом процессе будет много операций экспорта и инициализации холста.

Я удивлен, что fabri cjs не делает этого "чанкинг" "по умолчанию, поскольку это довольно обширная библиотека, и я думаю, что они уже подошли к тому моменту, когда они используют шейдеры WebGL (для меня это черный ящик) для фильтрации под капотом на производительность, есть ли лучший способ сделать это?" это?

Мое другое решение было бы отправить изображение в службу (один я ручная или ранее платная), которая применяет фильтры где-то в облаке и возвращает его пользователю, но это пока я не предпочитаю решение.

Для контекста я в основном использую fabric.Canvas и fabric.StaticCanvas для инициализации холстов в моем приложении.

Любые идеи / помощь с это было бы здорово.

Answer 1

я написал фильтрующий бэкэнд для fabri cJS с мистером Скоттом Сивардом (и ему тоже благодарны), и я могу дать вам несколько ответов.

Жесткий блок до 2048

Многие macbook с интегрированной видеокартой Intel сообщают, что максимальный размер текстуры составляет 4096, но затем они достигают sh экземпляра webgl при значении выше 2280. Это широко происходило в 2017 году, когда была написана фильтрация webgl. 4096 оставил бы непокрытым по умолчанию много ноутбуков. Не забывайте и о мобильных телефонах. Вы знаете свою базу пользователей, вы можете увеличить предел, который позволяет ваша видеокарта и что позволяет холст в вашем браузере. Окончательное изображение, насколько большой может быть текстура, должно быть скопировано на холст и отображено. (холст имеет различный максимальный размер в зависимости от браузера и устройства)

Блокировка рендеринга Метод applyFilters ()

Webgl является syn c, как я понял. Создание параллельного выполнения в потоке для операций фильтрации порядка 20-30 мс (иногда всего пара мс в chrome) кажется чрезмерным.

Также учтите, что я пробовал это, но когда больше чем 4 контекста webgl были открыты в firefox, некоторые были бы отброшены. Так что я решил один раз за один раз.

Конечно, фильтрация без webgl может занять больше времени, что может быть выполнено, вероятно, в отдельном потоке, но fabri cJS - это обобщенная c библиотека, которая делает и векторы, и фильтрация, и сериализация, на планшете уже много чего, производительность фильтрации не так уж и плоха. Но я открыт, чтобы спорить об этом.

Chunking

Редактор Shutterstock использует fabri cJS и является основной причиной, почему был написан бэкэнд webgl. Редактор также имеет чанкинг и может фильтровать изображения размером 2048 пикселей. Мы не выпустили это как с открытым исходным кодом, и я не планирую спрашивать. Такой тип листов ограничивает типы фильтров, которые вы можете написать, потому что в коде есть сведения об ограниченной части изображения за раз, даже просто размытие становится сложным.

Здесь есть описание процесса разбиения, написано для случайного читателя и не только программиста, это просто сообщение в блоге. https://tech.shutterstock.com/2019/04/30/canvas-webgl-filtering-concepts

Generi c Замечание о блокировке рендера

Так что в fabri cJS есть несколько предварительно написанных фильтров, сделанных с помощью шейдеров. Время, которое я здесь отмечаю, исходит из моей памяти и не проверено

Время, которое проходит фильтрация изображения:

• Загрузка изображения в GPU (я не знаю, сколько мс)
• Компиляция шейдера (до 40 мс, зависит)
• Запуск шейдера (например, 2 мс)
• Загрузка результата на GPU (например, 0 мс или 13 зависит от того, какой метод используется)

Теперь при первом запуске фильтра для одного изображения:

• Изображение загружается
• Фильтр скомпилирован
• Запуск шейдера
• Загруженный результат

Во второй раз вы делаете это:

• Запуск шейдера
• Результат скачано

При добавлении нового фильтра или изменении фильтра:

• Новый скомпилированный фильтр
• Шейдер или оба шейдера запускаются
• Загруженный результат

Наиболее распространенные ошибки в сборке приложений с фильтрацией, которые я заметил:

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

Посмотрите официальную простую демонстрацию: http://fabricjs.com/image-filters

Используйте ползунки для фильтрации , примените еще больше фильтров, мне все кажется довольно гладким.