【Unity】カメラが近づくと弾けるポリゴン分解シェーダー

この記事ではカメラとの距離を使って、3Dモデルをポリゴン単位で分解する方法を紹介します。

カメラが近づくと弾けるポリゴン分解シェーダーを使ったサザエ

カメラが近づくと弾けるポリゴン分解シェーダーを使ったサザエ

カメラとの距離を使ってオブジェクトに変化をつける

シェーダー内の値を変化させることで描画結果に動きをつけることができます。

今回は変化する値としてカメラとオブジェクトの距離を使いたいと思います。

カメラが動くことによってオブジェクトの色が変化するといった演出を作ってみましょう。

カメラが近づくと色が変わる演出

カメラが近づくと色が変わる演出

Projectウィンドウの「Create/Shader/Unlit Shader」からシェーダーファイルを新規作成します。

シェーダーファイル名に「ColorGradient」とつけます

シェーダーファイル名に「ColorGradient」とつけます

 

作成したシェーダーファイルを以下のように書き換えてください。

このシェーダーではVertexシェーダー内でローカル座標系をワールド座標系に変換しFragmentシェーダーに渡しています。

そして、Fragmentシェーダー内でカメラとオブジェクトの距離を計算し、その値によってLerp関数を使いオブジェクトの色を変化させています。

これでカメラとの距離によってオブジェクトに変化をつけられるようになりました。

ポリゴン単位で動かす

Geometryシェーダーを使うことでポリゴン単位で動きをつけることができます。

シェーダー内では以下の順で処理されます。

  1. Vertexシェーダー
  2. Geometryシェーダー
  3. Fragmentシェーダー

注意点として、Web Player環境ではWebGLの仕様上Geometryシェーダーが機能しません。

STYLYで使用する際にはSTYLY Studioでは動作しませんが、VR上では動作しますので気を付けてください。

 

先ほどと同じようにシェーダーファイルを新規作成し、作成したシェーダーファイルを以下のように書き換えてください。

 

このシェーダー自体は何も動きをつけていない、「Geometryシェーダーってこうやって書くんだ~」というサンプルです。

何も変化しないGeometryシェーダー

何も変化しないGeometryシェーダー

 

_SinTimeとGeometryシェーダーを使って動きをつけてみましょう。

ポリゴンの法線を使って分解するGeometryシェーダー

ポリゴンの法線を使って分解するGeometryシェーダー

先ほどのシンプルなGeometryシェーダーに「法線ベクトルの計算」「_SinTimeを使った頂点移動処理」を足しています。

それでは一つずつ説明していきます。

法線ベクトルの計算

法線ベクトルの計算には外積を使用します。外積を使うことで平行でない2つのベクトルに垂直なベクトルを求めることができます。

言い換えると、3つの頂点を持つ三角ポリゴンが存在し、1つの頂点からそれぞれ異なる2つの頂点に伸びるベクトルに垂直なベクトル = 三角ポリゴンの法線ベクトルとなるのです。

_SinTimeを使ったアニメーション

次にアニメーションの処理ですが、_SinTimeは時間のサイン関数です。時間変化で-1.0から1.0の間を滑らかに行ったり来たりします。

こうしたUnityがあらかじめ用意している値(定義済みの値)を使うことで計算を省略することができます。

Unity – マニュアル: ShaderLab 定義済みの値

 

今回はマイナスの値を取りたくないので0.0から1.0の間を滑らかに行ったり来たりするように正規化してあげます。

最小値-1.0に0.5を乗算すると-0.5になり、さらに0.5を加算すると0.0になります。同様の計算を最大値1.0に行うと1.0になります。(結果的に変化しません)

これで-1.0から1.0の間で変化する値が0.0から1.0の間で変化するようになりました。

 

最後に法線ベクトルに_SinTimeによる変化する値を乗算したものを三角ポリゴンの各頂点座標に加算することでポリゴン単位で法線ベクトル方向に分解するような動きをつけます。

Polygon Destructionシェーダーのプログラム

カメラが近づくと弾けるポリゴン分解シェーダー

カメラが近づくと弾けるポリゴン分解シェーダー

これまでに説明した「カメラとオブジェクトの距離」「Geometryシェーダー」を組み合わせてカメラが近づくと弾けるポリゴン分解シェーダーを作ります。

シェーダーファイルを新規作成し、作成したシェーダーファイルを以下のように書き換えてください。

このシェーダー内で行っている処理は先ほど説明した「カメラとの距離」「ポリゴン単位での処理」の組み合わせです。

Polygon Destrucionシェーダーを使った演出

今回はカメラとの距離を使ってシェーダー内でポリゴン単位で分解する動きをつけましたが、_SinTimeやAnimatorからパラメーターを変化させて動きをつけることも可能です。

Geometryシェーダーを使った演出 01

Geometryシェーダーを使った演出 01

Geometryシェーダーを使った演出 02

Geometryシェーダーを使った演出 02

Animatorから制御することで動きに強弱をつけてアニメーションさせることができます。

STYLYへアップロード

自作のシェーダーで作成したMaterialをオブジェクトにつけた状態でアップロードすることで、STYLY Scene内で使用できるようになります。

STYLYにアップロードする方法はこちらの記事で詳しく解説しています。

 

 

一見すると複雑なプログラムでもいくつかの要素の組み合わせであることが多いので、何が鍵なのか見分けられるようになると自由にシェーダーを使いこなせるようになります。