three.js - 置换贴图(displacementMap)、凹凸贴图(bumpMap)、法线贴图(normalMap)、金属贴图(metalnessMap)、粗糙贴图(.roughnessMa)
·
这就是个灰度图
瞅瞅下面的贴图们,加深一下印象吧
说一下灰度图
在灰度图
中,
-
黑色:代表最低的深度(或最低的置换)
-
白色:代表最高的深度(或最高的置换)
-
中间的灰度值,则代表不同程度的凹凸
置换贴图(displacementMap)
置换贴图:displacementMap
,
-
置换贴图,通常使用
灰度图
作为输入,来模拟表面的凹凸效果。 -
置换贴图,会实际修改物体的几何形状,通过移动顶点来创建凹凸效果,
-
置换贴图这种效果,通常是:让点的位置,沿面法线移动一个贴图中定义的距离。
另外 置换贴图
需要额外注意,要设置plane的长宽的细分
* 创建平面
`
参数一、二:是平面的长宽;参数三、四:是置换贴图设置的长宽的细分(`长宽都细分成200个顶点`)
宽度,
高度,
宽度分段数:它决定了平面在宽度方向上被分割成多少个小矩形(或更准确地说,是顶点网格的宽度分辨率)。
更高的值会创建更平滑的曲线(虽然对于平面来说,这主要体现在边缘的圆形或平滑处理上,如果有的话),但也会增加渲染的顶点和面数。
高度分段数:与宽度分段数类似,它决定了平面在高度方向上被分割成多少个小矩形。`
const planeGeometry = new THREE.PlaneGeometry(1, 1, 200, 200)
// `MeshPhongMaterial`材质,不加环境光的话,就是黑乎乎的啥也看不见
const planeMaterial_1 = new THREE.MeshPhongMaterial({
map: texture,
transparent: true, // 设置是否透明
specularMap: specularTexture,
aoMap: aoTexture // 环境光遮蔽贴图
normalMap: normalTexture, // 法线贴图
// bumpMap: dispTexture, // 凹凸贴图
displacementMap: dispTexture, `置换贴图(要设置的长宽的细分)`
displacementScale: 0.02, // 置换的程度
})
凹凸贴图(bumpMap)
凹凸贴图:bumpMap
-
凹凸贴图,使用
灰度图
来模拟表面的凹凸效果,但是,它并不改变物体的实际几何形状,
而是,它通过修改表面的法线向量,来产生视觉上的凹凸感。
-
凹凸贴图,是一种更轻量级的技术,因为它不需要修改物体的几何形状。
因此,它在性能上通常比置换贴图更优。
-
凹凸实际上不会影响对象的几何形状,只影响光照。如果定义了
法线贴图
,则将忽略该贴图。
置换、凹凸 做一下对比
-
置换贴图、凹凸贴图,都使用
灰度图
作为输入,来模拟表面的凹凸效果。 -
置换贴图,通过,实际修改物体的几何形状来创建凹凸效果
凹凸贴图,通过,修改表面的法线向量来产生视觉上的凹凸感 -
置换贴图,通常需要更多的计算资源,而凹凸贴图在性能上更优
法线贴图(normalMap)
-
法线贴图,用于模拟物体表面微小凹凸细节的高度信息的技术
-
法线贴图,包含了表面法线方向的信息,可以让光照在物体表面产生更加生动的变化和阴影效果,从而增强物体表面的真实感、立体感。
-
法线贴图,不会改变曲面的实际形状,只会改变光照。
-
渲染效果:在渲染场景时,光照效果会根据法线贴图中的法线信息在物体表面产生细微的变化,从而使得物体表面的凹凸细节更加清晰和真实
这种就是 法线贴图
金属贴图、粗糙贴图
金属贴图:`metalnessMap` 和 粗糙贴图:`roughnessMap`,是用于模拟物体表面属性的两种重要贴图技术,
这两种贴图,通常与基于物理的渲染(PBR)材质(如:`MeshStandardMaterial`)一起使用,以创建更真实和逼真的3D渲染效果。
- 金属贴图
metalnessMap
1、定义:金属贴图,用于定义模型表面的金属度,即:材质像金属的程度
2、贴图原理:
金属贴图,通常使用'灰度图像',
其中,
'白色':表示,完全金属质感的区域,
'黑色':表示,非金属质感的区域,
'灰度值':则表示不同程度的金属质感,
3、使用方式:通过为`MeshStandardMaterial`的`metalnessMap`属性提供一个纹理贴图,可以控制模型表面不同区域的金属度。
- 粗糙贴图
roughnessMap
1、粗糙贴图,用于定义模型表面的粗糙程度,即:表面的光滑或粗糙程度。
2、贴图原理:
粗糙贴图,通常使用'灰度图像',
其中,
'白色':表示,非常光滑的表面,
'黑色':表示,非常粗糙的表面,
'灰度值':则表示不同程度的粗糙度,
3、使用方式:通过为`MeshStandardMaterial`的`roughnessMap`属性提供一个纹理贴图,可以控制模型表面不同区域的粗糙度。
更多推荐
已为社区贡献9条内容
所有评论(0)