カラーマネジメントシステムの概要とカラマネプログラミング初歩

Slide 1

Slide 1 text

カラーマネジメントシステムの概要とカラマネプログラミング初歩 1

Slide 2

Slide 2 text

自己紹介とかゔぇい • 小さいSIerでWPF+ASP.NET WebAPIな小さい業務アプリとか作ってます • VS2002の頃からずっと .NET メイン (たまにJavaとかFlexとか) • Twitter : @veigr • Blog : http://www.cat-ears.net/ 2

Slide 3

Slide 3 text

自己紹介とか  カラマネはあくまで趣味でやってます  色に関しては素人ゴメンナサイ • なので内容はあまり保証しません • 一応業界人にレビューしてもらってるので、極端に間違ったことは書いてないハズ…… 3

Slide 4

Slide 4 text

内容  対象 • Windowsクライアントアプリ開発者 • 主にWPF、ストアアプリ  目標 • カラマネAPIを使う上で困らない程度の知識 • カラマネAPIを使って画像を表示 4

Slide 5

Slide 5 text

内容  構成 1. カラーマネジメントシステムの概要 カラマネプログラミングのための基礎知識 2. カラマネプログラミング初歩  WPFとWinRTでのカラマネ対応画像表示の方法 MSCCの話はここで一瞬だけ出ます…… 5

Slide 6

Slide 6 text

カラーマネジメント知ってますか？  カラーマネジメント  ＝カラマネ  ＝色管理 6

Slide 7

Slide 7 text

カラーマネジメント出来てないと困ること 7

Slide 8

Slide 8 text

カラーマネジメント出来てないと困ることモニタ同士の色が合わない！ 8

Slide 9

Slide 9 text

カラーマネジメント出来てないと困ること画像を印刷したらモニタの色と違う！ 9

Slide 10

Slide 10 text

その悩みは… 10

Slide 11

Slide 11 text

カラーマネジメントシステム(CMS) を使えば解決できます！ 11

Slide 12

Slide 12 text

カラーマネジメントシステム(CMS)とは？ 12

Slide 13

Slide 13 text

理想zz カラーマネジメントシステム(CMS)とは？ 13 現実 CMS これ

Slide 14

Slide 14 text

カラーマネジメントシステム(CMS)とは？  この理想を実現するために作られた仕組みがカラーマネジメントシステム (CMS) • ワークフローに一貫した色の管理をもたらす • 円滑なカラーコミュニケーションが図れる • → 要するにいつ何処で誰が見ても同じ色！にできる 14

Slide 15

Slide 15 text

そもそもなんで色が合わないの？ 15

Slide 16

Slide 16 text

そもそもなんで色が合わないの？一言で言えば…… 出力デバイスによって発色の特性が違うから！ 16

Slide 17

Slide 17 text

例：モニタの特性 17

Slide 18

Slide 18 text

出せる色の範囲(色域)  同じ緑(0, 255, 0)でもモニタによって鮮やかさが違ったりとか  設定では変更できないことが大半  一部の高級モニタは色域エミュレーション機能がある 18 例：モニタの特性出典: 「Adobe RGB color space」(2014年12月27日 01:31 UTC)『Wikipedia』 https://en.wikipedia.org/wiki/Adobe_RGB_color_space

Slide 19

Slide 19 text

白の色(色温度/白色点)  黒体の絶対温度ケルビン(K)で表す  値が低いと黄色っぽくなる  値が高いと青っぽくなる  一般用途で6500K、印刷用途で5000K あたりが標準的  モニタの設定で変更できることが多い(ノートPCは無理かも) 19 例：モニタの特性出典: 「色温度」(2015年1月16日 09:29 UTC)『ウィキペディア日本語版』 https://ja.wikipedia.org/wiki/%E8%89%B2%E6%B8%A9%E5%BA%A6

Slide 20

Slide 20 text

明るさ(輝度)  バックライトの明るさ  大抵設定で変更できる 20 例：モニタの特性

