Glasses2020

このブログを検索

CGギャラリー

リンクを取得
Facebook
×
Pinterest
メール
他のアプリ

リンクを取得
Facebook
×
Pinterest
メール
他のアプリ

【Unity/VRChat】ワールド制作でUnityの光と影について考えてみた！

どうも！新入社員のタケです！今日はまたVRChat用のワールドを制作していましたー！こちらも先輩が制作した綺麗なオフィスのシーンです。割と狭めなシーンですが、円柱ポリゴンを使っている椅子がたくさんあって結構なポリゴン数になっていたのでワールドのサイズは100MBを超えてしまいました。個人的にはVRChatユーザーの皆さんはできるだけ100MB以下のワールドを好む感じがするので、ワールドサイズは100MB以下を心がけていました…！ですが、かなりリアル志向で作られているので楽しめると思います！今回はワールドに落ちる光と影について調べながら作っていました。今まで作ってきたシーンではDirectional Lightの影は落ちないように設定しています。なぜかというとシーンに影が既にベイクされているので色がかぶったりして変色してしまったら良くないと思っていたからです。しかし、床のマテリアルをEmissionにしていると色がつかない影が落ちることを発見しました。（バグかもしれませんが）パッと見た感じ影が表示されているように見えないものの、太陽光の円ハイライトだけがこれによってさえぎられているようです。これによりベイクしてある影に合わせてDirectional Lightの向きを調整してあげるとベイクの影に従っているように見えます。ちゃんと太陽の向きと影の部分が重なるようにしないと不自然な影ができてしまって違和感が出るので注意しましょう。これは外側から差し込む光がさえぎられていくということなので、もともと裏面がないこのシーンでは外向きの板を追加で貼ってあげることで無理やり影をつくっています。これで窓枠の影だけではなく柱などにも影が発生して見た目通りのライティングをすることができました！しかしこれにも罠がありまして… Directional Lightが当たらなくなったので部屋の中にいるアバターが全員暗くなってしまいます。これでもっと写実的にするのであればちゃんとライトを配置したりライトプローブを設定する必要がありますね。そこまで今はやってられないので結局普通のライティングに戻しちゃいました！ … ちょっとずつVRChatのワールドも増やしていく予定です。公...

【Unity/VR】VR内で触ることができるUIを作ってみよう！手から出るポインターで操作！

こんにちは～！新入社員のタケです！今朝のツイートでVRを使ってuGUIを操作した動画を上げました！今回はOculus Quest2を使ったUIの操作をする方法を載せてみたいと思います～！ uGUIの使い方はわかるので、UIをVRで触るという点が大きなポイントですね。どのように使うのか見ていきましょう。まずはOculus Integrationを導入して、VRのセットアップをしましょう。アセットの中にUIHelperというものがあるのでそれをシーンの中に置きます。 UIHelperを置いたら普通にいつもUIを作るようにキャンバスを置きます。実験用でキューブと球を切り替えるボタンとシーンを移動するボタンを作りました。 Canvasを作ったときに自動的に追加されるEventSystemは削除しましょう。先に配置したUIHelpersの中にEventSystemがあるので必要ありません！どうやらVRではRayを飛ばしてUIを操作するのでいつも使っている画面にくっつけるタイプのUIの配置はせず、ワールド座標に置いてしまうのがいいらしいです。なので、CanvasのRender ModeをWorld Spaceにしましょう。セットするカメラはOVRCameraRigのCenterEyeAnchorにします。 Canvasは作ったときにPhysic Raycasterというコンポーネントがついています。これはPCやスマホで操作するとき用のRayを飛ばすために必要なのですが、VRでは使えず必要のないものなので消しちゃいます。代わりに、VRで操作するために必要なOVR Raycasterを付けてあげましょう！特に設定はいじらないでそのままで大丈夫です。次にUIHelperの中身の設定をしていきます。 EventSystemの中をのぞくとたくさんの設定があります。初期設定ではUIを選択する決定ボタンはOculusコントローラーの右のAボタンになっています。これはJoy Pad Click Buttonで自由に変えられるので好きなものにしましょう。私的には直感的に使いやすいのでSecondary Index Triggerがおすすめです。（右コントローラーの人差し指トリガー）これでUIをVRで自由に操作できるようになりました！画面にくっつける...

