这就是个灰度图

在这里插入图片描述

瞅瞅下面的贴图们,加深一下印象吧

在这里插入图片描述

说一下灰度图

灰度图中,

  • 黑色:代表最低的深度(或最低的置换)

  • 白色:代表最高的深度(或最高的置换)

  • 中间的灰度值,则代表不同程度的凹凸


置换贴图(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`属性提供一个纹理贴图,可以控制模型表面不同区域的粗糙度。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