threejs texturemap UV with independent alphamap - three.js

Question

I have a large texture -a photo- and small simple meshes that should display regions of the main texture. These meshes should have an alphaMap, for example a circle.
In the mesh material's texture (PlaneBufferGeometry), I change the UV mapping so it will display the proper region of the main texture. The problem is that the UV mapping is also applied to the alphaMap but I want it independent.
const planeGeometry = new THREE.PlaneBufferGeometry(sz.x, sz.y);
let uvs= planeGeometry.attributes.uv;
for (let ix = 0; ix< uvs.array.length; ix++){
let x = uvs.getX(ix);
let y = uvs.getY(ix);
uvs.setXY(ix, x*.5, y*.75); // just testing
}
const planeMaterial = new THREE.MeshPhongMaterial({
map: imageTexture,
transparent: true,
alphaMap ,
normalMap,
});
Is there a way to change the UV mapping ONLY of the material's map and leave the other maps (alphaMap and normalMap) kind of independent... Or is there some other approach?

Answer 1

One possible option is to add second set of uv coordinates to your geometry:
// setup new attribute uvs
var uvb = new Float32Array( [
0.25, 0.75,
0.75, 0.75,
0.25, 0.25,
0.75, 0.25
] );
planeGeometry.setAttribute( 'uvB', new THREE.BufferAttribute( uvb, 2 ) );
And modify the material shader to use that set of coordinates for your color map texture:
var planeMaterial = new THREE.MeshPhongMaterial( {
side: THREE.DoubleSide,
transparent: true,
map: colorTex,
alphaMap: alphaTex,
} );
planeMaterial.onBeforeCompile = function( shader ) {
// vertex modifications
var vertex_pars = 'attribute vec2 uvB;\nvarying vec2 vUvB;\n';
var vertex_uv = shader.vertexShader.replace(
'#include <uv_vertex>',
[
'#include <uv_vertex>',
'vUvB = uvB;'
].join( '\n' )
);
shader.vertexShader = vertex_pars + vertex_uv;
// fragment modifications
var frag_pars = 'varying vec2 vUvB;\n';
var frag_uv = shader.fragmentShader.replace(
'#include <map_fragment>',
[
'vec4 texelColor = texture2D( map, vUvB );',
'texelColor = mapTexelToLinear( texelColor );',
'diffuseColor *= texelColor;'
].join( '\n' )
);
shader.fragmentShader = frag_pars + frag_uv;
}
The drawback of this method is that you need a different geometry every time you want to use a different set of uvs. This could pose a performance impact depending on your application.
JSFiddle Example

Answer 2

The easiest way to approach this is to leave the geometry uvs alone, and instead use some of the built-in texture transform properties on your photo texture. They are .offset, .repeat, .rotation. and .center. You can read a description in the docs. For example, if you want to scale your photo texture to 200%, you could use
imageTexture.repeat.set(0.5, 0.5);
if you want to move it around:
imageTexture.offset.set(0.0, 0.7);
This would only affect the imageTexture and it would leave your alphaMap texture alone.
.rotation and .center work in conjunction if you want to change the origin of the rotation.