Фотошоп теперь в сети!
На основе WebAssembly + Emscripten, веб-компонентов + Lit, Service Workers + Workbox и новых веб-API. Chrome и Adobe с удовольствием сотрудничали.
Выпуск настольного приложения Photoshop в Интернете (photoshop.adobe.com) представляет собой огромную веху в переносе очень сложного и графически насыщенного программного обеспечения в браузер. Это стало возможным благодаря многолетним усилиям инженеров Adobe и сотрудничеству с поставщиками браузеров, такими как Chrome, для продвижения Интернета вперед.
В этом примере мы внимательно рассмотрим открытые расширенные веб-возможности, предпринятую оптимизацию производительности и будущие возможности, которые это открывает. Путешествие Photoshop в Интернет также является отличным чтением.
Концепция: Photoshop в браузере
На протяжении десятилетий Photoshop был золотым стандартом в области редактирования изображений и графического дизайна, обеспечивая возможности для творчества в Windows и macOS. Но мир новых возможностей открывается, если отсоединить его от рабочего стола.
Интернет обещает повсеместный и удобный доступ. Пользователи могут мгновенно начать редактировать и сотрудничать с помощью всего лишь браузера, установка не требуется. И они могут легко подхватывать информацию на разных устройствах.
Возможность связывания позволяет совместно использовать рабочие процессы. Доступ к документам Photoshop можно получить по URL-адресу, а не спрятать в файловой системе. Авторы могут легко отправить ссылку соавторам.
Кросс-платформенная гибкость. Интернет как среда выполнения абстрагирует базовые операционные системы. Photoshop может работать с пользователями на нескольких платформах.
Но на пути реализации этой идеи стояли серьезные технические проблемы, требующие переосмысления того, как такое интенсивное приложение, как Photoshop, могло бы работать в Интернете.
Новые веб-возможности раскрывают потенциал Photoshop
В последние годы появились новые возможности веб-платформы, которые, наконец, позволяют использовать приложения класса Photoshop посредством как стандартизации, так и реализации. Инженеры Adobe новаторски использовали несколько ключевых API нового поколения:
Высокопроизводительный доступ к локальным файлам с помощью частной файловой системы Origin
Операции Photoshop включают чтение и запись потенциально объемных PSD-файлов. Для этого требуется эффективный доступ к локальной файловой системе. Новый Origin Private File System API (OPFS) обеспечивает быструю, ориентированную на происхождение виртуальную файловую систему.
const opfsRoot = await navigator.storage.getDirectory();
OPFS позволяет быстро создавать, читать, записывать и удалять файлы. Например:
// Create file const file = await opfsRoot.getFileHandle('image.psd', {create: true}); // Get read/write handle const handle = await file.createSyncAccessHandle(); // Write contents handle.write(buffer); // Read contents handle.read(buffer); // Delete file await file.remove();
За самые быстрые синхронные операции веб-работники могут получить FileSystemSyncAccessHandle
.
Эта локальная высокопроизводительная файловая система имела решающее значение для реализации ресурсоемких рабочих процессов Photoshop в браузере.
Раскрытие возможностей WebAssembly
WebAssembly был важным компонентом для воссоздания вычислительно интенсивной обработки графики Photoshop в JavaScript. Adobe использовала компилятор Emscripten для портирования существующей кодовой базы C/C++ в модули WebAssembly.
Некоторые возможности WebAssembly были критически важны:
- Потоки — Photoshop использует рабочие потоки для параллельного выполнения таких задач, как обработка фрагментов изображений:
// Thread function void* tileProcessor(void* data) { // Process image tile data return NULL; } // Start worker threads pthread_t thread1, thread2; pthread_create(&thread1, NULL, tileProcessor, NULL); pthread_create(&thread2, NULL, tileProcessor, NULL); // Wait for threads to finish pthread_join(thread1, NULL); pthread_join(thread2, NULL);
- SIMD — векторные инструкции SIMD ускоряют манипуляции с пикселями и фильтрацию.
- Обработка исключений. Исключения C++ широко используются в кодовой базе Photoshop.
- Создание потоковой передачи. Модули WASM Photoshop размером более 80 МБ требуют потоковой компиляции.
- Отладка. Поддержка отладки Chrome WebAssembly в DevTools оказалась неоценимой.
Использование широкой цветовой гаммы P3
Цветовой спектр sRGB бледнеет по сравнению с более широкой гаммой P3, но он уже давно является единственным вариантом в сети.
Photoshop использует новую функцию color()
и Canvas API, чтобы раскрыть всю яркость P3 и обеспечить более точное представление цвета.
color: color(display-p3 1 0.5 0)
Гибкость пользовательского интерфейса с помощью веб-компонентов
Photoshop является частью более широкой экосистемы Adobe Creative Cloud. Использование стандартизированной стратегии Веб-компонентов, основанной на Lit, обеспечивает согласованность пользовательского интерфейса во всех приложениях.
Элементы пользовательского интерфейса Photoshop взяты из библиотеки Adobe Spectrum Web Components, которая реализует систему дизайна Adobe.
Веб-компоненты Spectrum:
- Доступно по умолчанию – разработано с учетом существующих и новых спецификаций браузеров для поддержки вспомогательных технологий.
- Легкий — реализован с помощью LitElement для минимальных накладных расходов.
- На основе стандартов — создано на основе стандартов веб-компонентов, таких как пользовательские элементы и Shadow DOM.
- Независимость от платформы. Работайте с любой платформой благодаря поддержке на уровне браузера.
Кроме того, все приложение Photoshop создано с использованием веб-компонентов на основе Lit. Шаблоны Lit и виртуальные различия DOM позволяют эффективно обновлять пользовательский интерфейс. Инкапсуляция веб-компонентов также упростила интеграцию кода React других команд, когда это необходимо.
В целом, пользовательские элементы веб-компонентов, встроенные в браузер, в сочетании с производительностью Lit обеспечили гибкость, необходимую Adobe для создания сложного пользовательского интерфейса Photoshop, сохраняя при этом эффективность.
Оптимизация производительности Photoshop в браузере
В то время как новые веб-возможности обеспечили основу, интенсивное настольное приложение, такое как Photoshop, все еще нуждалось в серьезной работе по отслеживанию и повышению производительности, чтобы обеспечить первоклассный опыт работы в Интернете.
Кэширование ресурсов и кода с помощью Service Workers
Service Workers позволяют веб-приложениям кэшировать свои ресурсы, код и другие ресурсы локально, что значительно ускоряет загрузку после первого посещения. Хотя Photoshop еще не является полностью автономным приложением, он уже использует Service Workers для кэширования своих модулей WebAssembly, сценариев и других ресурсов.
Такое кэширование существенно влияет на производительность нагрузки. После первого посещения последующие загрузки обычно происходят очень быстро (M1 Macbook):
Adobe использовала библиотеки Workbox, чтобы упростить интеграцию кэширования Service Worker в процесс сборки.
Оптимизация кэшированных ресурсов V8
В V8 реализованы некоторые оптимизации при возврате ресурсов из кэшей Service Worker:
- Ресурсы, кэшированные во время
install
, быстро компилируются, а код немедленно кэшируется для обеспечения стабильной и высокой производительности. - Ресурсы, кэшированные через Cache API во время
fetch
, получают оптимизированное кэширование при второй загрузке, быстрее, чем обычное кэширование. - V8 определяет важность ресурсов на основе их кэширования и более агрессивно компилирует.
Это позволяет оптимизировать массивные кэшированные модули Wasm Photoshop.
Потоковая передача и кэширование больших модулей WebAssembly
Кодовая база Photoshop требует нескольких больших модулей WebAssembly, размер некоторых из которых превышает 80 МБ. Поддержка потоковой компиляции в V8 и Chrome позволяет эффективно обрабатывать эти массивные модули.
Кроме того, при первом запросе модуля WebAssembly от Service Worker V8 генерирует и сохраняет оптимизированную версию для кэширования, что критически важно для большого размера кода Photoshop.
Многопоточность для параллельных графических операций
Многие основные операции обработки изображений в Photoshop, такие как преобразование пикселей, можно значительно ускорить за счет параллельного выполнения в нескольких потоках. Поддержка потоков WebAssembly открывает возможности использования многоядерных устройств для выполнения ресурсоемких графических задач.
Это позволяет Photoshop использовать те же подходы многопоточности, что и на рабочем столе, для критически важных функций обработки изображений, портированных в WebAssembly.
Отладка WebAssembly для оптимизации
Надежная поддержка отладки WebAssembly имела решающее значение для диагностики и устранения узких мест производительности во время разработки.
Способность Chrome DevTool профилировать код WASM, устанавливать точки останова и проверять расширенные переменные отражает возможности отладки JavaScript:
Интеграция машинного обучения на устройстве с TensorFlow.js
Последние версии Photoshop в Интернете включают возможности искусственного интеллекта с использованием TensorFlow.js. Запуск моделей на устройстве, а не в облаке, повышает конфиденциальность, снижает задержку и снижает затраты.
«TensorFlow.js — это библиотека машинного обучения с открытым исходным кодом от Google, предназначенная для разработчиков JavaScript, которая может запускать клиентскую часть в браузере. Это наиболее зрелый вариант веб-ML с комплексной поддержкой серверных операторов WebGL и WebAssembly, а в будущем также появится возможность использовать серверную часть WebGPU в браузере для повышения производительности по мере развития новых веб-стандартов».
Функция Выбрать тему использует машинное обучение для автоматического выделения основного объекта переднего плана изображения, что значительно ускоряет сложный выбор.
Модель была преобразована из TensorFlow в TensorFlow.js, чтобы обеспечить локальное выполнение:
// Load Select Subject model const model = await tf.loadGraphModel('select_subject.json'); // Run inference on image tensor const {mask, background} = model.execute(imgTensor); // Refine selection from mask
Adobe и Google совместно решили проблемы синхронизации между кодом Photoshop WebAssembly и TensorFlow.js, разработав API-интерфейс прокси для Emscripten. Это обеспечивает плавную интеграцию между платформами.
«Поскольку команда Google улучшила производительность аппаратного исполнения TensorFlow.js с помощью различных поддерживаемых серверных частей (WebGL, WASM, Web GPU), это привело к тому, что модели увидели повышение производительности от 30% до 200%( особенно для более крупных моделей, которые, как правило, демонстрируют наибольший выигрыш), обеспечивая производительность, близкую к реальному времени, прямо в браузере».
Ключевые модели были оптимизированы с упором на критически важные для производительности операции, такие как Conv2D
. Photoshop может выбирать, запускать ли модели на устройстве или в облаке, в зависимости от потребностей в производительности.
Более подробную информацию можно найти в статье TensorFlow.js Photoshop.
Будущее Photoshop в Интернете
Общая доступность Photoshop в Интернете представляет собой огромную веху, но это лишь малая часть возможностей.
Photoshop будет продолжать расширяться в Интернете, добавляя новые функции благодаря постепенному усовершенствованию по мере того, как поставщики браузеров развивают стандарты и производительность. И Фотошоп – это только начало. Adobe планирует активно размещать весь свой пакет Creative Cloud в Интернете, открывая доступ к множеству более сложных дизайнерских приложений в браузере.
Сотрудничество между Adobe и разработчиками браузеров будет продолжать способствовать развитию Интернета как платформы для все более амбициозных приложений за счет совершенствования стандартов и повышения производительности. Впереди нас ждут захватывающие времена!
Пробуем Photoshop в Интернете
Веб-версия Photoshop в настоящее время доступна в настольных версиях:
- Хром 102+
- Край 102+
- Фаерфокс 111+
и работа над устранением пробела в поддержке Safari продолжается.
Вы можете попробовать это сегодня на photoshop.adobe.com. Будущее творчества и дизайна в Интернете у вас под рукой!