【Unite Tokyo 2018】XRで心地よい3D体験を生むための、絵画的空間構成手法とUnityへの実装

DAY2 2018/5/9 XRで心地よい3D体験を生むための、 絵画的空間構成手法とUnityへの実装 岩本 義智 Yoshitomo Iwamoto 株式会社ホロラボ / MR コンテンツプロデューサー

自己紹介・会社紹介 HoloLab Inc.

岩本 義智 Ｙｏｓｈｉｔｏｍｏ Iwamoto 株式会社ホロラボ / ＭＲコンテンツプロデューサー 2018-2019 Microsoft MVP (Windows Development) @yoshipon13 iwamoto@hololab.co.jp ＜略歴＞ • 米国アリゾナ大学（Visual Communication学科）卒。 在学中に絵画、イラスト制作を通じて視覚表現の手法 を学ぶ • 2005年に大学へ復学、CG制作の基礎を学びながら TV制作スタジオのインターンを約1年間経験 • 2007年に帰国後、CGのリアルタイムレンダリングを 使ったVR／ARコンテンツの企画プロデュースに従事 • 2017年よりＨｏｌｏＬｅｎｓアプリのプロデュースを開始 • 2018年4月より株式会社ホロラボに参加 HoloLab Inc.

趣味と小遣い稼ぎに時折人物イラストも描いています。

株式会社ホロラボ http://hololab.co.jp/ 所在地：東京都品川区西五反田 設立日：2017年1月18日 創業者：5名 従業員：14名 HoloLens/Windows Mixed Realityに関する開発支援 • 受託開発(コンサルティング/ディレクションを含む) • 研究開発 自社サービス「AR CAD Cloud」の開発 普及啓もう活動 • セミナー • 開発トレーニング • コミュニティ

• http://hololab.co.jp/

今までのXRコンテンツプロデュース実績

（事例画像・映像省略）

XRコンテンツ制作で心がけていること •表示デバイスのスペックで狙える最大限のリアリティを追求 （CGの最適化） •AR・MRでCG映像を投影する背景との親和性 •メインのCGコンテンツを邪魔しない、直感的にユーザーイン ターフェース

本講演の主旨

本講演の主旨 本講演では体感を効果的に生むことができる 絵画的空間構成手法 を用いたMixed Reality 空間の作成とUnityシーンへのUI/UX実装のポイントw を紹介いたします。 1. VR／MRコンテンツで使える、視差に依存しない遠近感 の作り方 2. VR／MRにおける心理的空間演出の手法と実践方法 3. 体感を生む立体的なUIデザインの作成 D ei g o V ela z qu ez , L a s M e n i n a s

VR／MRコンテンツで使える、視差に依存しない 遠近感の作り方 絵画的遠近法

「奥行き感のある絵作り」に苦労していませんか？ • 立体感に乏しい • 空気感に欠ける • ごちゃごちゃして見える ・・・など

ｘRコンテンツが立体的に見えるのは 人間の目の仕組み：「両眼視差」と「眼球運動」を利用 しているから 遠い 開散（開き） 立体映像 近い 輻輳（寄せ） ふくそう 右目 レンズ 左目 ズ レンズ 運動視差 両眼視差 眼球運動

実は、 視差と眼球運動だけに依存し 改善可能か？ た立体表現だと… 動的な被写界深度ぼかしが必要だが、 脳が満足してくれません。 現在のXRデバイス（スマホ、VRゴーグル、 MRデバイス）で表現できない要素 １． ピント合わせ時の毛様体筋の緊張 市販デバイスではまだ対応していない 出典：Science learning – How the eye focuses light 絵画的な単眼性の立体表現である ２． 経験・知識に基づく距離感 「遠近法」 を表示する映像コンテンツ 8階建て？ 30ｍくらい？ で使用することで補完できる！ 地平線？ 40～50㎝？ • 陰影 • パース 15～20㎝？ 150～180㎝？

• http://sciencelearn.org.nz/Contexts/Light-and-Sight/Science-Ideas-and-Concepts/How-the-eye-focuses-light

遠近法とは？ • 遠近法が使われるようになったのは古代ギリシャ・ローマの時期だと言われています。 • 中世に入ると象徴主義の影響で絵画が平面的に。 • 遠近法が再活用されだしたのはルネサンス初期の13世紀以降。イタリアからヨーロッ パに広がります。