【Unity】夜空の綺麗な星空をスカイボックス…ではなく、パーティクルで作ってみた！

こんにちは～！新入社員のタケです！皆さん、Unityで星空を表現したいときはどのように作りますか？スカイボックスもいいけれど…？今回はスカイボックスをどうしても使いたくなかったのでパーティクルで星空を作っていきます！どういうこと…？と思うかもしれませんが、まずは完成した星空を見ていただきましょう！このようにキラキラアニメーションしている星空を作ることができます。工夫次第では動画のような流れ星も付けることができますよ！では早速仕組みを見ていきましょう。まずはShapeでHemisphere（半球状）にパーティクルを放出させます。これでドームの形にパーティクルが広がってくれるので中から見ると星空っぽくなりますね。 Radiusも広げて周囲の山などにかぶらないようにしておきましょう。 Emissionの中のRate over Timeは一秒間にいくつパーティクルを出すか？という設定です。この綺麗な星空を作り出すには1秒間に1200個ものパーティクルを出しているのですね～このままではあっという間にMax Particlesの上限に来てしまうので私は5000くらいにしてみました。これで大体5000個くらいのパーティクルがずっと出てくるので空いっぱいに星が広がりましたね。星は基本的に止まっているように見えるのでStart Speedは0にしておきましょう。 LifeTimeやSizeはRandom between two constraints機能を使って二つの値の中からランダムに選ぶようにしておくと、それぞれの星のサイズ等がバラバラになってくれるので自然になります。 StartColorを変えるとたまに赤色の星や青色の星を出したりできるので、より夜空っぽくなります。他にはSize over Lifetimeを使ってサイズを大きくなったり小さくなったりするアニメーションを作り、星のキラキラを演出します。これで完成です！周囲よりも大きな星はこのパーティクルを複製して出てくるパーティクルの数を減らし、Start Sizeを大きくすると作れます！組み合わせるとぐっと星空感がアップしますよ！ … パーティクルが常に5000個近くで続ける状態なのですが、意外とVRでも重くなることはありませんでした。不安ならもう少し減らしてあげてもOKかもしれ...

【Unity】BakeryでGPUを使ったライトマップベイク！早いし綺麗だ！

どうも！新入社員のタケです！今日はBakeryというUnityのアセットを使ってライトマップのベイクをもっときれいに速くやってみたいと思います！このアセットを使えばGPUを使ってライトマップをベイクすることができます。 Unityは標準ではCPUでしかライトマップをベイクすることができません。 GPUの力を借りることでより早く、綺麗になるということですね。 Bakery - GPU Lightmapper https://assetstore.unity.com/packages/tools/level-design/bakery-gpu-lightmapper-122218 さっそくやっていきましょう！まずは適当にこんなオブジェクトを作ってみました。何もライトをベイクしていないので影の部分が真っ暗になっています。 Bakeryでは完全に従来のライトマップのベイク機能を使うことなく完結するそうなので、このまま進めてみましょう。次にDirectional LightにBakery Directional Lightというスクリプトを付けます。 Bakeryで行うベイクはそれぞれのライト専用のスクリプトを付ける必要があるそうです。するとなんか一気に明るくなりました！いったんIntensityを下げています。どうやらDirectional Light本体との情報を共有できる機能が備わっているようなので、これで調節していきます。次に環境光を付けたいので適当に作ったオブジェクトにSkyLightスクリプトを付けます。これでGIがついてくれます！まあとりあえず物は試しだ！なにも考えずベイクベイク！ Bakeryウィンドウを開いたらRenderボタンを押します。ベイク開始！できました！当然といえば当然ですがめっちゃ綺麗になりましたね… ベイク時間も驚異の30秒！普通にやれば2分くらいかかりそうなグラフィック設定なのに… めちゃめちゃ速い！次は車を置いてみたのですが、影が落ちてくれません。これはDirectional Light自体の影が完全にベイクされてしまっているからですね。リアルタイムのライトも付けたいのでShadowMaskという機能を使いますこれを使うとリアルタイムで落ちる影とベイクした影が全く同じ色になり、良い感じになじんでく...

