Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

最初に… ・社内の勉強会で使用した資料をWebで公開できるように， 編集を加えた資料です。 公開するための都合上，スライドを削除している部分が多くあり， 説明が連続しない箇所などがあります。 予め，ご了承ください。 ・また説明上の間違い等があれば， ご指摘いただけると大変ありがたいです。

Slide 3

Slide 3 text

目的 昨今，PS4やXbox OneなどのゲームハードでHDRディスプレイ対応するものも増えてきました。 社内プロジェクトでもHDRディスプレイ対応しなければいけないプロジェクトも出てきています。 対応するのであれば，いい加減ではなくきっちりと対応したいものです。 HDRディスプレイで表示するための正しい知識を身に付けておく必要があります。 そのために， 色をきっちり勉強しましょう。

Slide 4

Slide 4 text

勉強会の予定 土台固め編 リニアワークフロー，作業環境の設定 実作業編 RGB表色系，XYZ表色系，色空間，色度図 色温度，標準光源，モニターガンマ，色の規格 素材撮影について，カメラの色空間 HDRワークフロー，各社の対応について

Slide 5

Slide 5 text

土台固め編 専門用語の意味と定義についての説明

Slide 6

Slide 6 text

目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。

Slide 7

Slide 7 text

色って? 色とはそもそも何?

Slide 8

Slide 8 text

そもそも… そもそも，色って？ 我々は色をどのように感じるのでしょうか？ まずは人間がどのように色を感じ取るのかについて学習してみましょう。

Slide 9

Slide 9 text

色の知覚

Slide 10

Slide 10 text

色の知覚

Slide 11

Slide 11 text

光 ※図は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/ より引用

Slide 12

Slide 12 text

可視光 人間は光をもとに色を知覚します。 光がなければ色を知覚することは出来ません。 我々が色として知覚できる光の範囲があります。 これを“可視光”と呼びます。 380[nm]～780[nm]を可視光と定義することが多いです。 380[nm]より先は紫外線 780[nm]より先は赤外線

Slide 13

Slide 13 text

色の知覚

Slide 14

Slide 14 text

人間の目 ※図はhttp://photozou.jp/photo/show/299276/47434811 より引用

Slide 15

Slide 15 text

目の構造 ※図は https://ja.wikipedia.org/wiki/%E7%B6%B2%E8%86%9C より引用 角膜 網膜 網膜血管 黄斑 虹彩 水晶体

Slide 16

Slide 16 text

色を見分ける 人間は網膜に ・明るさを見分ける視細胞 ・色を見分ける視細胞 という2種類の視細胞を持っています。 錐状体はさらに3種類に分類することができます。 杆状体 錐状体 L錐状体 M錐状体 S錐状体

Slide 17

Slide 17 text

錐状体

Slide 18

Slide 18 text

どの光を明るいと感じるか? 可視光は380[nm]～780[nm]ですが， どの波長の光を明るいと感じるのでしょうか? 国際照明学会(CIE)が実験を行い， 測定データをグラフにしました。

Slide 19

Slide 19 text

明るさの感じ方 分光視感効率

Slide 20

Slide 20 text

放射量と測光量の関係 放射量 物理量 人間の明るさの感じ方 分光視感効率 測光量 心理物理量 照明器具は主に 測光量を用いる

Slide 21

Slide 21 text

色の知覚 どのぐらい光を反射するか？ 反射率

Slide 22

Slide 22 text

おさらい ・人間が色を感じる仕組みについて学習しました。 ・明るさを見分ける杆状体と 色を見分ける錐状体という視細胞を持ちます。 ・錐状体はL錐状体・M錐状体・S錐状体の3つ種類に分けられ， それぞれ赤，緑，青を見分けます。 ・放射量に分光視感効率をかけたものが測光量となります。 照明器具は測光量を単位として用います。

Slide 23

Slide 23 text

色を表現しよう

Slide 24

Slide 24 text

色を人に伝える こんな経験ないですか？ 「これもうちょっと青くしておいて」 「かぎりなく透明に近いブルーにしておいて」 「燃え滾る様な赤にしてほしいんですよね」 言いたいことはわかる。 だが，それってどんな色よ？ でも，俺が色付けたら違うっていうんでしょ？ 言葉で人に伝えるのは難しい…。

Slide 25

Slide 25 text

どうする?

Slide 26

Slide 26 text

色見本を用意する マンセル表色系 ※図はhttp://blog.livedoor.jp/mtsk44h6-004/archives/2011-04-13.html より引用

Slide 27

Slide 27 text

どうする??

Slide 28

Slide 28 text

色以外の場合は? 例えば，大きさ。 大きさはどうやって図りますか? 色も同じことが出来ないものでしょうか?

Slide 29

Slide 29 text

色の物差しが欲しい。 いっそのこと，色を数値として表せばよいのでは？ では，どうやって数値(基準)を定める？ できるだけみんなで使えるようにしたい。

Slide 30

Slide 30 text

色の基準をつくる 俺の色とお前の色は違う！を無くす。

Slide 31

Slide 31 text

みんなの色を統一したい どうする？ 「いろいろな人の測定データ取って 平均とって基準にすればいいんじゃね?」 またまた，国際照明学会(CIE)が 頑張って調べました。

