three.js 材质可以为凹凸贴图和纹理贴图提供单独的重复值吗？答案

【问题标题】：Can a three.js material have separate repeat values for a bump map and a texture map?three.js 材质可以为凹凸贴图和纹理贴图提供单独的重复值吗？
【发布时间】：2012-12-31 12:54:31
【问题描述】：

我正在尝试通过应用重复频率低得多的凹凸贴图来分解纹理中的重复。不幸的是，它似乎采用了 (64) 以下 'landTexture' 的重复值，而不是我将其设置为 (1) 的值。

landTexture.wrapS = landTexture.wrapT = THREE.RepeatWrapping;
landTexture.repeat.set(64, 64);
bumpTexture.wrapS = bumpTexture.wrapT = THREE.RepeatWrapping;
bumpTexture.repeat.set(1, 1);
var m = new THREE.MeshPhongMaterial({map:landTexture, 
                                     ambient: 0x552811, 
                                     specular: 0x333333, 
                                     shininess: 25, 
                                     bumpMap: bumpTexture, 
                                     bumpScale: 1, 
                                     metal: false });

如果我注释掉map:landTexture，那么凹凸贴图比例为1。我可以以某种方式混合这两个重复值吗？

【问题讨论】：

标签： javascript three.js textures

【解决方案1】：

没有。偏移量和重复值默认为其中之一：

// uv repeat and offset setting priorities
//  1. color map
//  2. specular map
//  3. displacement map
//  4. normal map
//  5. bump map
//  5. roughness map
//  5. metalness map
//  6. alpha map
//  7. emissive map

在您的情况下，这将是 landTexture 设置。

解决方法是修改纹理，或创建自定义ShaderMaterial。

编辑：例外是光照贴图和环境光遮蔽贴图，它们都使用第二组 UV。这允许其他纹理比光照/AO 贴图具有更高的细节。

three.js r.84

【讨论】：

【解决方案2】：

是的。在最近的版本中，three.js r90^ 有一个 API，可用于通过 GLSL 更改内置材质的行为。

这并不容易，但已经做了一个例子：

https://github.com/pailhead/three.js/blob/aa72250835b82f7dde2e8375775a4b039cb719c6/examples/webgl_materials_extended_multiple_uvs.html

https://github.com/mrdoob/three.js/pull/14174

基本上，内置材质基于着色器模板，这只是#include <some_chunk> 语句的有序列表。

其中一些“块”包含一些看起来像这样的代码

/*...*/ texture2D( foo, vUv ) /*...*/

其中foo 是alphaMap、map、specularMap 等。这意味着在该采样器上，在插值的 uv 属性处进行纹理查找。您并不真正关心这段代码之前的内容或之后的内容（它可能只是一个分号; 或一些掩码.xy）。

所以你想要做的是应用一些偏移量，或者按照 three.js 的方式，应用 mat3 变换。

因此，GLSL 需要如下所示

texture2D( foo, foo_transform * vUv )

问题就变成了为着色器提供这个制服。该示例通过首先编译着色器，然后搜索整个事物（否则您必须知道要在哪些块中查找此纹理查找）来执行一些蛮力操作。

这是一个比修改纹理更好的解决方案，实际上应该比编写自定义ShaderMaterial 更简单。

免责声明 - 三个并不是真的要这样使用，但可以。例如，虽然每张地图都以somethingMap 为前缀，但反照率地图却没有，它只是称为map，如果它是albedoMap，则此示例中的正则表达式会更简单。

【讨论】：