跳到主要内容

<pc-material>

<pc-material> 定义材质,由 <pc-render> 的 material 属性引用。

用法

封装引擎 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-ditherNumber-opacity-dither 使用的独立 Alpha,0 到 1,可同时用 opacity 混合和此值抖动。省略则跟随 opacity,需非 none 抖动模式
alpha-testNumber"0"Alpha 测试阈值,低于此不透明度的片元丢弃
alpha-to-coverageBoolean"false"是否通过多重采样的 Alpha 转覆盖率处理透明
ao-intensityNumber"1"环境光遮蔽贴图强度,0 到 1
ao-map资源 ID-环境光遮蔽纹理资源 ID
blend-typeEnum"none"混合方式:none、normal、additive、additive-alpha、premultiplied、multiplicative、multiplicative-2x、screen、min、max 或 subtractive
bumpinessNumber"1"法线强度,0 平坦,1 完整效果
cullEnum"back"剔除面:none、back、front 或 front-and-back
depth-biasNumber"0"片元深度偏移,减少深度冲突
depth-testBoolean"true"是否测试深度
depth-writeBoolean"true"是否写入深度
diffuseColor"1 1 1"漫反射颜色
diffuse-map资源 ID-漫反射纹理资源 ID
emissiveColor"0 0 0"自发光颜色
emissive-intensityNumber"1"自发光颜色与贴图倍率
emissive-map资源 ID-自发光纹理资源 ID
enable-ggx-specularBoolean"false"是否采用支持各向异性的 GGX
flat-shadingBoolean"false"按三角形几何法线而非插值顶点法线着色,形成多面外观
fresnel-modelEnum"schlick"掠射角镜面反射的菲涅耳模型:none 或 schlick
glossNumber"0.25"光泽度,0 粗糙,1 光亮,也可使用 roughness
gloss-invertBoolean"false"是否将光泽值与贴图反转为粗糙度,设置 roughness 系列自动启用
gloss-map资源 ID-光泽纹理资源 ID
height-map资源 ID-高度纹理资源 ID
height-map-baseNumber"0.5"与原几何面齐平的高度值,0 到 1,高于者凸出、低于者凹入。1 为纯深度,0 为纯高度
height-map-factorNumber"1"高度贴图驱动的视差强度
idString-材质唯一 ID,供其他标签引用
metalnessNumber"0"金属度,0 电介质,1 金属
metalness-map资源 ID-金属度纹理资源 ID
nameString"Untitled"材质显示名,不参与引用,引用始终用 id
normal-map资源 ID-法线纹理资源 ID
occlude-directBoolean"false"环境光遮蔽是否也衰减直接光
occlude-specularEnum"ao"镜面遮蔽:none、ao 或 gloss-dependent
opacityNumber"1"不透明度,0 透明,1 不透明。需非 none 混合,或 Alpha 测试、覆盖率、抖动才可见
opacity-ditherEnum"none"无需混合近似透明的抖动:none、bayer2、bayer4、bayer8、bayer16、bluenoise 或 ignnoise,也见 alpha-dither
opacity-fades-specularBoolean"true"变透明时是否同步衰减镜面高光
opacity-map资源 ID-不透明度纹理资源 ID
parallax-modeEnum"offset"offset 单次高度采样偏移 UV;occlusion 沿视线步进,提供更深且不拖抹的起伏,但增加逐像素采样。两者都不改轮廓
parallax-samplesNumber"16"视差遮蔽沿视线的最大高度采样数
parallax-shadow-samplesNumber"0"视差遮蔽朝各平行光的自阴影采样上限,0 禁用
roughnessNumber-粗糙度,0 光亮,1 粗糙。gloss 别名并启用反转,不应与 gloss 属性混用
roughness-map资源 ID-粗糙度纹理资源 ID,gloss-map 别名并启用反转,不应与 gloss 属性混用
slope-depth-biasNumber"0"按表面斜率施加的深度偏移,减少冲突
specularColor"0 0 0"镜面颜色,仅禁用金属工作流或启用 use-metalness-specular-color 时生效
specularity-factorNumber"1"正入射镜面强度,0 到 1,仅 use-metalness-specular-color 生效
two-sided-lightingBoolean"false"背面是否按翻转法线照明
use-fogBoolean"true"是否受场景雾影响
use-lightingBoolean"true"是否受动态灯光影响。关闭后漫反射仍受环境光和环境图影响,二者都无时显示黑色。平坦自发光外观应使用 emissive 或 emissive-map
use-metalnessBoolean"true"是否使用金属度工作流而非旧镜面工作流
use-metalness-specular-colorBoolean"false"金属度工作流中是否用镜面颜色对反射染色
use-skyboxBoolean"true"是否接收天空盒环境照明
use-tonemapBoolean"true"是否应用摄像机色调映射

纹理贴图修饰属性​

每个 *-map 定义纹理槽位,可通过配套属性控制采样。将 slot 替换为 ao、diffuse、emissive、gloss、height、metalness、normal 或 opacity:

属性类型默认值说明
<slot>-map-channelEnum随槽位变化读取的纹理通道,按槽位变化
<slot>-map-offsetVector2"0 0"UV 偏移
<slot>-map-rotationNumber"0"角度制旋转
<slot>-map-tilingVector2"1 1"表面平铺重复
<slot>-map-uvNumber"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)。

另请参阅​

示例:基本形状、下落方块和汽车配置器。