Slide 32

Slide 32 text

人体実験する

Slide 33

Slide 33 text

等色実験 試験光を左右から別々に当てて，色が同じかどうか判定してもらう。 色が同じであると感じたときのR, G, Bの値を記録して， 人間がどういう値のときに色が同じであると感じるのかを実験で調べる。 ※図はhttp://www.dic-color.com/knowledge/xyz.htmlより引用 [R]は700.0[nm] [G]は546.1[nm] [B]は435.8[nm] の単色光とする。

Slide 34

Slide 34 text

実験結果 CIEが実験結果の平均をグラフにしてまとめました。 これをCIE 1931 RGB等色関数と呼びます。

Slide 35

Slide 35 text

何がうれしいの? 光の波長からR, G, Bの割合が分かるようになる。 RGBのルールが決まったので， 色をRGBの数値として表せる 0.2453 0.1361 -0.0011

Slide 36

Slide 36 text

でも、ちょっとまって 何か気づくことはありませんか？ マイナス がある

Slide 37

Slide 37 text

実は… 実は再現できない色があって，試験光に別の色を加えて鮮やかさを低下させて， 等色させるということを行った。 ここに数式を入力します。 + = + = − + + マイナスになる ※図はhttp://www.dic-color.com/knowledge/xyz.htmlより引用

Slide 38

Slide 38 text

マイナスは使いづらい 多くの場合，色がマイナスになることが考慮されていない。 マイナスだった場合は0にするなどのクランプ処理が行われることがある。 マイナスが扱えない機械(デバイス)等も存在する。 どうしよう?

Slide 39

Slide 39 text

線形変換 数学上のテクニックを使ってマイナスを無くす。 同じ矢印の方向でも軸を別にとって別成分で表すことが出来る。 軸を別にする = 別空間で表す

Slide 40

Slide 40 text

線形変換後 CIE 1931 XYZ等色関数 計算上の概念だけで存在する色なので”虚色”と呼ばれます。 マイナスを 無くした!

Slide 41

Slide 41 text

明るさの感じ方 分光視感効率

Slide 42

Slide 42 text

あとで学習するための用語の確認 色を表現するための一定のルールで体系化されたものを ”表色系(color system)”と言います。 原色と言わず ”原刺激(primary stimulus)”と呼ぶ。 これはXYZが実在しない虚色であるため色と呼べないから。 任意の色光を3種の原刺激, , の割合を ”三刺激値(tristimulus values)”と呼ぶ。 = + + , , が三刺激値 , , = (0.5, 0.2, 1.0) …のように表せる。

Slide 43

Slide 43 text

おさらい みんなの色を統一したい。 → 国際照明学会が実験で調べて基準を作ってグラフ化した。 グラフを見れば，光の波長ごとに平均的な人が どれぐらい赤であると感じるか？ どれぐらい緑であると感じるか？ どれぐらい青であると感じるか？ を求めることができる(=色を求めることができる）。 実験値はマイナスが含まれるので，使いやすい形としてXYZ色空間にした。

Slide 44

Slide 44 text

目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。

Slide 45

Slide 45 text

色空間って? よく聞くけど…何？

Slide 46

Slide 46 text

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) 位置座標とみなす 空間上に点を打てる どんな図になる? 平均的な人間の色の感じ方を実験で求めてグラフにした。

Slide 47

Slide 47 text

具体例 1.0 + 0.5 + 0.25 , , = (1.0, 0.5, 0.25) 位置座標とみなす r g b 空間上の位置座標 =色度 色による座標なので”色度” といいます

Slide 48

Slide 48 text

よし，実際に点を打ってみよう！

Slide 49

Slide 49 text

CIE 1931 RGB色空間

Slide 50

Slide 50 text

色空間 CIE 1931 RGB表色系やCIE 1931 XYZ表色系を紹介しました。 このとき，色は3成分で表現します。 この3成分を座標とみなして，点を配置することにより空間を生成する ことが可能です。この色による座標を”色度”と呼びます。 この色の成分により構成される空間を“色空間”と呼びます。 色空間により表現できる色の範囲を”色域”と呼びます。

Slide 51

Slide 51 text

色の基本 前述したように「RGBは使いづらい」という欠点があります。 そこで，色空間の相互変換する際などは 計算上扱いやすい「XYZを基本とする」のが一般的です。

Slide 52

Slide 52 text

XYZについても同じようにやってみよう！

Slide 53

Slide 53 text

CIE 1931 XYZ表色系 JIS Z8781-1の付録を参照

Slide 54

Slide 54 text

CIE 1931 XYZ色空間

Slide 55

Slide 55 text

わかったこと。 色空間は3次元で表現できる！

Slide 56

Slide 56 text

感じること… でも… 「色を表現するのに3次元座標描くとかめんどい。」 3次元で書くのはつらい！ …ので， 2次元で書けるように工夫してみます。

Slide 57

Slide 57 text

