Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web

Web技術を最⼤限活⽤して RAW画像を現像する sssssota / #fec_tokyo

⾃⼰紹介 ssssota (冨川宗太郎) sは4つテックリード（写真・現像は素人） { x: "ssssotaro", gh: "ssssota",
cameras: ["S5IIX", "S9", "fp L"] }

RAW画像とは何かカメラをやっているとRAW画像という概念に出会う（最近ではiPhoneなどのスマホでもRAW画像を出力できる）一般的な写真のフォーマットであるJPEGはRGB各8bit、計24bitで色を表現するすると (28)3=約1680万色になる

RAW画像とは何かカメラのセンサーは各色12bit〜16bitといった解像能を持つ 8bit→1680万色だったのが14bit→4兆色になるすると、ファイルサイズがでかくなる。（30MiB〜100MiB）

RAW画像とは何かそんなとても大きいRAW画像カメラメーカー各社が独自規格で出力してくれるオープンな規格(TIFF, DNG)も存在するが日本の大手メーカー各社は使わず...

RAW画像を現像するとにかくデカい、独自規格なバイナリ一般的にはデスクトップアプリケーション・モバイルアプリケーションでネイティブな並列処理、GPU処理を活用しながら行う

Webエンジニアなので Webで完結させたい

resolve.photos

概観

課題の整理 1. カメラメーカー各社の独自フォーマット 2. デカいファイルに対する処理速度

LibRaw RAW画像を読めるOSS メーカー独自の規格の多くを自前でサポートするのは困難ただしC++

C++のLibRawをブラウザで動かすためにWASMを使う WASMへのコンパイルにはEmscriptenを使う libraw.wasm

WebAssemblyの制約現在も仕様の策定が進行しているが、JS - WASM間で文字列や構造体などの非数な値をやりとりするのは難しいメモリ空間は共有できるので、構造体をメモリに直接読み書きする手法を用いる

メモリから構造体を読むために C/C++の構造体は定義からメモリレイアウトが確定する struct Sample { uint8_t foo; uint16_t bar; }

typed-cstruct 構造体の定義をTypeScriptで書き下すと型付きでバイナリを読み書きできるようになるライブラリ構造体がたくさんあると手書きが大変なので @typed-cstruct/generator でCのヘッダーファイルからTypeScriptも生成

WebAssemblyは速いが WebAssemblyはそれなりに速いが、 JavaScriptと同じスレッドで動くためにメインスレッドでヘビーな利用をするとUIが硬直する

Web Worker WebAssemblyで動かすようなCPUヘビーな処理は往々にしてWeb Workerに逃がす Web Workerに逃がすことでUIをブロッキングせずに処理を進める Comlinkやbidcを用いてWeb Workerとの通信を
抽象化するのが一般的

レンダリングするここまででビットマップ画像が得られる Canvas APIではRGB各色16bitのビットマップを扱えない WebGL 2.0を使うことになる

現像する現状resolve.photosはノイズ除去や収差補正はサポートせずとある動画編集ソフトを参考にノードベースのLUT適用を実現

⾼速なLUT適⽤ 6000x4000ピクセルの色を取得、１つずつLUTに入れて... とするととても遅い 1つのことを繰り返しするのはGPUが得意 → WebGPU WebGL2でレンダリング時に

LUTをテクスチャとして読み込み、WebGLで画像に対し適用ノードベースで複数のノード(=LUT)があることもあるので WebGLのフラグメントシェーダーは動的に生成する WebGLを⽤いたLUT適⽤

概観

改善余地 • そもそも機能数が全く足りてない ◦ 技術的におもしろい部分だけ作って満足している節がある ◦ PoCとしては十分... • WebAssembly Multithreading
◦ 検証不足 • RAW画像解析をそもそもGPGPUできる説 ◦ 現実的ではないが夢はある • 最近はAI現像っていうのが流行ってるらしい ◦ マルチモーダルなローカルLLMがWebにきたらアツいですね

おわり参考 • https://github.com/ssssota/resolve.photos • https://github.com/ssssota/libraw.wasm • https://github.com/LibRaw/LibRaw • https://github.com/ssssota/typed-cstruct

Web技術を最大限活用してRAW画像を現像する / Developing RAW Images...