Vor wenigen Jahren war es noch undenkbar, Software wie Photoshop direkt im Browser auszuführen. Mithilfe verschiedener neuer Webtechnologien hat Adobe jedoch jetzt eine öffentliche Betaversion von Photoshop im Web veröffentlicht.
In den letzten drei Jahren haben wir in Chrome an Webanwendungen gearbeitet, die die Grenzen dessen, was im Browser möglich ist, erweitern. Eine solche Webanwendung ist Photoshop. Vor wenigen Jahren war es noch undenkbar, Software wie Photoshop direkt im Browser auszuführen. Mithilfe verschiedener neuer Webtechnologien hat Adobe jedoch jetzt eine öffentliche Betaversion von Photoshop im Web veröffentlicht.
Wenn du lieber ein Video ansiehst, findest du diesen Artikel hier.
In diesem Beitrag möchten wir zum ersten Mal Details dazu teilen, wie wir Photoshop durch die Zusammenarbeit ins Web bringen. Sie können alle von Adobe verwendeten APIs und mehr in Ihren eigenen Apps verwenden. In unseren Blogbeiträgen zu Webfunktionen finden Sie weitere Informationen. In unserem API-Tracker erfahren Sie, an welchen neuen Funktionen wir gerade arbeiten.
Warum Photoshop im Web verfügbar ist
Im Laufe der Zeit hat sich das Web weiterentwickelt, aber die Hauptvorteile von Websites und Webanwendungen gegenüber plattformspezifischen Anwendungen sind gleich geblieben. Zu diesen Vorteilen gehören viele einzigartige Funktionen wie die Möglichkeit, Links zu erstellen, sitzungsspezifische Inhalte zu erstellen und universelle Inhalte zu erstellen. Im Grunde genommen ermöglichen sie jedoch einen einfachen Zugriff, eine einfache Freigabe und eine hervorragende Zusammenarbeit.
Der Vorteil einer URL besteht darin, dass jeder darauf klicken und sofort darauf zugreifen kann. Sie benötigen lediglich einen Browser. Sie müssen keine Anwendung installieren und sich keine Gedanken über das verwendete Betriebssystem machen. Bei Webanwendungen bedeutet das, dass Nutzer Zugriff auf die Anwendung und ihre Dokumente und Kommentare haben können. Das macht das Web zur idealen Plattform für die Zusammenarbeit, was für Kreativ- und Marketingteams immer wichtiger wird.
Google Docs war ein Pionier dieser vereinfachten Zugriffsmöglichkeit. Die meisten von uns wissen, wie einfach es ist, ein Dokument zu erstellen, den Link an eine andere Person zu senden und sofort nicht nur die Anwendung, sondern auch das jeweilige Dokument oder den Kommentar aufzurufen. Seitdem wurde dieses Modell in einer Vielzahl von Anwendungen eingesetzt, z. B. in unseren früheren Demos. Jetzt profitiert auch Photoshop davon.
So kam Photoshop ins Web
Das Web begann als Plattform, die nur für Dokumente geeignet war, hat sich aber im Laufe der Zeit dramatisch weiterentwickelt. Frühe Apps wie Gmail zeigten, dass komplexere Interaktivität und Anwendungen zumindest möglich waren. Seitdem haben wir eine beeindruckende gemeinsame Entwicklung erlebt, bei der Web-Apps die Grenzen des Möglichen verschieben und Browseranbieter reagieren, indem sie die Webfunktionen weiter ausbauen. Die neueste Iteration dieses positiven Kreislaufs hat es ermöglicht, Photoshop im Web zu nutzen.
Adobe hatte bereits Spark und Lightroom für das Web veröffentlicht und war schon seit vielen Jahren daran interessiert, Photoshop für das Web zu entwickeln. Sie wurden jedoch durch die Leistungseinschränkungen von JavaScript, das Fehlen eines geeigneten Compile-Ziels für ihren Code und die fehlenden Webfunktionen behindert. Im Folgenden erfahren Sie, welche Funktionen Chrome für diese Zwecke bietet.
WebAssembly-Portierung mit Emscripten
WebAssembly und die C++-Toolchain Emscripten waren der Schlüssel zur Bereitstellung von Photoshop im Web, da Adobe nicht bei null anfangen musste, sondern die vorhandene Photoshop-Codebasis nutzen konnte. WebAssembly ist ein portabler Binärbefehlssatz, der in allen Browsern verfügbar ist und als Kompilierungsziel für Programmiersprachen entwickelt wurde. Das bedeutet, dass Anwendungen wie Photoshop, die in C++ geschrieben sind, direkt ins Web portiert werden können, ohne dass sie in JavaScript neu geschrieben werden müssen. Wenn Sie selbst eine Portierung vornehmen möchten, lesen Sie die vollständige Emscripten-Dokumentation oder folgen Sie diesem Beispiel für die Portierung einer Bibliothek.
Emscripten ist eine vollständige Toolchain, mit der Sie nicht nur C++ in Wasm kompilieren, sondern auch eine Übersetzungsschicht bereitstellen können, die POSIX-API-Aufrufe in Web-API-Aufrufe umwandelt und sogar OpenGL in WebGL konvertiert. Sie können beispielsweise Anwendungen portieren, die auf das lokale Dateisystem verweisen. Emscripten stellt dann ein emuliertes Dateisystem bereit, um die Funktionalität beizubehalten.
Mit Emscripten konnten schon seit einiger Zeit die meisten Teile von Photoshop im Web genutzt werden, aber die Geschwindigkeit war nicht immer ausreichend. Wir haben kontinuierlich mit Adobe zusammengearbeitet, um Engpässe zu identifizieren und Emscripten zu verbessern. Photoshop setzt Multithreading voraus. Eine wichtige Anforderung war es, dynamisches Multithreading in WebAssembly zu implementieren.
Außerdem ist die fehlerbasierte Fehlerbehandlung in C++ sehr verbreitet, aber in Emscripten und WebAssembly nicht gut unterstützt. Wir haben mit der WebAssembly Community Group im W3C zusammengearbeitet, um den WebAssembly-Standard und die zugehörigen Tools zu verbessern und C++-Ausnahmen in WebAssembly zu integrieren.
Emscripten funktioniert nicht nur für große Anwendungen, sondern ermöglicht auch das Portieren von Bibliotheken oder kleineren Projekten. So können Sie beispielsweise die beliebte OpenCV-Bibliothek mit Emscripten für das Web kompilieren.
Außerdem bietet WebAssembly erweiterte Leistungsprimitive wie SIMD-Anweisungen, die die Leistung Ihrer Webanwendung erheblich verbessern. Halide ist beispielsweise für die Leistung von Adobe unerlässlich. Hier bietet SIMD eine durchschnittliche Beschleunigung von 3–4 x und in einigen Fällen eine Beschleunigung von 80–160 x.
WebAssembly-Debugging
Kein großes Projekt kann ohne die entsprechenden Tools erfolgreich abgeschlossen werden. Aus diesem Grund hat das Chrome-Team eine umfassende Unterstützung für das WebAssembly-Debugging entwickelt. Es bietet Unterstützung für das Durchlaufen des Quellcodes, das Setzen von Haltepunkten und das Pausieren bei Ausnahmen, die Variablenprüfung mit Unterstützung für Rich-Type-Daten und sogar grundlegende Unterstützung für die Auswertung in der DevTools-Konsole.
Sehen Sie sich den autoritativen Leitfaden zum WebAssembly-Debugging an.
Hochleistungsspeicher
Angesichts der Größe von Photoshop-Dokumenten ist es für Photoshop entscheidend, Daten dynamisch von der Festplatte in den Arbeitsspeicher zu verschieben, wenn der Nutzer den Bildausschnitt verändert. Auf anderen Plattformen wird dies in der Regel durch Speicherzuordnung über mmap erreicht. Im Web war dies jedoch nicht leistungsfähig möglich – bis die Zugriffs-Handles für das private Dateisystem des Ursprungs entwickelt und als Ursprungstest implementiert wurden. In der Dokumentation erfahren Sie, wie Sie diese neue API nutzen können.
P3-Farbraum für Canvas
Bisher wurden Farben im Web im sRGB-Farbraum angegeben. Dieser Standard aus der Mitte der 1990er-Jahre basiert auf den Möglichkeiten von Kathodenstrahlröhrenmonitoren. Kameras und Monitore haben in den letzten 25 Jahren große Fortschritte gemacht und viele größere und leistungsfähigere Farbräume wurden standardisiert. Einer der beliebtesten modernen Farbräume ist Display P3. In Photoshop wird ein Display-P3-Canvas verwendet, um Bilder im Browser genauer darzustellen. Insbesondere Bilder mit leuchtendem Weiß, leuchtenden Farben und Details in Schatten werden auf modernen Displays, die Display P3-Daten unterstützen, bestmöglich dargestellt. Die Display P3 Canvas API wird weiterentwickelt, um High Dynamic Range-Displays zu ermöglichen.
Webkomponenten und Lit
Photoshop ist eine bekanntermaßen umfangreiche und funktionsreiche Anwendung mit Hunderten von UI-Elementen, die Dutzende von Workflows unterstützen. Die App wird von mehreren Teams mit einer Vielzahl von Tools und Entwicklungspraktiken erstellt. Die verschiedenen Teile müssen jedoch zu einem zusammenhängenden, leistungsstarken Ganzen zusammenkommen.
Um diese Herausforderung zu meistern, hat sich Adobe für Web-Komponenten und die Lit-Bibliothek entschieden. Die UI-Elemente von Photoshop stammen aus der Spectrum Web Components-Bibliothek von Adobe. Diese schlanke, leistungsstarke Implementierung des Adobe-Designsystems funktioniert mit jedem Framework oder auch ohne Framework.
Außerdem wurde die gesamte Photoshop-App mit Lit-basierten Webkomponenten erstellt. Dank des integrierten Komponentenmodells des Browsers und der Shadow-DOM-Kapselung konnte das Team einige „Inseln“ von React-Code von anderen Adobe-Teams problemlos einbinden.
Service Worker-Caching mit Workbox
Dienstworker agieren als programmierbarer lokaler Proxy, der Netzwerkanfragen abfängt und mit Daten aus dem Netzwerk, langlebigen Caches oder einer Mischung aus beiden antwortet.
Im Rahmen der Bemühungen des V8 zur Leistungssteigerung wird in Chrome eine optimierte Version des Codes generiert und gespeichert, wenn ein Service Worker zum ersten Mal mit einer im Cache gespeicherten WebAssembly-Antwort antwortet. Das gilt auch für WebAssembly-Scripts mit mehreren Megabyte, die in der Photoshop-Codebasis häufig vorkommen. Eine ähnliche Vorkompilierung findet statt, wenn JavaScript von einem Service Worker während des install-Schritts im Cache gespeichert wird. In beiden Fällen kann Chrome die optimierten Versionen der im Cache gespeicherten Scripts mit minimalem Laufzeitoverhead laden und ausführen.
Photoshop im Web nutzt dies, indem ein Dienst-Worker bereitgestellt wird, der viele seiner JavaScript- und WebAssembly-Scripts vorab im Cache speichert. Da die URLs für diese Scripts zum Zeitpunkt des Builds generiert werden und die Logik zur Aktualisierung von Caches komplex sein kann, nutzte das Team eine Reihe von von Google verwalteten Bibliotheken namens Workbox, um den Dienst-Worker im Rahmen des Build-Prozesses zu generieren.
Ein Workbox-basierter Service Worker in Kombination mit dem Script-Caching der V8-Engine führte zu messbaren Leistungsverbesserungen. Die konkreten Zahlen variieren je nach Gerät, auf dem der Code ausgeführt wird. Das Team schätzt jedoch, dass durch diese Optimierungen die Zeit für die Codeinitialisierung um 75 % reduziert wurde.
Die Zukunft von Adobe im Web
Die Einführung der Photoshop-Beta ist erst der Anfang. Wir arbeiten bereits an mehreren Leistungs- und Funktionsverbesserungen, um Photoshop nach der Betaphase vollständig einzuführen. Adobe setzt nicht nur auf Photoshop, sondern plant auch, Creative Cloud stark in Richtung Web auszuweiten. So soll sie zu einer zentralen Plattform für die Erstellung kreativer Inhalte und die Zusammenarbeit werden. So können Millionen von Creatorn, die zum ersten Mal Inhalte erstellen, ihre Geschichte erzählen und von innovativen Workflows im Web profitieren.
Adobe treibt die Grenzen des Machbaren immer weiter voran. Das Chrome-Team wird die Zusammenarbeit fortsetzen, um das Web für Adobe und die dynamische Webentwicklungsbranche im Allgemeinen voranzubringen. Da andere Browser diese modernen Browserfunktionen ebenfalls einführen, freuen wir uns, dass Adobe seine Produkte auch dort verfügbar macht. Wir halten Sie auf dem Laufenden, während wir das Web weiter voranbringen.
Weitere Informationen zum Zugriff auf Photoshop im Web (Beta) finden Sie in der Adobe-Hilfe.