Tips,

Unityで雨を作り、STYLYへアップロードするまでの手順を解説します。

※サンプルプロジェクトはこちらから:https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/Rain

Unityの頂点シェーダーを使った雨のサンプル

Unityの頂点シェーダーを使った雨のサンプル

 

雨の作り方の解説

雨の作成に入る前に、どうやって雨を作るのかを軽く解説いたします。

以下の3STEPで雨を作ります。

  1. 三角形メッシュを大量に作成
  2. 並べた三角形メッシュを高速で揺らす
  3. 色を調整すると雨っぽく見えます(完成)

三角形をメッシュを大量に作成します

三角形メッシュをプログラムで作成

三角形メッシュをプログラムで作成

立方体を埋める形で大量の細かい三角形メッシュを並べています。

三角形メッシュを高速で揺らします

頂点シェーダーで三角形メッシュを揺らす

頂点シェーダーで三角形メッシュを揺らす

頂点シェーダーで頂点を揺らします

色味を調整すると雨っぽい(完成)

色を調整し、雨っぽい見た目にして完成

色を調整し、雨っぽい見た目にして完成

メッシュを水色の半透明にすると雨っぽい見た目になって完成です。

 

メッシュ作成

ここから、実際に雨を作る手順の解説をしていきます。

 

まずはメッシュを作成します。

プログラムで大量の三角形メッシュを作成

プログラムで大量の三角形メッシュを作成

準備

今回は三角形メッシュを作成するために2つのC#スクリプトを使用します。

ここでは、2つのC#スクリプトを追加する手順を解説します。

 

スクリプト1 : RandomMesh.cs の作成

まずはProjectウィンドウ上で右クリックしてC#スクリプトを作成します。

C#スクリプト作成

C#スクリプト作成

 

名前をRandomMeshにします。

作成したスクリプトの確認

作成したスクリプトの確認

 

スクリプトRandomMeshを開き、中身を以下のように書き換えます。

スクリプトRandomMeshはこれで完成です。

 

スクリプト2 : RandomMeshInspector.cs の作成

同様の手順で、スクリプトRandomMeshInspectorも作成します。

スクリプトを開く

スクリプトを開く

 

スクリプトRandomMeshInspectorの中身を以下のように書き換えます。

以上で2つのC#スクリプトの作成は完了です。

 

実際にメッシュを作ってみる

次に、三角形メッシュを実際に作ってみます。

三角形メッシュ

三角形メッシュ

 

Rainオブジェクトの作成

HierarchyウィンドウでGameObjectを作成します.

空オブジェクトを作成

空オブジェクトを作成

 

オブジェクトの名前をRainにします.

名前の変更

名前の変更

 

名前変更後のオブジェクト

名前変更後のオブジェクト

 

コンポーネントRandomMeshをくっつける

RainオブジェクトにRandomMeshコンポーネントを追加します。

コンポーネントRandomMeshの追加

コンポーネントRandomMeshの追加

 

コンポーネントを追加するとInspectorが以下のような表示になります

追加前と追加後のInspectorウィンドウの比較

追加前と追加後のInspectorウィンドウの比較

 

コンポーネントの確認

コンポーネントの確認

RainオブジェクトをPrefab化する

次にRainオブジェクトをPrefab化します。

 

HierarchyウィンドウのRainオブジェクトをProjectウィンドウへドラッグ&ドロップします

ドラッグアンドドロップでPrafabを作成

ドラッグアンドドロップでPrafabを作成

 

Prefabが作成されます。

作成されたPrefab

作成されたPrefab

 

メッシュ作成

RainのPrefabを選択した状態でInspectorウィンドウ上の「メッシュの更新」ボタンをクリックします。

ボタンを押してメッシュ更新

ボタンを押してメッシュ更新

 

三角形メッシュがたくさん表示されます。

作成されたメッシュ

作成されたメッシュ

メッシュがピンク色になる原因

