L@ iP "& X K" Y^ҚTy"a"* z0uN(x`X@3`sɣ g" ݞg\CKNjxO ldr<#ҭo ?]eY bid'ddates2025-12-27T12:25:00etitlexZ16bit浮動小数点数RGBを使ったHDR画像を表示するHTML拡張タグ、image-hdrdtagsc#jscurlxhttps://fukuno.jig.jp/4903dbodyy
せっかくの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
cimgxGhttps://img.sabae.cc/data/2065/fe45cecf-50b3-407d-a2a5-ab7594afde03.jpg