Shader, Shader, Unity,

概要

Unityのシェーダーを利用して、以下のような光のラインが走る表現(スキャンライン)を作る方法を解説します。

 

空間スキャンライン表現

空間スキャンライン表現

 

空間スキャンライン表現

空間スキャンライン表現

 

サンプルアセットをWebEditorで確認する

サンプルアセットをWebEditorで確認するLaunch the WebEditor

※STYLYに登録していれば、本TIPSで作成したサンプルアセットをWebEditorで確認することができます。
アカウント未登録の場合、新規登録を行ってから再度、本ボタンをクリックしてください。

アカウント登録はこちらから
Click here

 

サンプル

GitHubサンプル

https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/WorldScanlineShader_Sample

 

サンプル空間

http://gallery.styly.cc/r-ngtm/c42952b6-e559-11e8-b34d-4783bb2170d0

 

 

空間スキャンラインの作り方

ここでは、空間スキャンラインを作る方法を解説いたします。

 

x座標を色として使う

Unityのシェーダーでは、画面に映っているオブジェクトの画素が空間中のどの位置にあるかという、座標をとることができます。

例えば、空間のx座標をオブジェクトの色として使うと以下のような見た目になります。

オブジェクトの色にx座標を適用

オブジェクトの色にx座標を適用

x座標が0.0より小さい部分は黒色に、 1.0より大きい部分は白色に、0.0 ~ 1.0の部分は灰色になります。

 

UnityのShaderLabで書いた場合は以下になります。

 

光の線を作る

0.0 ≦ x座標 ≦ 0.1を満たすときはオブジェクトの色を白く、それ以外は黒くします。

0≦x≦0.1の部分を白くする

0≦x≦0.1の部分を白くする

 

UnityのShaderLabで書いた場合は以下になります

 

光の残像を加える

これに光の残像を加えます。

光の残像を加える

光の残像を加える

 

UnityのShaderLabで書いた場合

光の線を動かす

光の線の繰り返しを作り、これを時間で動かします。

線を時間で動かす

線を時間で動かす

 

UnityのShaderLabで書いた場合

 

色をつけて完成

最後に色を乗算することで今回の空間スキャンライン表現の完成です。

色を付ける

色を付ける



 

実際にUnityで作る

シェーダーファイルの作成

Create/Shader/Unlit Shaderを選択し、シェーダーファイルを作成します。

シェーダーファイルの作成

シェーダーファイルの作成

シェーダーファイル名はWorldScanlineとします。

作成したシェーダーファイル

作成したシェーダーファイル

シェーダーの編集

WorldScanlineシェーダーを開き、中身を以下のように書き換えます。

 

 

マテリアル作成

シェーダーファイルを右クリック選択し、Create/Material を選択してマテリアルを作成します。

マテリアル作成

マテリアル作成

 

作成したマテリアル

作成したマテリアル

 

マテリアルを箱に張り付ける

HierarhchyのCreate/Cubeを選択し、Cube(箱)を作成します。

Cubeオブジェクトの作成

Cubeオブジェクトの作成

 

作成したCubeオブジェクト

作成したCubeオブジェクト

 

作成したCubeオブジェクトに先ほど作成したマテリアルをドラッグ&ドロップし、Cubeにマテリアルをくっつけます。

マテリアルを箱オブジェクトに適用

マテリアルを箱オブジェクトに適用

 

スキャンラインマテリアルを適用した状態でゲームを再生すると、以下のようにラインが流れる箱になります。

マテリアル適用結果

マテリアル適用結果

SciFiな感じの板を作る

以下のようなSciFiな雰囲気ただよう板の作り方を解説します。

板状に並べた立方体に対するスキャンライン表現

板状に並べた立方体に対するスキャンライン表現

 

 

まずは、Cubeをたくさん並べて以下のような板を作ります。

立方体を並べる

立方体を並べる

 

マテリアルのパラメータを以下のように設定し、それぞれのCubeに適用します。

マテリアルのパラメータ設定

マテリアルのパラメータ設定

 

マテリアルを適用すると以下のような見た目になります。

スキャンラインシェーダーを適用した結果

スキャンラインシェーダーを適用した結果

 

UnityからSTYLYにアセットをアップロードする方法

UnityからSTYLYへデータをアップロードする方法については下記リンクの記事をご覧ください。

https://styly.cc/ja/manual/unity-asset-uploader/

かもそば

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

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

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