【Unity】PlaneとQuad…結局どっちを使ったらいいんだーーー！？いろいろ比べてみた！

どうも！新入社員のタケです！今回は前の朝のツイートの内容をちょっと細かく説明していきます！こちらです！はい、以前お話したUnityの Plane と Quad オブジェクトに関するものです…！私はQuadを使いましょう！と声高々に言って結構RT数といいね数が伸びましたが、あとから調べてみると絶対にそうというわけではないっぽいですね… Unityのプリファレンスによると… https://docs.unity3d.com/ja/2019.4/Manual/PrimitiveObjects.html Planeは床や壁などに使うのが適していて Quadはモニターやポスター、動画のディスプレイ画面などに適しているらしいです。デフォルトでパーティクルシステムに使われるものもQuadがベースになっていると思われます。どうやらUnityはQuadはPlaneほど大きくして使ってほしくなさそうな感じですね。これについて調べていたのですが、その昔…Unityには頂点によってライティングを行っていたシェーダが存在していたことが分かりました。（現在はスタンダードシェーダに置き換わった） https://docs.unity3d.com/ja/2018.4/Manual/shader-NormalVertexLit.html 頂点によってライティングを制御していたと思われるのでおそらく大量のポリゴンを割かないと綺麗に見えなかったのかと思われます。個人的にはこの時代の名残ではないか？という風に思いました（違っていたらごめんなさい）用途もそうですが、単純に使いやすさからも違います。 Planeは出したらすでに上の面に向いていてその上にオブジェクトを出したりするとすぐに使えます。すぐに試したいときは楽ですね！ Quadは角度を変えて～～サイズを大きくして～～という手間がかかりますね。 Planeは他にもとにかく頂点で何かするものに向いてそうです。 Clothなども頂点を基準にシミュレーションをするのでQuadにはできませんね。まあ、個人的にいままで床や壁などにQuadを使ったから何か不具合が起きた、ということはないです。私はすぐパッと出して使いたいときはPlaneをいつも使いますし、できるだけ軽くしたい時やちょっとした画面などにはQuadを使います。このアバター...

【Unity】ShaderGraphでバリアっぽい感じのシェーダを作ってみました！

どうも！新入社員のタケです！今日は朝のツイートで紹介したバリアっぽいシェーダのノードの解説をしてみたいと思います！動画でお見せしましたが、サイバーチックなラインが上下へアニメーションしていくみたいな感じです。このシェーダの一番の見どころはテクスチャを一切使わずにノードだけでこのアニメーションとラインを表現しているという点です。どのようにつくったのか見てみましょう！今回のノードはこのような構成になっています。しましま模様を生成してFresnel Effectと合成してあげる、といった感じです。しましま模様の作り方…まずはこちらのノードをご覧ください。これはズバリ、グラデーションを生成するためのノードです。 UVの画像の緑色成分を抜き取ることで上から下へのグラデーションを手に入れることができます。しましま模様を作るのになぜグラデーション？と思うかもしれませんが、あとからわかるので大丈夫です。最終的にはアニメーションさせたいのでTimeノードとMultiplyを使って自由に調節できる時間の力を手に入れましょう。 Bにつながっているのはアニメーション速度を操作するための値です。このようにつなげると時間×変数の値という式になるので、自由に速さをいじれるというわけですね。ここまでできたら先ほど作ったグラデーションとAddで組み合わせます。これでアニメーションするようになりました！次に使うのはFractionという新しいノードです。これはInにつなげたノードの小数点以下の部分だけを出力するノードです。挟まなかった場合、うまくいかないので挟んであげましょう。次にまた新しいStepというノードを使います。これはInに入れた画像データをEdgeに入れた数値で2値化（白か黒だけ）にしてくれます。 Edgeにはスライダーを入れて設定しやすくしておきます。次にちょっと似たSmoothStepというノードを使います。先ほどの上位互換のようなもので、グラデーションを残しつつ白と黒の調節ができます。コントラストみたいですね。うっすら半透明に色を付けたかったので、このように真っ黒の部分をちょっとだけ白くしてみました。ここまでできたらいままでやったノードをもう一セット作ります...

