threejs 贴花失真

### Three.js 中贴花效果失真的原因分析

在 Three.js 中实现高质量的贴花效果时，常见的失真问题通常源于材质映射方式的选择不当。当从低角度观察时，传统的凹凸贴图可能无法提供足够的深度感知，导致视觉上的不真实感[^1]。

### 使用视差遮蔽贴图优化贴花效果

为了改善这一情况，可以采用视差遮蔽贴图技术。这种方法不仅能够增强表面细节的真实度，还能有效减少因视角变化带来的失真现象。具体来说，在创建 MeshStandardMaterial 或其他支持自定义法线和高度属性的标准材料时，可以通过设置 `displacementMap` 来应用位移贴图，从而真正改变几何体表面的高度信息；或者利用 `normalScale` 参数调整法线强度，配合高精度的视差遮蔽算法模拟复杂的微观结构。

const material = new THREE.MeshStandardMaterial({
    map: texture, // 颜色贴图
    normalMap: normalTexture, // 法线贴图
    displacementMap: heightTexture, // 位移贴图
    displacementScale: 0.05,
});

对于更高级的需求，还可以考虑引入 Parallax Occlusion Mapping (POM)，即视差遮挡映射，它可以在不增加额外顶点的情况下显著提升表面层次感：

material.onBeforeCompile = shader => {
    const parallaxOcclusionMappingCode = `
        vec2 dSTdx = dFdx(vUv);
        vec2 dSTdy = dFdy(vUv);
        float scale = length(vec3(dSTdx, bumpDepth));
        float height = texture2D(displacementMap, vUv).r * displacementScale;
        vec3 viewDir = normalize(cameraPosition - worldPos);
        vec3 tangentViewDir = normalize(mat3(tangentMatrix) * viewDir);
        float dist = dot(viewDir, cameraNormalWorld);
        int numLayers = int(mix(20., 80., abs(dist)));
        float layerHeight = 1. / numLayers;
        float currentLayerHeight = 0.;
        
        while(currentLayerHeight < height && numLayers > 0){
            numLayers--;
            currentLayerHeight += layerHeight;
        }
        ...
    `;
    
    // 插入 POM 实现代码片段至 fragmentShader
};

上述方法虽然能极大程度上缓解贴花失真的状况，但在某些极端情况下仍可能存在不足之处。此时可探索基于纹理数组的技术路线作为补充方案[^2]。

### 利用纹理数组进一步改进性能与质量

通过构建并运用纹理数组，不仅可以一次性加载多个相同规格的小型贴图资源，而且能够在运行期间高效切换不同类型的装饰图案而不必频繁更新 WebGL 绑定状态。这种方式特别适合处理大量相似但又有所区别的细碎元素，比如墙面裂缝、污渍斑点等复杂场景下的表现需求。