遠近法いろいろ 重なり 大きさと位置 キメの細かさ 陰影

線遠近法（透視図法） 消失点（水平線上）に近いもの ほど小さく、遠く 見えるというもので、 一点透視図法、二点透視図法、三点透視図法 などがあります。 http://www.qam-web.com/?p=6115

色彩遠近法 一般的に 手前 後方 手前 暖色系は手前に、 後方 寒色系は後方に あるように見える。

空気遠近法 遠くのものは大気の影響で霞んでいくことから、 彩度、コントラストが弱いものほど遠くに見える という遠近法です。 この現象を利用し、遠景となる 部分を薄く描い て距離感を表現 します。

消失遠近法 焦点に由来する遠近法で、 焦点がぼやけたところほど 遠くに見える という遠近法です。

重なり 大きさと位置 • ２つ以上のものが重なっていると、 前よりも後ろの物のほうが遠くに 見える • 手前のモノほど大きく見えて、 遠くに あるほど小さく見える。 • 水平線に向かって、上にあるものほど 遠くに見える。

キメの細かさ 陰影 • 表面の様子が手前ほど粗く、 遠くほど細かく見える。 • 影や面の輝度によって、出っ張ったり 凹んだり見える。

まとめ 実は、Windows Mixed Realityの初期画面「Cliff House」では様々な遠近法が巧みに使われています。

重なり 空気遠近法 色彩遠近法

空気遠近法 大きさと位置

線遠近法 色彩遠近法 陰影 重なり

VR／MRにおける心理的空間演出の手法と実践方法 感情を喚起する視線誘導

なせ画家はこのような構図を選んだか？ 視線を誘導して見る者の 感情の動きをデザインするため W i lli am -A dolph e B o u g u ereau , T h e B i r t h o f V e n u s

構図とコンテンツ要素を使った視線誘導 R em b r a ndt, T h e A n a t o m y L e s s o n o f D r . D e y m a n

構図とコンテンツ要素を使った視線誘導 C o u r b et, T h e B u r i a l a t O r n a n s

視線誘導：（１）簡単なテスト まず頭の中で魚の絵を描いてみてください。 魚の頭はどちらを向いていますか？ 多くの方（特に右利きの方）が魚の 頭が左向きを想像したはずです。 次に世界の国旗デザインを思い出してください。 どのような法則性がありますか？ 上下左右対称、上下対象、左上に ワンポイント

視線誘導：（２）目の動きと感情の動き 右上 新しいイメージを想像 左上 過去に見たイメージを 想像 最初に操作させたい UI表示に適した方向 無意識に感じている体 の変化や感覚に注意を 向けている 右下 自分自身への問いかけ や独り言 左下

視線誘導：（３）視線の方向と結びつく感情 高揚 幸せ 報酬 Hotなニュース 楽しい 怒り 恐怖、驚き 動揺 ポジティブ ネガティブ リラックス 伝達メッセージ 冷静 悲しみ 注意喚起（弱） 退屈 落胆

視線誘導：（３）視線の方向と結びつく感情 高揚 幸せ 楽しい 怒り 動揺 ポジティブ ネガティブ リラックス 冷静 悲しみ 退屈 落胆

視線誘導：（４）視線が向きやすい方向と順番 最初に操作させたい UI表示に適した方向 幸せ 楽しい １ 怒り 動揺 ２ 悲しみ 退屈 リラックス 冷静 ４ ３

感情と色 黒 悲哀、陰気 白 潔白、清楚 赤 情熱、危険 青 希望、孤独 黄色 平和、活発 灰色 陰鬱、沈静 ピンク 愛、女性的 オレンジ 陽気、快活 黄緑 平和、青春 緑 希望、新鮮 水色 爽快、清涼 紫 高貴、優雅 塚田敢「色彩の美学」より

まとめ XRで視線誘導しやすいおすすめレイアウト 重要な情報を 明るい色で 有用なテキスト情報、 操作ボタン、アイコン など 驚き演出 コンテ ンツ用 領域 画面 重要度は低いが 表示しておきたい 情報

体感を生む立体的なUIデザインの作成 インタラクションに適した視野角と距離