【Unity】広大なシーンの奥をごまかそう！影の距離とFogでいい感じにしてみた！

こんにちは！新入社員のタケです！今日はTerrainを使って森のシーンを制作したりしていました！そのなかで、見え方に関して気になった部分を解決したりしたので紹介したいと思います。今回はこちらの森のアセットを購入して使ってみました！ Nature Package - Forest Environment https://assetstore.unity.com/packages/3d/vegetation/nature-package-forest-environment-165645 このアセットのサンプルシーンは綺麗な風景が広がっています！ Terrain4個分の超広大なフィールドですね…！この中に立つと、このような見た目になっていました。手前のほうは影が落ちていていい感じですが、奥が影の描写範囲の関係で明るく見えますね。今回はこれをどうにかこうにか修正していきます！まずは単純に影の描写範囲を広くして対応してみました。 Project SettingsのQualityからShadow Distanceを大きくします。デフォルトは40でしたが、120くらいまで広げると奥のほうまでちゃんと影が届いていい感じに見えますね。見た目はいいのでこれで解決！！…というわけにはいきません。影の描写範囲を広げると負荷が大きく上がります。なので、これの方法はあまりよくないですね。でも遠くが明るいのがやっぱり違和感があるので… Fog を使ってごまかしてあげましょう！ Lighting WindowのOther SettingsからFogのDensityを設定します。 0.04くらいにすると影の描写範囲とFogの距離が良い感じにマッチしてあまり気にならなくなりました！この方法だと奥側が全部単色になってデティールは出なくなりますが、その分影の描写範囲は狭くて済むので負荷は最初とあまり変わりません！ FogとShadow Distanceをうまく調整して賢くシーン制作しましょう！ … VRで見るコンテンツはかなりFPSを気にしないとまずいので、シーンなど大きくFPSに影響するところほどこだわったほうが良いですね…！ ---------------------------------------------------------------------------...

【Unity】Shader Graphを使った自作シェーダの解説をします！（Emission編）

こんにちーは！新入社員のタケです！今日はお待ちかね、以前作ったShader Graphを使ったシェーダーの解説をしていきたいと思います！とりあえず完成形をもう一度見てみましょう！とにかくいろいろ機能盛り込むととにかくノードがデカくなっちゃいました… 大体やってることはそれぞれの機能ごとにだいたい同じなので、一つずつ見ていきましょう！今回はEmissionの設定について解説します！ Emissionの設定はこの辺です！まず完成したマテリアルがどういう設定ができるかを見てみましょう。以下の設定ができます。・Use Emissionにチェックを入れるとEmissionが使えるようになります。・Emissionさせるカラーやテクスチャが設定できます。・カラーとテクスチャを設定すると色を混ぜられます。（あとIntensityも設定できます）・Use Emissionにチェックが入っていないとカラーやテクスチャを設定しても無効化されます。まずは簡単なテクスチャを選択するところから実装していきます。ここだけ見ると以前作ったテクスチャを自由に選択できるシェーダと構造は同じです。 EmissionMapという名前でテクスチャを付けられるようにします。以前はそのままPBRMasterにRGBAからくっついてましたが今度は色と重ね合わせたいのでMultiplyというノードに接続します。このMultiplyというノードはAとBにつなげたノードをMultiply（掛け算）してOutから出力する、というノードです。 Emission Colorという色を設定するノードをAに、さっきのテクスチャをBに刺して出力するとテクスチャに色を混ぜた結果が出せる、ということです！ Intensityも設定できるようにしたいのでカラーの変数はHDRにしておきましょう。これでEmissionにつなげる…にはまだ早いです。最後にチェックでオンオフするためにBranchというノードを使います。これはPredicateにつなげたノードで状況を判断した結果、True時に表示するもの、False時に表示するものを選ばせることができるノードです。プログラムでいうIf文に近いです。 PredicateにはUs...

【Unity / HDRP】森と川のシーンを作ってみた！写真を参考に作ると良い感じ…！