ルールづけ 色のベクトルを単位ベクトル化して[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次元で表せる!

Slide 58

Slide 58 text

ルール適用前

Slide 59

Slide 59 text

ルール適用後

Slide 60

Slide 60 text

色度図 = + + = + + = 1 − − として 2次元上にとをプロットした図

Slide 61

Slide 61 text

色度図からもとに戻したいとき = + + = + + = 1 − − ? 方程式が解けない。 もう1つ変数が必要になる。

Slide 62

Slide 62 text

表色系 色度図からは, , を完全に復元できません。 そこで，色度図に成分を加えて記録しておく という表現方法が用いられます。 表色系から表色系への変換は次式で与えられます。 = = = 1 − −

Slide 63

Slide 63 text

おさらい ・色空間 → 色ベクトルによって構成される空間 ・色域 → 色空間が表示できる範囲。 平均的な人間（標準観測者）が 感じることができる色の範囲を図示した。 色が塗っている範囲外は 平均的な人間が色として認識できない領域。 平均的な人間が色として認識できるものは， この領域のどこかに存在する。

Slide 64

Slide 64 text

目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。

Slide 65

Slide 65 text

刀鍛冶 刀鍛冶は刀の色を見て，焼き入れの温度を測る。 ※図はhttp://www.tojiro-japan.co.jp/jp/guide/making_hardening.html より引用 ※図はhttps://blogs.yahoo.co.jp/mochy2156/63276272.html より引用

Slide 66

Slide 66 text

色温度 物体は温度が0[K](=絶対零度)以上であれば発光します。 このときに放射される可視光線の波長(色)は，物体の温度によって決まります。 ある放射体の色度が温度T[K]の黒体の色度に等しいとき， 温度T[K]をこの放射体の”色温度”と呼びます。 ※図はhttps://www.thelightingpractice.com/what-is-color-temperature/ より引用

Slide 67

Slide 67 text

色温度を使った補正方法 実は…身近で使われている。

Slide 68

Slide 68 text

デジカメ使ったことありますか? ※図はhttps://macro-digicam.com/white-balance/ より引用

Slide 69

Slide 69 text

ホワイトバランス オートホワイトバランス 晴天モード 白熱灯モード 日陰モード 白色はRGBを全て含んだ色なので，白色を基準として色味を調整します。 プロ用機材等ではホワイトバランスで白色を選ぶ際に色温度が良く使われます。 ホワイトバランスは色温度が示す色とは逆関係になる点に注意してください。 5200[K] 3200[K] 7000[K] 3000～7000[K] ※図はhttps://macro-digicam.com/white-balance/ より引用

Slide 70

Slide 70 text

色を測る際に注意すること ただ単に測ればいいものではない。

Slide 71

Slide 71 text

測色するのに適していますか?

Slide 72

Slide 72 text

照明も気を付けないとだめじゃない?

Slide 73

Slide 73 text

じゃ、どういう照明が良いの? 市販の光源を選ぶ際の注意点。

Slide 74

Slide 74 text

色無しなら良いってものでもない。 ※図は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/ より引用

Slide 75

Slide 75 text

演色性 演色性とは，照明で物体を照らす時に， 自然光が当たった時の色をどの程度再現しているかを示す指標。 素材撮影をする際は演色性が高い照明を使った方が良い。 演色性が高いかどうかの判断は? 平均演色評価数(Ra)を見る!! Raが100に近いほど演色性が高い。 詳細については日本工業規格 JIS Z:8726:1996を参照

Slide 76

Slide 76 text

演色性の高い照明の例 ※図は http://www.akaricenter.com/chokkan_tokusyu/toshiba/d65.htm より引用

Slide 77

Slide 77 text

おさらい ・色温度を使って色を1次元で表現することもできる。 ・ホワイトバランスは色温度が示す色とは逆の関係。 ・測色する場合は照明に気を付けよう。 色がついてなければ良いってものではない。 ・テクスチャ撮影する場合などは平均演色評価数の高い光源を使おう。

Slide 78

Slide 78 text

目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。

Slide 79

Slide 79 text

ディスプレイと色空間 適切に出力しよう。

Slide 80

Slide 80 text

テレビの種類 ・CRT ブラウン管テレビ ・HDTV ハイビジョンテレビ(1080p) ・UHDTV ウルトラハイビジョンテレビ(4K) ・HDRTV 高色域テレビ SDR : Standard Dynamic Range HDR : High Dynamic Range 雑に言うと RGBで1.0までしか出せない 雑に言うと RGBで1.0以上が表現できる

Slide 81

Slide 81 text

輝度の単位 テレビの輝度には ・ニト ・カンデラ毎平方メートル が使われます。 SDRテレビでは規格上では 100(nit) HDRテレビでは規格上では 最大10000(nit) ※ちなみにsRGBは規格上では 80(nit)です。 1 nit = 1 cd/m2 従来の100倍！

Slide 82

Slide 82 text

トーンマップのグラフだと 今まで (SDR) これから (HDR)

Slide 83

Slide 83 text

100倍はすごい！

Slide 84

Slide 84 text

輝度の単位 テレビの輝度には ・ニト ・カンデラ毎平方メートル が使われます。 SDRテレビでは規格上では 100(nit) HDRテレビでは規格上では 最大10000(nit) ※ちなみにsRGBは規格上では 80(nit)です。 1 nit = 1 cd/m2 従来の100倍！

Slide 85

Slide 85 text

ディスプレイへの出力 ディスプレイに出力する際は 以下の2つを考える必要があります。 (1)色空間 (2)OETF/EOTF/OOTF 色域を定義する ディスプレイで表示するための変換

Slide 86

Slide 86 text

ガンマカーブ ディスプレイでは，入力電圧に対して表示輝度が正比例しないということが分かりま した。 入力電圧に対して曲線的に上昇することが知られています。 この特性を”ガンマ特性”と呼び，次式で表されます。 = CRT(ブラウン管)では = 2.2です。 本来は，出力した画像をそのまま表示してほしい所ですが， ガンマ特性のため輝度が非線形変換されてしまいます。 これは，本来意図した画像出力よりも暗くなることを意味します。

Slide 87

Slide 87 text

ガンマ補正 ディプレイ側で暗くなるのがわかっているのであれば，それを見越して予め逆変換を 掛けておき，ガンマ特性を打ち消すという方法が考えられます。 このような補正を”ガンマ補正”と呼びます。 ガンマ補正なし ガンマ補正あり

Slide 88

Slide 88 text

OETFとEOTF CRTはガンマカーブでしたが， HDRディスプレイは異なるカーブになります。 そのため最近はガンマ補正やガンマカーブと言わず， ・OETF(Opto Electronic Transfer Function) ・EOTF(Electronic Optical Transfer Function) と呼びます。OETFとEOTFは互いに逆関数となります。 持ち下げ 持ち上げ コンテンツ側 ディスプレイ側 OETF EOTF

Slide 89

Slide 89 text

規格化の必要性 機械や機種ごとに(デバイスごとに）異なる色空間を持っています。 異なる機械や機種ごとにデータを相互変換する際に色味が正しくない という状況が発生するようになりました。 パソコンの画像表示や，デジタルカメラの画像生成などの一般的な用途 に十分な色域や画質が保証される規格が必要となります。 ここでは，いくつかの規格について紹介してみます。

Slide 90

Slide 90 text

色空間の表し方 色空間は原刺激(3点)と白色を表す白色点の４点を基に定義されます。 原刺激は範囲を指定するため，白色点は正規化するために使用します。 R，G，B，W で定義。

Slide 91

Slide 91 text

前準備 プログラマ向け ある色空間で表現されたものを 別の色空間で表現したい場合には 色空間の相互変換が必要になります。 ここで， 色空間の変換について説明しておきます。

Slide 92

Slide 92 text

色空間の変換 変換前の色空間を構成する3ベクトルである原刺激, , とする。 変換後の色空間を構成する3ベクトルである原刺激, , の座標値を それぞれ， , , ， , , ， , , とすると， 次のように書ける。 = + + = + + = + + これを行列で表記すると… = となる。 RGB→XYZへ変換したい場合は逆行列を左から掛ければよい。 式(1) プログラマ向け

Slide 93

Slide 93 text

三刺激値の変換 ある色光の原刺激, , における三刺激値を, , とし， 原刺激, , での三刺激値を, , とします。このとき，色光は = = + + = + + と表され，これを行列で表現すると となります。ここで式(1)を代入すると = = 右から逆行列を掛けて，転置して列ベクトル表記に直すと = −1 式(2) プログラマ向け

Slide 94

Slide 94 text

白色点による行列の正規化 色空間変換前のXYZ色空間における白色点を , , として， 輝度値が1になるように で正規化した白色点が，変換後のRGB空間で , , = 1,1,1 になる ように変換する行列を求めます。 RGB空間での正規化定数を , , として，式(2)に代入して = −1 / 1 / が成り立てばよいことになります。 これを使って三刺激値の変換について書き直すと = −1 または = 式(3) プログラマ向け

Slide 95

Slide 95 text

= を整理して書き直すと = 0 0 0 0 0 0 = 行列とする = −1 XYZからRGBへの変換は右から行列 の逆行列をかければ求まるので， で求めることができます。 式(4) 式(5) プログラマ向け

Slide 96

Slide 96 text

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}

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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}

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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}

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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が共同開発。

