How do I apply a light map texture?

Questions
, ,
1

Hello—

I’m looking for some insight on utilizing light maps and/or ao maps in models I process. I’m using @react-three/gltfjsx to upload my .glb models, in case that has anything to do with this issue I’m trying to resolve. I’m going to try and give my understanding of light map requirements from the research I’ve been doing, but please do correct me if I’m wrong anywhere in my synopsis.

1.] I understand loading a texture into .lightMap / .aoMap requires using TextureLoader; I can’t just export my .glb with a second material and have it be magically applied on upload.

2.] I understand they need to be applied to a second set of UVs.

3.] I understand they use the second set of UVs in an imported model.

But I’m really struggling to find any example code or documentation showing how to apply/assign the loaded texture inside the .lightMap / .aoMap channels to the second set of UVs in an imported model.

The ultimate goal is to tile a texture in the .map channel with the first UV set, then overlay the texture in the .lightMap / .aoMap channel with the second UV set.

I can’t even get it to work with three.js editor by uploading my textures using the gui. Is there some important insight I’m missing? Is there more to it than just texture loading .lightMap to a meshStandardMaterial ?

Providing a .zip folder with the .glb model, textures, native cinema 4d file, and a screenshot showing my attempt at loading the light map into the three.js editor

Any insight greatly appreciated :raised_hands:

1 Like
2

Export same model with UV of lightmap and add UV to first model.

3

Thanks for your reply! I understand how to export 2 UVs, but how are you getting the texture to load in and apply to the second UV? Are you exporting your second scene with a lightmap texture? and in what channel are you loading it into? Do you have any example code?

4

I save lightmaps and 3ds max automaticly set name as name of mesh like: homeCompleteMap.png, terrainCompleteMap.png
I am using customshader

vs["basic_ao"]=`
varying vec2 vUv;
attribute vec2 uv2;
varying vec2 vUv2;
void main(){
gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);
vUv=uv;
vUv2=uv2;
}
`;


fs["basic_ao"]=`
uniform sampler2D map;
uniform sampler2D aoMap;
varying vec2 vUv;
varying vec2 vUv2;
void main(){
gl_FragColor=vec4(texture2D(map,vUv).rgb*1.2*texture2D(aoMap,vUv2).rgb,1.0);
}
`;

function set_ao(model){


var OBJLoader=new THREE.OBJLoader();


OBJLoader.load("models/"+model,function(object){


while(object.children.length){


mesh[object.children[0].name].geometry.setAttribute('uv2',new THREE.Float32BufferAttribute(object.children[0].geometry.attributes.uv.array,2));


if(mesh[object.children[0].name].material.length==undefined){
var pre_mat=mesh[object.children[0].name].material.clone();


if(pre_mat.type=="ShaderMaterial"){

if(pre_mat.uniforms.map!=undefined){ var s_map=mesh[object.children[0].name].material.uniforms.map; }
}


mesh[object.children[0].name].material.dispose(); 
mesh[object.children[0].name].material=pre_mat;


if(tex[object.children[0].name+"CompleteMap"]==undefined){
tex[object.children[0].name+"CompleteMap"]=texture_loader.load("images/ao/"+object.children[0].name+"CompleteMap.png");
}


if(pre_mat.type!="ShaderMaterial"){ pre_mat.aoMap=tex[object.children[0].name+"CompleteMap"]; }
else{
if(s_map!=undefined){ pre_mat.uniforms.map=s_map; }
pre_mat.uniforms.aoMap={};
pre_mat.uniforms.aoMap.value=tex[object.children[0].name+"CompleteMap"];
}


}
else{

//mat_draw_calls(mesh[object.children[0].name]);


for(var i in mesh[object.children[0].name].material){
var pre_mat=mesh[object.children[0].name].material[i].clone();


if(pre_mat.type=="ShaderMaterial"){

if(pre_mat.uniforms.map!=undefined){ var s_map=mesh[object.children[0].name].material[i].uniforms.map; }
}


mesh[object.children[0].name].material[i].dispose(); 
mesh[object.children[0].name].material[i]=pre_mat;


if(tex[object.children[0].name+"CompleteMap"]==undefined){
tex[object.children[0].name+"CompleteMap"]=texture_loader.load("images/ao/"+object.children[0].name+"CompleteMap.png");
}


if(pre_mat.type!="ShaderMaterial"){ pre_mat.aoMap=tex[object.children[0].name+"CompleteMap"]; }
else{
if(s_map!=undefined){ pre_mat.uniforms.map=s_map; }
pre_mat.uniforms.aoMap={};
pre_mat.uniforms.aoMap.value=tex[object.children[0].name+"CompleteMap"];
}


}


}


object.children.splice(0,1);


}


});


//setTimeout("loop();",2000);


}
1 Like
5

Were you ever able to find a solution to this? I am currently trying to figure this out myself. Would like to have a color map that then has a lightmap overlay ontop of it.

1 Like