MayaとかUE4で色々やったやつ

主にぷちコン向けに作品を作っています

TransformのDrawing OverridesでRGBをPython経由(PyMelで)指定する

表題通り 主にリグコントローラをあまり手で触りたくない時用

要旨

targetNode = pm.PyNode("node_name_of_target")
targetNode.overrideEnabled.set(1)
targetNode.overrideRGBColors.set(1)
targetNode.overrideColorRGB.set(rgbColor)

コード例

関数化するなら多分こんな感じ 引数がHSVなのは好みの問題

import pymel.core as pm


def setOverrideColor(hsv, targetNode=None):
    try:
        rgbColor = pm.dt.Vector(hsv)
        rgbColor = pm.mel.hsv_to_rgb(rgbColor)
    except TypeError as e:
        raise TypeError(u"Cannot Cast HSV to vector. HSV should be three element tuple and 0.0-1.0 range, such as (0.5, 0.8, 0.2)")

    if not targetNode:
        if not pm.selected():
            pm.displayWarning(u"No target specified.")
            return

        # recursive call
        for selectedNode in pm.selected():
            setOverrideColor(hsv, targetNode=selectedNode)
        return

    targetNode.overrideEnabled.set(1)
    targetNode.overrideRGBColors.set(1)
    targetNode.overrideColorRGB.set(rgbColor)


# usage sample
setOverrideColor(hsv=(0.2, 0.4, 1.0))

hsv_to_rgbに渡す値はpm.dt.Vectorである必要がある

UnrealEngine4 紙めくりマテリアル作例 #UE4ぷちコン

f:id:teikes:20210415230442g:plain

紙めくりマテリアルの動作例

 

こんな感じのを作ります。

UnrealEngine4 第15回UE4ぷちコンに応募した作品で作成した仕組みです。

作品 : https://youtu.be/Im3jk3Ik7bM

前提の確認

テクスチャ画像をいい感じに歪ませて目的の表現を作ります。

最初にTexture SampleノードのUVs入力を使用して歪みを作る方法を確認します。

Material Domain変更

UIで使うのでMaterialDomainをUserInterfaceに変更します。

また、透明度を後で使用したいのでBlend ModeをMaskedにしておくとよいでしょう。

f:id:teikes:20210415230547p:plain

変更箇所

TextureSampleのUVs入力の機能の確認

いわゆるテクスチャ画像をマテリアルで使うときに使用するTexture Sampleノードの機能を確認しましょう。

UVs入力は、特段何も刺さなくても機能します。その際には(一般には)TexCoord[0]が暗黙的に使用されます。

下図に示すノードグラフと結果から、TexCoord[0]の入力の有無により結果が変わらないことが分かります。

f:id:teikes:20210415230721p:plain

TextureSampleノードにTexCoord[0]を刺すとき・刺さないときそれぞれの出力

このTexCoord[0]とは、右方向(U)に沿って赤(R)が線形増加し、下方向(V)に沿って緑(G)が線形増加する二軸二次元情報です。

f:id:teikes:20210415230749p:plain

TexCoord[0]の内容

f:id:teikes:20210415230803p:plain

TexCoord[0]の内容イメージ

Texture SampleノードはUVsとテクスチャ画像を入力とし、

UVsの二次元情報を0~1に正規化された座標位置と解釈し、

テクスチャ画像の指定された位置のピクセルの色情報を出力します。

f:id:teikes:20210415230819p:plain

UVs入力を座標としてテクスチャ画像からピクセル色情報を取得するイメージ図

UVs入力を使って画像をゆがませてみよう

UVsに二軸線形グラデーション(TexCoord[0])を入れるとそのままのテクスチャ画像色情報が、

UVsに固定値を入れると特定ピクセルのテクスチャ画像色情報が出力されることを確認しました。

では、非線形グラデーションを入力してテクスチャ画像をゆがませてみましょう。

こんな画像を入力してみます↓(この画像の作成方法は後で説明します)

f:id:teikes:20210415230838p:plain

入力画像

まだ裏面であることを示すBlueは使わないので、MaskでR,Gのみ抽出して使用します。

曲げられた辺りのテクスチャ画像が少し歪んでいることがわかります。

f:id:teikes:20210415230853p:plain

UVs入力を使用してテクスチャ画像をゆがませる作例

実制作:素材編

まずは紙がめくれる という情報をテクスチャ形式で作ります。

2のべき乗数のフレームで納まると効率的です。

f:id:teikes:20210415230914g:plain

図 もともとのアニメーション

 

