hdr-canvas Version 0.1.0 veröffentlicht…
Ein Ergebnis meiner Arbeit mit HDR-Inhalten im Browser ist ein NPM-Modul, das auch zur Erstellung der Beiträge in diesem Blog verwendet wurde.
Seit den ersten Versionen ist aber ungefähr ein Jahr vergangen und die Browser-API war damals eher als experimentell zu bezeichnen. Seitdem hat sich einiges geändert – eines der Beispiele hatte in der Zwischenzeit sogar aufgehört zu funktionieren: Die wichtigste Änderung betrifft die Änderung von Uint16 zu Float16 als 16 Bit Pixeldatentyp für HDR.
Da sich Browser schnell weiterentwickeln und der Betrieb älterer Browser aus Sicherheitsgründen nicht zu empfehlen ist (auch wenn manche das anders sehen), ist keine Abwärtskompatibilität zu erwarten.
Neben den notwendigen Anpassungen bietet die neue Version auch Verbesserungen im Bereich der Dokumentation und der Beispiele.
Der Code ist auf GitHub und NPM zu finden.
Die Release Notes
Einleitung
Seit der letzten Veröffentlichung haben sich viele Bereiche der Verarbeitung von HDR-Inhalten im Browser weiterentwickelt. Am auffälligsten ist sicherlich die Einführung von „Float16Array” im „ImageData”-Konstruktor:
- Die WhatWG-Spezifikation, [MDN](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData# Syntax) und [BCD](new ImageData(new Float16Array(4), 1, 1, {pixelFormat:„rgba-float16“})) wurden entsprechend aktualisiert. Sie können Ihren eigenen Browser mit
new ImageData(new Float16Array(4), 1, 1, {pixelFormat:„rgba-float16“})testen.- Noch offen in Firefox
- In Safari hinter einem Flag versteckt
- Chromium hat es ab 137 implementiert: **Der Konstruktor
ImageDataakzeptiert nurFloat16Arrayanstelle vonUint16Array. Dadurch werden ältere Versionen dieses Moduls überflüssig, da sie auf die Chromium-spezifische Lösung ausgerichtet waren. - Wenn Safari dies standardmäßig aktiviert, wird es auch in den Typescript-DOM-Typen enthalten sein.
Wie @reitowo bereits angemerkt hat, gab es eine Änderung an der Methode getContext(„2d“). Der Schlüssel pixelFormat wurde durch colorType ersetzt.
Parallel dazu gab es Änderungen am UltraHDR-Bildformat, insbesondere bei der Kodierung der Metadaten der Gain-Map. Während dies früher in XMP erfolgte, geschieht dies nun gemäß ISO 21496-1. Dies wurde von Google und Apple in neueren Betriebssystemversionen wie Android 15 und iOS 18 übernommen, um eine plattformübergreifende Fragmentierung zu vermeiden. Die UltraHDR-Bibliothek wurde bereits so geändert, dass sie standardmäßig das ISO-Format verwendet.
Derzeit weiß der ThreeJS UHDR-Loader nicht, wie er mit dieser Änderung umgehen soll, siehe mrdoob/three.js#32293.
Wichtige Änderungen und neue Funktionen
- Bessere Unterstützung für offizielle Web-APIs
- Verwendung von
Float16Arrayanstelle vonUint16Array - Verwendung der richtigen Option zur Initialisierung des 2D-Canvas-Kontexts
- Verwendung von
Verbesserte Dokumentation
Die Dokumentation wurde erheblich verbessert. Es gibt jetzt auch eine Website mit Beispielen und API-Dokumentationen.
Beispiele
Die Beispiele aus dem Blog sind nun Teil dieses Repositorys:
tests/site/assets/ts/hdr-three.js.ts– Three JS mit HDR-Texturtests/site/assets/ts/image-slider.ts– Generierte HDR-Inhaltetests/site/assets/ts/main.ts– Funktionserkennung
Diese Beispiele sind auch auf der neuen Dokumentationsseite verfügbar.
Einflussnahme
Da die Änderungen der WhatWG noch nicht übernommen worden waren, mussten einige Probleme in den entsprechenden Repositories angesprochen werden.