Slide 105

Slide 105 text

※図はhttp://www.soumu.go.jp/main_content/000417993.pdf より引用

Slide 106

Slide 106 text

おさらい ・ディスプレイへの出力する際は (1)色空間 (2)OETF（従来でいう所のガンマ補正) を考慮しよう。 ・ディスプレイは出力サポートしている規格がある。 規格に合わせた適切な出力を行おう。

Slide 107

Slide 107 text

実践編 デザインツールの設定とプログラムの設定

Slide 108

Slide 108 text

目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。

Slide 109

Slide 109 text

対応すべき内容 ・リニアライティング ・ディスプレイへの出力設定の変更 ・色空間の変換 ・OETFの適用 ・トーンマッピングの設定 などなど。

Slide 110

Slide 110 text

リニアライティング ゲームで出力される画をきちんとしよう。

Slide 111

Slide 111 text

復習。 ディプレイ側で暗くなるのがわかっているのであれば，それを見越して予め逆変換を 掛けておき，ガンマ特性を打ち消すという方法が考えられます。 このような補正を”ガンマ補正”と呼びます。 ガンマ補正なし ガンマ補正あり リニアワークフローは こちらの見た目にする

Slide 112

Slide 112 text

単純な画像表示 画像ビューア 画像データ 読み込み ガンマ補正済み 非線形データ モニター 表示 ガンマ変換 人間の目 色の知覚 線形データ 人間の目に届いた際に線形になるようにする! OETF EOTF

