中級グラフィックス入門～色彩工学編～

ゲーム開発に携わっているデザイナー向けに概要説明するために作成した資料です。
Display-P3の白色点が間違えていたために修正を加えています。

Transcript

2. 最初に… ・社内の勉強会で使用した資料をWebで公開できるように， 編集を加えた資料です。 公開するための都合上，スライドを削除している部分が多くあり， 説明が連続しない箇所などがあります。 予め，ご了承ください。 ・また説明上の間違い等があれば， ご指摘いただけると大変ありがたいです。
3. 目的 昨今，PS4やXbox OneなどのゲームハードでHDRディスプレイ対応するものも増えてきました。 社内プロジェクトでもHDRディスプレイ対応しなければいけないプロジェクトも出てきています。 対応するのであれば，いい加減ではなくきっちりと対応したいものです。 HDRディスプレイで表示するための正しい知識を身に付けておく必要があります。 そのために， 色をきっちり勉強しましょう。
4. 勉強会の予定 土台固め編 リニアワークフロー，作業環境の設定 実作業編 RGB表色系，XYZ表色系，色空間，色度図 色温度，標準光源，モニターガンマ，色の規格 素材撮影について，カメラの色空間 HDRワークフロー，各社の対応について
5. 土台固め編 専門用語の意味と定義についての説明
6. 目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。
7. 色って? 色とはそもそも何?
8. そもそも… そもそも，色って？ 我々は色をどのように感じるのでしょうか？ まずは人間がどのように色を感じ取るのかについて学習してみましょう。
9. 色の知覚
10. 色の知覚
11. 光 ※図はhttp://www.abundantia-jp.com/bashar/%E8%A6%B3%E5%BF%B5%E3%83%BB%E6%84%9F%E6%83%85%E3%83%BB%E6%80%9D%E8%80%83%E3%81%AE%EF%BC%93%E8%BE%BA%E3%83%97%E3%83%AA%E3%82%BA%E3%83%A0/ より引用
12. 可視光 人間は光をもとに色を知覚します。 光がなければ色を知覚することは出来ません。 我々が色として知覚できる光の範囲があります。 これを“可視光”と呼びます。 380[nm]～780[nm]を可視光と定義することが多いです。 380[nm]より先は紫外線 780[nm]より先は赤外線
13. 色の知覚
14. 人間の目 ※図はhttp://photozou.jp/photo/show/299276/47434811 より引用
15. 目の構造 ※図は https://ja.wikipedia.org/wiki/%E7%B6%B2%E8%86%9C より引用 角膜 網膜 網膜血管 黄斑 虹彩 水晶体
16. 色を見分ける 人間は網膜に ・明るさを見分ける視細胞 ・色を見分ける視細胞 という2種類の視細胞を持っています。 錐状体はさらに3種類に分類することができます。 杆状体 錐状体 L錐状体 M錐状体 S錐状体
17. 錐状体
18. どの光を明るいと感じるか? 可視光は380[nm]～780[nm]ですが， どの波長の光を明るいと感じるのでしょうか? 国際照明学会(CIE)が実験を行い， 測定データをグラフにしました。
19. 明るさの感じ方 分光視感効率
20. 放射量と測光量の関係 放射量 物理量 人間の明るさの感じ方 分光視感効率 測光量 心理物理量 照明器具は主に 測光量を用いる
21. 色の知覚 どのぐらい光を反射するか？ 反射率
22. おさらい ・人間が色を感じる仕組みについて学習しました。 ・明るさを見分ける杆状体と 色を見分ける錐状体という視細胞を持ちます。 ・錐状体はL錐状体・M錐状体・S錐状体の3つ種類に分けられ， それぞれ赤，緑，青を見分けます。 ・放射量に分光視感効率をかけたものが測光量となります。 照明器具は測光量を単位として用います。
23. 色を表現しよう
24. 色を人に伝える こんな経験ないですか？ 「これもうちょっと青くしておいて」 「かぎりなく透明に近いブルーにしておいて」 「燃え滾る様な赤にしてほしいんですよね」 言いたいことはわかる。 だが，それってどんな色よ？ でも，俺が色付けたら違うっていうんでしょ？ 言葉で人に伝えるのは難しい…。
25. どうする?
26. 色見本を用意する マンセル表色系 ※図はhttp://blog.livedoor.jp/mtsk44h6-004/archives/2011-04-13.html より引用
27. どうする??
28. 色以外の場合は? 例えば，大きさ。 大きさはどうやって図りますか? 色も同じことが出来ないものでしょうか?
29. 色の物差しが欲しい。 いっそのこと，色を数値として表せばよいのでは？ では，どうやって数値(基準)を定める？ できるだけみんなで使えるようにしたい。
30. 色の基準をつくる 俺の色とお前の色は違う！を無くす。
31. みんなの色を統一したい どうする？ 「いろいろな人の測定データ取って 平均とって基準にすればいいんじゃね?」 またまた，国際照明学会(CIE)が 頑張って調べました。
32. 人体実験する
33. 等色実験 試験光を左右から別々に当てて，色が同じかどうか判定してもらう。 色が同じであると感じたときのR, G, Bの値を記録して， 人間がどういう値のときに色が同じであると感じるのかを実験で調べる。 ※図はhttp://www.dic-color.com/knowledge/xyz.htmlより引用 [R]は700.0[nm] [G]は546.1[nm] [B]は435.8[nm] の単色光とする。
34. 実験結果 CIEが実験結果の平均をグラフにしてまとめました。 これをCIE 1931 RGB等色関数と呼びます。
35. 何がうれしいの? 光の波長からR, G, Bの割合が分かるようになる。 RGBのルールが決まったので， 色をRGBの数値として表せる 0.2453 0.1361 -0.0011
36. でも、ちょっとまって 何か気づくことはありませんか？ マイナス がある
37. 実は… 実は再現できない色があって，試験光に別の色を加えて鮮やかさを低下させて， 等色させるということを行った。 ここに数式を入力します。 + = + = − + + マイナスになる ※図はhttp://www.dic-color.com/knowledge/xyz.htmlより引用
38. マイナスは使いづらい 多くの場合，色がマイナスになることが考慮されていない。 マイナスだった場合は0にするなどのクランプ処理が行われることがある。 マイナスが扱えない機械(デバイス)等も存在する。 どうしよう?
39. 線形変換 数学上のテクニックを使ってマイナスを無くす。 同じ矢印の方向でも軸を別にとって別成分で表すことが出来る。 軸を別にする = 別空間で表す
40. 線形変換後 CIE 1931 XYZ等色関数 計算上の概念だけで存在する色なので”虚色”と呼ばれます。 マイナスを 無くした!
41. 明るさの感じ方 分光視感効率
42. あとで学習するための用語の確認 色を表現するための一定のルールで体系化されたものを ”表色系(color system)”と言います。 原色と言わず ”原刺激(primary stimulus)”と呼ぶ。 これはXYZが実在しない虚色であるため色と呼べないから。 任意の色光を3種の原刺激, , の割合を ”三刺激値(tristimulus values)”と呼ぶ。 = + + , , が三刺激値 , , = (0.5, 0.2, 1.0) …のように表せる。
43. おさらい みんなの色を統一したい。 → 国際照明学会が実験で調べて基準を作ってグラフ化した。 グラフを見れば，光の波長ごとに平均的な人が どれぐらい赤であると感じるか？ どれぐらい緑であると感じるか？ どれぐらい青であると感じるか？ を求めることができる(=色を求めることができる）。 実験値はマイナスが含まれるので，使いやすい形としてXYZ色空間にした。
44. 目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。
45. 色空間って? よく聞くけど…何？
46. CIE 1931 RGB表色系 波長 R G B 390 0.00184 -0.00045 0.01215 395 0.00462 -0.00105 0.03111 400 0.00963 -0.00217 0.06237 405 0.01898 -0.00443 0.13161 410 0.03080 -0.00720 0.22750 415 0.04246 -0.01258 0.35897 420 0.05166 -0.01665 0.52396 425 0.05284 -0.02124 0.68586 430 0.04429 -0.01994 0.79604 435 0.03222 -0.01610 0.89459 440 0.01476 -0.00735 0.96395 445 -0.00234 0.00137 0.99814 450 -0.02913 0.01961 0.91875 455 -0.06068 0.04346 0.82487 460 -0.09622 0.07095 0.78554 465 -0.13759 0.11022 0.66723 470 -0.17486 0.15088 0.61098 475 -0.21260 0.19794 0.48829 480 -0.23780 0.24042 0.36195 485 -0.25674 0.27993 0.26634 490 -0.27727 0.33353 0.19593 495 -0.29125 0.40521 0.14730 500 -0.29500 0.49060 0.10749 505 -0.29706 0.59673 0.07671 510 -0.26759 0.70184 0.05025 515 -0.21725 0.80852 0.02878 520 -0.14768 0.91076 0.01331 525 -0.03518 0.98482 0.00212 530 0.10614 1.03390 -0.00416 535 0.25981 1.05380 -0.00830 540 0.41976 1.05120 -0.01219 545 0.59259 1.04980 -0.01404 550 0.79004 1.03680 -0.01468 555 1.00780 0.99826 -0.01495 560 1.22830 0.93783 -0.01461 565 1.47270 0.88039 -0.01378 570 1.74760 0.82835 -0.01265 575 2.02140 0.74686 -0.01136 580 2.27240 0.64930 -0.00993 585 2.48960 0.56317 -0.00841 590 2.67250 0.47675 -0.00702 595 2.80930 0.38484 -0.00574 600 2.87170 0.30069 -0.00427 605 2.85250 0.22853 -0.00291 610 2.76010 0.16575 -0.00227 615 2.59890 0.11373 -0.00200 620 2.37430 0.07468 -0.00151 625 2.10540 0.04650 -0.00094 630 1.81450 0.02633 -0.00055 635 1.52470 0.01272 -0.00032 640 1.25430 0.00450 -0.00014 645 1.00760 0.00010 0.00000 650 0.78642 -0.00196 0.00011 655 0.59659 -0.00263 0.00019 660 0.44320 -0.00263 0.00023 665 0.32410 -0.00230 0.00022 670 0.23455 -0.00187 0.00016 675 0.16884 -0.00144 0.00010 680 0.12086 -0.00108 0.00005 685 0.08581 -0.00079 0.00004 690 0.06026 -0.00057 0.00003 695 0.04148 -0.00039 0.00002 700 0.02811 -0.00026 0.00002 705 0.01912 -0.00018 0.00001 710 0.01331 -0.00012 0.00001 715 0.00941 -0.00009 0.00001 720 0.00652 -0.00006 0.00001 725 0.00454 -0.00004 0.00001 730 0.00317 -0.00003 0.00000 (0.00184, -0.00045, 0.01215) 位置座標とみなす 空間上に点を打てる どんな図になる? 平均的な人間の色の感じ方を実験で求めてグラフにした。
47. 具体例 1.0 + 0.5 + 0.25 , , = (1.0, 0.5, 0.25) 位置座標とみなす r g b 空間上の位置座標 =色度 色による座標なので”色度” といいます
48. よし，実際に点を打ってみよう！
49. CIE 1931 RGB色空間
50. 色空間 CIE 1931 RGB表色系やCIE 1931 XYZ表色系を紹介しました。 このとき，色は3成分で表現します。 この3成分を座標とみなして，点を配置することにより空間を生成する ことが可能です。この色による座標を”色度”と呼びます。 この色の成分により構成される空間を“色空間”と呼びます。 色空間により表現できる色の範囲を”色域”と呼びます。
51. 色の基本 前述したように「RGBは使いづらい」という欠点があります。 そこで，色空間の相互変換する際などは 計算上扱いやすい「XYZを基本とする」のが一般的です。
52. XYZについても同じようにやってみよう！
53. CIE 1931 XYZ表色系 JIS Z8781-1の付録を参照
54. CIE 1931 XYZ色空間
55. わかったこと。 色空間は3次元で表現できる！
56. 感じること… でも… 「色を表現するのに3次元座標描くとかめんどい。」 3次元で書くのはつらい！ …ので， 2次元で書けるように工夫してみます。
57. ルールづけ 色のベクトルを単位ベクトル化して[0, 1]の範囲で表すことにします。 (ex) 座標 (1.0, 2.0, 0.5) + + = 1.0 + 2.0 + 0.5 = 3.5 + + = 1.0 3.5 = 0.285 … + + = 2.0 3.5 = 0.571 … + + = 0.5 3.5 = 0.142 … 正規化することで[0, 1]の範囲に収まる。 ３つたすと１になる。 2つ分かれば残りは自動的に求まる。 2次元で表せる!
58. ルール適用前
59. ルール適用後
60. 色度図 = + + = + + = 1 − − として 2次元上にとをプロットした図
61. 色度図からもとに戻したいとき = + + = + + = 1 − − ? 方程式が解けない。 もう1つ変数が必要になる。
62. 表色系 色度図からは, , を完全に復元できません。 そこで，色度図に成分を加えて記録しておく という表現方法が用いられます。 表色系から表色系への変換は次式で与えられます。 = = = 1 − −
63. おさらい ・色空間 → 色ベクトルによって構成される空間 ・色域 → 色空間が表示できる範囲。 平均的な人間（標準観測者）が 感じることができる色の範囲を図示した。 色が塗っている範囲外は 平均的な人間が色として認識できない領域。 平均的な人間が色として認識できるものは， この領域のどこかに存在する。
64. 目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。
65. 刀鍛冶 刀鍛冶は刀の色を見て，焼き入れの温度を測る。 ※図はhttp://www.tojiro-japan.co.jp/jp/guide/making_hardening.html より引用 ※図はhttps://blogs.yahoo.co.jp/mochy2156/63276272.html より引用
66. 色温度 物体は温度が0[K](=絶対零度)以上であれば発光します。 このときに放射される可視光線の波長(色)は，物体の温度によって決まります。 ある放射体の色度が温度T[K]の黒体の色度に等しいとき， 温度T[K]をこの放射体の”色温度”と呼びます。 ※図はhttps://www.thelightingpractice.com/what-is-color-temperature/ より引用
67. 色温度を使った補正方法 実は…身近で使われている。
68. デジカメ使ったことありますか? ※図はhttps://macro-digicam.com/white-balance/ より引用
69. ホワイトバランス オートホワイトバランス 晴天モード 白熱灯モード 日陰モード 白色はRGBを全て含んだ色なので，白色を基準として色味を調整します。 プロ用機材等ではホワイトバランスで白色を選ぶ際に色温度が良く使われます。 ホワイトバランスは色温度が示す色とは逆関係になる点に注意してください。 5200[K] 3200[K] 7000[K] 3000～7000[K] ※図はhttps://macro-digicam.com/white-balance/ より引用
70. 色を測る際に注意すること ただ単に測ればいいものではない。
71. 測色するのに適していますか?
72. 照明も気を付けないとだめじゃない?
73. じゃ、どういう照明が良いの? 市販の光源を選ぶ際の注意点。
74. 色無しなら良いってものでもない。 ※図はhttp://www.interior-joho.com/knowledge/detail.php?id=1531 より引用 ※図はhttp://www.nico-tech.com/%E4%BA%86%E8%A7%A3%E7%87%88%E6%BA%90/ より引用
75. 演色性 演色性とは，照明で物体を照らす時に， 自然光が当たった時の色をどの程度再現しているかを示す指標。 素材撮影をする際は演色性が高い照明を使った方が良い。 演色性が高いかどうかの判断は? 平均演色評価数(Ra)を見る!! Raが100に近いほど演色性が高い。 詳細については日本工業規格 JIS Z:8726:1996を参照
76. 演色性の高い照明の例 ※図は http://www.akaricenter.com/chokkan_tokusyu/toshiba/d65.htm より引用
77. おさらい ・色温度を使って色を1次元で表現することもできる。 ・ホワイトバランスは色温度が示す色とは逆の関係。 ・測色する場合は照明に気を付けよう。 色がついてなければ良いってものではない。 ・テクスチャ撮影する場合などは平均演色評価数の高い光源を使おう。
78. 目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。
79. ディスプレイと色空間 適切に出力しよう。
80. テレビの種類 ・CRT ブラウン管テレビ ・HDTV ハイビジョンテレビ(1080p) ・UHDTV ウルトラハイビジョンテレビ(4K) ・HDRTV 高色域テレビ SDR : Standard Dynamic Range HDR : High Dynamic Range 雑に言うと RGBで1.0までしか出せない 雑に言うと RGBで1.0以上が表現できる
81. 輝度の単位 テレビの輝度には ・ニト ・カンデラ毎平方メートル が使われます。 SDRテレビでは規格上では 100(nit) HDRテレビでは規格上では 最大10000(nit) ※ちなみにsRGBは規格上では 80(nit)です。 1 nit = 1 cd/m2 従来の100倍！
82. トーンマップのグラフだと 今まで (SDR) これから (HDR)
83. 100倍はすごい！
84. 輝度の単位 テレビの輝度には ・ニト ・カンデラ毎平方メートル が使われます。 SDRテレビでは規格上では 100(nit) HDRテレビでは規格上では 最大10000(nit) ※ちなみにsRGBは規格上では 80(nit)です。 1 nit = 1 cd/m2 従来の100倍！
85. ディスプレイへの出力 ディスプレイに出力する際は 以下の2つを考える必要があります。 (1)色空間 (2)OETF/EOTF/OOTF 色域を定義する ディスプレイで表示するための変換
86. ガンマカーブ ディスプレイでは，入力電圧に対して表示輝度が正比例しないということが分かりま した。 入力電圧に対して曲線的に上昇することが知られています。 この特性を”ガンマ特性”と呼び，次式で表されます。 = CRT(ブラウン管)では = 2.2です。 本来は，出力した画像をそのまま表示してほしい所ですが， ガンマ特性のため輝度が非線形変換されてしまいます。 これは，本来意図した画像出力よりも暗くなることを意味します。
87. ガンマ補正 ディプレイ側で暗くなるのがわかっているのであれば，それを見越して予め逆変換を 掛けておき，ガンマ特性を打ち消すという方法が考えられます。 このような補正を”ガンマ補正”と呼びます。 ガンマ補正なし ガンマ補正あり
88. OETFとEOTF CRTはガンマカーブでしたが， HDRディスプレイは異なるカーブになります。 そのため最近はガンマ補正やガンマカーブと言わず， ・OETF(Opto Electronic Transfer Function) ・EOTF(Electronic Optical Transfer Function) と呼びます。OETFとEOTFは互いに逆関数となります。 持ち下げ 持ち上げ コンテンツ側 ディスプレイ側 OETF EOTF
89. 規格化の必要性 機械や機種ごとに(デバイスごとに）異なる色空間を持っています。 異なる機械や機種ごとにデータを相互変換する際に色味が正しくない という状況が発生するようになりました。 パソコンの画像表示や，デジタルカメラの画像生成などの一般的な用途 に十分な色域や画質が保証される規格が必要となります。 ここでは，いくつかの規格について紹介してみます。
90. 色空間の表し方 色空間は原刺激(3点)と白色を表す白色点の４点を基に定義されます。 原刺激は範囲を指定するため，白色点は正規化するために使用します。 R，G，B，W で定義。
91. 前準備 プログラマ向け ある色空間で表現されたものを 別の色空間で表現したい場合には 色空間の相互変換が必要になります。 ここで， 色空間の変換について説明しておきます。
92. 色空間の変換 変換前の色空間を構成する3ベクトルである原刺激, , とする。 変換後の色空間を構成する3ベクトルである原刺激, , の座標値を それぞれ， , , ， , , ， , , とすると， 次のように書ける。 = + + = + + = + + これを行列で表記すると… = となる。 RGB→XYZへ変換したい場合は逆行列を左から掛ければよい。 式(1) プログラマ向け
93. 三刺激値の変換 ある色光の原刺激, , における三刺激値を, , とし， 原刺激, , での三刺激値を, , とします。このとき，色光は = = + + = + + と表され，これを行列で表現すると となります。ここで式(1)を代入すると = = 右から逆行列を掛けて，転置して列ベクトル表記に直すと = −1 式(2) プログラマ向け
94. 白色点による行列の正規化 色空間変換前のXYZ色空間における白色点を , , として， 輝度値が1になるように で正規化した白色点が，変換後のRGB空間で , , = 1,1,1 になる ように変換する行列を求めます。 RGB空間での正規化定数を , , として，式(2)に代入して = −1 / 1 / が成り立てばよいことになります。 これを使って三刺激値の変換について書き直すと = −1 または = 式(3) プログラマ向け
95. = を整理して書き直すと = 0 0 0 0 0 0 = 行列とする = −1 XYZからRGBへの変換は右から行列 の逆行列をかければ求まるので， で求めることができます。 式(4) 式(5) プログラマ向け
96. IEC 61966-2-1規格 異なる色域を有するデバイス間で効率的にやり取りできるように標準規格が求められるように なり，MicrosoftやHewlett-Packardなどの企業によりIEC(国際電気標準会議)が IEC 61966-2-1規格(通称sRGB規格)という国際規格を定めました。 原刺激 R 0.640 0.330 G 0.300 0.600 B 0.150 0.060 白色点(D65) 0.3127 0.3290 【色域】 【OETF】 = 12.92 ≤ 0.0031308 = 1 + 0.055 1/2.4 − 0.055 { > 0.0031308}
97. sRGBの変換(1) 【sRGB→XYZの変換例】 プログラマ向け 原刺激 R 0.640 0.330 G 0.300 0.600 B 0.150 0.060 白色点(D65) 0.3127 0.3290 , , = 0.640, 0.330, 0.03 , , = 0.300, 0.600, 0.10 , , = 0.150, 0060,0.79 , , = 0.3127, 0.3290, 0.3583 を式(3)に代入して計算する。 = 0.64 0.33 0.03 0.30 0.60 0.10 0.15 0.06 0.79 −1 = 2.088353 −1.15529 0.066934 −0.99063 2.236055 −0.24543 −0.32129 0.049531 1.271754 = 2.088353 −0.99063 −0.32129 −1.15529 2.236055 0.049531 0.066934 −0.24543 1.271754 0.3127/0.3290 1 0.3583/0.3290 = 0.644361 1.191948 1.203205
98. sRGBの変換(2) , , = 0.644361, 1.191948,1.203205 と原色の色度座標より行列を求める = 0.644361 × 0.64 1.191948 × 0.30 1.203205 × 0.15 0.644361 × 0.33 1.191948 × 0.60 1.203205 × 0.06 0.644361 × 0.03 1.191948 × 0.10 1.203205 × 0.79 = 0.412391 0.357584 0.180481 0.212639 0.715169 0.072192 0.019331 0.119195 0.950532 【XYZ→sRGBの変換】 の逆行列を求める。 −1 = 3.24097 −1.53738 −0.49861 −0.96924 1.875968 0.041555 0.0563 −0.20398 1.056972
99. ITU-R BT.709 1990年に定められた国際電気通信連合の無線通信部門(ITU-R)が勧告しているHDTV 放送方式(Broadcasting service[television])のSDR映像信号規格。 色域はsRGBと同じだが，OETF/EOTFが異なる。 原刺激 R 0.640 0.330 G 0.300 0.600 B 0.150 0.060 白色点(D65) 0.3127 0.3290 【色域】 【OETF】 = 4.500 ≤ 0.018 = 1.0 + 0.099 0.45 − 0.099 { > 0.018}
100. Adobe RGB 1998年にアドビシステムズが発表した色空間。 https://www.adobe.com/digitalimag/pdfs/AdobeRGB1998.pdf sRGBよりも色域が広い。 原刺激 R 0.64 0.33 G 0.21 0.71 B 0.15 0.06 白色点(D65) 0.3127 0.3290 【色域】 【OETF】 = 256/563 = 1/2.19921875
101. DCI-P3 米国の映画製作会社で構成される業界団体Digital Cinema Initiatives(DCI) で定められたデジタルシネマの規格です。 映画撮影に使われるカラーフィルムの色域に対応します。 原刺激 R 0.68 0.32 G 0.265 0.69 B 0.15 0.06 白色点 0.314 0.251 【色域】 【OETF】 = 1/2.6
102. Display-P3 Apple社の独自規格で，iPhone7以降から採用されている。 色域はDCI-P3とほぼ同じだが， 白色点とOETFが異なりsRGBと同じになる。 https://developer.apple.com/documentation/coregraphics/cgcolorspace/1408916-displayp3 原刺激 R 0.68 0.32 G 0.265 0.69 B 0.15 0.06 白色点(D65) 0.3127 0.3290 【色域】 【OETF】 = 12.92 ≤ 0.0031308 = 1 + 0.055 1/2.4 − 0.055 { > 0.0031308}
103. ITU-R BT.2020 2008年に定められたHDTVやUHDTVのSDR信号の規格。 色域が広い。 原刺激 R 0.708 0.292 G 0.170 0.797 B 0.131 0.046 白色点(D65) 0.3127 0.3290 【色度座標】 【OETF】 = 4.5 0 ≤ ≤ = 0.45 − − 1 ≤ ≤ 1 = 1.099 = 0.018 = 1.0993 = 0.0181 10bit 12bit
104. ITU-R BT.2100 2016年に定められたUHDTVなどのHDR信号規格。 色域はITU-R BT.2020と同じ。OETFが2方式ある。 原刺激 R 0.708 0.292 G 0.170 0.797 B 0.131 0.046 白色点(D65) 0.3127 0.3290 【色度座標】 【OETF】 • PQ System → Dolbyが開発。 • Hybrid Log Gamma System → NHKとBBCが共同開発。
105. ※図はhttp://www.soumu.go.jp/main_content/000417993.pdf より引用
106. おさらい ・ディスプレイへの出力する際は (1)色空間 (2)OETF（従来でいう所のガンマ補正) を考慮しよう。 ・ディスプレイは出力サポートしている規格がある。 規格に合わせた適切な出力を行おう。
107. 実践編 デザインツールの設定とプログラムの設定
108. 目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。
109. 対応すべき内容 ・リニアライティング ・ディスプレイへの出力設定の変更 ・色空間の変換 ・OETFの適用 ・トーンマッピングの設定 などなど。
110. リニアライティング ゲームで出力される画をきちんとしよう。
111. 復習。 ディプレイ側で暗くなるのがわかっているのであれば，それを見越して予め逆変換を 掛けておき，ガンマ特性を打ち消すという方法が考えられます。 このような補正を”ガンマ補正”と呼びます。 ガンマ補正なし ガンマ補正あり リニアワークフローは こちらの見た目にする
112. 単純な画像表示 画像ビューア 画像データ 読み込み ガンマ補正済み 非線形データ モニター 表示 ガンマ変換 人間の目 色の知覚 線形データ 人間の目に届いた際に線形になるようにする! OETF EOTF
113. リニアワークフロー 編集作業 新規作成 画像編集ソフト 画像編集ソフト テクスチャ保存 モニター 表示 持ち上げる 結果として線形 もち下げる 人間の目 ガンマ補正済み 作業空間では線形データにする カラープロファイル も埋め込む カラープロファイル を指定 OETF EOTF
114. リニアライティング 初期化処理 テクスチャ ロード ガンマ補正済み 非線形データ シェーダ ドライバ 変換 持ち下げ ライティング 線形データ 変換 ドライバ ガンマ補正 表示 ガンマ変換 モニター 知覚 人間の目 結果として線形 ライティングを 線形空間で行う ユーザーに 届く結果を線形にする sRGBフォーマット のみサポート sRGBフォーマット のみサポート
115. リニアライティング 初期化処理 テクスチャ ロード ガンマ補正済み 非線形データ シェーダ 変換 持ち下げ ライティング 線形データ 変換 ガンマ補正 表示 ガンマ変換 モニター 知覚 人間の目 結果として線形 ライティングを 線形空間で行う ユーザーに 届く結果を線形にする
116. リニアライティングするには? エンジニアとデザイナーが協力することが大事です。 ・ライティング処理はエンジニア ・ライティングに使うテクスチャはデザイナー きちんと理解した上で 適切なデータやプログラムを作成する必要があります。
117. テクスチャの生成 テクスチャを作成する際には次のことに気を付ける必要があります。 (1)リニアな環境でデザインツールを使用する (2)保存する際に適切なフォーマットで出力する 作成する環境がリニアでなければ，正しいデータが作れません。 また保存するデータもリニアを考慮して出力しなければいけません。 こうした環境で作業することを”リニアワークフロー”と呼びます
118. ※図はhttps://cedil.cesa.or.jp/cedil_sessions/view/150 より引用
119. ※図はhttps://cedil.cesa.or.jp/cedil_sessions/view/150 より引用
120. ※図はhttps://cedil.cesa.or.jp/cedil_sessions/view/150 より引用
121. デザイナー必見。 まだ，スライドを見たことがない方は一度見ておくことをお勧めします。 CEDILで閲覧できます。 https://cedil.cesa.or.jp/cedil_sessions/view/150
122. 目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。
123. データの取り扱いに気を付けよう ※図は，https://cedil.cesa.or.jp/cedil_sessions/view/1449 より引用
124. デザインツールの設定 カラープロファイルを適切に設定しよう
125. ICCプロファイル ICC(International Color Consortium)の規格では， デバイスに依存しない色空間を設け，機器独立色再現を実現する。 デバイスに依存しない色空間は ・CIE XYZ色空間(ディスプレイ用) ・CIE LAB色空間(プリント用) を前提とする。 ・照明光源はD50とする。
126. ICCプロファイルの仕様 http://www.color.org/icc_specs2.xalter http://www.color.org/specification/ICC1v43_2010-12.pdf プログラマ向け 下記サイトを参照。
127. ICCプロファイルの場所 C:/Windows/System32/spool/drivers/color/ など
128. Windowsでの設定 Windowsシステムツール → コントロールパネル → 色の管理 即時反映されないので注意。
129. Photoshop 詳細は以下のページを参照。 https://helpx.adobe.com/jp/photoshop/kb/216943.html PSDの保存時にICCプロファイルを埋め込んでおく。
130. After Effects After EffectsもPhotoShop同様にICCプロファイルを使用することができます。 下記ページを参照。 https://helpx.adobe.com/jp/after-effects/using/color-management.html どういったプロファイルを使うかは 担当のプログラマーさんと よく相談してみてください。
131. Maya カラープロファイルを適切に選択する。 https://knowledge.autodesk.com/ja/support/maya/learn- explore/caas/CloudHelp/cloudhelp/2015/JPN/Maya/files/GUID-EF05927F-6C21-4C5E-91E5-19855E6BB2E6- htm.html ・テクスチャのColor Profile ・Render SettingsのInput ProfileとDefault Output Profile ・Render ViewのImage Color ProfileとDisplay Color Profile ・レンダリング画像はSave Color – Manager Imageにチェックを入れて保存。
132. おさらい ・リニアライティングで描画しよう。 ライティングを線形に行う。 テクスチャに気を付ける。 ・作業環境もリニアにしよう。
133. 素材撮影 正しい色が再現できるようにカメラで撮ろう。
134. 折角だから… 折角テクスチャ素材を使うなら， やっぱり正確な色の素材を使いたい。 色を正しく測る方法が必要になってくる。
135. 色の知覚 光源のデータ 人間のデータ 物体のデータ 測定済み 撮影時の値を 知っておく必要がある
136. 光を測ろう 測定器具が存在します。 ・分光放射輝度計 ・分光放射照度計 放射輝度が測れる。 (方向を考慮できる) 最強。 でも高額(358万円とか…) 放射照度が測れる。 (方向が考慮できない) 精度がピンキリ リーズナブルな値段(17万円)
137. 色の知覚 光源のデータ 人間のデータ 物体のデータ 測定済み 測定器で計測 反射率が知りたい
138. 反射率 反射率 = 反射後の光の量 反射前の光の量 反射後の光を測定できれば求まる
139. 本当に毎回これやるの? 確かに正しく色が取れそうだ。 でも，面倒くさそう。 もっとお手軽な方法ないの? カメラを用いた色の計測
140. もう一度確認。 正しい色のテクスチャ素材を使いたい。 カメラで撮影したものを正しい色になるように補正すればよいのでは? カメラの色を補正したい。 カメラがどう色を変えるのかを知りたい。
141. どうする? 撮影対象XYZ XYZから カメラ色空間への変換 撮影結果RGB (RAW画像の画素値) そのために、 ここが知りたい！ ここを求めたい
142. どっちのほうが求めやすいですか? 6 6 2 ▲は，わからない数が少ない方が求めやすい。
143. 未知を求める。 撮影対象XYZ XYZから カメラ色空間への変換 撮影結果RGB (RAW画像の画素値) XYZが分かっているもの を対象とする 撮影すれば出る 求められそう！
144. 色が分かっているものって? 色が計測されて既知のものを用意したい。 各パッチの 分光反射率 が分かっている Color Checker!! ※図は http://www.xrite.co.jp/products/colorchecker-target/colorchecker-passport.html より引用
145. カラーチェッカーの分光反射率 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1 380 430 480 530 580 630 680 730 780
146. 色を測る 撮影対象XYZ XYZから カメラ色空間への変換 撮影結果RGB (RAW画像の画素値) リバースエンジニアリング で求まる 本来の色が 求められる
147. 実際にどうやって使うの? 自前の専用ツール or PhotoShopプラグイン 色の狂い方を逆算 計算データ 自前の専用ツール or PhotoShopプラグイン 色を補正する 補正済み画像 補正前画像 適用
148. より詳しく勉強したい人は 橋口智仁, “カメラ的に正しいフォトリアルグラフィック制作ワークフロー”, CEDEC 2014 https://cedil.cesa.or.jp/cedil_sessions/view/1227
149. なんでこんなことやるの? レタッチするのが面倒くさいから。 素材を手動でレタッチすることなく， 正しい状態で使いたいから。 自動補正の方が，圧倒的にコストが安い。 (数時間かけてレタッチよりも数分かけてボタンを数回押すだけのほうが間違いなく人的コストは安く済む) その分，デザイナーは魅力的な絵作りにコストをかけられる。
150. おさらい ・カメラはRAWで撮影しよう。カメラの生データを使おう。 ・カメラの色空間を求めておこう。 ・撮影時にはカラーチェッカーを忘れずに！ ・撮影時のデータを測定器で取っておくともっと良し。 ・補正はツールやプラグインで自動化しよう。 本来の魅力的な絵作りのためのデザイン作業に力を注ぎましょう。
151. ディスプレイへの出力設定 開発環境を適切に設定しよう！
152. ディスプレイの設定 作業ディスプレイの色空間を 適切に設定する必要があります。
153. HDMIケーブル 使用するHDMIケーブルのバージョンに気を付けましょう。 HDMI 1.4以上が必須です。 Premium High Speed HDMI Cableがおすすめ PS4 Proを買うと付いてくるやつ 必ず”4K HDR対応”と 明記されているものを用意しましょう ※ 図は https://www.amazon.co.jp/PS4-UltraHD-%E5%AF%BE%E5%BF%9C%E3%80%8EPremium-HDMI- Cable/dp/B01MSIMHBT/ref=pd_lpo_sbs_63_t_0?_encoding=UTF8&psc=1&refRID=H0SNT6J1RPYKH8A3NXDA より引用
154. HDMI切り替え器 切り替え器側もHDMI 1.4以上に対応している必要があります。 こちらも4K HDR対応のものにしておきましょう。 対応していないものを使うとディスプレイに出力されません。 ※図は http://www.sin-space.com/entry/2017/08/23/095041 より引用
155. PC ・Windows 10 Fall Creators Updateが適用されている必要があります。 ・ディスプレイ側の設定をHDRが出力できる状態に変更します。
156. PC
157. PC
158. PlayStation4
159. PlayStation4
160. PlayStation4
161. XBox One X
162. XBox One X
163. XBox One X
164. XBox One X
165. レンダーターゲット 高色域に対応するにはレンダーターゲットを従来の8bitフォーマットから10bit以上の フォーマットに変更する必要があります。 Direct3D であれば ・DXGI_FORMAT_R10G10B10A2_UNORM等に変更。 プログラマ向け
166. ディスプレイ出力の設定 ディスプレイの出力設定を変更します。 PCであれば ・IDXGISwapChain3::SetColorSpace1()メソッドで出力色空間を設定。 プログラマ向け
167. HDR画像を表示してみよう トーンマッピングの重要さ
168. SDRディスプレイでの表示 SDRディスプレイでHDRの描画結果をそのまま出力してみる。
169. 白飛びする… SDRモニターで， 無加工のHDR描画結果を出力するには無理がある。
170. なぜ白飛びするのか? 0～1の範囲外の値がカットされるから。 ここだけが 残る データが 消えて 1.0扱い
171. どうする?
172. 安直な考え 範囲に収まるように全体的にスケールダウンすればいいんじゃね?
173. 実装してみた。
174. 無加工
175. スケールダウン
176. なんか，見た目がダメ。 一応データ的には範囲に収まってはいる。
177. どうする? 白飛びしている明るいところだけが気になるので， この部分の範囲を縮めてみたらどうか？ この部分を 圧縮する 0~1の範囲内に 収まるように圧縮
178. Reinhardトーンマッピング Erik Reinhardによって提案されたトーンマップ[Reinhard 2002]. = + 1
179. 無加工
180. Reinhard
181. Hableトーンマッピング Uncharted 2で使われている映画調トーンマッピング[Hable 2010] = + + + + − = (2) () = 0.15 = 0.50 = 0.10 = 0.20 = 0.02 = 0.30 = 11.2
182. 無加工
183. Reinhard
184. Hable
185. もうちょい，見た目を良くしたい。 少しは見れるようになった。
186. どうする? 明部と暗部の両方の範囲を縮めてみる。 真ん中部分はなるべく元の絵を保つようにしてみる。 暗部も圧縮 明部も圧縮
187. ACES 米国の映画芸術科学アカデミー(AMPAS)が定めている アカデミー色符号化仕様(ACES: Academy Color Encoding Specification)のこと。 変換式が固定で存在し，その中から選択する。 計算式が複雑で重いため，いろいろなプログラマーが近似式を提案している。 例えば = ( + ) + + = 2.51 = 0.03 = 2.43 = 0.59 = 0.14 ※図はhttps://knarkowicz.wordpress.com/2016/01/06/aces-filmic-tone-mapping-curve/ より引用。
188. 無加工
189. Reinhard
190. Hable
191. ACES近似
192. ここまでは，SDR時代のお話。
193. 時代は変わった。 HDRディスプレイの時代になった！ 無加工のHDR描画結果をそのまま表示してみよう。 どうなる？
194. HDRディスプレイでの表示 何かうまくいかない。いくつか問題点がある。 ・HDRなのにSDRよりも暗く見える。 ・SDRはトーンマップがあったせいか，生のままだと見た目が違う。 明るさを調整したい。 アーティスティックな調整をしたい。 生データを使うのはまだ早かった。調整が必要。
195. HDRディスプレイ向けトーンマップ まだまだ，トーンマップは必要。
196. スケールアップReinhard ReinhardをHDRディスプレイに適用できるように単純にスケールアップ。 従来のSDRで使っていた式 HDRディスプレイ向けに拡張 = + 1 ∗ = + 1 最大輝度値のスケール (1.0 = 100[nit]) 単純なスケールだと SDRとの互換性が取れない。
197. 無加工
198. Reinhard SDR
199. Reinhard SDRを10倍にスケールアップ
200. SDR部分が全く異なる 拡大 全然一致してない!
201. SDRとの互換をなるべく保つ 暗部がなるべく一緒になるようにする。 拡大
202. 互換を考慮した拡張Reinhard () = + 1 () = + = 100 100 − SDR HDR
203. Reinhard SDR
204. Reinhard SDRを10倍にスケールアップ
205. Reinhard HDR
206. 必要とされるもの。 [Kawase 2016]
207. Andohトーンマップ フロムソフトウェアの安藤氏が提案しているトーンマップ[Andoh 2017] ReinhardトーンマップをHDR対応できるように拡張。 さらにコントラスト調整も可能で，逆関数も求めやすい。
208. 無加工
209. Andoh SDR
210. GTトーンマップ GT Sportで使われているトーンマップ[Uchimura 2017] HDRを第１優先にした設計。SDRとHDRの両対応をしている。 計算式が公開されている(https://www.desmos.com/calculator/et1qmcg10s)
211. 無加工
212. GT SDR
213. Synthesisトーンマップ LDR部分向けのカラーフィルムの写真特性曲線の近似式と HDR部分向けの曲線の２つを合成したお手製トーンマップ。 基本的な調整パラメータは2つなので，調整しやすい。逆関数は解析的に求められる。 HDR部分のスケールアップが可能。
214. 無加工
215. Synthesis SDR
216. おさらい ・HDRの描画結果を魅力的に見せるためにはトーンマップが必要。 ・HDRディスプレイ向けのトーンマップは モニターの最大輝度値に合わせて出力するように調整する必要がある。 ・SDRとHDRを完全に見た目を一致させることはできないので， どちらを優先とするかプロジェクトで話し合いましょう。 ・でも，可能な限りSDRとHDRで見た目が一緒になるように努力はしましょう。
217. HDR対応したけど…。 HDRディスプレイ対応してみた。
218. やってみました。 対応してみたんだけども， ・何か黒が浮く。 ・HDRなのに暗い。 …という問題に悩む。 他社でも同様の報告がある。 [Uchimura 2017] [Kawase 2016] [Tanaka 2017]
219. なぜだ。 大きくテレビ側に問題があることがわかりました。 (1)テレビが規格仕様を守って作られていない。 =画改されている (2)OETFとEOTFが互いに逆関数になっていない。 ＝実はリニアになっていない。
220. 問題点(1) 画改 市販のテレビは見た目が良くなるように各社でブーストされている。 ・sRGBの規格上の輝度は 80 [nit] ・実際に測定してみると 300[nit] というものも存在する。 仕様と3倍近く輝度が異なる。 ＝仕様通りに出すと3倍暗くなる。
221. どうする? 計算する際の基準値を仕様通りではなく， ブーストしたものに合わせる。
222. 問題点(2) 実はリニアでない HDR向けのEOTFとOETFは互いに逆関数であるため，リニアになる。 SDRはBT.1886でEOTFが変更されたために，逆関数にならない。わずかにノンリニアになる。 ディスプレイの光として表示されるまでのシステム全体を通してみた特性のことを “OOTF (Opto-Optical Transfer Function)” または，”システムガンマ”と呼びます。 ITU-R BT.709 ITU-R BT.1886 モニターガンマ2.2 線形領域あり モニターガンマ2.4 線形領域なし BT.709 OETF BT.1886 EOTF OOTF
223. おさらい ・ ・SDRの見た目を保ちたい場合はOOTFを導入を検討しよう。
224. HDRワークフロー HDRディスプレイ対応についてのまとめ。
225. リニアライティング 初期化処理 テクスチャ ロード ガンマ補正済み 非線形データ シェーダ 変換 持ち下げ ライティング 線形データ 変換 ガンマ補正 表示 ガンマ変換 モニター 知覚 人間の目 結果として線形 ライティングを 線形空間で行う ユーザーに 届く結果を線形にする
226. SDRワークフロー(トーンマップなし) アプリケーション層 シーン描画 BT.709線形(sRGB) HDR UI描画 BT.709(sRGB) BT.709(sRGB) SDR OETF ドライバー層 BT.709(sRGB) SDR モニタ出力 EOTF BT.709(sRGB) SDR BT.709(sRGB) SDR
227. SDRワークフロー(トーンマップあり) アプリケーション層 シーン描画 ポストエフェクト トーンマップ BT.709線形(sRGB) HDR BT.709(sRGB) SDR UI描画 BT.709(sRGB) BT.709(sRGB) SDR OETF ドライバー層 BT.709(sRGB) SDR モニタ出力 EOTF BT.709(sRGB) SDR
228. HDRワークフロー いくつか対応パターンがある。 ・シーン描画をどの色空間でやるか? ・UI描画をどの色空間でやるか? などでパターンが分岐。 詳細については川瀬氏のCEDEC KYUSHU 2017のスライドが参考になる。 -川瀬正樹, “実践的なHDR出力対応 ～レンダリングパイプラインの構築～ “, CEDEC KYUSHU 2017.
229. HDRワークフロー(その1) アプリケーション層 シーン描画 ポストエフェクト トーンマップ BT.709線形 HDR UI描画 BT.709(sRGB) 色域変換 OETF モニタ出力 EOTF BT.2100 HDR BT.709(sRGB) SDR BT.709(sRGB) SDR BT.2100 HDR BT.709ベース 最後にBT.2100にする
230. HDRワークフロー(その2) アプリケーション層 シーン描画 ポストエフェクト トーンマップ 色域変換 BT.709線形 HDR BT.2020 HDR UI描画 色域変換 BT.2100 HDR OETF BT.2100 HDR モニタ出力 EOTF BT.2100 HDR BT.709ベース トーンマップ前にBT.2100に変換
231. HDRワークフロー(その3) アプリケーション層 シーン描画 ポストエフェクト トーンマップ BT.2100線形 HDR BT.2100 HDR UI描画 BT.2100 HDR OETF BT.2100 HDR モニタ出力 EOTF BT.2100 HDR BT.2100ベース 最初から最後まで同じ色域。
232. おさらい ・HDRディスプレイ対応する場合は， どのタイミングで色空間を変換するかに気を付けよう。 ・ ・どの色空間でレンダリングをするか？ プロジェクトごとに話し合って方針を決めましょう。
233. まとめ ・色についての理解を深めました。 ・色空間について学習しました。 ・OETF/EOTF/OOTFについて学習しました。 ・リニアワークフローについて学習しました。 ・デザインツールの設定について学習しました。 ・テクスチャ素材を撮影して補正する方法について学習しました。 ・ディスプレイへの出力方法について学習しました。 ・トーンマッピングについて学習しました。 ・ ・ ・
234. お疲れ様でした。 以上で色空間について勉強会は終了です。 可能であれば， 是非勉強した内容を業務に生かしてください。 長時間お疲れ様でした。
235. 参考文献
236. [Uchimura 2016] 内村創, “ゲームのための色彩工学”, CEDEC 2016, http://cedil.cesa.or.jp/cedil_sessions/view/1449 [Uchimura 2017] 内村創, “HDR理論と実践”, CEDEC 2017, http://cedil.cesa.or.jp/cedil_sessions/view/1603 [Kawase 2016] 川瀬正樹, “シリコンスタジオによるHDR出力対応の理論と実践”, CEDEC 2016, http://cedil.cesa.or.jp/cedil_sessions/view/1535 [Kawase 2017] 川瀬正樹, “実践的なHDR出力対応 ～レンダリングパイプラインの構築～ “, CEDEC KYUSHU 2017, https://www.siliconstudio.co.jp/rd/presentations/ [Tanaka 2017] 田中王士郎, “SDRの方が魅力的とは言わせない! ～最新タイトルのHDR対応～”, CEDEC 2017, http://cedil.cesa.or.jp/cedil_sessions/view/1658 [Andoh 2017] 安藤隆祐, “差別化を意識した，独自グラフィックスエンジンの技術紹介”, CEDEC 2017, http://cedil.cesa.or.jp/cedil_sessions/view/1665 [Hable 2010] John Hable, “Filmic Tonemapping operators”, http://filmicworlds.com/blog/filmic-tonemapping-operators/ [Zhang 2012] 谷口慶治, 張小忙, “デジタル色彩工学”, 共立出版, 2012. [Shinoda 2007] 篠田博之, 藤枝一郎, “色彩工学入門”, 森北出版, 2007. [Reinhard 2008] Erik Reinhard, Erum Arif Khan, Ahmem Oguz Akyuz, Garret M. Jhonson, “Color Imaging – Fundamentals and Applications-”, AK Peters, 2008. [Reinhard 2010] Erik Reinhard, Gerg Ward, Sumanta Pattanaik, Paul Debevec, Wolfgang Heidrich, Karol Myszkowski, “High Dynamic Range Imaging –Acqisition, Display, and Image-Based Lighting- Second Edition”, Morgan Kaufmann Publishers, 2010.
237. [Otha 1993] 太田登, “色彩工学 第2版”, 東京電機大学出版局, 1993. [Utagawa 2013] 歌川健, “光学ライブラリー５ デジタルイメージング”, 朝倉書店, 2013. [Maeda 2016] 前田秀一, “トコトンやさしい色彩工学の本”, 日刊工業新聞社, 2016. [Konika Minolta 2018] コニカミノルタ, “色色雑学 –楽しく学べる知恵袋”, https://www.konicaminolta.jp/instruments/knowledge/color/index.html [Patry 2016] Jasmin Patry, “HDR Display Support in Infamous Second Son and Infamous First Light (Part 1)“, http://www.glowybits.com/blog/2016/12/21/ifl_iss_hdr_1/, 2016. [Patry 2017] Jasmin Patry, “HDR Display Support in Infamous Second Son and Infamous First Light (Part2)”, http://www.glowybits.com/blog/2017/01/04/ifl_iss_hdr_2/, 2017. [Fry 2017] Alex Fry, “Hight Dynamic Range color grading and display in Frostbite”, GDC 2017, https://www.ea.com/frostbite/news/high-dynamic-range-color-grading-and-display-in-frostbite, 2017. [Ushio 2017 a] Ushio, “XYZ色空間に迫る(1)”, https://qiita.com/Ushio/items/203f16ad1e23fd42231c, 2017. [Ushio 2017 b] Ushio, “XYZ色空間に迫る(2)”, https://qiita.com/Ushio/items/7a5d80612796c4bcfca6, 2017.