<pc-material>
<pc-material> 定义材质,由 <pc-render> 的 material 属性引用。
- 必须直接位于
<pc-app>下。
封装引擎 StandardMaterial,默认采用金属/粗糙度工作流,use-metalness=true,与 glTF 等 PBR 工具一致。不同于底层默认金属度 1,本元素默认 0,即电介质,因此只设 diffuse 就能显示该颜色,而非全金属。金属请显式设 metalness=1。
roughness 和 roughness-map 是 gloss 与 gloss-map 的别名,同时反转光泽通道。一个材质应只用其中一组,混用会因反转冲突而警告。gloss-map-* 修饰属性不自带反转,可用于配置 roughness-map。
标量贴图与对应属性相乘,应提供允许通过的值。仅设 metalness-map 无效,因为金属度默认 0,应配 metalness=1;roughness-map 配 roughness=1,gloss-map 配 gloss=1。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
alpha-dither | Number | - | opacity-dither 使用的独立 Alpha,0 到 1,可同时用 opacity 混合和此值抖动。省略则跟随 opacity,需非 none 抖动模式 |
alpha-test | Number | "0" | Alpha 测试阈值,低于此不透明度的片元丢弃 |
alpha-to-coverage | Boolean | "false" | 是否通过多重采样的 Alpha 转覆盖率处理透明 |
ao-intensity | Number | "1" | 环境光遮蔽贴图强度,0 到 1 |
ao-map | 资源 ID | - | 环境光遮蔽纹理资源 ID |
blend-type | Enum | "none" | 混合方式:none、normal、additive、additive-alpha、premultiplied、multiplicative、multiplicative-2x、screen、min、max 或 subtractive |
bumpiness | Number | "1" | 法线强度,0 平坦,1 完整效果 |
cull | Enum | "back" | 剔除面:none、back、front 或 front-and-back |
depth-bias | Number | "0" | 片元深度偏移,减少深度冲突 |
depth-test | Boolean | "true" | 是否测试深度 |
depth-write | Boolean | "true" | 是否写入深度 |
diffuse | Color | "1 1 1" | 漫反射颜色 |
diffuse-map | 资源 ID | - | 漫反射纹理资源 ID |
emissive | Color | "0 0 0" | 自发光颜色 |
emissive-intensity | Number | "1" | 自发光颜色与贴图倍率 |
emissive-map | 资源 ID | - | 自发光纹理资源 ID |
enable-ggx-specular | Boolean | "false" | 是否采用支持各向异性的 GGX |
flat-shading | Boolean | "false" | 按三角形几何法线而非插值顶点法线着色,形成多面外观 |
fresnel-model | Enum | "schlick" | 掠射角镜面反射的菲涅耳模型:none 或 schlick |
gloss | Number | "0.25" | 光泽度,0 粗糙,1 光亮,也可使用 roughness |
gloss-invert | Boolean | "false" | 是否将光泽值与贴图反转为粗糙度,设置 roughness 系列自动启用 |
gloss-map | 资源 ID | - | 光泽纹理资源 ID |
height-map | 资源 ID | - | 高度纹理资源 ID |
height-map-base | Number | "0.5" | 与原几何面齐平的高度值,0 到 1,高于者凸出、低于者凹入。1 为纯深度,0 为纯高度 |
height-map-factor | Number | "1" | 高度贴图驱动的视差强度 |
id | String | - | 材质唯一 ID,供其他标签引用 |
metalness | Number | "0" | 金属度,0 电介质,1 金属 |
metalness-map | 资源 ID | - | 金属度纹理资源 ID |
name | String | "Untitled" | 材质显示名,不参与引用,引用始终用 id |
normal-map | 资源 ID | - | 法线纹理资源 ID |
occlude-direct | Boolean | "false" | 环境光遮蔽是否也衰减直接光 |
occlude-specular | Enum | "ao" | 镜面遮蔽:none、ao 或 gloss-dependent |
opacity | Number | "1" | 不透明度,0 透明,1 不透明。需非 none 混合,或 Alpha 测试、覆盖率、抖动才可见 |
opacity-dither | Enum | "none" | 无需混合近似透明的抖动:none、bayer2、bayer4、bayer8、bayer16、bluenoise 或 ignnoise,也见 alpha-dither |
opacity-fades-specular | Boolean | "true" | 变透明时是否同步衰减镜面高光 |
opacity-map | 资源 ID | - | 不透明度纹理资源 ID |
parallax-mode | Enum | "offset" | offset 单次高度采样偏移 UV;occlusion 沿视线步进,提供更深且不拖抹的起伏,但增加逐像素采样。两者都不改轮廓 |
parallax-samples | Number | "16" | 视差遮蔽沿视线的最大高度采样数 |
parallax-shadow-samples | Number | "0" | 视差遮蔽朝各平行光的自阴影采样上限,0 禁用 |
roughness | Number | - | 粗糙度,0 光亮,1 粗糙。gloss 别名并启用反转,不应与 gloss 属性混用 |
roughness-map | 资源 ID | - | 粗糙度纹理资源 ID,gloss-map 别名并启用反转,不应与 gloss 属性混用 |
slope-depth-bias | Number | "0" | 按表面斜率施加的深度偏移,减少冲突 |
specular | Color | "0 0 0" | 镜面颜色,仅禁用金属工作流或启用 use-metalness-specular-color 时生效 |
specularity-factor | Number | "1" | 正入射镜面强度,0 到 1,仅 use-metalness-specular-color 生效 |
two-sided-lighting | Boolean | "false" | 背面是否按翻转法线照明 |
use-fog | Boolean | "true" | 是否受场景雾影响 |
use-lighting | Boolean | "true" | 是否受动态灯光影响。关闭后漫反射仍受环境光和环境图影响,二者都无时显示黑色。平坦自发光外观应使用 emissive 或 emissive-map |
use-metalness | Boolean | "true" | 是否使用金属度工作流而非旧镜面工作流 |
use-metalness-specular-color | Boolean | "false" | 金属度工作流中是否用镜面颜色对反射染色 |
use-skybox | Boolean | "true" | 是否接收天空盒环境照明 |
use-tonemap | Boolean | "true" | 是否应用摄像机色调映射 |
纹理贴图修饰属性
每个 *-map 定义纹理槽位,可通过配套属性控制采样。将 slot 替换为 ao、diffuse、emissive、gloss、height、metalness、normal 或 opacity:
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
<slot>-map-channel | Enum | 随槽位变化 | 读取的纹理通道,按槽位变化 |
<slot>-map-offset | Vector2 | "0 0" | UV 偏移 |
<slot>-map-rotation | Number | "0" | 角度制旋转 |
<slot>-map-tiling | Vector2 | "1 1" | 表面平铺重复 |
<slot>-map-uv | Number | "0" | 采样所用 UV 集索引 |
map-channel 按槽位有所不同:
- 颜色贴图 diffuse 和 emissive 接受 r、g、b、a、rgb,默认 rgb。
- 标量贴图 ao、gloss、height、metalness 接受 r、g、b、a,默认 g。
- opacity 接受 r、g、b、a,默认 a。
- normal 没有通道修饰,始终读取三个通道。
示例
四种材质:纯色、金属、透明玻璃和平铺纹理。天空 lighting 为金属提供反射。可修改 diffuse、metalness、roughness、opacity 或 diffuse-map-tiling:
<pc-app>
<pc-asset src="https://developer.playcanvas.com/assets/dark-tiles.png" id="dark-tiles"></pc-asset>
<pc-asset src="https://developer.playcanvas.com/assets/sepulchral-chapel-rotunda-4k.webp" id="skybox"></pc-asset>
<pc-material id="crimson" diffuse="crimson"></pc-material>
<pc-material id="gold" diffuse="#ffd700" metalness="1" roughness="0.3"></pc-material>
<pc-material id="glass" blend-type="normal" opacity="0.4"></pc-material>
<pc-material id="ground" diffuse-map="dark-tiles" diffuse-map-tiling="4 4"></pc-material>
<pc-scene>
<pc-sky asset="skybox" lighting></pc-sky>
<pc-entity name="camera" position="0 1.5 5" rotation="-12 0 0">
<pc-camera clear-color="#1d1f2b" tonemap="aces"></pc-camera>
</pc-entity>
<pc-entity name="light" rotation="45 30 0">
<pc-light cast-shadows normal-offset-bias="0.05" shadow-bias="0.2" intensity="1.5"></pc-light>
</pc-entity>
<pc-entity name="box" position="-2 0.5 0">
<pc-render type="box" material="crimson"></pc-render>
</pc-entity>
<pc-entity name="sphere" position="0 0.5 0">
<pc-render type="sphere" material="gold"></pc-render>
</pc-entity>
<pc-entity name="capsule" position="2 1 0">
<pc-render type="capsule" material="glass"></pc-render>
</pc-entity>
<pc-entity name="ground" scale="10 1 10">
<pc-render type="plane" material="ground"></pc-render>
</pc-entity>
</pc-scene>
</pc-app>
应用启动后动态插入元素会立即创建材质,因此支持 JavaScript 添加。运行时属性也实时生效,连续修改会合并为一次更新;移除 *-map 会清空槽位。
建议设置 name,以便之后识别。名称传到底层材质,会显示在性能分析、调试版 GPU 捕获和模型 hierarchy()中,包括被节点覆盖的材质,否则显示 Untitled。名称不参与引用,引用始终按 id。
JavaScript 接口
可以通过 MaterialElement API创建和操作元素。
material 返回底层 StandardMaterial,MaterialElement.get(id) 可查询。元素本身没有就绪机制,但应用启动后才创建材质,因此先等待 whenReady(pc-app)。
另请参阅
<pc-render>:将材质应用到图元。<pc-node>:覆盖模型内部材质。<pc-asset>:纹理资源。