Slide 113

Slide 113 text

リニアワークフロー 編集作業 新規作成 画像編集ソフト 画像編集ソフト テクスチャ保存 モニター 表示 持ち上げる 結果として線形 もち下げる 人間の目 ガンマ補正済み 作業空間では線形データにする カラープロファイル も埋め込む カラープロファイル を指定 OETF EOTF

Slide 114

Slide 114 text

リニアライティング 初期化処理 テクスチャ ロード ガンマ補正済み 非線形データ シェーダ ドライバ 変換 持ち下げ ライティング 線形データ 変換 ドライバ ガンマ補正 表示 ガンマ変換 モニター 知覚 人間の目 結果として線形 ライティングを 線形空間で行う ユーザーに 届く結果を線形にする sRGBフォーマット のみサポート sRGBフォーマット のみサポート

Slide 115

Slide 115 text

リニアライティング 初期化処理 テクスチャ ロード ガンマ補正済み 非線形データ シェーダ 変換 持ち下げ ライティング 線形データ 変換 ガンマ補正 表示 ガンマ変換 モニター 知覚 人間の目 結果として線形 ライティングを 線形空間で行う ユーザーに 届く結果を線形にする

Slide 116

Slide 116 text

リニアライティングするには? エンジニアとデザイナーが協力することが大事です。 ・ライティング処理はエンジニア ・ライティングに使うテクスチャはデザイナー きちんと理解した上で 適切なデータやプログラムを作成する必要があります。

Slide 117

Slide 117 text

テクスチャの生成 テクスチャを作成する際には次のことに気を付ける必要があります。 (1)リニアな環境でデザインツールを使用する (2)保存する際に適切なフォーマットで出力する 作成する環境がリニアでなければ，正しいデータが作れません。 また保存するデータもリニアを考慮して出力しなければいけません。 こうした環境で作業することを”リニアワークフロー”と呼びます

Slide 118

Slide 118 text

※図はhttps://cedil.cesa.or.jp/cedil_sessions/view/150 より引用

Slide 119

Slide 119 text

※図はhttps://cedil.cesa.or.jp/cedil_sessions/view/150 より引用

Slide 120

Slide 120 text

※図はhttps://cedil.cesa.or.jp/cedil_sessions/view/150 より引用

Slide 121

Slide 121 text

デザイナー必見。 まだ，スライドを見たことがない方は一度見ておくことをお勧めします。 CEDILで閲覧できます。 https://cedil.cesa.or.jp/cedil_sessions/view/150

Slide 122

Slide 122 text

目標 (1)ディスプレイに表示される項目の意味が分かるようになる。 (2)意味を分かった上で適切に設定できるようになる。 (3)適切な描画を行えるようになる。

Slide 123

Slide 123 text

データの取り扱いに気を付けよう ※図は，https://cedil.cesa.or.jp/cedil_sessions/view/1449 より引用

Slide 124

Slide 124 text

デザインツールの設定 カラープロファイルを適切に設定しよう

Slide 125

Slide 125 text

ICCプロファイル ICC(International Color Consortium)の規格では， デバイスに依存しない色空間を設け，機器独立色再現を実現する。 デバイスに依存しない色空間は ・CIE XYZ色空間(ディスプレイ用) ・CIE LAB色空間(プリント用) を前提とする。 ・照明光源はD50とする。

Slide 126

Slide 126 text

ICCプロファイルの仕様 http://www.color.org/icc_specs2.xalter http://www.color.org/specification/ICC1v43_2010-12.pdf プログラマ向け 下記サイトを参照。

Slide 127

Slide 127 text

ICCプロファイルの場所 C:/Windows/System32/spool/drivers/color/ など

Slide 128

Slide 128 text

Windowsでの設定 Windowsシステムツール → コントロールパネル → 色の管理 即時反映されないので注意。

Slide 129

Slide 129 text

Photoshop 詳細は以下のページを参照。 https://helpx.adobe.com/jp/photoshop/kb/216943.html PSDの保存時にICCプロファイルを埋め込んでおく。

Slide 130

Slide 130 text

After Effects After EffectsもPhotoShop同様にICCプロファイルを使用することができます。 下記ページを参照。 https://helpx.adobe.com/jp/after-effects/using/color-management.html どういったプロファイルを使うかは 担当のプログラマーさんと よく相談してみてください。

Slide 131

Slide 131 text

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にチェックを入れて保存。

Slide 132

Slide 132 text

おさらい ・リニアライティングで描画しよう。 ライティングを線形に行う。 テクスチャに気を付ける。 ・作業環境もリニアにしよう。

Slide 133

Slide 133 text

素材撮影 正しい色が再現できるようにカメラで撮ろう。

Slide 134

Slide 134 text

折角だから… 折角テクスチャ素材を使うなら， やっぱり正確な色の素材を使いたい。 色を正しく測る方法が必要になってくる。

Slide 135

Slide 135 text

