Labo Aquaria

UE4 is my life style.
Here is the Labo I show my creation with UE4 and Oreo...
フォントシェーダーで遊ぼうあどばんす
0

    フォントシェーダーで遊ぼう Advanceです

     

    この記事はUnreal Engine 4 (UE4) Advent Calendar 2019 その2の23日目の記事のちょっと細かい編

    https://qiita.com/advent-calendar/2019/ue4_deux

     

    StarWarsを見てきました!乙女的に悶えるがあまり叫びたくなったAquariaです。

    という事で、続き続きー。

     

     

    「古の魔法石、契約の名の元に力を示せ!変幻!」

    「フォントシェーダーで遊ぼう」

    前回は導入編として、Lerpを使用した基本的な変化のシェーダをご紹介しました。

    次はその肉付けと捉えてください。テクスチャを削ってどこまでいけるかギリギリまでやってやろうぜ、編です。

     

    概要は前と変わりありません。

    やる事はマテリアル、テクスチャ、フォント、ブループリントを使ったテキストの形状変化です。
    フォント用のマテリアルを用意し、そのマテリアル内で疑似的な立体感を付けたテクスチャAとBを任意の値で変化させ、その制御をブループリントで行います。

    今回は疑似的な立体に使うノーマルマップも無理矢理フォントテクスチャから作ります。その分ノードが増えるので煩雑にはなりますから、許されるならノーマルマップテクスチャは作る方が良いと思いますが、これも一つのアイディアとして読んでみてください。

     

    全体図。


     

     

    0.おさらい

    まずはフォントを用意し、フォントのテクスチャを作成します。

    その後、各文字に合わさるように石のテクスチャを作成し、これをUE4に取り込みます。

    マテリアルとブループリントを作成し、ブループリントは前回同様、"VertexColor"の値を使ってアニメーション出来る状態にタイムラインを用意しておきます。

     

     

     

    1. マスクを作る

    まずはフォントサンプルと石のテクスチャを形状変化させます。"Lerp"のAとBにそれぞれの値を繋ぎ、"VertexColor"のRを変化用の値としてAlphaに入力します。これを"Opacity Mask"に繋ぎます。

    ここで、ただ2つのテクスチャ間を行き来するだけでは物足りないので、ノイズ用のテクスチャをフォントサンプルのテクスチャと合わせて形状をさらに変化させます。下画面内の場合、"Add"の先にノイズテクスチャが繋がっています。

    そして、その強度を調整する値として"VertexColor"のGをここでは使用します。

     

     

    2. 表面の見た目を作る

    R・G・Bにそれぞれ違うノイズを割り当てたテクスチャを使って、表面を作ります。このままでは白黒の情報なので、色ノードを足して後で調整できるようにします。

     

     

     

    3. 石の中を表現する

    Parallaxを利用して石の中間層を表現します。疑似的に奥行きを見せる事の出来るBumpOffsetを使い、結果をノイズテクスチャに繋げます。

     

     

     

    4. 傾きに応じた色の変化を作る

    見る角度に応じて色が変化するように、"Fresnel"から出力された情報を元に色を振り分け、先に作成した表面の色と掛け合わせます。

     

     

     

    5. 色を付ける

    2で作成した表面と3で作成した内部、4の角度に応じた色のノードをここで合わせ、その結果を"BaseColor"に繋げます。今回はフォントと石の色をそれぞれ変えたいので、フォントの明色・フォントの暗色・石の明色・石の暗色、この四つの色を用意し、それをなめらかに変化させる為に”Lerp”で繋ぎます。

     

     

     

    6. 石の中にある光を表現する

    もう1つParallaxを利用して石の内部で光が揺らめいているような表現を作ります。UVアニメーションをさせて、常時ノイズが動いている状態にするには"Time" と"Panner"を使います。この計算された結果は"EmissiveColor"に繋げるのですが、まずは次の工程で色を加えます。

     

     

     

    7. 色を付ける

    先に作成した光の揺らめきに色を加え、強度を調整します。

    角度によって光の強弱を変化させ、傾きが大きいと光が見えないようにします。また、形状に応じて光の強度を変化させる為、値を入力して調子出来るようにします。

    角度による光の調整は"Fresnel"を用いて、テクスチャがカメラに直面している時は白を返し、傾きが大きい時は黒を返すようにします。"Multiply"の先は"EmissiveColor"に繋げます。

     

     

     

     

    8. 立体感を作る

    このままではぺらっぺらの平面にしか見えないので、ここで疑似的な立体感をノーマルマップで作ります。

    出来るならノーマルマップテクスチャを用意した方が良いのですが、ここは限界にチャレンジして、マスク用のテクスチャを利用します。

    まずは"NormalFromHeightmap"にそれぞれのテクスチャを繋げ、これも"Lerp"で切り替えられるようにします。

     

     

     

    9. ブループリントで最終結果を確認する

    ブループリントでテキストを確認します。作成したマテリアルを割り当てて、"TextRenderColor"の数値を変化させると、形状が変化するはずです。

     

     


     

    以上、フォントシェーダの作り方でした。

    今回は、ハガレンやりたいな、エリクシルっぽいのが良いなあ、血っぽい石もいいな、なんて妄想から石とテキストの形状変化にしましたが、もちろん工夫次第で石ではなく水や金属も出来るはずです。ノイズを使ったディゾルブを含めたりすると、もっと心躍る魔法的表現が出来ると思います。

    テキストなんてシンプルで読みやすければイイ!なんて言わず、これを機に色々試してみてくださいね。

     

    では、良い年末を!

    Have lovely new year!

     

    | UE4 | 13:39 | comments(0) | - |
    CALENDAR
    S M T W T F S
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
    << March 2020 >>
    SELECTED ENTRIES
    CATEGORIES
    ARCHIVES
    モバイル
    qrcode
    PROFILE