材质功能说明
模型材质
编辑模型材质
1. 将 glb 模型拖入到资源面板,此时会生成一个资源文件夹。


2. 展开该文件夹,将 prefab 文件拖入对象面板,此时就可以在场景中看到模型。


3. 有两种方式可以编辑模型的材质:
第一种,在对象面板中选中模型的 Mesh 节点,在右侧组件面板进行材质编辑。


第二种,在资源面板中 xxx-gltf/materials 目录下选中 xxx.fmaterial 文件,在右侧面板进行材质编辑。


切换模型使用的材质
在对象面板中选中模型的 Mesh 节点,在右侧组件面板的 Mesh 组件中,可以选择想要使用的材质。


材质与 Shader
简介
Shader 中记录了“模型 Mesh 的渲染方式”,材质中记录了“模型 Mesh 的渲染方式”中可以配置的一些参数。
引用关系是 Mesh → 材质 → Shader。材质可以关联一个 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 类型自动推荐合适的 uiType。 |
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 基础使用流程
功能演示 Demo
使用 RenderTarget 做材质的输入
下面 Demo 中使用相机的输出作为材质的输入。
演示视频:单击 此地址 可查看。
素材包:单击 此地址 获取。
使用脚本切换材质使用的图片
演示视频:单击 此地址 可查看。
素材包:单击 此地址 获取。
使用脚本修改材质基色字段
演示视频:单击 此地址 可查看。
素材包:单击 此地址 获取。
使用脚本控制 pag 的播放进度
下面 Demo 中,使用脚本让 pag 倒序播放。
演示视频:单击 此地址 可查看。
素材包:单击 此地址 获取。
matcap demo
效果图:


素材包:单击 此地址 获取。
常见问题
错误的 Shader 提示
如果编写的 Shader 存在错误并被应用到 Mesh 上,Mesh 会渲染出“洋红色”进行提示。如下图:


色差问题
出现色差的场景及原因
在制作特效时,将相机画面作为模型贴图,这会导致与底图上的相机画面产生色差。
产生色差的主要原因是 3D 引擎在渲染场景后,默认会对整个画面进行后处理以提升画质。其中校正色差的步骤是:Tonemapping 和 gammar 校正。
示例:
下图的 Demo 中,右半部分是渲染到了一个 3D 面片上,左半部分是相机画面底图,可以看到左右两部分有明显的色差,期望的是左半部分的效果。


解决方法:在“对象面板”中选中对应的相机对象,然后在右侧的“组件面板”中,取消勾选 Camera 组件下的 “Post Process” 选项即可。关闭后,整个预览画面将没有色差。