メッシュの色がピンク色になっていますが、これはRainオブジェクトのMeshRendererに

マテリアルが登録されていないことが原因です。

マテリアルの有無の比較

マテリアルの有無の比較

マテリアルを登録することで色味を調整することができるようになります。

 

MeshRenderにマテリアルを登録する

MeshRendererへマテリアルを登録する手順を解説します。

 

MeshRendererのMaterialsの部分をクリックします。

Materialsをクリックして開く

Materialsをクリックして開く

 

マテリアルの登録箇所

マテリアルの登録箇所

 

Materialsの丸ポチの部分をクリックすると、マテリアル一覧ウィンドウが表示されるので

登録したいマテリアルを選択します。

Default-Diffuseマテリアルを登録

Default-Diffuseマテリアルを登録

Default-Diffuseを選択するとDefault-DiffuseマテリアルがMeshRendererに登録されます。

 

マテリアル登録後の三角形メッシュ

マテリアル登録後の三角形メッシュ

Default-Diffuseマテリアルを登録した場合、白色になります。

 

三角形メッシュに動きを与える

次にメッシュに動きを与えることでより雨らしくなります。

 

ここでは、三角形メッシュに動きを与える手順を解説します。

 

カスタムシェーダーで動きを作る

今回は、カスタムシェーダーを利用して頂点を動かし、雨っぽい動きを与えます。

三角形メッシュとカスタムシェーダーを組み合わせて雨を作る

三角形メッシュとカスタムシェーダーを組み合わせて雨を作る

カスタムシェーダーの作成

ここからは実際にカスタムシェーダーを作成する手順を解説します。

Rainシェーダー

Rainシェーダー

 

まずはProjectウィンドウのCreateをクリックします。(Projectウィンドウ上での右クリックでもOK)

Createをクリック

Createをクリック

 

Shader/Standard Surface Shaderを選択します。

Standard Surface Shaderを選択

Standard Surface Shaderを選択

 

シェーダが出現するので、名前をRainにします

シェーダーの名前をRainにする

シェーダーの名前をRainにする

 

シェーダーファイルの編集

シェーダーRainを開きます。

シェーダーRainをダブルクリック

シェーダーRainをダブルクリック

 

シェーダーRain.shaderを以下のように書き換えます。

以上でシェーダーの編集は完了となります。

 

補足: シェーダーのファイル名について

Unity上でのシェーダーの名前表示はRainですが、実際のファイル名はRain.shaderになります。

シェーダーファイルの名前の確認

シェーダーファイルの名前の確認

Projectウィンドウの下を見るとファイル名を確認できます。

 

マテリアルの作成

次にマテリアルを作成するまでの手順を解説します。

シェーダーからマテリアル作成

シェーダーからマテリアル作成

 

シェーダーRainを右クリックし、Create/Materialを選択します。

マテリアル作成

マテリアル作成

 

Custom_Rainという名前のマテリアルが作成されます

作成されたマテリアルの確認

作成されたマテリアルの確認

以上で頂点を揺らすためのファイル作成は完了となります

 

マテリアルを試しに使ってみる

作成したマテリアルCustom_Rainを、シーン上の適当な3Dモデルにくっつけてみまっしょう

マテリアルをオブジェクトにドラッグアンドドロップ

マテリアルをオブジェクトにドラッグアンドドロップ

 

3Dモデルにマテリアルをくっつけると以下のような動きになります。

マテリアル追加後の動き

マテリアル追加後の動き

マテリアルCustom_Rainはモデルの頂点を動かしているため、このようなゆらゆらとした動きになります。

 

マテリアルの設定の確認

マテリアルをクリックすると、Inspectorウィンドウにマテリアルの設定数値が表示されます。

マテリアルの設定項目

マテリアルの設定項目

ここにある数値を変更することで、マテリアルの挙動を変えることができます。

雨に動きを与える

マテリアルCustom_RainをRainオブジェクトにくっつけると、雨のような動きをするようになります。

