Еще несколько лет назад было трудно представить себе идею запуска такого сложного программного обеспечения, как Photoshop, непосредственно в браузере. Однако, используя различные новые веб-технологии, Adobe теперь разместила в Интернете публичную бета-версию Photoshop.
Последние три года Chrome работал над расширением возможностей веб-приложений, которые хотят расширить границы возможностей браузера. Одним из таких веб-приложений является Photoshop. Еще несколько лет назад было трудно представить себе идею запуска такого сложного программного обеспечения, как Photoshop, непосредственно в браузере. Однако, используя различные новые веб-технологии, Adobe теперь разместила в Интернете публичную бета-версию Photoshop.
(Если вы предпочитаете смотреть, а не читать, эта статья также доступна в виде видео .)
В этом посте мы хотели бы впервые поделиться подробностями того, как наше сотрудничество расширяет возможности Photoshop в Интернете. Вы также можете использовать все API-интерфейсы Adobe и многое другое в своих собственных приложениях. Обязательно ознакомьтесь с публикациями в нашем блоге, посвященными веб-возможностям, для вдохновения и просмотрите наш трекер API , чтобы узнать о последних и самых лучших продуктах, над которыми мы работаем.
Почему Photoshop появился в сети
По мере развития Интернета единственное, что не изменилось, — это основные преимущества, которые веб-сайты и веб-приложения предлагают по сравнению с приложениями для конкретных платформ. Эти преимущества включают в себя множество уникальных возможностей, таких как возможность связывания, эфемерность и универсальность, но они сводятся к обеспечению простого доступа, легкого совместного использования и эффективного сотрудничества.
Простое преимущество URL-адреса заключается в том, что любой может щелкнуть по нему и мгновенно получить к нему доступ. Все, что вам нужно, это браузер. Нет необходимости устанавливать приложение или беспокоиться о том, в какой операционной системе вы работаете. Для веб-приложений это означает, что пользователи могут иметь доступ к приложению, своим документам и комментариям. Это делает Интернет идеальной платформой для совместной работы, которая становится все более важной для творческих и маркетинговых команд.
Google Docs был пионером такого упрощенного доступа. Большинство из нас знают, как легко запустить документ, отправить кому-нибудь ссылку и сразу же перейти не только к приложению, но и к конкретному документу или комментарию. С тех пор множество замечательных приложений, таких как те, которые мы демонстрировали в прошлом , приняли эту модель, и теперь Photoshop тоже получит выгоду.
Как Photoshop появился в сети
Интернет начинался как платформа, подходящая только для документов, но за свою историю он значительно разросся. Ранние приложения, такие как Gmail, показали, что более сложная интерактивность и приложения, по крайней мере, возможны. С тех пор мы стали свидетелями впечатляющей совместной разработки, когда веб-приложения раздвигают границы возможного, а производители браузеров отвечают дальнейшим расширением веб-возможностей. Последняя версия этого благотворного цикла — это то, что сделало Photoshop доступным в Интернете.
Adobe ранее вывела Spark и Lightroom в Интернет и уже много лет была заинтересована в выпуске Photoshop в Интернет. Однако они были заблокированы ограничениями производительности JavaScript, отсутствием хорошей цели компиляции для их кода и отсутствием веб-возможностей. Читайте дальше, чтобы узнать, что Chrome встроен в браузер для решения этих проблем.
Портирование WebAssembly с помощью Emscripten
WebAssembly и его набор инструментов C++ Emscripten стали ключом к открытию возможностей Photoshop для выхода в Интернет, поскольку это означало, что Adobe не нужно было начинать с нуля, а можно было использовать существующую кодовую базу Photoshop. WebAssembly — это переносимый двоичный набор инструкций, поставляемый во всех браузерах и разработанный как цель компиляции для языков программирования. Это означает, что такие приложения, как Photoshop, написанные на C++, можно портировать непосредственно в Интернет, не требуя переписывания на JavaScript. Чтобы начать портировать самостоятельно, ознакомьтесь с полной документацией Emscripten или следуйте этому пошаговому примеру переноса библиотеки .
Emscripten — это полнофункциональная цепочка инструментов, которая не только помогает вам скомпилировать C++ в Wasm, но и предоставляет уровень трансляции, который превращает вызовы API POSIX в вызовы веб-API и даже преобразует OpenGL в WebGL. Например, вы можете портировать приложения, ссылающиеся на локальную файловую систему, и Emscripten предоставит эмулированную файловую систему для поддержания функциональности.
Emscripten уже некоторое время может выкладывать в Интернет большую часть Photoshop, но это не обязательно происходит достаточно быстро. Мы постоянно работали с Adobe, чтобы выяснить, где есть узкие места, и улучшить Emscripten. Photoshop зависит от многопоточности. Внедрение динамической многопоточности в WebAssembly было критически важным требованием.
Кроме того, обработка ошибок на основе исключений очень распространена в C++, но плохо поддерживается в Emscripten и WebAssembly. Мы работали с группой сообщества WebAssembly в W3C над улучшением стандарта WebAssembly и инструментов для него, чтобы добавить исключения C++ в WebAssembly.
Emscripten работает не только с большими приложениями, но также позволяет портировать библиотеки или небольшие проекты! Например, вы можете увидеть , как можно скомпилировать популярную библиотеку OpenCV в Интернет через Emscripten.
Наконец, WebAssembly предлагает расширенные примитивы производительности, такие как инструкции SIMD , которые значительно повышают производительность вашего веб-приложения. Например, Halide необходим для производительности Adobe, и здесь SIMD обеспечивает ускорение в среднем в 3–4 раза, а в некоторых случаях — в 80–160 раз.
Отладка WebAssembly
Ни один крупный проект не может быть успешно завершен без соответствующих инструментов для работы, и именно по этой причине команда Chrome разработала полнофункциональную поддержку отладки WebAssembly. Он обеспечивает поддержку пошагового прохождения исходного кода, установку точек останова и приостановку исключений, проверку переменных с расширенной поддержкой типов и даже базовую поддержку оценки в консоли DevTools!
Обязательно ознакомьтесь с авторитетным руководством по использованию отладки WebAssembly .
Высокопроизводительное хранилище
Учитывая, насколько большими могут быть документы Photoshop, критической потребностью в Photoshop является возможность динамического перемещения данных с диска в память при перемещении пользователя. На других платформах это обычно достигается посредством сопоставления памяти с помощью mmap , но в Интернете это было практически невозможно — то есть до тех пор, пока дескрипторы доступа к частной файловой системе Origin не были разработаны и реализованы в качестве пробной версии Origin! О том, как использовать этот новый API, вы можете прочитать в документации .
Цветовое пространство P3 для холста
Исторически цвета в Интернете определялись в цветовом пространстве sRGB , которое является стандартом середины девяностых годов и основано на возможностях мониторов с электронно-лучевой трубкой. За прошедшие четверть века камеры и мониторы прошли долгий путь, и были стандартизированы многие более крупные и функциональные цветовые пространства. Одним из самых популярных современных цветовых пространств является Display P3 . Photoshop использует Display P3 Canvas для более точного отображения изображений в браузере. В частности, изображения с ярким белым цветом, яркими цветами и деталями в тенях будут отображаться как можно лучше на современных дисплеях, поддерживающих данные Display P3. API Display P3 Canvas находится в стадии разработки для обеспечения возможности отображения с расширенным динамическим диапазоном .
Веб-компоненты и освещение
Photoshop — это известное большое и многофункциональное приложение с сотнями элементов пользовательского интерфейса, поддерживающее десятки рабочих процессов. Приложение создается несколькими командами с использованием различных инструментов и методов разработки, но его разрозненные части должны объединиться в единое высокопроизводительное целое.
Чтобы решить эту задачу, Adobe обратилась к веб-компонентам и библиотеке Lit. Элементы пользовательского интерфейса Photoshop взяты из библиотеки Adobe Spectrum Web Components , легкой и производительной реализации системы дизайна Adobe, которая работает с любой платформой или вообще без нее.
Более того, все приложение Photoshop создано с использованием веб-компонентов на основе Lit. Опираясь на встроенную модель компонентов браузера и инкапсуляцию Shadow DOM, команда обнаружила, что легко интегрировать несколько «островков» кода React, предоставленных другими командами Adobe.
Кэширование сервисного работника с помощью Workbox
Сервисные работники действуют как программируемый локальный прокси-сервер, перехватывая сетевые запросы и отвечая данными из сети, долгоживущими кэшами или смесью того и другого.
В рамках усилий команды V8 по повышению производительности, когда работник службы впервые отвечает кэшированным ответом WebAssembly, Chrome генерирует и сохраняет оптимизированную версию кода — даже для многомегабайтных сценариев WebAssembly, которые часто встречаются в кодовой базе Photoshop. . Аналогичная предварительная компиляция происходит, когда JavaScript кэшируется сервис-воркером на этапе install . В обоих случаях Chrome может загружать и выполнять оптимизированные версии кэшированных скриптов с минимальными затратами времени выполнения.
Веб-версия Photoshop использует это преимущество, развертывая сервис-воркер, который предварительно кэширует многие из своих сценариев JavaScript и WebAssembly. Поскольку URL-адреса для этих сценариев генерируются во время сборки, а логика поддержания актуальности кешей может быть сложной, они обратились к набору библиотек, поддерживаемых Google, под названием Workbox , чтобы создать своего сервис-воркера как часть процесса сборки.
Сервис-воркер на базе Workbox и кэширование сценариев движка V8 привели к заметному повышению производительности. Конкретные цифры различаются в зависимости от устройства, на котором выполняется код, но, по оценкам команды, эти оптимизации сократили время, затрачиваемое на инициализацию кода, на 75%.
Что будет дальше с Adobe в Интернете
Запуск бета-версии Photoshop — это только начало, и у нас уже есть несколько улучшений производительности и функций, поскольку Photoshop приближается к полному запуску после этой бета-версии. Adobe не останавливается на Photoshop и планирует активно расширять Creative Cloud в Интернете, делая его основной платформой как для создания творческого контента, так и для совместной работы. Это позволит миллионам начинающих авторов рассказать свою историю и получить выгоду от инновационных рабочих процессов в Интернете.
Поскольку Adobe продолжает расширять границы возможного, команда Chrome продолжит наше сотрудничество, чтобы продвигать Интернет для Adobe и динамичной экосистемы веб-разработчиков в целом. Поскольку другие браузеры также используют эти современные возможности браузеров, мы рады видеть, что Adobe также делает свои продукты доступными и там. Следите за будущими обновлениями, поскольку мы продолжаем развивать Интернет!
Дополнительную информацию о доступе к Photoshop в Интернете (бета-версия) можно получить в Справочном центре Adobe .