結論と対象読者

DotLCD Cameraでは、入力画像の色空間と、Canvasが画素を読み書きする色空間を意識して設計する必要があります。基本方針としては、再現性を優先する処理経路をsRGBへそろえ、Display P3などの広色域入力は、対応状況を確認したうえで明示的に扱うのが安全です。

この記事は、4階調化の結果がブラウザや端末によって微妙に変わる理由を知りたい人、Canvas 2DとWebGL2の出力差を減らしたい実装者を対象にしています。

30秒要約

  • 色空間は、同じ数値をどの色として解釈するかを決める前提です。
  • DotLCDでは最終出力が4色でも、4階調化する前の明るさ計算に色空間の違いが影響します。
  • Canvas 2DではsRGBとDisplay P3を指定できるAPIがありますが、対応は一様ではありません。
  • WebGL2経路とCanvas 2D経路で色変換や丸めが異なると、同じプリセットでも閾値付近の画素が別階調へ入る場合があります。
  • 再現性を優先する場合は、処理色空間を固定し、実際に取得できたコンテキスト属性と出力を確認します。

概要と背景

DotLCD Cameraの4階調化は、入力画素を明るさへ変換し、複数の閾値で4段階に分ける処理です。このとき、入力のRGB値がどの色空間に属しているかによって、表示される色や明るさの関係が変わります。

sRGBはWebで広く使われる標準的な色空間です。一方、Display P3はsRGBより広い範囲の色を表現できます。広色域の画像を読み込み、途中で暗黙にsRGBへ変換した場合、鮮やかな色が圧縮されるだけでなく、明るさ計算の結果が変化する可能性があります。

DotLCDの最終表示が4色であっても、色空間を無視してよいわけではありません。量子化前の値が少し変わるだけで、閾値付近の画素は別の階調へ分類されます。

特徴・できること

処理色空間を明示できる

Canvas 2Dのコンテキスト作成時や画像データ取得時には、対応環境でsRGBまたはdisplay-p3を指定できる場合があります。実際の属性はgetContextAttributes()などで確認します。

4階調化の再現性を高められる

入力を同じ色空間へ正規化してから明るさを計算すれば、Canvas 2D、WebGL2、書き出し結果の差を小さくしやすくなります。

パレット色と処理色空間を分離できる

4階調の判定はsRGBで統一しつつ、表示パレットだけを対応環境でDisplay P3にする設計も考えられます。ただし、対応していない端末では同じ見た目にならないため、基準出力を別に定義します。

現在の位置付けと利用上の前提

Canvas関連APIには、色空間を指定できる機能があります。ただし、すべてのブラウザ、すべてのCanvas操作、すべての画像形式で同じように動作するとは限りません。ImageData.colorSpaceなど、一部機能は広く一律に利用できる状態ではありません。

DotLCDの初期実装では、次のどちらかを明記するのが現実的です。

  • 変換処理をsRGB基準に固定する
  • 広色域モードを実験機能として分離する

画像のICCプロファイルをブラウザがどの段階で解釈したかを、JavaScriptから完全に把握できるとは限りません。元ファイルのプロファイルを保持したまま書き出すことも、Canvas APIだけでは自動保証されません。

近い対象との比較

対象役割DotLCDでの扱い
sRGBWebで一般的な基準色空間再現性重視の標準候補
Display P3sRGBより広い色域実験的な広色域表示候補
4階調明るさの分類色空間変換後の値に適用
4色パレット各階調の表示色判定処理とは分離
ICCプロファイル元画像の色解釈情報読込・書出しで保持保証は要確認

確認/試行の条件と注意点

  1. sRGB画像とDisplay P3画像を同じ構図で用意します。
  2. Canvas 2Dのコンテキスト属性を取得し、実際の色空間を確認します。
  3. 同じ閾値で4階調化し、境界付近の画素数を比較します。
  4. Canvas 2DとWebGL2で同じ画像を処理し、各階調の分布を比較します。
  5. PNGへ書き出し、別ブラウザと画像編集ソフトで表示差を確認します。
  6. 非対応環境ではsRGBへ戻るのか、処理自体が失敗するのかを確認します。

広色域対応を掲げる場合は、APIが存在するだけでなく、入力、処理、描画、書き出しの各段階で期待した色空間が維持されるかを実測してください。

参考リンク

  • MDN: CanvasRenderingContext2D getContextAttributes
  • https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getContextAttributes
  • MDN: CanvasRenderingContext2D getImageData
  • https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
  • MDN: ImageData colorSpace
  • https://developer.mozilla.org/en-US/docs/Web/API/ImageData/colorSpace
  • MDN: WebGL2RenderingContext drawingBufferColorSpace
  • https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/drawingBufferColorSpace