Slide 21

Slide 21 text

階調再現  グラディエーションの滑らかさ  色のバランス  ガンマ  など  設定で変更できることは少ないかも 21 例：モニタの特性出展: 「液晶モニタの階調を整える内部ガンマ補正」第7回 "曲線美"が色再現性の決め手になる？――液晶モニタの「ガンマ」を知ろう | EIZO株式会社 http://www.eizo.co.jp/eizolibrary/other/itmedia02_07/

Slide 22

Slide 22 text

デバイスの特性豆：この特性情報によって表現される空間を、そのデバイスの色空間(カラースペース)という 22

Slide 23

Slide 23 text

デバイスの特性  これら特性がメーカー、使用パネル、個体ごとに異なるため、色が合わない 23

Slide 24

Slide 24 text

じゃあどうやって色を合わせれば？ 24

Slide 25

Slide 25 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい 25

Slide 26

Slide 26 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい 26 アプリ出したい色 RGB 値出したい色が実際に表示される RGB値が知りたい！

Slide 27

Slide 27 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい • 人力の場合 27 アプリ出したい色 RGB 値観察調節

Slide 28

Slide 28 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい • CMSの場合 28 アプリ出したい色 RGB 値計測モニタの特性情報計算カラーセンサー

Slide 29

Slide 29 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい • そのモニタに渡すべきRGB値が算出できれば良い 29

Slide 30

Slide 30 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい • そのモニタに渡すべきRGB値が算出できれば良い • RGB値 = 出したい色(絶対色) × 何か 30

Slide 31

Slide 31 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい • そのモニタに渡すべきRGB値が算出できれば良い • RGB値 = 出したい色(絶対色) × 何か • 何か = 人力の場合… このRGB値だとこの色になるな！という認識 31

Slide 32

Slide 32 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい • そのモニタに渡すべきRGB値が算出できれば良い • RGB値 = 出したい色(絶対色) × 何か • 何か = CMSの場合…このRGB値だとこの色になるという計測値 • これで自動計算できるはず！ 32

Slide 33

Slide 33 text

じゃあどうやって色を合わせれば？  例：目的の色をモニタに出力したい • そのモニタに渡すべきRGB値が算出できれば良い • RGB値 = 出したい色(絶対色) × 何か • 何か = CMSの場合…このRGB値だとこの色になるという計測値 • これで自動計算できるはず！ • →その計測値はすなわちモニタの特性情報 33

Slide 34

Slide 34 text

じゃあどうやって色を合わせれば？  この原理を組み合わせれば色が合わせられるはず！ • →その仕組みがカラーマネジメントシステム 34 絶対色特性情報特性情報特性情報特性情報

Slide 35

Slide 35 text

じゃあどうやって色を合わせれば？  つまり各デバイスの特性情報さえ用意できれば、デバイス間で色を合わせられるということ 35 絶対色特性情報特性情報特性情報特性情報

Slide 36

Slide 36 text

じゃあどうやって色を合わせれば？  そのデバイスの特性情報を記述したものを ICCプロファイルと言う (単にプロファイルとも) 36 絶対色 ICCプロファイル ICCプロファイル ICCプロファイル ICCプロファイル

Slide 37

Slide 37 text

ICCプロファイルこういうやつ 37

Slide 38

Slide 38 text

ICCプロファイル  ICC Profile Inspector とか  ColorSync Utility (Mac標準) とかで中身が見れます 38

Slide 39

Slide 39 text

ICCプロファイル  出荷時設定のものは大抵メーカーが配布してる  初めからインストールされてることも  自作するにはカラーセンサーが必要 (市販のものは1万円強～20万円強) 39

Slide 40

Slide 40 text

ICCプロファイルでできること 40

Slide 41

Slide 41 text

ICCプロファイルでできること  色の変換 • 相対色 → 絶対色 • 絶対色 → 相対色 ※相対色：デバイス依存(基準)の相対値で表される色 RGB値とかCMYK値とかのこと 41