どうも！Glassesのタケです！今日は森のシーンを制作していました！近々新しいコンテンツを制作することになるので、それにたぶん使うかもしれない…？感じです！森というか川といったほうがいいかもしれませんね。せっかく素敵な川を作れるアセットがあるのですから、作っていきましょう！ …といきたいところですが私はあまり森や山といった自然に触れてこなかったので写真を参考にしながら作っていきます。だいたい全体的に緑色な感じですね～コケが生えた石などがごろごろ転がっています。まずは地形をつくっていきます。真ん中に川の道をつくってあげて、橋をかけます。今回は川を先に作っちゃいます。前回紹介したRiver Auto Materialを使えば簡単に作れますね！それからテクスチャを塗ったりVegetation Studio Proで森林バイオームを作ってあげると… ドン！と一気に森になりましたね。写真を見ると川には段差があり、段差があるところはコケがついた岩がたくさん転がっています。ということでライティングも調整しながら岩を並べていきます。だいぶそれっぽくなってきましたね。最後に、川の流れを制御していきます。 River Auto Materialでは川の流れやスピードも自由に設定できます。多くの写真ではこの岩が入り組んでいるところの川の流れが非常に速く感じるのでそうなるようにします！ただ、ちょっと難しいです…ちょっといじると変に水面が伸びたような感じになってしまったりします。なのでカーブさせることはせずに基本的に強さだけをいじりますね。上手く調整できたら…完成です！！結構満足いく形にできました！ … 全体的な緑具合とかもうすこし頑張れるところがあるとは思いますがとりあえずはこれでいけそうです！あとは川へのちょっとしたインタラクションやエフェクトを足していきます！ -------------------------------------------------------------------------------- シェルパでは、3DCGや建築パースはもちろん VRやARアプリの開発も行っています！新しいことに興味のある方はきっと楽しめると思います！新人研修も充実していて初心者でも3DCG経験者でも安心！株式会社シェルパ公式HP:...

【Unity】なめらかに昼と夜が切り替わるシーンを作ってみた！

ハロー！新入社員のタケです！今日も引き続き前回の住宅街シーンを作っていきます。前回はベイクまでしちゃいましたが、やっぱり昼と夜を動的に変えていきたいのでがんばって設定をしてみました。とりあえずベイクしたままのデータで朝にしてみるとライトの光が地面に残ったままで不自然になってしまいました。なので一旦リアルタイムのライトでライティングします。ここで昼と夜のサイクルシステムを作ってみます。空はデフォルトの空にして、スクリプトはあまり使いたくないので太陽の角度、強さ、色などはTimelineで制御します。実はデフォルトの空はプロシージャルスカイボックスと呼ばれるシステムが採用されており、太陽の向きに応じて空の色が変わるようになっています。これを使うことで比較的簡単に昼夜を表現することができます。街灯などのライトもTimelineで朝には消灯し、夜になったら点灯するようにします。ここからが問題です。住宅の窓の光も同じように消灯したり点灯したりしたいのですが、アニメーションで制御しようと思っても選択した部分の窓しかアニメーションしてくれません。マテリアルごとにまとめて色を変えたりできるようになればすごい楽なので…ここはさすがにスクリプトを作ってみることにしました。私は高校の時にプログラミングを学んでいたのですが、あんまり使わないせいでほとんど忘れていってしまいました… Unityのプログラミングとはかなり久しぶりに向き合っていきます。なんだか懐かしい気持ちでしたね。まずはネットで二つのマテリアル変更スクリプトを見つけました。マテリアルのシェーダーの値を直接いじるスクリプトとスライダーで二つの色の間を自由に設定できるスクリプトです。これらのスクリプトをどうにかこうにか理解しながらくっつけたら・・・できました！突然スクリプトを見せられてもわからないと思うのでInspectorでの画面を見てみましょう。使い方は簡単です。変更したいマテリアルをMaterialの欄に入れて、Start～に最初の色を入れます。 End～には後から変更したい色を入れます。 ColorChangeのスライダーを0から1にするとなめらかに色が変わっていきます！ここはTimelineで...

Powered by Blogger

Glasses2020

このブログを検索

CGギャラリー

コメント

コメントを投稿