CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。Set"というアセットが、アセットストアから削除されていました。Stack、Shaderに関する技術的な講演がいくつかありました。XVI社の講演では前半は@GoromanさんによるVRのプレゼンスを高める方法(P.19-59)、後半は@Muro_CGさんによるUnityで表現力を高める方法(P.60-P.81)が解説されました。~キャラクターに命を吹き込んだこの4年間の記録~講演の概要はこちらで解説されています。PANORAまず、今回試した背景です。Storeで取得したモデルを使うと、思ったほど綺麗にみえないということがあります。講演では、こういうとき、どうやって綺麗に見せるか、というテクニックを紹介されていました。講演内容を見直したり、@Muro_CGさんに直接伺ったりして、アセットの表現力を高める方法を、私なりに解釈して整理しました。(お時間いただき、改めてありがとうございます。さん)なお、下記の環境で検証しました。5.6.0p1==============================注意:以下の解説は私の解釈を元にしていますので、@Muro_CGさんのやり方と異なる場合もあります。検証用のアセットを購入まずは講演で使われたものと同じアセットを購入しました。追記アセットは削除されていました。Stackをアセットストアからダウンロードし、インポートします。Classroomアセットのサンプルシーンを開くとこうなります。私が購入した時点では、ある程度ライティング設定が入っていました。今回はサンプルシーンを元にして、@Muro_CGさんの講演スライドにあった夕暮れ時の教室を再現するように努め、最終的にこのようにしました。以降、調整した過程を解説します。新規プロジェクトを作り、上記のアセットをインポート済み、という想定で解説します。Viewにそれぞれ追加します。@Muro_CGさんいわく、この二種類があることで色々な調整ができるとのことです。Probeの活用まではまだ確認できてません。勉強したら、ここか別の記事で書きたいと思います。Viewに追加します。Stackのアセットをインポート忘れの可能性があるので、ご確認ください。コンポーネントを追加します。Componentをクリックして、"post"までタイプすると候補に出て来ます。Profile"をドラッグします。Profile"のファイル名を"test"としています)2-1と2-2は、見た目を綺麗にするときの共通設定と考えてよさそうです。イメージを固める講演スライドの受け売りですが、まずはどんな風景にしたいのか、というイメージを固める必要があります。「こうしよう」が決まっていると何をすればよいかが見えてきますが、決まっていないとどうやって調整してよいかわからなくなります。関係しそうな画像を集めるなどして、どんな形に仕上げたいかを詰めていきます。ライティングの調整Unity5.6時点では、ライトには4種類あります。Lightの解説を中心に進めます。Explorerを表示するこれがあると便利なので、下記のように表示させます。Viewに登録されているライトオブジェクトが一覧表示されています。ここから有効/無効化が可能です。Viewにある場合に、すぐにライトを探せて便利です。ViewのPositionで位置を変えても光の当たり方は変化しませんが、Rotationを調整することで変化します。Shadowは影をつけることができます。Stack、全てのLightをoffにしました。LightのRotationを調整するとこのようになります。Viewはこのように調整しました。Lightを配置し、同じようにrotationを調整します。このように、rotationの調整次第で窓が光っているような雰囲気を出すことができます。Stack、全てのLightをoffにしました。LightのRotationを調整しました。Stackで調整したときの見た目の良さから、窓だけでなく、床にも光が当たるようにしました。光の色を赤っぽくしています。Viewはこのように調整しました。Stackの調整まず、4-2,4-3の調整によってこうなりました。Lightのみ使いました。ProfileのInspectorを変更することでできます。Aliasingの箇所を有効にするだけです。アングルの問題か、後から見直すと私の環境では違いがよくわかりませんでした。StackのBloomを調整Bloomを有効化し、内部の設定を調整して、このようにしました。Viewの設定状況です。赤枠で囲んだ範囲を調整することで、見た目を大きく変化させることができます。元の見本では右半分が暗くなっていましたが、3-4時点では全体的に光が当たってしまっています。同じような見た目にするには、光の当たっていないところを強調して暗くする必要があります。GradingのTonemappingです。Levelを調整します。これで見た目を大きく変化させることができます。ここまで調整することで、冒頭に示したような見た目になりました。元の見本と完全一致はしていませんが、概ね雰囲気は再現できたので、今回はここまででいったんまとめることにしました。ShadowについてOnとOffの例を準備しました。Shadowを有効にすると、影をつけることができます。Lightの向きにも赤枠をつけました。この向きをrotationの値変更によって調整することで、教室の床に光が当たったり、窓に当てたりと、光による演出を変えることができます。Lightを使っても窓が光る表現を作ることができたので、参考までに解説します。Lightを並べて、Intensityを強めにしただけです。Viewのように、なんとなく発光しているような雰囲気はでます。これだと後工程のBloomによる調整が難しかったので、今回はやめました。風景と状況次第ではありかもしれません。終わりにこれまで、Unityでどうやってきれいな表現を作ればよいかはわかっておらず、また、調べても自分に合った方法が見つけられてませんでした。今回、良見本を真似することで、やり方を学ぶことができました。CGの世界では、今回のような実写ライクにする場合だけでなく、トゥーン調など他の場合もあります。それぞれの見た目に応じて使う技法も変わるのだと思います。今後、色々な風景で表現力を高め、うまくUnityを使いこなせるようになれればと思います。Academyについてです。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。