Shader, Shader, STYLY, 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/DomainWarpingShader_Sample

 

STYLYサンプル空間

ドメインワーピング表現を適用した板を置いた空間をサンプルとして公開しています。

http://gallery.styly.cc/r-ngtm/fddede56-ec09-11e8-b34d-4783bb2170d0

 

ドメインワーピングとは

ドメインワーピングとは、雲や水のような表現を fbm(フラクタルブラウン運動)と呼ばれるノイズを利用した計算によって表現しようというものです。

ドメインワーピング

ドメインワーピング

 

ドメインワーピング

ドメインワーピング

 

 

ドメインワーピングの解説

ここでは、ドメインワーピングの模様がどのようにして作られているのかを解説いたします。

 

ピクセル座標pを使用してfbm(p)を生成

ピクセルの座標pを利用して、fbmを生成すると雲のような見た目になります。

fbm(p)

fbm(p)

 

シェーダーコードで書いた場合は以下になります。

 

補足

pのx座標(p.x)とpのy座標(p.y)を可視化すると以下のようになります。

p.xとp.yの表示

p.xとp.yの表示

fbm(p)にさらにfbmを適用し、fbm(fbm(p))を生成

fbm(p)をさらにfbmで歪ませると、以下のような模様ができます。

座標pに対してfbmを繰り返し適用し、複雑な模様を生み出すことをドメインワーピングと呼びます。

fbm(fbm(p))

fbm(fbm(p))

 

シェーダーコードで書いた場合は以下になります。

 

ドメインワーピングに動きを与える

ドメインワーピングの引数に時間を足すと動きが生まれます。

時間を足す

時間を足す

 

 

今回のドメインワーピング表現はこのようにして動きを与えています。

 

 

今回の表現の解説

ドメインワーピングで模様を作る

ドメインワーピングを利用して、以下のような模様を作ります。

ドメインワーピング

モザイクエフェクトをかける

ドメインワーピングで作った模様にモザイクエフェクトをかけます。

モザイクエフェクト

モザイクエフェクト

水玉でくりぬく

水玉模様でくりぬきます。

水玉でくりぬく

水玉でくりぬく

色が明るいところほど円が大きく、色が暗いところは円を小さくさせることによってコントラストをつけ、

イイ感じにしています。

 

時間で動かして完成

fbmのパラメータに時間を足して動きを与え、今回の表現の完成です。

動きを与える

動きを与える

 

Unityでの作り方

ここでは、Unityのシェーダーを利用して今回のドメインワーピング表現を作る方法を解説します。

本記事でのマウス操作はWindowsを想定しています。

 

シェーダーを作成

まずはProjectウィンドウで Create/Shader/Unlit Shaderを選択し、シェーダーファイルを作成します。

シェーダーファイル作成

シェーダーファイル作成

 

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

 

シェーダーの編集

作成したシェーダーファイルを開き、以下のコードをペーストします。

 

マテリアルを作成

シェーダーファイルを右クリックし、Create/Materialを選択します。

マテリアル作成

マテリアル作成

作成したマテリアル

作成したマテリアル

板オブジェクトの作成

作成したマテリアルを貼り付けるための板オブジェクトを作成する手順を解説します。

Planeオブジェクトの作成

Planeオブジェクトの作成

 

作成したPlaneオブジェクト

作成したPlaneオブジェクト

 

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

作成したPlaneオブジェクトにマテリアルをドラッグ&ドロップして、マテリアルを登録します。

マテリアルの登録

マテリアルの登録

 

板にドメインワーピング表現が適用され、以下のような見た目になります。

マテリアルを登録した結果

マテリアルを登録した結果

 

色を付ける

次にこのドメインワーピング表現に色を付けます。

今回のシェーダーでは、グラデーションテクスチャを設定することで、色がつくようになっています。

グラデーションテクスチャ

グラデーションテクスチャ

 

グラデーション用テクスチャをマテリアルへ登録

グラデーション用テクスチャをマテリアルへ登録

 

テクスチャを適用すると、色が付いて以下のような見た目になります。

テクスチャ設定結果

テクスチャ設定結果

 

色がつく仕組みについて

ドメインワーピングシェーダーで円が大きい部分ほど左の色を、円が小さい部分ほど右の色が適用されます。

グラデーションテクスチャを利用して色を付ける

グラデーションテクスチャを利用して色を付ける

 

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

UnityからSTYLYへアセットをアップロードする方法は下記URLをご覧ください

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

 

かもそば

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

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

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