Slide 42

Slide 42 text

ICCプロファイルでできること ICCプロファイルがあればRGB値に対応する絶対色が分かる！ 42 RGB (255, 0, 0) モニタHogeのプロファイル (特性情報) モニタHogeに表示される絶対色 RGB値どういう色になるのか計測したから分かる

Slide 43

Slide 43 text

ICCプロファイルでできること逆にモニタHogeのICCプロファイルがあれば、ある絶対色を再現するためのRGB値も計算できる 43 RGB (255, 0, 0) モニタHogeのプロファイル (特性情報) 絶対色 (表示したい色) RGB値 (渡す値)

Slide 44

Slide 44 text

ICCプロファイルでできること別のモニタFugaに対しても同様に計算すれば、同じ色を表示できる！ 44 RGB (255, 0, 0) Hogeのプロファイル絶対色 RGB (234, 0, 0) Fugaのプロファイル同じ色で表示される同じ色で表示される

Slide 45

Slide 45 text

ICCプロファイルでできること繰り返しだけどつまり各デバイスのプロファイルをちゃんと用意してあれば、色を揃えることが可能！ → これがICCプロファイルベースのCMS 45 絶対色

Slide 46

Slide 46 text

46 ここで絶対色に注目絶対色これ

Slide 47

Slide 47 text

絶対色  絶対色  → 出したい色を絶対的に表現した情報 ※ CIE L*a*b* とか CIE XYZ とかで数値化される → デバイスに依存しない、絶対的な色空間(カラースペース) 47 出展 : 「Diagram 3. Model of CIELAB」 Jisc Digital Media | modelling-colour http://www.jiscdigitalmedia.ac.uk/infokit/colour-management/modelling-colour

Slide 48

Slide 48 text

絶対色この絶対色を表現する色空間を、ICCプロファイルベースの CMSでは PCS (Profile Connection Space) というプロファイル同士を繋いでるよね？ 48 PCS

Slide 49

Slide 49 text

画像の色の話 49

Slide 50

Slide 50 text

画像の色と PCSの役割 PCS上の絶対色が各デバイスで再現できるなら画像の色もPCSに変換できれば再現できるハズ 50 PCS 変換

Slide 51

Slide 51 text

画像の色と PCSの役割  画像の色も大抵はRGB値 • →それをPCSの絶対色にマッピングするには？ 51 PCS 変換どう変換しよう？

Slide 52

Slide 52 text

画像の色と PCSの役割  画像の色も大抵はRGB値 • →それをPCSの絶対色にマッピングするには？ • →その素性(色空間)を示したICCプロファイルが必要 → 画像ファイルに埋め込むので、埋め込みプロファイル 52 PCS 埋め込みプロファイル

Slide 53

Slide 53 text

埋め込みプロファイルの話 53

Slide 54

Slide 54 text

埋め込みプロファイル  画像には標準化された色空間のプロファイルを埋め込むのが一般的 • デバイスのプロファイルを埋め込むのは、複数デバイス間で編集する場合などで困る • 何を埋め込むかはその画像のワークフローによる • WEB用など一般向けにはsRGB • DTP用データなどではAdobe RGB 54

Slide 55

Slide 55 text

sRGB (standard RGB) 色空間  最も標準的な色空間  プロファイルが無かったらとりあえずsRGBってくらい標準的  メーカー、デバイス毎にバラバラだった色空間を統一しようと作成された (HPとMicrosoftが中心となってガイドラインを策定)  当時のCRTモニタ(ブラウン管)の特性を参考にしてる  印刷で出す色が再現できないことが多く、DTPには不向き  デバイスも画像も全部sRGBで揃えればICCプロファイル要らなくね？というアプローチもある 55

Slide 56

Slide 56 text

