L@iIL_@X K"Y^ҚTy"a"*z0uN(x`X@fO?KUg ,E0[\ .A!0:D+8SLD9Q^ Ybid"ddates2025-12-22T23:55:00etitlex!WebGPUを使って実現するHDRdtagsm#js #gpu #HDRcurlxhttps://fukuno.jig.jp/4898dbodyy 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
cimgxGhttps://img.sabae.cc/data/2060/628fa923-e873-4637-a547-85d071180e05.jpg