福野泰介の一日一創

せっかくのHDR対応ディスプレイを活かしたい！
キラメキ画像を生成して表示できるHTML拡張タグ、image-hdrを作りました。（上記画像はJPEGでHDRではありませんが、リンク先をHDR対応ディスプレイで見るとキラメキます！）

「code4fukui/image-hdr」
HTMLElementを継承した拡張タグになっていて、ウェブサイトに自由に貼り付けることができ、CSSで大きさなどを自由に調整可能です。

「HDRグラデーション」
1ピクセルあたりRGBA（赤緑青+不透明度)の4要素を使う、Float16Arrayを生成し、幅と高さと共に渡すだけ！ import { ImageHDR } from "./image-hdr.js"; const el = new ImageHDR(); document.body.appendChild(el); const w = 320; const h = 180; const f16 = new Float16Array(w * h * 4); for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { const i = (y * w + x) * 4; const v = (x / (w - 1)) * 5.0; // HDR（1.0超え） f16[i] = v; // R f16[i + 1] = v * 0.5; // G f16[i + 2] = v * 0.2; // B f16[i + 3] = 1.0; // A } } el.setImage({ width: w, height: h, data: f16 });

HDR画像生成を楽しみましょう！
OpenEXR形式での保存も簡単です！（makeKirameki.example.js）

links
- WebGPUを使って実現するHDR
- 浮動小数点数+ZIP圧縮、HDR画像フォーマット、OpenEXR.js