DTPのデファクトスタンダード  sRGBよりも再現できる色域が広い (主に緑方向)  印刷でよく使われる色の範囲を大体カバーできる  Adobe独自規格 56 Adobe RGB 色空間出典: 「Adobe RGB color space」(2014年12月27日 01:31 UTC)『Wikipedia』 https://en.wikipedia.org/wiki/Adobe_RGB_color_space

Slide 57

Slide 57 text

モニタと標準化された色空間の関係 57

Slide 58

Slide 58 text

モニタと標準化された色空間の関係  モニタも標準化された色空間に合わせて作られている物が多い • 一般向けはsRGBに近い特性 • プロ向けはAdobe RGBに近い特性 (広色域モニタ) Adobe RGB対応！とか謳ってるやつ • あくまでも”近い”だけなので、実際はそれなりにズレてる 正確な色再現には、正しいICCプロファイルが必須 58

Slide 59

Slide 59 text

コントロールパネル → 色の管理  英語だと Color Management  主にデバイスプロファイルの管理ができる 59 Windowsのプロファイル管理設定

Slide 60

Slide 60 text

CMSまとめ 60

Slide 61

Slide 61 text

CMSまとめ以上のようなCMSを正しく運用すれば、いつ何処で誰が見ても同じ色で再現できる！ 61

Slide 62

Slide 62 text

Windowsのカラマネ 62

Slide 63

Slide 63 text

Windowsのカラマネ  やっぱWindowsよりMacの方が色が正確だね！ 63

Slide 64

Slide 64 text

Windowsのカラマネ  やっぱWindowsよりMacの方が色が正確だね！ •→ デタラメ 64

Slide 65

Slide 65 text

Windowsのカラマネ  Windowsだってやればできる！  Macでも正しい知識なしでは色は合わない 65

Slide 66

Slide 66 text

Windowsのカラマネ  Windowsではアプリが対応しないとカラマネは基本的に行われない ※WPFとWinRTに関しては、意識しないでプログラミングしていると全てsRGBへ変換されるっぽい  → 画像を扱うアプリくらいはカラマネ対応しよう！ 66

Slide 67

Slide 67 text

WindowsのCMS 67

Slide 68

Slide 68 text

Win32 API COM Application WindowsのCMS 68 ICM / WCS WIC Applications CMMs CMMs CMMs

Slide 69

Slide 69 text

Windows標準CMS 役割 : デバイスプロファイル取得 色空間の変換 CMM選択 CMM : 色変換エンジン。標準はMS製だが、 Adobe製など3rd Party製品を利用できる。 69 ICM/WCS ICM / WCS WIC Applications CMMs CMMs CMMs

Slide 70

Slide 70 text

ICMはWindows 95から搭載 WCSはVistaから搭載された ICMの拡張のようなもの  API的にはユーザーごとのプロファイル管理機能などが追加されている程度 70 ICM/WCS ICM / WCS WIC Applications CMMs CMMs CMMs

Slide 71

Slide 71 text

 主に Vista と WPF のために作られた画像処理用 COMコンポーネント  画像の読み書きが主なお仕事  描写機能はない (Direct2Dで扱える形式への変換は可能)  内部的にICM/WCSを使用しており、カラマネ関連機能が充実している 71 WIC (Windows Imaging Component) ICM / WCS WIC Applications CMMs CMMs CMMs

Slide 72

Slide 72 text

 コーデックを追加インストールすることで、新たな画像形式に対応可能 (自作可能)  Explorer や Windows フォトビューワーなども使ってる  多分Windows Runtime (WinRT)も使ってる 72 WIC (Windows Imaging Component) ICM / WCS WIC Applications CMMs CMMs CMMs

Slide 73

Slide 73 text

WICのAPI：読み書き  Decoderで画像読み込み  Encoderで画像書き出し 73 Decoder Application Encoder

Slide 74

Slide 74 text

WICのAPI：画像データの扱い  画像ファイルは複数のフレームで構成されている • が、基本GIFとTIFF以外は1フレームのみ  Decoderでフレームの一覧が取得できる 74 Decoder Frame Frame フレーム

Slide 75

Slide 75 text

