Can a three.js material have separate repeat values for a bump map and a texture map?

Question

I'm trying to break up the repetition in my texture by applying a bump map which repeats much less frequently. Unfortunately, it seems to take on the repeat value of 'landTexture' below (64), instead of the value I set it to (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 });

If I comment out map:landTexture, then the bump map scale is 1. Can I mix these two repeat values somehow?

Answer 1

No. The offset and repeat values default to one of them:

// 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

In your case, that would be the landTexture settings.

The workaround is to modify your textures, or create a custom ShaderMaterial.

EDIT: The exception is light map and ambient occlusion map, which each use the second set of UVs. This allows the other textures to be of higher detail than the light/AO map.

three.js r.84

Answer 2

Yes. In recent versions three.js r90^ has an API that can be used to change the behavior of built-in materials with GLSL.

It's not easy to do, but an example has been made:

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

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

Basically the built in materials are based on shader templates, which is just an ordered list of #include <some_chunk> statements.

Some of these "chunks" contain some code that looks like this

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

Where foo is alphaMap,map, specularMap etc. This means that a texture lookup is done on that sampler, at the interpolated uv attribute. You don't really care what precedes this code, or what follows it (it could be just a semi-colon ; or some mask .xy).

So what you want to do is apply some offset, or the way three.js does it, apply a mat3 transform.

The GLSL thus needs to look like this

texture2D( foo, foo_transform * vUv )

The problem then becomes supplying the shader with this uniform. The example does a bit of brute force by first compiling the shader, and then searching through the entire thing (otherwise you have to know in which chunks to look for this texture lookup).

This is a much better solution than modifying textures, and should actually be simpler than writing a custom ShaderMaterial.

Disclaimer - three is not really meant to be used like this but can be. So for example, while every map is prefixed somethingMap the albedo map is not and it's just called map, if it were an albedoMap the regular expression in this example would be simpler.