Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Pocol
February 26, 2018
11k

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

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

Pocol

February 26, 2018
Tweet

Transcript

  1. 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) 位置座標とみなす 空間上に点を打てる どんな図になる? 平均的な人間の色の感じ方を実験で求めてグラフにした。
  2. 具体例 1.0 + 0.5 + 0.25 , , = (1.0,

    0.5, 0.25) 位置座標とみなす r g b 空間上の位置座標 =色度 色による座標なので”色度” といいます
  3. ルールづけ 色のベクトルを単位ベクトル化して[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]の範囲に収まる。 3つたすと1になる。 2つ分かれば残りは自動的に求まる。 2次元で表せる!
  4. 色度図 = + + = + + = 1 −

    − として 2次元上にとをプロットした図
  5. 色度図からもとに戻したいとき = + + = + + = 1 −

    − ? 方程式が解けない。 もう1つ変数が必要になる。
  6. テレビの種類 ・CRT ブラウン管テレビ ・HDTV ハイビジョンテレビ(1080p) ・UHDTV ウルトラハイビジョンテレビ(4K) ・HDRTV 高色域テレビ SDR

    : Standard Dynamic Range HDR : High Dynamic Range 雑に言うと RGBで1.0までしか出せない 雑に言うと RGBで1.0以上が表現できる
  7. 色空間の変換 変換前の色空間を構成する3ベクトルである原刺激, , とする。 変換後の色空間を構成する3ベクトルである原刺激, , の座標値を それぞれ, , ,

    , , , , , , とすると, 次のように書ける。 = + + = + + = + + これを行列で表記すると… = となる。 RGB→XYZへ変換したい場合は逆行列を左から掛ければよい。 式(1) プログラマ向け
  8. 三刺激値の変換 ある色光の原刺激, , における三刺激値を, , とし, 原刺激, , での三刺激値を, ,

    とします。このとき,色光は = = + + = + + と表され,これを行列で表現すると となります。ここで式(1)を代入すると = = 右から逆行列を掛けて,転置して列ベクトル表記に直すと = −1 式(2) プログラマ向け
  9. 白色点による行列の正規化 色空間変換前のXYZ色空間における白色点を , , として, 輝度値が1になるように で正規化した白色点が,変換後のRGB空間で , , =

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

    行列とする = −1 XYZからRGBへの変換は右から行列 の逆行列をかければ求まるので, で求めることができます。 式(4) 式(5) プログラマ向け
  11. 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
  12. 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
  13. 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
  14. 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が共同開発。
  15. リニアワークフロー 編集作業 新規作成 画像編集ソフト 画像編集ソフト テクスチャ保存 モニター 表示 持ち上げる 結果として線形

    もち下げる 人間の目 ガンマ補正済み 作業空間では線形データにする カラープロファイル も埋め込む カラープロファイル を指定 OETF EOTF
  16. リニアライティング 初期化処理 テクスチャ ロード ガンマ補正済み 非線形データ シェーダ ドライバ 変換 持ち下げ

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

    線形データ 変換 ガンマ補正 表示 ガンマ変換 モニター 知覚 人間の目 結果として線形 ライティングを 線形空間で行う ユーザーに 届く結果を線形にする
  18. 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 より引用
  19. PC

  20. PC

  21. リニアライティング 初期化処理 テクスチャ ロード ガンマ補正済み 非線形データ シェーダ 変換 持ち下げ ライティング

    線形データ 変換 ガンマ補正 表示 ガンマ変換 モニター 知覚 人間の目 結果として線形 ライティングを 線形空間で行う ユーザーに 届く結果を線形にする
  22. 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にする
  23. HDRワークフロー(その2) アプリケーション層 シーン描画 ポストエフェクト トーンマップ 色域変換 BT.709線形 HDR BT.2020 HDR

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

    BT.2100 HDR OETF BT.2100 HDR モニタ出力 EOTF BT.2100 HDR BT.2100ベース 最初から最後まで同じ色域。
  25. [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.
  26. [Otha 1993] 太田登, “色彩工学 第2版”, 東京電機大学出版局, 1993. [Utagawa 2013] 歌川健,

    “光学ライブラリー5 デジタルイメージング”, 朝倉書店, 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.