CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。製作者のFreyaさんがGithubでUnity2019に対応したバージョンを発表しました。Githubから確認できます。Forgeを売る予定がないのは変わっておらず、自分の個人的なプロジェクトに使っているのでアップデートしたそうです。リンクから取得お願いします。2017」の最終日の記事です。Mastodon」でした。Forge」を紹介いたします。Forgeについては、インターネット上に多数の情報があります。そこで、今回はそれらを参考にさせていただきながら、自分で理解したことと、実際に作ってみたものの作り方をまとめました。今回の検証はこのような環境で実施しています。v1.37随所にShaderのコードのgithubリンクを貼ってあるので、気になる方はダウンロードして任意のマテリアルにアタッチしてみてください。Shaderとは?こちらのP.6が参考になります。基本操作とよく使われるノード編もう少し原理的な説明は下記がわかりやすかったです。o_healerのブログ個人的には、表面の質感、頂点の位置を、静的および時間的に変化させることができる仕組み、がshaderという理解に至りました。Systemで作る、と考えると区別できる気がします。(条件を限定して作り込めばShaderでもできるかもしれませんが)一方、風でなびく旗とか、クリスタル・氷の彫像とか、水面とか、オブジェクト単体の表面上の変化に類するものはShaderが得意と考えるのがよさそうです。概要ノードをつなげてShaderを開発できるアセットです。このような画面でShaderを作ります。通常、UnityでShaderを書こうとすると、ShaderLabという言語を使ってテキスト形式で記述する必要があります。Forgeを使うと、個別の機能をノードで表現してつなぐことで、Shaderを作ることができます。Forgeに限らず色々なソフトウェアのツールでよく聞きます。「ノード」が何を指しているかがいまいち曖昧だったので調べました。http://wa3.i-3-i.info/word1300.htmlこれによると、「ノード」とは個別の機能部分を指し、ノードとノードを接続する線を「エッジ」と呼びます。説明する図を作って見ました。他にもいくつか調べましたが、「ノード」と「エッジ」の指す内容は同じでした。基本的な使い方はこちらにわかりやすくまとめられているので、参照ください。コガネブログまた、アセット紹介で有名なこちらのブログでも、概要がわかりやすくまとめられております。Forgeの使い方を理解するために、チュートリアルや公開されている例を色々と調べました。その過程でよく出たノードについて、機能紹介や使い方の例を整理しました。個別のノードを完全には理解できていないので、原理を説明しきれていない場合もあるのでご了承ください。Multiply2個以上のノードをつなぎます。つなげるものは幅広くてTexture2Dや、Value、Colorなどです。・Texture同士を繋げる場合ここでは、レンガのテクスチャと、緑と白のテクスチャを合成しています。Photoshopのレイヤーの概念に似ています。色を重ねることもできます。他にも、複数の性質を統合するという意味で、Multiplyを使う機会は非常に多かったです。Lerp2個のノードをつなぎます。三つ目にTau(T)という項目があります。Tauは動的な変化を指定できます。ここに時間的な処理をつけると、shaderを時間的に変化させることができます。周期的に変化させた場合です。それぞれの処理については、赤い枠で補足説明を入れておきました。shaderコードは下記のgithubにおいてあります。lerpの例のshaderコード(lerptest.shader)テクスチャは何か適当なものを準備ください。Tauにslider(Valueでもよい)ノードをつなぐと、合成の割合を手動で調整することができます。Remap(Simple)変化の範囲を指定するノードです。先ほどのlerpの説明でも使っています。fromとtoにそれぞれ値を入れることで変化の範囲を指定できます。Texture2Dテクスチャを指定できます。色々なShaderの作り方を調べていくと、テクスチャでベースを作ってから、色調整、時間的な変化を加えてShaderを作り上げるので、テクスチャの選定は重要です。Value値を指定できます。Lerpで説明したような色指定だけでなく、MainノードのOpacityに直接つなぐことで透明度を指定できます。Widthにつなぐことでオブジェクト表面に色をつけたり、という指定に使えます。値を指定するノードなので、2個以上の別のノードに接続することも可能です。SliderLerpの箇所で紹介したように、スライダーとして値を調整できます。役割はValueと同じですが、最小値と最大値を決めて、その範囲での変化をすぐに確認できるメリットがあります。Time時間的な変化を加えます。単体では使えず、Lerpの例のように、変化の周期(sinノードなど)、振幅(Remap(Simple)など)、変化の方針(LerpのTauなど)と組み合わせることで使うことができます。PannerテクスチャのUV情報と接続することで、表面の情報を動かすことができます。こちらに例がわかりやすくまとめられております。Qiitaところで、UVとは何か?ですが、テクスチャをモデルに貼り付けるための情報のことです。wikipediaの記述がわかりやすかったです。Mask)接続されたものからR,G,Bの色を分離します。公式HPのにわかりやすい図が掲載されています。Maskの説明ノードは他にも多数ありますが、今回は割愛します。Forgeで何を表現するかを考えていたのですが、今年はナイトプールのはやりに乗っかって、それっぽいものを表現してみました。最終的にこのようなものを作りました。Forgeで作る過程を解説します。ステージを作るまずはCubeとQuadを配置します。大きな平面がQuadです。次に、周りを描画するためにレンガのテクスチャでShaderを作りました。最初のお試しで作ったShaderですが、このようなShaderを使って描画しています。(LitTest.shader)レンガのテクスチャは適当なものを準備ください。この時点でこうなります。水面を作る大雑把に言うと、Texture2Dで波形を作り、PannerノードでUVを時間的に変更し、Opacityの調整で透明にすることで実現しています。探してみましたが、水面の作り方がわかりやすく紹介されていたので、最終的にこの動画の方針で作りました。YouTube(注1)MainノードのOpacityがalphaになっていますが、Opacityとしてノードを接続すれば問題ありません。Maskに接続していますが、色を分離しなくても水面としてきれいに見えるので、私は除外しました。(Water.shader)水面のテクスチャは適当なものを準備ください。このShaderからマテリアルを作って、先ほどのQuadにアタッチするとこうなります。skyboxを作るまず、星空のテクスチャを準備します。こちらに使用OKのテクスチャがあったので、使わせていただきました。Forgeを開きます。Shaderを選んで、Skyを選択します。Forgeのメイン画面が出てきます。skybox向け設定ができているので、Texture2Dを先ほどの星空にして、その他sliderなどを調整したのがこちらです。Forgeに読ませてご確認ください。(skybox_night.shader)ここからマテリアルを作り、色や値を少し調整しました。このマテリアルをskyboxとして設定するとこうなります。光の玉を作るナイトプールは光ってるイメージがあるので、光を表現します。探したところ、下記の画像検索で見つけたものがきれいだったので、これをベースにしました。https://forum.unity.com/threads/shader-forge-a-visual-node-based-shader-editor.222049/page-35色やFresnelの値を若干変更したのがこちらです。(Sphere_light.shader)fresnelを変化させることでこのようになります。最終的には少し赤色を混ぜました。この状態で、このようになります。プール中の左側面のそばに赤い玉を配置したのですが、うまく見えていません。今回の検討では強い自己発光をさせるShaderの作り方がみつけられませんでした。Lightを配置して光を強調することにしました。Lightの設置でこうなります。LightはIntensityとRangeをそれぞれ10以上にしました。これで赤い玉も目立つようになりました。ポストエフェクトをかける最後にポストエフェクトをかけてみました。方法は下記の記事を参照ください。Unityプロジェクトの下準備」を実行します。Stackの調整」のようにして調整します。Tubeでの動画です。今回のポストエフェクトは好みだと思うので、4-4で終えるのもありです。Forgeでは、作るshaderの種類によって使えるノードが変わってきます。duplicate(複製)して使うのが良いと思います。Duplicateを選びます。DuplicateはShaderに限らずUnity上の任意のファイルで可能です。対象オブジェクトを右クリックしても出てこないので、注意が必要です。Forgeでは、最後にMainノードにつなぐために、各ノードをつなげていきます。ノード間は文法上正しいものしか接続できないようになっています。下記の例では、ValueノードはEmissionには接続できますが、Normalはグレーアウトして接続できません。Mainノードだけでなく、個別のノード同士も合わないものは、グレーアウトして接続できないようになっています。forgeを使っていると、このようにwarningが出ることがあります。このときは左側のアイコンをクリックすると自動補正してくれます。サンプル通りにノードを繋いだのに、見た目が一致しないsliderやvalueが影響している可能性があります。Forgeのメイン画面でこれらを出すと、この画面上で数値を変更できます。Forgeのメイン画面でsliderやvalueを出すと、Unity画面のマテリアルに同じ意味の値が表示されます。Forge画面のSliderと同じです。これらの値はどちらからも変更できますが、同期されません。サンプルと見た目が違う時は、これらの値を揃えてから調整すると合います。Forgeを使っていると、このように灰色の画面になって何も表示されないことがあります。Forgeで調整中に、Unityのマテリアル側でShaderの調整をしたとき発生します。Forgeで開けば解決します。do?"というメッセージが出ます。Forgeの公式HPでの紹介ページが開きます。Comment"というメッセージが出ます。これをクリックすると、ノードに対してコメントを挿入できます。日本語は入れられません。forgeで作られていないshaderファイルは、Inspector上でWarningが表示されます。(1)これを開こうとすると、このようなメッセージが表示されます。(2)この状態で開くと、元のshaderファイルの情報が消えるのでご注意ください。複数選択altキーを押しっぱなしにしてマウスドラッグします。altを押さないと画面内をカーソル移動できます。ノードを削除するノードを選択してcmd+x(エックス)キーを同時押しします。エッジ(ノードとノードのつながり)を削除するaltキーを押しっぱなしにして、対処となるノードのつながり部分を右クリックします。表示の拡大・縮小Trackpadで上下にスクロールします。今回は色々な記事を参考にさせていただきました。それぞれの記事を簡単に紹介したいと思います。Forgeで何ができるかについて、最もわかりやすい資料と思います。凹みTipsさすがの凹tipsです。あちこちで引用されていました。コガネブログ2016年の情報です。Forgeの画面ボタンなどの説明が一通り書かれています。Qiita時間的に変化するShaderの書き方が紹介されています。Forgeの使い方を理解できたので、参考までに掲載させていただきました。AssetStoreまとめアセット紹介で有名なこちらのブログでも、概要がわかりやすくまとめられております。Tubeに上がっているチュートリアルの一覧です。Forgeがどんなものかがイメージがつきます。その上で6-1で紹介した小林さんの資料を読むと、理解が深まります。Nordeus水、風に揺れる葉、岩などの作り方を解説しています。Forgeは使ってませんが、UnityのShaderでどんな風に書けばどんな表現になるのかが、非常に丁寧に解説されています。Forgeは使っていませんが、様々なShaderの表現を丁寧に解説されています。Shaderでどんなことができるのか、というイメージをつかむだけでもオススメです。Unity全般について、困ったときの対処方法が多数書かれているので、その点でもオススメです。終わりにShaderの言語は少し特殊なので、初めてだと取っ付きづらい気がしていました。Forgeによってどんな機能があって、どうやって処理をつくればよいかということが見えてきたので、Shaderに対する理解が深まりました。Shaderを作るアセットは他にもあります。ForgeはShader開発を効率化するにはとてもよいアセットだと思います。試してみることをオススメします。Callsが200程度のモデル...2017-06-13UnityのGLを使って、HoloLensで線を描画してみるUnityで線を引くにはいくつか方法があります。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。