色の知覚 光源のデータ 人間のデータ 物体のデータ 測定済み 撮影時の値を 知っておく必要がある

Slide 136

Slide 136 text

光を測ろう 測定器具が存在します。 ・分光放射輝度計 ・分光放射照度計 放射輝度が測れる。 (方向を考慮できる) 最強。 でも高額(358万円とか…) 放射照度が測れる。 (方向が考慮できない) 精度がピンキリ リーズナブルな値段(17万円)

Slide 137

Slide 137 text

色の知覚 光源のデータ 人間のデータ 物体のデータ 測定済み 測定器で計測 反射率が知りたい

Slide 138

Slide 138 text

反射率 反射率 = 反射後の光の量 反射前の光の量 反射後の光を測定できれば求まる

Slide 139

Slide 139 text

本当に毎回これやるの? 確かに正しく色が取れそうだ。 でも，面倒くさそう。 もっとお手軽な方法ないの? カメラを用いた色の計測

Slide 140

Slide 140 text

もう一度確認。 正しい色のテクスチャ素材を使いたい。 カメラで撮影したものを正しい色になるように補正すればよいのでは? カメラの色を補正したい。 カメラがどう色を変えるのかを知りたい。

Slide 141

Slide 141 text

どうする? 撮影対象XYZ XYZから カメラ色空間への変換 撮影結果RGB (RAW画像の画素値) そのために、 ここが知りたい！ ここを求めたい

Slide 142

Slide 142 text

どっちのほうが求めやすいですか? 6 6 2 ▲は，わからない数が少ない方が求めやすい。

Slide 143

Slide 143 text

未知を求める。 撮影対象XYZ XYZから カメラ色空間への変換 撮影結果RGB (RAW画像の画素値) XYZが分かっているもの を対象とする 撮影すれば出る 求められそう！

Slide 144

Slide 144 text

色が分かっているものって? 色が計測されて既知のものを用意したい。 各パッチの 分光反射率 が分かっている Color Checker!! ※図は http://www.xrite.co.jp/products/colorchecker-target/colorchecker-passport.html より引用

Slide 145

Slide 145 text

カラーチェッカーの分光反射率 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

Slide 146

Slide 146 text

色を測る 撮影対象XYZ XYZから カメラ色空間への変換 撮影結果RGB (RAW画像の画素値) リバースエンジニアリング で求まる 本来の色が 求められる

Slide 147

Slide 147 text

実際にどうやって使うの? 自前の専用ツール or PhotoShopプラグイン 色の狂い方を逆算 計算データ 自前の専用ツール or PhotoShopプラグイン 色を補正する 補正済み画像 補正前画像 適用

Slide 148

Slide 148 text

より詳しく勉強したい人は 橋口智仁, “カメラ的に正しいフォトリアルグラフィック制作ワークフロー”, CEDEC 2014 https://cedil.cesa.or.jp/cedil_sessions/view/1227

Slide 149

Slide 149 text

なんでこんなことやるの? レタッチするのが面倒くさいから。 素材を手動でレタッチすることなく， 正しい状態で使いたいから。 自動補正の方が，圧倒的にコストが安い。 (数時間かけてレタッチよりも数分かけてボタンを数回押すだけのほうが間違いなく人的コストは安く済む) その分，デザイナーは魅力的な絵作りにコストをかけられる。

Slide 150

Slide 150 text

おさらい ・カメラはRAWで撮影しよう。カメラの生データを使おう。 ・カメラの色空間を求めておこう。 ・撮影時にはカラーチェッカーを忘れずに！ ・撮影時のデータを測定器で取っておくともっと良し。 ・補正はツールやプラグインで自動化しよう。 本来の魅力的な絵作りのためのデザイン作業に力を注ぎましょう。

Slide 151

Slide 151 text

ディスプレイへの出力設定 開発環境を適切に設定しよう！

Slide 152

Slide 152 text

ディスプレイの設定 作業ディスプレイの色空間を 適切に設定する必要があります。

Slide 153

Slide 153 text

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 より引用

Slide 154

Slide 154 text

HDMI切り替え器 切り替え器側もHDMI 1.4以上に対応している必要があります。 こちらも4K HDR対応のものにしておきましょう。 対応していないものを使うとディスプレイに出力されません。 ※図は http://www.sin-space.com/entry/2017/08/23/095041 より引用

Slide 155

Slide 155 text

PC ・Windows 10 Fall Creators Updateが適用されている必要があります。 ・ディスプレイ側の設定をHDRが出力できる状態に変更します。

Slide 156

Slide 156 text

PC

Slide 157

Slide 157 text

PC

Slide 158

Slide 158 text

PlayStation4

Slide 159

Slide 159 text

PlayStation4

Slide 160

Slide 160 text

PlayStation4

Slide 161

Slide 161 text

XBox One X

Slide 162

Slide 162 text

XBox One X

Slide 163

Slide 163 text

XBox One X

Slide 164

Slide 164 text

XBox One X

Slide 165

Slide 165 text

レンダーターゲット 高色域に対応するにはレンダーターゲットを従来の8bitフォーマットから10bit以上の フォーマットに変更する必要があります。 Direct3D であれば ・DXGI_FORMAT_R10G10B10A2_UNORM等に変更。 プログラマ向け

