three.js - 置换贴图（displacementMap）、凹凸贴图（bumpMap）、法线贴图（normalMap）、金属贴图（metalnessMap）、粗糙贴图（.roughnessMa）

2024-06-26 1296阅读

这就是个灰度图

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

说一下灰度图

在灰度图中，

黑色：代表最低的深度（或最低的置换）
白色：代表最高的深度（或最高的置换）
中间的灰度值，则代表不同程度的凹凸

置换贴图（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）
      - 法线贴图，用于模拟物体表面微小凹凸细节的高度信息的技术
      - 法线贴图，包含了表面法线方向的信息，可以让光照在物体表面产生更加生动的变化和阴影效果，从而增强物体表面的真实感、立体感。
      - 法线贴图，不会改变曲面的实际形状，只会改变光照。
      - 渲染效果：在渲染场景时，光照效果会根据法线贴图中的法线信息在物体表面产生细微的变化，从而使得物体表面的凹凸细节更加清晰和真实
        
        这种就是法线贴图
        
        
        金属贴图、粗糙贴图