三角形メッシュとマテリアルを組み合わせて雨を作る

三角形メッシュとマテリアルを組み合わせて雨を作る

 

ここでは、三角形メッシュにマテリアルをくっつけて動きをつける手順を解説します。

 

まずは雨のPrefabを選択し、Materialsの右にある〇ポチをクリックします。

雨のPrefabへのマテリアル登録

雨のPrefabへのマテリアル登録

 

マテリアル一覧の中から先ほど作成したマテリアルCustom_Rainを選択します。

マテリアルCustom_Rainを選択

マテリアルCustom_Rainを選択

 

マテリアルCustom_Rainを設定すると動きが与えられて雨のような動きをするようになります。

マテリアル登録後の三角形メッシュ

マテリアル登録後の三角形メッシュ

雨の見た目の調整

雨の太さや色を調整して、より雨らしい見た目へと調整していきます。

 

まずはマテリアルCustom_Rainを選択し、色の入力欄をクリックします。

マテリアルの色の入力部をクリック

マテリアルの色の入力部をクリック

 

色のウィンドウが出てくるので、

以下のように設定し、雨を青っぽい半透明な色にします

水色を設定

水色を設定

 

カラーウィンドウの詳細

カラーウィンドウの詳細

 

設定すると以下のような見た目になります。

色を変更した後の雨

色を変更した後の雨

形の調整(雨粒の大きさや数など)

雨のPrefabの設定を変更することで、雨粒の大きさや雨粒の数などを変更することができます。

Prefabでの雨の設定

Prefabでの雨の設定

 

雨粒を小さくしてみる

雨粒の大きさの部分の数値を変えると雨粒の大きさを変えることができます。

雨粒の大きさの変更

雨粒の大きさの変更

 

大きさを0.1にした場合、雨は以下のような見た目になります。

雨粒の大きさ変更後

雨粒の大きさ変更後

雨の数を増やしてみる

雨粒の数を増やすと、濃い雨になります。

雨粒の数の変更

雨粒の数の変更

 

雨粒の数を6000に設定すると、以下のような見た目になります。

雨粒の数の変更後

雨粒の数の変更後

 

雨をバラつかせてみる

雨全体のバラつきを増やすと雨がバラつくようになります。

雨全体のバラつきの変更

雨全体のバラつきの変更

 

雨全体のバラつきに(16,4,16)を設定すると、以下のような見た目になります。

雨粒のバラつきの変更後

雨粒のバラつきの変更後

 

STYLYへアップロード

雨のPrefabを右クリックし、「Upload prefab to STYLY」を選択。

STYLYへPrefabをアップロード

STYLYへPrefabをアップロード

アップロードが始まるので、気長に待ちます。

 

Upload Succeededと出ればアップロード完了です。

アップロード完了時に出現するウィンドウ

アップロード完了時に出現するウィンドウ

STYLY上でMyModelsの中を見ると、アップロードしたRainがあります。

アップロードしたPrefab

アップロードしたPrefab

 

STYLYに雨を降らせましょう

STYLYにRainを配置

STYLYにRainを配置

 

※サンプルプロジェクトはこちらから:https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/Rain

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

かもそば

・職業はUnityエンジニア(2018年現在) ・面白そうと思ったものにはすぐに手を出すが、飽きることが多い器用貧乏 ・カフェで作業するのが好き

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLYは、VR空間を駆使した新たな表現・体験を生み出せるクリエイティブプラットフォームです。 STYLYを活用することで、コンセプチュアルなショップ空間やインスタレーション、ギャラリーなど クリエイターのイマジネーションを際限なく表現した多彩な空間を構築できます。 またその空間を通じて、今までの現実では成し得なかった体験をインターネットの世界へシェアすることができます。
 

Unity

Unityで制作されたコンテンツをお持ちの方へ
Unityシーンアップロード機能を活用すれば簡単にVR化が可能に!

Click here

×