マテリアル機能説明
モデルマテリアル
モデルマテリアルの編集
1. glb モデルをリソースパネルにドラッグすると、対応するリソースフォルダが自動で作成されます。
2. フォルダを展開し、prefab ファイルをオブジェクトパネルにドラッグすると、シーンにモデルが配置されます。
3. モデルのマテリアル編集には、次の2つの方法があります。
1つ目は、オブジェクトパネルで対象の Mesh ノードを選択し、右側のコンポーネントパネルでマテリアル項目を編集します。
2つ目は、リソースパネルの xxx-gltf/materials ディレクトリから xxx.fmaterial ファイルを選択し、右側のパネルでマテリアルを編集します。
モデルで利用するマテリアルの切り替え
オブジェクトパネルで対象の Mesh ノードを選択し、右側のコンポーネントパネル内「Mesh」コンポーネントで使用したいマテリアルを切り替えられます。
マテリアルと Shader
概要
Shader には「モデル Mesh のレンダリング方式」が定義されており、マテリアルにはその方式に合わせて設定可能なパラメータが格納されます。
参照関係は Mesh → マテリアル → Shader の順で、マテリアルは1つの Shader に紐づき、Shader は複数のマテリアルに対応します（同じレンダリング方式でも、パラメータが異なる場合があるためです）。
例：Shader のレンダリング方式がガウスぼかしの場合、マテリアルで設定するパラメータはぼかしの度合いとなります。
Shader は通常、開発者や TE からユーザーに提供されます。
マテリアルで利用する Shader の切り替え
Shader の切り替えは、同じパラメータ構成で異なるレンダリング方式を試す際に利用します。切り替えると、マテリアル編集パネルに選択した Shader で編集可能なすべてのパラメータが表示されます。
Shader 一覧には、全ての内蔵 Shader と、リソースパネル内の Shader が含まれます。
マテリアルテクスチャ
対応リソースタイプ
ファイルタイプ | テクスチャタイプ | 備考 |
jpg/png | 2D | - |
ktx | 2D / Cubemap | hdr ファイルを TE にドラッグすると自動で ktx が生成され、マテリアルのテクスチャ項目でこの ktx を利用できます。 |
rdt | 2D | RenderTarget。 |
pag | 2D | - |
リソーステクスチャの設定
リソースを選択後、右側のパネルでリソーステクスチャを設定できます。以下の図を参考にしてください。
内蔵 Shader
以下のスクリーンショットは、現在提供されている内蔵 Shader の一覧です。
lit_xxx は標準の PBR Shader を指し、xxx はブレンドモードを示します。
unlit_xxx は非照明 Shader を表し、xxx はブレンドモードを示します。
エンジンの仕様上、unlit/pbr Shader はブレンドモードごとに個別で提供されています。
カスタム Shader
カスタム Shader の追加
現在、Shader ファイルは filament エンジンがサポートする mat ファイル形式となっており、Tencent Effect では mat ファイルを基に各種デフォルト値や UI 設定を拡張しています。
Shader の記述が完了したら、拡張子を fshader に変更し、Tencent Effect のリソースパネルへドラッグ＆ドロップしてください。
インポート後、任意のマテリアルファイルを選択し、Shader をカスタム Shader へ切り替えることができます。
Shader 規格仕様
Tencent Effect における項目の拡張設定は、すべて ls_editor ノード内で行います。以下の図を参照してください。
ls_editor ノードで設定できる項目
項目 | タイプ | 必須か | 説明 |
defaultValue | type により異なります | はい | - |
uiType | string | いいえ | この項目の編集 UI タイプ。デフォルトでは type に応じて自動設定されます。 |
uiHidden | bool | いいえ | この項目の編集 UI の表示/非表示設定。デフォルトは true。 |
showIfKey | string | いいえ | 他の項目値による表示制御。 |
numberStep/numberRangeFrom/numberRangeTo | int/uint/float | いいえ | uiType が int/uint/float の場合に設定可能。各項目は：ステップ値、開始値、終了値。 |
enum | json 配列 | uiType が enum の場合、必須 | [{ label:"UV0", value: 0 },{ label:"UV1", value: 1 }] |
type のデフォルト値と対応 uiType
type はエンジンが本来サポートする uniform 項目のデータ型です。
type タイプ | defaultValue 例 | 対応 uiType |
bool | true | bool、enum |
bool2 | [true, true] | bool2 |
bool3 | [true, true, true] | bool3 |
bool4 | [true, true, true, true] | bool4 |
int | 1 | int、enum |
int2 | [1, 2] | int2 |
int3 | [1, 2, 3] | int3 |
int4 | [1, 2, 3, 4] | int4 |
float | 1.0 | float、enum |
float2 | [1.0, 2.0] | float2 |
float3 | [1.0, 2.0, 3.0] | float3 |
float4 | [1.0, 2.0, 3.0, 4.0] | float4 |
uint | 1 | uint、enum |
uint2 | [1, 2] | uint2 |
uint3 | [1, 2, 3] | uint3 |
uint4 | [1, 2, 3, 4] | uint4 |
mat3 | [1,0,0,0,1,0,0,0,1] | mat3 |
mat4 | [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] | mat4 |
sampler2d | "" | file |
samplerCubemap | "" | file |
uiType タイプとその効果
果
uiType タイプ | UI 効果 |
bool |  |
bool2 |  |
bool3 |  |
bool4 |  |
int/uint/float |  |
int2/uint2/float2 |  |
int3/uint3/float3 |  |
int4/uint4/float4 |  |
file |  |
uiType が int/float/uint で、numberStep、numberRangeFrom、numberRangeTo を同時設定した場合 |  |
color |  |
enum |  |
全項目サンプル Shader
デモ動画および Demo 素材パック
TE 基本利用フロー
機能デモ
RenderTarget をマテリアル入力として利用
下記デモでは、カメラの出力をマテリアルの入力として利用しています。
デモ動画：こちらのリンク
素材パック：こちらのリンク
スクリプトでマテリアルのテクスチャ画像を切り替え
デモ動画：こちらのリンク
素材パック：こちらのリンク
スクリプトでマテリアルのベースカラーを変更
デモ動画：こちらのリンク
素材パック：こちらのリンク
スクリプトで pag の再生進度を制御
下記デモでは、スクリプトで pag の逆再生を行っています。
デモ動画：こちらのリンク
素材パック：こちらのリンク
matcap デモ
効果画像：
素材パック：こちらのリンク
よくある質問
Shader エラーの警告
作成した Shader にエラーがあり、Mesh に適用された場合は、Mesh が「マゼンタ色」で警告表示されます。下図をご参照ください。
色差問題
色差が発生するケースと原因
エフェクト作成時にカメラ映像をモデルのテクスチャとして利用すると、背景画像のカメラ映像と色差が生じる場合があります。
主な原因は、3D エンジンがシーンのレンダリング後に画質向上を目的とした後処理（Tonemapping やガンマ補正）を全画面に施すためです。
例：
下図デモでは、右側が 3D ポリゴン上にレンダリングされ、左側はカメラ映像を背景画像として表示しています。左右で色差が目立ち、期待されるのは左側の色味です。
対策方法：「オブジェクトパネル」で該当するカメラオブジェクトを選択し、右側の「コンポーネントパネル」の Camera コンポーネント内にある「Post Process」オプションのチェックを外してください。オフにすることで、プレビュー画面全体の色差が解消されます。
フィードバック