WICのAPI：画像データの扱い  個別のフレームは1枚の画像データとして扱える  フレームには埋め込みプロファイルやサムネイルが設定されている 75 フレーム埋め込みプロファイルサムネイル

Slide 76

Slide 76 text

WICとWPFとWinRTの関係 76

Slide 77

Slide 77 text

 WPFとWinRTは、内部的にWICを使ってるっぽい  のでAPIが凄く似てる 77 WICとWPFとWinRTの関係

Slide 78

Slide 78 text

WICとWPFとWinRTの関係 WIC WPF WinRT 名前空間、ヘッダ WinCodec.h System.Windows.Media.Imaging Windows.Graphics.Imaging Decoder IWICBitmapDecoder BitmapDecoder BitmapDecoder Encoder IWICBitmapEncoder BitmapEncoder BitmapEncoder 画像フレーム IWICBitmapFrameDecode BitmapFrame BitmapFrame ICCプロファイル IWICColorContext ColorContext なし！ 78 にてる！

Slide 79

Slide 79 text

カラマネプログラミング初歩 79

Slide 80

Slide 80 text

 目標 • カラーマネジメントされた画像表示を実装できる • 画像編集は今回は扱わない 80 カラマネプログラミング初歩

Slide 81

Slide 81 text

カラマネ画像表示に最低限必要なAPI 81

Slide 82

Slide 82 text

Transform 1. モニタプロファイルの取得 2. 埋め込みプロファイルの取得 3. プロファイルを使った画像の色変換 4. 変換結果の描写 82 カラマネ画像表示に最低限必要なAPI ２３１４

Slide 83

Slide 83 text

Transform カラマネ画像表示に最低限必要なAPI API WPF WinRT 1. モニタプロファイルの取得 ▲ (P/Invoke) ○ 2. 埋め込みプロファイルの取得 ○ ▲ (C++/CX) 3. プロファイルを使った画像の色変換 ○ ▲ (C++/CX) 4. 変換結果の描写 ○ ○ 83 ２３１４

Slide 84

Slide 84 text

WPFのカラマネプログラミング 84

Slide 85

Slide 85 text

WPFのカラマネプログラミング 85 API WPF 1. モニタプロファイルの取得 ICM/WCS を P/Invoke 2. 埋め込みプロファイルの取得 BitmapFrame クラス 3. プロファイルを使った画像の色変換 ColorConvertedBitmap クラス 4. 変換結果の描写 Image コントロールとか Transform ２３１４

Slide 86

Slide 86 text

WPFのカラマネプログラミング 1. モニタプロファイルの取得 86 Transform ２３１４

Slide 87

Slide 87 text

WPFのカラマネプログラミング 1. モニタプロファイルの取得 87 EnumDisplayMonitors() モニタハンドル GetMonitorInfo() モニタ情報デバイス名 CreateDC() デバイスコンテキスト GetICMProfile() プロファイルのパス new ColorContext(パス) ICM/WCS new ColorContext(PixelFormats.Bgra32) → sRGBプロファイルになる System.Windows.Forms.Screenの DeviceNameで代用できるが……

Slide 88

Slide 88 text

WPFのカラマネプログラミング 2. 埋め込みプロファイルの取得 88 Transform ２３１４

Slide 89

Slide 89 text

WPFのカラマネプログラミング 2. 埋め込みプロファイルの取得画像 → フレーム → 埋め込みプロファイル 89 Decoder Frame Frame フレームフレーム埋め込みプロファイルサムネイル

Slide 90

Slide 90 text

WPFのカラマネプログラミング 2. 埋め込みプロファイルの取得フレームの取得にはBitmapFrame.Createメソッドを使う 90 出典: https://msdn.microsoft.com/library/ms615998.aspx

Slide 91

Slide 91 text

WPFのカラマネプログラミング 2. 埋め込みプロファイルの取得埋め込みプロファイルの取得にはBitmapFrame.ColorContextsプロパティを使う 91 出典: https://msdn.microsoft.com/library/system.windows.media.imaging.bitmapframe.colorcontexts.aspx

