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

286 Views

May 09, 18

スライド概要

講演者:岩本 義智(株式会社ホロラボ)

こんな人におすすめ
・Mixed Realityコンテンツの企画・制作にかかわっている方
・効果的なMixed Reality向けUI/UXデザインを学びたいアーティスト
・VR/Mixed Reality向けアプリ実装を担当するエンジニア

受講者が得られる知見
・VR/MRコンテンツで使える、視差に依存しない遠近感の作り方
・VR/MRにおける心理的空間演出の手法と実践方法
・体感を生む立体的なUIデザインの作成の仕方

profile-image

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

(事例画像・映像省略)

8.

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

9.

本講演の主旨

10.

本講演の主旨 本講演では体感を効果的に生むことができる 絵画的空間構成手法 を用いた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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

空気遠近法 大きさと位置

26.

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

27.

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

28.

なせ画家はこのような構図を選んだか? 視線を誘導して見る者の 感情の動きをデザインするため 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

29.

構図とコンテンツ要素を使った視線誘導 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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

視線誘導:(4)視線が向きやすい方向と順番 最初に操作させたい UI表示に適した方向 幸せ 楽しい 1 怒り 動揺 2 悲しみ 退屈 リラックス 冷静 4 3

36.

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

37.

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

38.

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

39.

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

40.

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

41.

視野と情報の読み取りやすさ 補助視野 誘導視野 安定注視野 有効視野 弁別視野 CGコンテンツ表示に 適した範囲 UI表示に適した範囲 有効視野 中心視野 弁別視野 安定注視野 補助視野 周辺視野 誘導視野 水平 垂直 視機能が優れている中 約 5 ° 心領域、細かく見れる範 以 内 囲 約5° 以内 参考 眼球運動だけで寸時に 情報を理解できる範囲 約30° 以内 約20° 以内 N T S Cテ レ ビ 方 式 の標準観視画角 眼球・頭部運動で無理 なく注視でき、情報を把 握できる範囲 6 0 °‐ 90° 4 5 °‐ 70° 情報端末利用空 間での効果的な 情報表示範囲 識別能力は低いが座標 系誘導効果が生じ臨場 感を引き起こす範囲 3 0 °‐ 100° 2 0 °‐ 85° 映 画 、高 品 位 テ レ ビの目標大画面 サイズ 単純な視覚情報のみを 検出・受容できる範囲 1 0 0 °‐ 8 5 °‐1 200° 30° 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 • 畑田豊彦「情報需要と市や特性の計測」

42.

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

43.

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

44.

総まとめと応用事例

45.

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

46.

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

47.

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

48.

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