Slide 166

Slide 166 text

ディスプレイ出力の設定 ディスプレイの出力設定を変更します。 PCであれば ・IDXGISwapChain3::SetColorSpace1()メソッドで出力色空間を設定。 プログラマ向け

Slide 167

Slide 167 text

HDR画像を表示してみよう トーンマッピングの重要さ

Slide 168

Slide 168 text

SDRディスプレイでの表示 SDRディスプレイでHDRの描画結果をそのまま出力してみる。

Slide 169

Slide 169 text

白飛びする… SDRモニターで， 無加工のHDR描画結果を出力するには無理がある。

Slide 170

Slide 170 text

なぜ白飛びするのか? 0～1の範囲外の値がカットされるから。 ここだけが 残る データが 消えて 1.0扱い

Slide 171

Slide 171 text

どうする?

Slide 172

Slide 172 text

安直な考え 範囲に収まるように全体的にスケールダウンすればいいんじゃね?

Slide 173

Slide 173 text

実装してみた。

Slide 174

Slide 174 text

無加工

Slide 175

Slide 175 text

スケールダウン

Slide 176

Slide 176 text

なんか，見た目がダメ。 一応データ的には範囲に収まってはいる。

Slide 177

Slide 177 text

どうする? 白飛びしている明るいところだけが気になるので， この部分の範囲を縮めてみたらどうか？ この部分を 圧縮する 0~1の範囲内に 収まるように圧縮

Slide 178

Slide 178 text

Reinhardトーンマッピング Erik Reinhardによって提案されたトーンマップ[Reinhard 2002]. = + 1

Slide 179

Slide 179 text

無加工

Slide 180

Slide 180 text

Reinhard

Slide 181

Slide 181 text

Hableトーンマッピング Uncharted 2で使われている映画調トーンマッピング[Hable 2010] = + + + + − = (2) () = 0.15 = 0.50 = 0.10 = 0.20 = 0.02 = 0.30 = 11.2

Slide 182

Slide 182 text

無加工

Slide 183

Slide 183 text

Reinhard

Slide 184

Slide 184 text

Hable

Slide 185

Slide 185 text

もうちょい，見た目を良くしたい。 少しは見れるようになった。

Slide 186

Slide 186 text

どうする? 明部と暗部の両方の範囲を縮めてみる。 真ん中部分はなるべく元の絵を保つようにしてみる。 暗部も圧縮 明部も圧縮

Slide 187

Slide 187 text

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/ より引用。

Slide 188

Slide 188 text

無加工

Slide 189

Slide 189 text

Reinhard

Slide 190

Slide 190 text

Hable

Slide 191

Slide 191 text

ACES近似

Slide 192

Slide 192 text

ここまでは，SDR時代のお話。

Slide 193

Slide 193 text

時代は変わった。 HDRディスプレイの時代になった！ 無加工のHDR描画結果をそのまま表示してみよう。 どうなる？

Slide 194

Slide 194 text

HDRディスプレイでの表示 何かうまくいかない。いくつか問題点がある。 ・HDRなのにSDRよりも暗く見える。 ・SDRはトーンマップがあったせいか，生のままだと見た目が違う。 明るさを調整したい。 アーティスティックな調整をしたい。 生データを使うのはまだ早かった。調整が必要。

Slide 195

Slide 195 text

HDRディスプレイ向けトーンマップ まだまだ，トーンマップは必要。

Slide 196

Slide 196 text

スケールアップReinhard ReinhardをHDRディスプレイに適用できるように単純にスケールアップ。 従来のSDRで使っていた式 HDRディスプレイ向けに拡張 = + 1 ∗ = + 1 最大輝度値のスケール (1.0 = 100[nit]) 単純なスケールだと SDRとの互換性が取れない。

Slide 197

Slide 197 text

無加工

Slide 198

Slide 198 text

Reinhard SDR

Slide 199

Slide 199 text

Reinhard SDRを10倍にスケールアップ

Slide 200

Slide 200 text

SDR部分が全く異なる 拡大 全然一致してない!

Slide 201

Slide 201 text

SDRとの互換をなるべく保つ 暗部がなるべく一緒になるようにする。 拡大

Slide 202

Slide 202 text

互換を考慮した拡張Reinhard () = + 1 () = + = 100 100 − SDR HDR

Slide 203

Slide 203 text

Reinhard SDR

Slide 204

Slide 204 text

Reinhard SDRを10倍にスケールアップ

Slide 205

Slide 205 text

Reinhard HDR

Slide 206

Slide 206 text

必要とされるもの。 [Kawase 2016]

Slide 207

Slide 207 text

Andohトーンマップ フロムソフトウェアの安藤氏が提案しているトーンマップ[Andoh 2017] ReinhardトーンマップをHDR対応できるように拡張。 さらにコントラスト調整も可能で，逆関数も求めやすい。

Slide 208

Slide 208 text

無加工

Slide 209

Slide 209 text

Andoh SDR

Slide 210

Slide 210 text

