--- title: 【Unite 2017 Tokyo】VR MAGIC！　～キャラクターに命を吹き込んだこの4年間の記録～ tags: #character #vr #unity #unity3d #キャラクター #unite 2017 tokyo author: [Unity Technologies Japan](https://www.docswell.com/user/UnityJapan) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/Z5EG6K1D7L.jpg?width=480 description: 講演者：近藤 ""GOROman"" 義仁(株式会社エクシヴィ) 　　　　室橋 雅人(株式会社エクシヴィ) こんな人におすすめ ・VRに興味があるエンジニア、アーティスト 受講者が得られる知見 ・VRにおけるキャラクターの実在感向上のためのテクニック 講演動画：https://youtu.be/nWR816af2dU published: June 07, 17 canonical: https://www.docswell.com/s/UnityJapan/K794VZ-unite-2017-tokyovr-magic4-76727900 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/Z5EG6K1D7L.jpg) # Page. 2 ![Page Image](https://bcdn.docswell.com/page/V4JQ4NDXEP.jpg) VR MAGIC! ‫ة ؙ ٓ ٍ ؗ‬٦ ‫ ח‬ㄏ‫ ׾‬ォ ֹ鴥 ‫ ך ֿך ׌ ׿‬䎃 ꟦ ‫ך‬鎸 ꐮ # Page. 3 ![Page Image](https://bcdn.docswell.com/page/DK74QGZ2E1.jpg) ⾃⼰紹介 @GOROman @MuRo_CG # Page. 4 ![Page Image](https://bcdn.docswell.com/page/PLJ1PDRKEG.jpg) @GOROman # Page. 5 ![Page Image](https://bcdn.docswell.com/page/8GJW2Y1P72.jpg) ⾃⼰紹介 1975.9 アイチケン トヨカワ市うまれ． 1998.4 コンシューマーゲーム プログラマに 2010.6 株式会社エクシヴィ(XVI Inc.) 設⽴ @GOROman 2013.4 KickstarterでOculus Riftを⼿に⼊れる 2014.7 Oculus VR Japan チームを⽴ち上げる 2016.12 Oculus VR (Facebook) 退社 2017.1 ⾃由 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/W4EZDXP6J3.jpg) ⾃⼰紹介 個⼈的につくっているもの #Mikulus (VROS) #ミクミク握⼿ @GOROman #MRファミコン etc… ©NINTENDO © Crypton Future Media, INC. # Page. 7 ![Page Image](https://bcdn.docswell.com/page/KY7614MLJV.jpg) ⾃⼰紹介 @GOROman エニックス 発売 2001/3/29 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/5G754QZME4.jpg) # Page. 9 ![Page Image](https://bcdn.docswell.com/page/V9J2VPRRJR.jpg) @MuRo_CG # Page. 10 ![Page Image](https://bcdn.docswell.com/page/5DEY35D57M.jpg) ⾃⼰紹介 1985 ニイガタケン ナガオカ市うまれ． 2007 3Dデザイナーとしてゲーム会社へ就職 2013 株式会社エクシヴィ ⼊社 @MuRo_CG 社内ビンゴ⼤会で Oculus Rift DK1 を GET 独学で Unity を学び VRディレクターに # Page. 11 ![Page Image](https://bcdn.docswell.com/page/2VJNVN6478.jpg) ⾃⼰紹介 @MuRo_CG # Page. 12 ![Page Image](https://bcdn.docswell.com/page/GYE96RL4E3.jpg) 会社紹介 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/5GE8ZWXV7D.jpg) 会社紹介 XVI Inc. 株式会社エクシヴィ ２０１０年６⽉設⽴ 現在は VR/AR/MR がメイン！ 世界に向けたVRマルチキャラクタープラットフォームを構築中！ # Page. 14 ![Page Image](https://bcdn.docswell.com/page/MLELDN8R7R.jpg) 会社紹介 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/54JMPX6PJW.jpg) www.xvi.co.jp # Page. 16 ![Page Image](https://bcdn.docswell.com/page/ZPJR1NPYJ9.jpg) Agenda n 魅⼒的なキャラクター表現の話 n キャラクターを活かす 雰囲気をつくる話 n ＶＲ 未来のクリエイティブツール # Page. 17 ![Page Image](https://bcdn.docswell.com/page/NPEXYN347X.jpg) ＶＲ 未来のクリエイティブツール # Page. 18 ![Page Image](https://bcdn.docswell.com/page/63EK3NYPED.jpg) # Page. 19 ![Page Image](https://bcdn.docswell.com/page/4L73GV94E5.jpg) イ キ イ キ 魅⼒的な キャラクター表現の話 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/V87D18G5EG.jpg) 不気味の⾕現象 UNCANNY VALLEY # Page. 21 ![Page Image](https://bcdn.docswell.com/page/4VJPQ83DE8.jpg) # Page. 22 ![Page Image](https://bcdn.docswell.com/page/L2EV5N4GEQ.jpg) # Page. 23 ![Page Image](https://bcdn.docswell.com/page/Z57G6KKDJL.jpg) 不気味の⾕現象を 越えるには？？ # Page. 24 ![Page Image](https://bcdn.docswell.com/page/V4EQ4NNX7P.jpg) イキイキさせる！ # Page. 25 ![Page Image](https://bcdn.docswell.com/page/DKJ4QGG271.jpg) ⼤事なのは プレゼンス # Page. 26 ![Page Image](https://bcdn.docswell.com/page/PLE1PDDK7G.jpg) プレゼンスは 壊れやすい # Page. 27 ![Page Image](https://bcdn.docswell.com/page/8GEW2YYPJ2.jpg) 湡‫ך‬ꅾ銲䚍 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/W47ZDXX6E3.jpg) ‫ز؎ٓ؎ع‬ # Page. 29 ![Page Image](https://bcdn.docswell.com/page/KYJ6144LEV.jpg) 娤‫׌׿‬눴‫ך‬滙 # Page. 30 ![Page Image](https://bcdn.docswell.com/page/5GJ54QQM74.jpg) ‫‪滙‬ך‪눴‬׌׿‪娤‬‬ ‫‪؎‬ةحئًت‬ # Page. 31 ![Page Image](https://bcdn.docswell.com/page/V9E2VPPRER.jpg) ‫‪滙‬ך‪눴‬׌׿‪娤‬‬ ‫‪؎‬ةحئًت‬ # Page. 32 ![Page Image](https://bcdn.docswell.com/page/5D7Y3555JM.jpg) # Page. 33 ![Page Image](https://bcdn.docswell.com/page/2VENVNN4J8.jpg) ⽬のハイライトをテクスチャに 書き込んでしまうと・・？？ # Page. 34 ![Page Image](https://bcdn.docswell.com/page/GY796RR473.jpg) ‫ؙحصؙذ‬ ‫׿׋׿ַ‬ ‫‪ֽ⸇皾⼱鷲僇‬׌ⴓ‪䧭‬ز؎ٓ؎ع‪٥‬‬ ‫⹲ثؖ‬ ‫فحو‪ֽHDR橆㞮‬׌ⴓ‪䧭‬ز؎ٓ؎ع‪٥‬‬ ‫ـ‪ٗ٦‬ف‪ّٝ‬ءؙٖؿٔ‪٥‬‬ # Page. 35 ![Page Image](https://bcdn.docswell.com/page/5G78ZWWVJD.jpg) ‫زؙة‪ٝ‬؝؎‪،‬‬ # Page. 36 ![Page Image](https://bcdn.docswell.com/page/ML7LDNNRJR.jpg) アイコンタクト ⽬が合う # Page. 37 ![Page Image](https://bcdn.docswell.com/page/54EMPXXPEW.jpg) ،؎‫؝‬ٝ‫כחزؙة‬ Look At 堣腉‫׾‬⢪ֲ # Page. 38 ![Page Image](https://bcdn.docswell.com/page/ZPER1NNYE9.jpg) # Page. 39 ![Page Image](https://bcdn.docswell.com/page/NP7XYNN4JX.jpg) # Page. 40 ![Page Image](https://bcdn.docswell.com/page/637K3NNP7D.jpg) Mechanim Humanoid + IK # Page. 41 ![Page Image](https://bcdn.docswell.com/page/4LJ3GVV475.jpg) # Page. 42 ![Page Image](https://bcdn.docswell.com/page/V8JD18857G.jpg) ‫ֹ׋לת‬ ‫ח⵱‪♶鋉‬דزفؙٔأ‬ # Page. 43 ![Page Image](https://bcdn.docswell.com/page/4VEPQ88D78.jpg) saccades 䗍稢滙椔麊⹛ # Page. 44 ![Page Image](https://bcdn.docswell.com/page/L27V5NNG7Q.jpg) saccades 䗍稢滙椔麊⹛ # Page. 45 ![Page Image](https://bcdn.docswell.com/page/Z5JG6K5DEL.jpg) saccades 䗍稢滙椔麊⹛‫׾‬Unity‫ד‬ ‫ַ׆׻‬37遤‫ך‬ ‫زفؙٔأ‬ https://gist.github.com/GOROman/5 # Page. 46 ![Page Image](https://bcdn.docswell.com/page/V47Q4NZXJP.jpg) 〡‫ך‬ꅾ銲䚍 # Page. 47 ![Page Image](https://bcdn.docswell.com/page/DKE4QG32J1.jpg) ㄎェ # Page. 48 ![Page Image](https://bcdn.docswell.com/page/PL71PD1KJG.jpg) ㄎェ갈 3D瑞꟦갈갟 # Page. 49 ![Page Image](https://bcdn.docswell.com/page/8G7W2Y8PE2.jpg) ㄎェ갈 3D瑞꟦갈갟 # Page. 50 ![Page Image](https://bcdn.docswell.com/page/W4JZDX8673.jpg) ‫زفؙٔأך‪ㄎェ‬‬ # Page. 51 ![Page Image](https://bcdn.docswell.com/page/KYE614PL7V.jpg) # Page. 52 ![Page Image](https://bcdn.docswell.com/page/5GE54QKMJ4.jpg) ‫➭ך׉‬ ‫׾‪٦‬ةٍؙٓؗ‬ ‫ؙحصؙذ׷ׇׁؗ؎ؗ؎‬ # Page. 53 ![Page Image](https://bcdn.docswell.com/page/V972VPWR7R.jpg) ‫ֲ‪⢪‬׾‪ّٝ‬ء‪ٖ٦‬إحذ‬ # Page. 54 ![Page Image](https://bcdn.docswell.com/page/5DJY35L5EM.jpg) ‫‪暟椚‬‬ ‫ظٌ׸‪䴎‬׷ײ׻ְ‬ ‫‪嬁‬ך‪٥넿‬‬ ‫‪嬁‬م‪٥،‬‬ ‫וז ز‪ؕ٦‬أ‪٥‬‬ ‫דي؎ةٕ‪ծٔ،‬׭׋ך‪LookAt‬‬ # Page. 55 ![Page Image](https://bcdn.docswell.com/page/2V7NVN44E8.jpg) ‫➭ך׉‬ 岣䠐挿 # Page. 56 ![Page Image](https://bcdn.docswell.com/page/GYJ96RQ4J3.jpg) ‫‪꬗‬ؚ‪ٝ‬ؾحؙٔ ًٓؕ‬ # Page. 57 ![Page Image](https://bcdn.docswell.com/page/5GJ8ZWGVED.jpg) ‫׭הת‬ # Page. 58 ![Page Image](https://bcdn.docswell.com/page/MLJLDNGRER.jpg) まとめ 不気味の⾕は キャラクターを イキイキさせて 埋めろ！ # Page. 59 ![Page Image](https://bcdn.docswell.com/page/547MPXQP7W.jpg) # Page. 60 ![Page Image](https://bcdn.docswell.com/page/ZP7R1N8Y79.jpg) キャラクターを活かす 雰囲気をつくる話 # Page. 61 ![Page Image](https://bcdn.docswell.com/page/NPJXYN84EX.jpg) Asset Storeでモデルを探す これで完璧や！ # Page. 62 ![Page Image](https://bcdn.docswell.com/page/63JK3NKPJD.jpg) Unityに配置してみる • いざ！インポート！！ ‫ַ׿ז‬麩ֲ˘ # Page. 63 ![Page Image](https://bcdn.docswell.com/page/4LE3GVZ4J5.jpg) " もっと雰囲気のある " 感じにしたい!! # Page. 64 ![Page Image](https://bcdn.docswell.com/page/V8ED18R5JG.jpg) # Page. 65 ![Page Image](https://bcdn.docswell.com/page/4V7PQ8WDJ8.jpg) # Page. 66 ![Page Image](https://bcdn.docswell.com/page/L2JV5N8GJQ.jpg) 雰囲気を作る話 # Page. 67 ![Page Image](https://bcdn.docswell.com/page/Z5EG6KZD7L.jpg) 今回のルールをおさらい • Unity Assets Storeのモデルを使う • Unity内の調整だけで完結させる • 特殊なShaderを書いたりしない • 基本機能とImageEffectsで作る # Page. 68 ![Page Image](https://bcdn.docswell.com/page/V4JQ4NLXEP.jpg) 雰囲気作りのポイント 1. 2. 3. 4. 最終画⾯の明確なイメージ 光源を意識したライティング 光と影 全体の⾊調バランス # Page. 69 ![Page Image](https://bcdn.docswell.com/page/DK74QGD2E1.jpg) 1.イメージの明確化と分析 • 雰囲気を考える、イメージする • キーワードを決めてみる。 →⼣⽅、教室、ノスタルジー、哀愁 （イメージ連想するようなワードを並べる） # Page. 70 ![Page Image](https://bcdn.docswell.com/page/PLJ1PDZKEG.jpg) 1.イメージの明確化と分析 • イメージに合う資料を集める 資料集めの時間は⼗分に割くこと イメージが固まるまで資料を集めまくる 資料は多くあっても困らない # Page. 71 ![Page Image](https://bcdn.docswell.com/page/8GJW2Y9P72.jpg) 1.イメージの明確化と分析 • 要素を分析する ・光源の⾊ ・全体の⾊調 ・影⾊ ・その他シーンに合う要素 # Page. 72 ![Page Image](https://bcdn.docswell.com/page/W4EZDX96J3.jpg) 2.光源を意識したライティング • 光は窓から⼊っている • 光を作るには影が必要 # Page. 73 ![Page Image](https://bcdn.docswell.com/page/KY7614KLJV.jpg) 2.光源を意識したライティング • ؎ً٦‫׋׃آ‬葿锃‫ח‬さ‫גׇ׻‬ ٓ؎‫؍ذ‬ٝ‫ؚ‬ • ⯔彁‫׾‬䓼锃‫׷ׅ‬ • #BLF‫ג׃‬BNCJFOUPDDMVTJPO # Page. 74 ![Page Image](https://bcdn.docswell.com/page/5G754QPME4.jpg) 3.ImageEffectsで空気感 • Post Processing Stackを使う • 主に使うのはこの3つ ・Antialiasing ・Bloom ・Color Grading # Page. 75 ![Page Image](https://bcdn.docswell.com/page/V9J2VP6RJR.jpg) 3.ImageEffectsと空気感 • Color Gradingで全体を調整 • 資料をよく⾒る！ # Page. 76 ![Page Image](https://bcdn.docswell.com/page/5DEY35957M.jpg) 3.ImageEffectsと空気感 • 光の雰囲気を追加 # Page. 77 ![Page Image](https://bcdn.docswell.com/page/2VJNVNL478.jpg) 確認と調整 視点を変えて確認 # Page. 78 ![Page Image](https://bcdn.docswell.com/page/GYE96R44E3.jpg) 確認と調整 # Page. 79 ![Page Image](https://bcdn.docswell.com/page/5GE8ZWQV7D.jpg) 確認と調整 • Bakeのみのライティングに変更 # Page. 80 ![Page Image](https://bcdn.docswell.com/page/MLELDNXR7R.jpg) 完成！ # Page. 81 ![Page Image](https://bcdn.docswell.com/page/54JMPXLPJW.jpg) 完成シーン # Page. 82 ![Page Image](https://bcdn.docswell.com/page/ZPJR1NKYJ9.jpg) # Page. 83 ![Page Image](https://bcdn.docswell.com/page/NPEXYNL47X.jpg) ＶＲ 未来のクリエイティブツール # Page. 84 ![Page Image](https://bcdn.docswell.com/page/63EK3NLPED.jpg) VR × クリエイティブ # Page. 85 ![Page Image](https://bcdn.docswell.com/page/4L73GV34E5.jpg) VR × クリエイティブ # Page. 86 ![Page Image](https://bcdn.docswell.com/page/V87D1845EG.jpg) VR × クリエイティブ # Page. 87 ![Page Image](https://bcdn.docswell.com/page/4VJPQ8MDE8.jpg) VR × クリエイティブ # Page. 88 ![Page Image](https://bcdn.docswell.com/page/L2EV5N9GEQ.jpg) 㹋怴 # Page. 89 ![Page Image](https://bcdn.docswell.com/page/Z57G6K4DJL.jpg) # Page. 90 ![Page Image](https://bcdn.docswell.com/page/V4EQ4NGX7P.jpg) @GOROman @MuRo_CG ありがとうございました！ http://www.xvi.co.jp/