福野泰介の一日一創

RGBがそれぞれ8bit、256階調しかない狭い色空間で満足ですか？
rgba8bit を脱出して、ダイナミックレンジが広い、rgba16float HDRの世界を操りましょう！

「HDR DEMO by WebGPU (rgba16float + Float16Array)」
WebGPUを使うと、Canvasのデータフォーマットとして、各色を16bitの浮動小数で表せる、rgba1floatが使えます！白(=#FFFFFF)を超えた輝きが表現できます。

「RUN on ES-Jam」
WebGPU用の言語、WGSLでの記述をいじって、輝く白を出してみましょう。

//return textureLoad(t, vec2(tx, ty), 0); return vec4(5.0, 5.0, 5.0, 1.0); // 白(=#FFFFFF)を超えた輝く白

「code4fukui/hdr-demo」
GitHubでも公開！

links
- HDRで広がる表現、RGB/HSLより自然な色指定法LCh
- そろそろRGBを卒業しよう、display-p3を使ったより鮮やかな色表現とHDRな未来
- HDR on Web、ハイコントラストで色高解像度を届けよう、16bit対応PNGエンコーダーとAVIF比較 UPNG-es
- 高品質画像フォーマット、AVIF.js

WebPより新しいフォーマットとしてAVIF（エーブイアイエフ）があるので、こちらも「squoosh」を元に対応してみました。

圧縮にかかる時間は長めですが、表示には動画再生用のハードウェアがきっとうまくやってくれるので高速なはず。

JavaScript/WebAssemblyでの変換はちょっと遅いとは思いますが、手軽に使えて便利です。

import { AVIF } from "https://code4fukui.github.io/AVIF/AVIF.js"; const bin = await Deno.readFile('./example.avif'); const image = AVIF.decode(bin); console.log(image); const bin2 = AVIF.encode(image); console.log(bin2.length);

JPEGファイルからAVIFに変換する jpg2avif.js も合わせて実装。

WebPの上位互換として使え、普及してきたHDRにも対応しているので、AVIFを標準とするのがいいかも。

links
- そろそろウェッピー(WebP)を標準に？ WebP.js

画像形式でPNGやJPEGが入り混じるのが地味に面倒なので、WebPにしてみることを検討します。

自分のブログを検索してみると2011年時点では透過対応がなくPNGの置き換えができませんでしたが、その後対応していました。（参考、WebPへの要望、３つ（透過対応をぜひ！））

「code4fukui/WebP」
オープンソースのJavaScript/WebAssmeblyによる画像変換プロジェクト「squoosh」内の「codecs/webp」を、bin2js を使って、ブラウザからもDenoからも使える、ESモジュール化としてまとめました。

WebAssmembly(wasm)は、バイナリファイルを読み込んで生成する必要がありますが、ファイルかどうかや、取得元のディレクトリの扱いが面倒です。バイナリをJavaScriptのデータとして bin2js 変換すれば、importして使えて便利！

WebP.js として、PNGやJPEGと同様、簡単に扱えるようになりました。

import { WebP } from "https://code4fukui.github.io/WebP/WebP.js"; const webpbin = await Deno.readFile('./example.webp'); const image = WebP.decode(webpbin); console.log(image); const webpbin2 = WebP.encode(image); console.log(webpbin2.length);

3つ目の要望、もうちょっといい名前は引き続き叶えてほしいところ。
また、macのアプリ、プレビューでの書き出しでWebP対応していないのも痛い。