これを上面からR,G:UV B:裏面 A:オブジェクトの有無 としてレンダリングします。

f:id:teikes:20210415231039p:plain

レンダリング結果(1フレーム抜粋)

ついでに紙が自分に落とす影もレンダリングしておくとよいでしょう。

(ついでと言いつつ、この素材のレンダリングに4時間かかっています)

f:id:teikes:20210415231055p:plain

落ち影のレンダリング結果(1フレーム抜粋)

ここは任意ですが、のちにUE4内でこの連番静止画を動画的に用いる必要があるので、

ここでアトラス化しておくと便利かと思います。今回は16F、4x4でアトラス化しました。

しない場合は任意の方法で紙めくりをUE4のマテリアルで動画的に用いることができるよう仕込んでください。

f:id:teikes:20210415231118p:plain

アトラス化したテクスチャ(UVA)

f:id:teikes:20210415231136p:plain

アトラス化したテクスチャ(落ち影)

これで素材制作は完了です。

実制作:UE4マテリアル編

UE4内で先ほど制作したアトラステクスチャを利用してUV歪みをアニメーションさせてみましょう。

UE4のマテリアルノードを組んでいきます。

UE4のマテリアル内でアトラスを使用する場合は、FlipBookマテリアルファンクションを使用するのが便利です。

Number of Rows/Columnsに縦横に並べた枚数を、AnimationPhaseに0~1の値を入れるとアトラスから1枚分だけ切り抜いてくれるノードです。

このノードのUVs出力はアトラステクスチャの特定部分を示すUV情報が得られるので、これを使用していきます。

f:id:teikes:20210415231210p:plain

FlipBookマテリアルファンクションの使用例 右のTexture Sampleノードは同じ画像を指定している

上記ノード群は下図のように組んだのと同じ結果になりますが、TextureSampleのUVs入力の機能をしっかり知っておくと応用範囲が広いかと思いまして

今回はTextureSampleのUVs入力を使用する方法で紹介します。

f:id:teikes:20210415231231p:plain

ノード組みの別案

 

歪ませたいテクスチャのUVsにこのアトラスから取得したUVを入力させれば、基本的な流れは完了です。

f:id:teikes:20210415231248p:plain

UV歪みが入った状態のノード

あとはUVAの青チャンネルに入れていた裏面情報を使って裏表を作ったり、

レンダリングしておいた陰影情報を使って落ち影を入れたりすると良いかもしれません。

f:id:teikes:20210418001302p:plain

UV歪みに裏面と落ち影・透明度を入れたノード組の例

というわけでFlipBookのAnimation Phaseにマテリアルパラメータを入れて動かしてみたものがこちらです。

f:id:teikes:20210415230442g:plain

注意事項

ここが書きたくて記事書きました

UV用テクスチャの扱いについて

Virtual Texture Streaming

アトラス化したテクスチャは解像度が大きくなりがちですが、高解像度(4K↑?)テクスチャは読み込み時自動的にVirtual Texture Streamingが有効になります。

f:id:teikes:20210415231347p:plain

Virtual Texture Streamingのチェックボックス

これにチェックが入っているとUIで使えないので、チェックを外しておきましょう。

テクスチャ色深度について

通常のテクスチャ(8bpc)には色調が256階調しかなく、横幅1920ピクセルマッピングをするには不十分です。

最低でも16bit/color(16bpc)のテクスチャの使用を推奨します。

下図にテクスチャ色深度による結果の違いを示します。

f:id:teikes:20210415231407p:plain

テクスチャ色深度ごとの結果の違い 左から 8bpc 16bpc 32bpc

テクスチャ圧縮・ミップマップについて

高色深度のテクスチャであっても、UE4にインポートしたデフォルトの設定そのままで使用すると十分な情報量を引き出せません。

テクスチャアセットのレベルオブディテールの欄からTexture Groupを16bit Dataに変更することをお勧めします。

f:id:teikes:20210415231424p:plain

当該の変更箇所

f:id:teikes:20210415231436p:plain

レベルオブディテールの項目を変更した例 両方とも32bpcテクスチャを使用

テクスチャカラースペースについて

先述の16bit Dataタイプに変更するとUE4内でsRGB補正のカラーマネジメントをすることができません。

これにより、テクスチャを作成するときにリニア化していなかった場合、想定しない歪みが発生することがあります。

f:id:teikes:20210415231451p:plain

不適切なカラーマネジメントにより歪んだテクスチャの例

テクスチャをリニア化しておくか、32bpcテクスチャ(HDRテクスチャ)を使用してください。

 

 ご指摘・コメントお待ちしています。