パーソナルスペース 密接距離（15㎝～45㎝） XRコンテンツ表示に 適した距離 個体距離（45㎝～1.2ｍ） 社会距離（1.2ｍ～3.6ｍ） 公衆距離（3.6ｍ以上） ・・・ ・・・ ・・・ ・・・ 非常に親密な関係 親しい間柄の友人など 個人的な関係のない人 講演会の場合など、公衆との間にとる距離 E.ホール「パーソナル・スペースと縄張り意識・空間行動」

パーソナルスペース XRコンテンツ表示に適した距離 密接距離（15㎝～45㎝） 一歩も動かずに キスやハグが できる距離 より感情的 個体距離（45㎝～1.2ｍ） 一歩踏み出せば 握手したり殴ったり できる距離 社会距離（1.2ｍ～3.6ｍ） 複数人と同時に 会話するのに適した 距離 公衆距離（3.6ｍ以上） 自分が集団や風景 に埋没される距離 より冷静

視野と情報の読み取りやすさ 補助視野 誘導視野 安定注視野 有効視野 弁別視野 CGコンテンツ表示に 適した範囲 UI表示に適した範囲 有効視野 中心視野 弁別視野 安定注視野 補助視野 周辺視野 誘導視野 水平 垂直 視機能が優れている中 約 ５ ° 心領域、細かく見れる範 以 内 囲 約５° 以内 参考 眼球運動だけで寸時に 情報を理解できる範囲 約３０° 以内 約２０° 以内 N T S Cテ レ ビ 方 式 の標準観視画角 眼球・頭部運動で無理 なく注視でき、情報を把 握できる範囲 ６ ０ °‐ ９０° ４ ５ °‐ ７０° 情報端末利用空 間での効果的な 情報表示範囲 識別能力は低いが座標 系誘導効果が生じ臨場 感を引き起こす範囲 ３ ０ °‐ １００° ２ ０ °‐ ８５° 映 画 、高 品 位 テ レ ビの目標大画面 サイズ 単純な視覚情報のみを 検出・受容できる範囲 １ ０ ０ °‐ ８ ５ °‐１ ２００° ３０° HoloLens 参照元： • h t t p s :/ / d b n s t .n i i . a c .j p/ v i e w _i m a g e / 2 5 1 5 / 4 5 2 6 ? h e i g h t = 7 8 5 & w i d t h= 4 2 1 • 畑田豊彦「情報需要と市や特性の計測」

• https://dbnst.nii.ac.jp/view_image/2515/4526?height=785&width=421

HoloLensの視野角（FoV）、視距離と表示画面サイズ 水平30°×垂直17.5° 0.8m 高さ：0.4m 幅： 0.22ｍ 1.5m 高さ：0.75m 幅： 0.42ｍ 3.0m 高さ：1.4m 幅： 0 .84ｍ 5.0m 高さ：2.5m 幅： 1.4ｍ

まとめ 体感を生む立体的なUIとコンテンツの配置場所 操作UI最適ゾーン コンテンツ表示 最適ゾーン 背景ゾーン コンテンツから情報を送る 0.8m～1.5m • • • 21～27インチのディスプレイ が浮いているイメージ 個体距離と社会距離の中間 有効視野 新たなコンテンツが登場する 1.2m～3.6m • • 社会距離の中間 有効視野

総まとめと応用事例

本講演で紹介した手法を取り入れたHoloLens事例 1. 視差に依存しない遠近感 2. 心理的空間演出 3. 体感を生む立体的なUIデザイン 資料提供：株式会社reK

本講演で紹介した手法を取り入れたHoloLens事例 1. 視差に依存しない遠近感 2. 心理的空間演出 3. 体感を生む立体的なUIデザイン 資料提供：株式会社reK

総まとめ 1. VR／MRコンテンツで使える、視差に 依存しない遠近感の作り方 2. VR／MRにおける心理的空間演出の 手法と実践方法 3. 体感を生む立体的なUIデザインの 作成 線遠近法、色彩遠近法、重なりなどの 遠近法を活用する。 空間へのUIやコンテンツ配置位置を 検討し、視線誘導を行う。 色による感情喚起も活用。 パーソナルスペース、視野と距離を考 慮した効果的な空間配置を行う。 HoloLensではFoVを考慮する。

Thank you! ご静聴ありがとうございました！