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 \'land

Answer 1

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