Slide 92

Slide 92 text

WPFのカラマネプログラミング 2. 埋め込みプロファイルの取得 92 using (var stream = new FileStream("Hoge.jpg", FileMode.Open, FileAccess.Read, FileShare.ReadWrite | FileShare.Delete)) { // 複数フレームを読み込む場合は BitmapDecoder.Create を使う var frame = BitmapFrame.Create(stream, // Uriによる初期化ではファイルがロックされる // IgnoreColorProfileを指定しないとsRGBに変換される BitmapCreateOptions.IgnoreColorProfile // PreservePixelFormatを指定しないとCMYK画像がRGBなPixelFormatに変換される | BitmapCreateOptions.PreservePixelFormat, // Streamから即時読み込みするにはOnLoadを指定する BitmapCacheOption.OnLoad ); // 埋め込みプロファイル取得。基本は1つ目の物を利用でOK。 var contexts = frame.ColorContexts; }

Slide 93

Slide 93 text

WPFのカラマネプログラミング 3. プロファイルを使った画像の色変換 93 Transform ２３１４

Slide 94

Slide 94 text

WPFのカラマネプログラミング 3. プロファイルを使った画像の色変換 ColorConvertedBitmapクラスを使う 94 出典: https://msdn.microsoft.com/library/system.windows.media.imaging.colorconvertedbitmap.aspx

Slide 95

Slide 95 text

WPFのカラマネプログラミング 3. プロファイルを使った画像の色変換 95 // ColorConvertedBitmap は一度初期化したら変更できない。 // BeginInit(), EndInit() で初期化することも可能。 var bitmap = new ColorConvertedBitmap( frame, // 元画像 (BitmapSourceならなんでも) sourceColorContext, // 画像埋め込みプロファイル displayColorContext, // モニタプロファイル PixelFormats.Bgra32);

Slide 96

Slide 96 text

WPFのカラマネプログラミング 4. 変換結果の描写 96 Transform ２３１４

Slide 97

Slide 97 text

WPFのカラマネプログラミング 4. 変換結果の描写 97 // 前述の ColorConvertedBitmap は BitmapSource なので、 // そのまま Image コントロールの Source に設定すれば描写可能 image.Source = bitmap; // マルチモニタ対応は一筋縄ではいかないが…

Slide 98

Slide 98 text

WPFのカラマネプログラミング Demo  ソース: https://github.com/veigr/ColorManagementSample  Powered by カラまね (thanks @yamma_ma) http://cue.yellowmagic.info/softwares/colormimic/ 98

Slide 99

Slide 99 text

WinRTのカラマネプログラミング 99

Slide 100

Slide 100 text

WinRTのカラマネプログラミング 100 API WinRT 1. モニタプロファイルの取得 DisplayInformation 2. 埋め込みプロファイルの取得 C++/CXでWICの IWICBitmapFrameDecode 3. プロファイルを使った画像の色変換 C++/CXでWICの IWICColorTransform や Direct2Dの Color management effect 4. 変換結果の描写 SurfaceImageSource や WriteableBitmap と Image コントロールとか Transform ２３１４

Slide 101

Slide 101 text

 これらを使って、MSCCでしょぼいカラマネ対応画像ビューワー作りました • Color Managed Image Viewer http://www.cat-ears.net/?p=35136 • C#以外の全て(WinRT、C++/CX、WIC、DirectX)が初めてだったのでつらかった… 101 WinRTのカラマネプログラミング

Slide 102

Slide 102 text

さっきのは頑張ってC++で作りましたが… C++書きたくない！そんな人に… SharpDX 102 WinRTのカラマネプログラミング

Slide 103

Slide 103 text

SharpDX • http://sharpdx.org/ • DirectX APIをラップしてC#/VBから使えるようにしたもの • OSS (MIT License) • .NET、ストアアプリ、WP8 で使える (APIによっては制限あり) • WICも使える！ 103 WinRTのカラマネプログラミング

Slide 104

Slide 104 text

SharpDX  WIC APIはSharpDX.Direct2D1アセンブリに入ってる →NuGetで取得可能  https://www.nuget.org/packages/SharpDX.Direct2D1/  APIはほぼそのまま  →WICやDirectXの使い方を知っていれば簡単 104 WinRTのカラマネプログラミング出典 : http://sharpdx.org/documentation/api/n-sharpdx-wic

Slide 105

Slide 105 text

105 WinRTのカラマネプログラミング WIC SharpDX WPF 名前空間、ヘッダ WinCodec.h SharpDX.WIC System.Windows.Media.Imaging Decoder IWICBitmapDecoder BitmapDecoder BitmapDecoder Encoder IWICBitmapEncoder BitmapEncoder BitmapEncoder 画像フレーム IWICBitmapFrameDecode BitmapFrameDecode BitmapFrame ICCプロファイル IWICColorContext ColorContext ColorContext “IWIC”プレフィックスが取れただけ

Slide 106

Slide 106 text

SharpDXを使う場合の利用API 106 WinRTのカラマネプログラミング

Slide 107

Slide 107 text

WinRTのカラマネプログラミング 107 API WinRT + SharpDX 1. モニタプロファイルの取得 DisplayInformation 2. 埋め込みプロファイルの取得 SharpDX.WIC.BitmapFrameDecode 3. プロファイルを使った画像の色変換 SharpDX.WIC.ColorTransform 4. 変換結果の描写 WriteableBitmap と Image コントロールとか Transform ２３１４

Slide 108

Slide 108 text

WinRTのカラマネプログラミング 1. モニタプロファイルの取得 108 Transform ２３１４

Slide 109

Slide 109 text

WinRTのカラマネプログラミング 1. モニタプロファイルの取得 Windows.Graphics.Display.DisplayInformationクラスを使う  static GetForCurrentView()メソッドでDisplayInformationのインスタンスを取得 • 物理モニタがない環境だと例外を吐かれる……  GetColorProfileAsync()メソッドでプロファイルのストリームが取れる  ColorProfileChangedイベントで、設定やアプリのモニタ間移動によるプロファイルの変更を検知できる 109

Slide 110

Slide 110 text

WinRTのカラマネプログラミング 1. モニタプロファイルの取得 110 // モニタプロファイルのStreamを作成 // ※物理モニタがない環境だと例外を吐く var profileStream = await DisplayInformation.GetForCurrentView().GetColorProfileAsync(); // Stream → Bytes var profileBytes = new byte[profileStream.Size]; var reader = new DataReader(profileStream); await reader.LoadAsync((uint)profileStream.Size); reader.ReadBytes(profileBytes); // モニタプロファイルのColorContextを作成 var factory = new ImagingFactory(); // 割とあちこちで使う var displayProfile = new ColorContext(factory); displayProfile.InitializeFromMemory(DataStream.Create(profileBytes, true, false));

Slide 111

Slide 111 text

WinRTのカラマネプログラミング 2. 埋め込みプロファイルの取得 111 Transform ２３１４

Slide 112

Slide 112 text

WinRTのカラマネプログラミング 2. 埋め込みプロファイルの取得 SharpDXの BitmapFrameDecodeクラスのTryGetColorContextsメソッドを使う  なぜかドキュメントには載ってない  ColorContextsプロパティもあるがObsolete 112

Slide 113

Slide 113 text

WinRTのカラマネプログラミング 2. 埋め込みプロファイルの取得 113 // デコーダーでファイルからフレームを取得 var stream = await File.OpenReadAsync(); // StorageFile var decoder = new BitmapDecoder(factory, stream.AsStream(), DecodeOptions.CacheOnDemand); var frame = decoder.GetFrame(0); // １フレーム目のみ取得 // 埋め込みプロファイル取得 var srcContexts = frame.TryGetColorContexts(factory); // GetColorContexts未対応コーデックだとnull、プロファイルが無いと長さ0となる var untaggedOrUnsupported = srcContexts == null || srcContexts.Length < 1; // sRGBプロファイル作成 var sRGBColorContext = new ColorContext(factory); sRGBColorContext.InitializeFromExifColorSpace(1); // 1を指定するとsRGB // プロファイルが読み込めなかった場合はsRGBとみなす var srcContext = !untaggedOrUnsupported ? srcContexts[0] : sRGBColorContext;

Slide 114

Slide 114 text

WinRTのカラマネプログラミング 3. プロファイルを使った画像の色変換 114 Transform ２３１４

Slide 115

Slide 115 text

WinRTのカラマネプログラミング 3. プロファイルを使った画像の色変換 SharpDXのColorTransformクラスを使う 115 出典 : http://sharpdx.org/documentation/api/t-sharpdx-wic-colortransform

Slide 116

Slide 116 text

WinRTのカラマネプログラミング 3. プロファイルを使った画像の色変換 116 出典 : 「図 1 WIC ビットマップインターフェイス」第 11 章: Windows Imaging Component の使用 https://msdn.microsoft.com/library/windows/desktop/ff973956.aspx ビットマップソースの一種

Slide 117

Slide 117 text

WinRTのカラマネプログラミング 3. プロファイルを使った画像の色変換 117 SharpDX.WIC.BitmapSource transformSource = frame; // 元画像 if (untaggedOrUnsupported) // TryGetColorContextsの結果 { // プロファイルが読み込めなかった場合はsRGBを適用したいので、FormatConverterで32bppPBGRAへ変換 // 変換しなかった場合、色変換時にCMYK画像をsRGBとして扱ってしまうことでエラーが発生する var converter = new FormatConverter(factory); converter.Initialize(frame, PixelFormat.Format32bppPBGRA); transformSource = converter; } // ColorTransformを通すことで色変換ができる var transform = new ColorTransform(factory); transform.Initialize(transformSource, srcContext, destContext, PixelFormat.Format32bppPBGRA); WICのBitmapSourceは、他のBitmapSourceで初期化してやることで、処理を連結できる。 e.g. Decode -> Clipping -> Scaling

Slide 118

Slide 118 text

4. 変換結果の描写 118 WinRTのカラマネプログラミング Transform ２３１４

Slide 119

Slide 119 text

4. 変換結果の描写 • 作成した SharpDX.WIC.BitmapSource (ColorTransform) • → WriteableBitmap に変換 • → Imageコントロールなどに設定 119 WinRTのカラマネプログラミング

Slide 120

Slide 120 text

4. 変換結果の描写 120 WinRTのカラマネプログラミング // 変換結果の描写 var stride = transform.Size.Width * 4; // 横1行のバイト数 var size = stride * transform.Size.Height; var bytes = new byte[size]; transform.CopyPixels(bytes, stride); // Byte配列にピクセルデータをコピー // ピクセルデータをWriteableBitmapに書き込み var bitmap = new WriteableBitmap(transform.Size.Width, transform.Size.Height); using (var s = bitmap.PixelBuffer.AsStream()) { await s.WriteAsync(bytes, 0, size); } // Imageコントロールにでも突っ込めば描写される ImageControl.Source = bitmap;

Slide 121

Slide 121 text

WinRTのカラマネプログラミング Demo  ソース: https://github.com/veigr/ColorManagementSample  Powered by カラまね (thanks @yamma_ma) http://cue.yellowmagic.info/softwares/colormimic/ 121

Slide 122

Slide 122 text

まとめ  Windowsでもカラマネはやれば出来る  が、新しいAPIほどやる気が感じられない…… • 何気にGDIは良いらしい • WPFはモニタプロファイルさえ頑張って取得できれば後は比較的マシ • WinRTはほんとつらい……けどSharpDXがあれば何とか  カラマネ対応しましょう！ 122