I was trying to use HDR format lightmap in my ArchViz scene.
However, I got some really weird color banding. seems I did not correctly interpolate HDR format in my code.
Here is what I got in THREE
and here is what I want to get(rendered in blender)
Here is how I load HDR lightmaps
function loadMesh(){
var pmremGenerator = new THREE.PMREMGenerator(renderer);
// var rgbeLoader = new THREE.RGBELoader().setDataType(THREE.UnsignedByteType).setPath('mesh/test/test_HDR/lightmap/');
var rgbeLoader = new RGBELoader()
.setDataType( THREE.UnsignedByteType )
.setPath( 'mesh/test/test_HDR/lightmap/' );
// gltf
// var loader = new GLTFLoader().setPath( 'mesh/test/' );
// loader.load( 'test.gltf', function ( gltf ) {
// glb
var loader = new GLTFLoader().setPath( 'mesh/test/test_HDR/' );
loader.load( 'test.glb', function ( gltf ) {
var i = 0;
// var urls = [
// './textures/cube/kitchen/cubeMap/b.png',
// './textures/cube/kitchen/cubeMap/d.png',
// './textures/cube/kitchen/cubeMap/f.png',
// './textures/cube/kitchen/cubeMap/l.png',
// './textures/cube/kitchen/cubeMap/r.png',
// './textures/cube/kitchen/cubeMap/u.png',
// ];
// var cubeLoader = new THREE.CubeTextureLoader();
// var cubeMap = cubeLoader.load(urls);
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
var tempName = child.name;
// ----------------------------------
// var tempLightmap = new THREE.TextureLoader().load('mesh/test/test_HDR/lightmap/' + tempName + '_baked.png');
// ------------------------------------
var tempLightmap = rgbeLoader.load(tempName + '_baked.hdr');
console.log(tempLightmap);
tempLightmap.flipY = false;
tempLightmap.wrapS = THREE.RepeatWrapping;
child.material.lightMap = tempLightmap;
child.material.lightMapIntensity = 1;
child.material.needsUpdate = true;
// child.material.map = null;
//setup EnvMap----------------------------------------------------------------------------------------------
child.material.envMap = hdrCubeMap;
//change EnvMap intensity
child.material.envMapIntensity = 1;
// check THREEJS Version
// console.log('THREEJS version: ' + THREE.REVISION);
child.material.flatShading = true;
console.log(i + "::" + child.name);
console.log(child.material);
console.log(child.geometry);
meshObject.set(child.name, child);
// child.material = new THREE.MeshStandardMaterial();
// child.material.lightMap = tempLightmap;
//child.material.aoMap = tempLightmap;
//child.material.aoMapIntensity = 2;
//debug single mesh
// if(child.name == 'neiqiang')
// child.material.roughness = .8;
// child.material.visible = true;
// else
// {
// child.material.visible = false;
// }
i++;
}
} );
scene.add( gltf.scene );
changeMaterials();
// updateCubeMap();
render();
} );
}
