Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
お寿司x画像表現 〜画像処理をはじめる前に考える事 〜 本物の RGB を知らない人へ 2016年3月14日(月) “よや”
Slide 2
Slide 2 text
自己紹介 (1/2) • プロフィール twi=er:yoya h=ps://osdn.jp/users/yoya/ • 職歴 – 富士通: 交換機、IP電話 – IIJ: (あまり役に立てなかったので秘密) – i-‐revo(KONAMI系列): 携帯サイト – GREE: SNS、ゲーム、又は画像周辺 – リタイアして神奈川の片田舎に隠棲中
Slide 3
Slide 3 text
自己紹介 (2/2) • ImageMagick のストーカー – 趣味で差分を追い続けてます • h=p://d.hatena.ne.jp/yoya/searchdiary?word=ImageMagick – バグ修正2件、性能改善1件の commit • 6.8.7-‐3 でGIFアニメ生成(というか減色)が速くなったYO! • Flash バイナリマニア – SWF の画像入れ替えツールを作ってました • h=ps://osdn.jp/projects/swfed/ • h=ps://github.com/yoya/IO_SWF
Slide 4
Slide 4 text
はじめに 画像認識の話はしません 画像加工の話も(なるべく)しません • ネタの鮮度が落ちると料理(画像処理)も駄目 • 鮮度(本物のRGB)を保つ為の基礎の話 – 寿司は殆ど出てきません。御免なさい – 時間なくて飛ばすので、キーワードだけ拾って下さい
Slide 5
Slide 5 text
お寿司とSNS • お寿司を食べると、つい撮影して SNS に画像 投稿しますよね? [Y/y] © h=ps://ja.wikipedia.org/wiki/寿司
Slide 6
Slide 6 text
写真の違和感 • 写真は実際より美味しく見えない事が多い – 脳内で鮮やかな色に補正される • 「記憶色」 – 撮影時と閲覧時で環境が違う • 照明が違う • デジカメとモニタで色の扱いが違う – リサイズで色(主に輝度)が変わる
Slide 7
Slide 7 text
よくありそうな対策 • 輝度や彩度を上げる • シャープネスを上げる (今回の話の対象外) $ convert input.jpg –modulate 120,120 output.jpg 輝度 20%増 彩度 20%増
Slide 8
Slide 8 text
いやいや。。 • 小手先より先に知るべき事がある 加工して美味しそうに見えるか、気持ち悪く見える か紙一重だよね! • まずは基礎として RGB を正しく理解しておき たい
Slide 9
Slide 9 text
R,G,B って只の加法混色でしょ? • 多分、リニアRGB をイメージしてるよね? • 実際の RGB 値はガンマ補正される事が多い © h=p://compojigoku.blog.fc2.com/blog-‐entry-‐23.html
Slide 10
Slide 10 text
RGB の色々 • RGB 値の規格が色々ある。殆どガンマ補正に 似た変換が入っている – sRGB (大体はこれ) – Apple RGB – Adobe RGB (プロ向け) – ProPhoto RGB – scRGB (sRGB64) そもそも R(red) って何? © h=p://www.lorenzoduca.com/spazio-‐colore/ Gamut (色域)
Slide 11
Slide 11 text
閑話休題 (難しくなってきたので) © h=p://pe=y.jp/2570
Slide 12
Slide 12 text
基礎に戻りましょう • 素朴な疑問 • 色って何? • そもそも光とは
Slide 13
Slide 13 text
そもそも色とは?光とは? • 光は電磁波の一種である h=ps://www.sugatsune.co.jp/technology/illumi-‐l.php
Slide 14
Slide 14 text
???
Slide 15
Slide 15 text
発光 • 物質は温度に応じて電磁波(光)を出す – Jet engine aierburner test with DIY Gasturbine • h=ps://www.youtube.com/watch?v=WHEHMFbEH8I
Slide 16
Slide 16 text
光から温度を測る例 • 刀鍛冶は刀を水で冷やすタイミングを色で判 断した © h=p://www.tenki.jp/suppl/yasukogoto/2015/11/08/7561.html
Slide 17
Slide 17 text
色温度 (温度で発光色が決まる) • 温度と色(電磁波) -‐ 太陽表面は 5,778K © h=p://www.thermo-‐lab.com/first/emi=ance/ (黒体という前提に注意)
Slide 18
Slide 18 text
色温度の単位 • モニタ設定でお馴染み – 3000K: 電球色 – 3500K: 温白色 – 4200K: 白色 – 5000K: 白昼色 – 6500K: 昼光色 © h=ps://ja.wikipedia.org/wiki/色温度
Slide 19
Slide 19 text
分光スペクトル • 周波数の混ざった光も、波長毎に屈折率が 違うので分光できる © h=ps://www.nippondenshoku.co.jp /web/japanese/colorstory/05_spectrum.htm © h=p://ameblo.jp/nakatasaiko/entry-‐12132371128.html
Slide 20
Slide 20 text
分光分布 • 光源により波長ごとの光の強さは様々 © h=p://y-‐ok.com/eye/eyesight/eyesight-‐2.html
Slide 21
Slide 21 text
美味しく見える分光分布の例 • 黄ばみといった汚いイメージのある黄色を減 らして美味しそうに見せる © h=p://www.polaris-‐hs.jp/interior/light_dining.html
Slide 22
Slide 22 text
色の知覚 • 発色の次は知覚の説明です – 光の伝達も大事なんですが話しません © h=p://ameblo.jp/nakatasaiko/entry-‐12132371128.html
Slide 23
Slide 23 text
視覚 (網膜と錐体) • ひとの五感のひとつ。視覚 • 目のセンサー。色は3つの波長しかみない © h=p://www.me-‐kaiteki.com/eye-‐mechanism/eye-‐structure/visual-‐cell.html © h=p://www.kiriya-‐chem.co.jp/q&a/q52.html
Slide 24
Slide 24 text
3種類の色しか見ていない • 錐体センサーは3つ (R, G, B) – 特定の周波数(L,M,S)とその周辺 h=p://y-‐ok.com/eye/eyesight/eyesight-‐2.html
Slide 25
Slide 25 text
条件等色(メタメリズム) • 光のスペクトル分布が近くても R,G,B の錐体 センサーが同じ刺激なら、同じ色に見える – 但し、照明によって色が変わってくる例 h=p://www.konicaminolta.jp/instruments/knowledge/color/part2/08.html
Slide 26
Slide 26 text
RGB色空間 • 3種類の色刺激センサーがあるので3次元で 表現できる h=ps://msdn.microsoi.com/ja-‐jp/library/windows/desktop/aa511283.aspx
Slide 27
Slide 27 text
HSV, HSL (CSS でも使える) HSV(HSB), HSL の円錐 (カラーピッカーでお馴染 みの) h=p://www.kanazawa-‐net.ne.jp/~pmansato/wpf/wpf_custom_ColorPicker.htm
Slide 28
Slide 28 text
すみません脱線してきました © h=p://blog.livedoor.jp/gikogaku/archives/cat_50048360.html
Slide 29
Slide 29 text
ここまでのまとめ • 照明やモニタの発色は色温度で • 色視覚は L,M,S 波長に対応する R,G,B 刺激
Slide 30
Slide 30 text
やっと本題 • 照明の大切さについて
Slide 31
Slide 31 text
照明の重要性 (1/2) • 照明(色温度)次第で、 同じ白い紙でも 違う色に見える 白紙 白紙 白紙 12000K 3000K 6000K
Slide 32
Slide 32 text
照明の重要性 (2/2) • でも目が慣れると、どれもだいたい白に見え る。 – 写真と記憶が違う原因のメジャー • ホワイトバランスである程度補正できる 白紙 ????K
Slide 33
Slide 33 text
照明とモニタ • 順応の影響で、照明に 合わせてモニタの発色 を変える必要がある (色温度重要) 白表示 RGB: #ffffff 白表示 RGB: #ffffff 白表示 RGB: #ffffff 12000K 3000K 6000K
Slide 34
Slide 34 text
色温度と順応 (応用編) • 複数の色温度を使ってより暖かい色に – (近所のココ壱がこうなってた) 色温度 低め (暖色) 色温度 高め (寒色) 12000K 6000K
Slide 35
Slide 35 text
更に心理モデルも含む • h=ps://twi=er.com/romanvcaugogo/status/ 571134180026773504 • 「このドレスが白と金に見えるか青と黒に見え るか」
Slide 36
Slide 36 text
心理モデル • 画像の中の照明を無意識に想像する – ので、仮想的な照明によって色が違って見える s 12000K 6000K s 3000K 6000K
Slide 37
Slide 37 text
まとめ • 実際より美味しく見えない写真の要素 – 記憶色 – 照明 • 部屋の照明 – 照明とモニタの色温度を合わせるのが大事 • 画像の中に想像する仮想的な照明 – リサイズ処理での変化
Slide 38
Slide 38 text
おわりに • この辺の色を取り巻く環境を理解すると、美味し そうな写真を撮る際の助けになるかもしれませ ん (多分、考えすぎ) Facebook や Twi=er に投稿する時の注意とか。カラー マネジメントと ICC プロファイルとか色々話したかったの ですが、今回は基礎の話だけ 以上です