福野泰介の一日一創

256兆色で表現するHDR画像を保存する形式にOpenEXR（オープンイーエックスアール）というものがあることを知りました。macのプレビューにも、OpenEXR保存オプションあり！

RGBが各8bit、1677万色の古典的画像の標準、BMP（ビットマップ）のまさにHDR版。シンプルな形式はJavaScriptでも簡単に実装できるとのことで、用意してみました。

「code4fukui/OpenEXR」
ByteWriter.js、ByteReader.jsを使って、16bit浮動小数点数の配列をヘッダー付きで保存します。32bit浮動小数点数バージョンもありますが、当面は16bit版でいいでしょう。

「exapmle.exr」
おもしろいみはあまりないですが、HDR画像です。HDR対応環境で開くと、白(=#FFFFFF)を超えた、明るさを確認できます。

links
- WebGPUを使って実現するHDR

福井高専で初開催、53回目のサイバーフライデー！

熟成魚、小浜産マダイの昆布締め by 福井県大生 せいは！

福井高専ロボコン部によるロボット体験＆解説！

Amazonで8800円で買える、メカナムホイール筐体をラズパイでラジコン化したもの！

発売したてのボードゲーム「ポケモンごいた」の点数を計算するアプリ！

アフレルから新商品、6軸ロボットアームAI教材セット！

Scratchでフーリエ変換！

HTMLとCSSだけでリバーシを実装！ script.css!?

鯖江商工会議所と福井高専のコラボ企画から発表スタート！

鯖江市内の企業の悩み、福井高専学生のアイデア、大募集！

福井高専卒社長、株式会社ミナカノ社長、田能さんによるプレゼン！

福井高専卒社長、株式会社いやしStudioの浅妻さんによるプレゼン！

熟成魚プレゼン by 福井県立大学生 せいは！

ロボットの目を実装しよう by アフレル！

オープンデータが活躍、福井県観光連盟佐竹さん！

WebGPUでHDR化したサイフラの背景！

HDRとは、進化した色の三原色。こちら、MacBook AirをiPhoneでマクロ撮影したもの。

いままで使われてきた色は、RGB（赤、緑、青）それぞれ8bit、0-255の256段階。
3乗した、約1677万色。でも、現実を表現するには幅も細かさも足りません。

これからの時代の色は、16bit浮動小数（半精度浮動小数）！
16bit浮動小数の有効数種63488の3乗、256兆色表現できます。仮数部も10bit、0-1024と十分に豊富！

福井高専電気電子科出身の起業家、エネルギーを学ぶマインクラフト、エネクラを広める株式会社いやしStudioの浅妻さん、敦賀の後藤さん、XRiceのおかくんと！

朝5時半に漁師さんから直接調達、4日間寝かせたマダイのおいしい熟成魚、ありがとう！

福井高専コミュニティプラザでの開催、なかなかよかったので、またいつか！

links
- CyberFriday / サイバーフライデー
- WebGPUを使って実現するHDR

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