GTトーンマップ GT Sportで使われているトーンマップ[Uchimura 2017] HDRを第１優先にした設計。SDRとHDRの両対応をしている。 計算式が公開されている(https://www.desmos.com/calculator/et1qmcg10s)

Slide 211

Slide 211 text

無加工

Slide 212

Slide 212 text

GT SDR

Slide 213

Slide 213 text

Synthesisトーンマップ LDR部分向けのカラーフィルムの写真特性曲線の近似式と HDR部分向けの曲線の２つを合成したお手製トーンマップ。 基本的な調整パラメータは2つなので，調整しやすい。逆関数は解析的に求められる。 HDR部分のスケールアップが可能。

Slide 214

Slide 214 text

無加工

Slide 215

Slide 215 text

Synthesis SDR

Slide 216

Slide 216 text

おさらい ・HDRの描画結果を魅力的に見せるためにはトーンマップが必要。 ・HDRディスプレイ向けのトーンマップは モニターの最大輝度値に合わせて出力するように調整する必要がある。 ・SDRとHDRを完全に見た目を一致させることはできないので， どちらを優先とするかプロジェクトで話し合いましょう。 ・でも，可能な限りSDRとHDRで見た目が一緒になるように努力はしましょう。

Slide 217

Slide 217 text

HDR対応したけど…。 HDRディスプレイ対応してみた。

Slide 218

Slide 218 text

やってみました。 対応してみたんだけども， ・何か黒が浮く。 ・HDRなのに暗い。 …という問題に悩む。 他社でも同様の報告がある。 [Uchimura 2017] [Kawase 2016] [Tanaka 2017]

Slide 219

Slide 219 text

なぜだ。 大きくテレビ側に問題があることがわかりました。 (1)テレビが規格仕様を守って作られていない。 =画改されている (2)OETFとEOTFが互いに逆関数になっていない。 ＝実はリニアになっていない。

Slide 220

Slide 220 text

問題点(1) 画改 市販のテレビは見た目が良くなるように各社でブーストされている。 ・sRGBの規格上の輝度は 80 [nit] ・実際に測定してみると 300[nit] というものも存在する。 仕様と3倍近く輝度が異なる。 ＝仕様通りに出すと3倍暗くなる。

Slide 221

Slide 221 text

どうする? 計算する際の基準値を仕様通りではなく， ブーストしたものに合わせる。

Slide 222

Slide 222 text

問題点(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

Slide 223

Slide 223 text

おさらい ・ ・SDRの見た目を保ちたい場合はOOTFを導入を検討しよう。

Slide 224

Slide 224 text

HDRワークフロー HDRディスプレイ対応についてのまとめ。

Slide 225

Slide 225 text

リニアライティング 初期化処理 テクスチャ ロード ガンマ補正済み 非線形データ シェーダ 変換 持ち下げ ライティング 線形データ 変換 ガンマ補正 表示 ガンマ変換 モニター 知覚 人間の目 結果として線形 ライティングを 線形空間で行う ユーザーに 届く結果を線形にする

Slide 226

Slide 226 text

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

Slide 227

Slide 227 text

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

Slide 228

Slide 228 text

HDRワークフロー いくつか対応パターンがある。 ・シーン描画をどの色空間でやるか? ・UI描画をどの色空間でやるか? などでパターンが分岐。 詳細については川瀬氏のCEDEC KYUSHU 2017のスライドが参考になる。 -川瀬正樹, “実践的なHDR出力対応 ～レンダリングパイプラインの構築～ “, CEDEC KYUSHU 2017.

Slide 229

Slide 229 text

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にする

Slide 230

Slide 230 text

HDRワークフロー(その2) アプリケーション層 シーン描画 ポストエフェクト トーンマップ 色域変換 BT.709線形 HDR BT.2020 HDR UI描画 色域変換 BT.2100 HDR OETF BT.2100 HDR モニタ出力 EOTF BT.2100 HDR BT.709ベース トーンマップ前にBT.2100に変換

Slide 231

Slide 231 text

HDRワークフロー(その3) アプリケーション層 シーン描画 ポストエフェクト トーンマップ BT.2100線形 HDR BT.2100 HDR UI描画 BT.2100 HDR OETF BT.2100 HDR モニタ出力 EOTF BT.2100 HDR BT.2100ベース 最初から最後まで同じ色域。

Slide 232

Slide 232 text

おさらい ・HDRディスプレイ対応する場合は， どのタイミングで色空間を変換するかに気を付けよう。 ・ ・どの色空間でレンダリングをするか？ プロジェクトごとに話し合って方針を決めましょう。

Slide 233

Slide 233 text

まとめ ・色についての理解を深めました。 ・色空間について学習しました。 ・OETF/EOTF/OOTFについて学習しました。 ・リニアワークフローについて学習しました。 ・デザインツールの設定について学習しました。 ・テクスチャ素材を撮影して補正する方法について学習しました。 ・ディスプレイへの出力方法について学習しました。 ・トーンマッピングについて学習しました。 ・ ・ ・

Slide 234

Slide 234 text

お疲れ様でした。 以上で色空間について勉強会は終了です。 可能であれば， 是非勉強した内容を業務に生かしてください。 長時間お疲れ様でした。

Slide 235

Slide 235 text

参考文献

Slide 236

Slide 236 text

[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.

Slide 237

Slide 237 text

[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.