Is it possible for a three.js material to have different repeat values for a bump map compared to a texture map?

Question

Is it possible for a three.js material to have different repeat values for a bump map compared to a texture map?

I'm attempting to reduce the repetitive nature of my texture by implementing a bump map that repeats less frequently. However, it appears to adopt the repeat value of 'landTexture' (64) below instead of the value I assigned it (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 remove map:landTexture, then the bump map scale is 1. Is there a way to combine these two repeat values somehow?

javascript three.js textures

Answer 1

Answer №1

It is important to note that the default values for offset and repeat are prioritized in a specific order:

// Prioritization of uv repeat and offset settings
//  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 scenario, this priority would apply to the landTexture settings.

If needed, you can adjust your textures accordingly or opt to create a customized ShaderMaterial.

UPDATE: An exception to this rule is the light map and ambient occlusion map, which utilize the second set of UVs. This feature allows for higher detail in other textures compared to the light/AO map.

Version used: three.js r.84

Answer 2

It is important to note that the default values for offset and repeat are prioritized in a specific order:

// Prioritization of uv repeat and offset settings
//  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 scenario, this priority would apply to the landTexture settings.

If needed, you can adjust your textures accordingly or opt to create a customized ShaderMaterial.

UPDATE: An exception to this rule is the light map and ambient occlusion map, which utilize the second set of UVs. This feature allows for higher detail in other textures compared to the light/AO map.

Version used: three.js r.84

Answer 3

Answer №2

Absolutely. The latest versions of three.js now offer an API that allows for customization of built-in materials using GLSL.

While it may not be a simple task, there is an example available:

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

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

The built-in materials are essentially shader templates, consisting of #include <some_chunk> statements in a specific order.

Within these "chunks," you will find code snippets like this:

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

In this snippet, 'foo' could represent 'alphaMap', 'map', 'specularMap', and so on. This indicates a texture lookup being performed on the sampler at the interpolated uv attribute without consideration for preceding or following code.

To achieve your desired effect, such as applying an offset or a mat3 transform like three.js does, the GLSL code needs to resemble this:

texture2D( foo, foo_transform * vUv )

The main challenge lies in supplying this uniform value to the shader. The provided example takes a brute force approach by compiling the shader first and then searching through its entirety for the necessary modifications.

This method proves more efficient than directly altering textures and can be simpler than creating a custom ShaderMaterial.

Note: While three.js isn't typically intended for this level of customization, it is still feasible. For instance, while most maps are prefixed with 'somethingMap,' the albedo map stands out as just 'map.' Adjusting the regular expression in the example accordingly would simplify the process if 'albedoMap' were used instead.

Answer 4

Absolutely. The latest versions of three.js now offer an API that allows for customization of built-in materials using GLSL.

While it may not be a simple task, there is an example available:

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

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

The built-in materials are essentially shader templates, consisting of #include <some_chunk> statements in a specific order.

Within these "chunks," you will find code snippets like this:

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

In this snippet, 'foo' could represent 'alphaMap', 'map', 'specularMap', and so on. This indicates a texture lookup being performed on the sampler at the interpolated uv attribute without consideration for preceding or following code.

To achieve your desired effect, such as applying an offset or a mat3 transform like three.js does, the GLSL code needs to resemble this:

texture2D( foo, foo_transform * vUv )

The main challenge lies in supplying this uniform value to the shader. The provided example takes a brute force approach by compiling the shader first and then searching through its entirety for the necessary modifications.

This method proves more efficient than directly altering textures and can be simpler than creating a custom ShaderMaterial.

Note: While three.js isn't typically intended for this level of customization, it is still feasible. For instance, while most maps are prefixed with 'somethingMap,' the albedo map stands out as just 'map.' Adjusting the regular expression in the example accordingly would simplify the process if 'albedoMap' were used instead.

Is it possible for a three.js material to have different repeat values for a bump map compared to a texture map?

Answer №1

Answer №2

Similar questions

Build a PHP-driven form for data collection

Improve loading speed of thumbnail and full images in HTML

Can the image be adjusted based on different time zones around the world?

What is the best method for importing gltf files in three.js?

What is the best way to access the functions within an object?

Saving an ASCII effect on Three.js using html2canvas does not work as expected

Converting a multi-dimensional array to a single array in JavaScript: the ultimate guide!

Troubleshooting the lack of deep linking functionality in an AngularJS web application when using Node Express server

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Chosen option within the AntD Select component

What is causing my website to refresh before I can save the edits I have made after clicking on the edit button

UCS-2 in Node.JS: Understanding Big-Endian Byte Order

Warning: Angular.js encountered a max of 10 $digest() iterations while iterating through array slices. Operation aborted

Is your Ajax jQuery live search not functioning properly with JSON data?

My AJAX requests do not include any custom headers being sent

Issues with importing Bootstrap in JavaScript

Managing the ERR_NAME_NOT_RESOLVED issue

Utilizing React and Material-UI to Enhance Badge Functionality

Having trouble retrieving data passed between functions

Tips for preserving scroll location on Angular components (not the window) when navigating