Is it possible to use baked lighting with separate albedo textures?/How can I blend 2 color textures in a material in multiply mode?

[Martynas-Ziemys]

How would I go about using a baked light map texture with separate color textures? Occlusion maps seem to be grayscale and I would like to have color in my baked lighting, but at the same time, I would like to be able to reuse color textures for different models?

I have many different models all sharing the same material and I would like to have the albedo texture to be quite big, so it would make sense if it could be downloaded just once while lighting information can be a bit lower in resolution and each of the models would have it's own baked light texture but would share parts of the single albedo texture. Basically, I am looking for a way to blend textures in multiply mode, but I am not sure how to go about it.

[danilokrulj]

You could use threejs to blend the two textures together as a canvas texture, once you create the texture in threejs you can use it in modelviewer as your baseColorTexture. Store the created canvas texture with .toDataURL() and than just use modelviewers createTexture() to create a texture you can use on your model. Here is a part from my code, maybe it will help you.

const mat1 = modelViewer.model.getMaterialByName('yourMaterialName');

function loadTextures(baseColorURL, aoURL) {
    return Promise.all([
        textureLoader.loadAsync(baseColorURL),
        textureLoader.loadAsync(aoURL)
    ]);
}

function combineTextures(baseColorTexture, aoTexture) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    canvas.width = baseColorTexture.image.width;
    canvas.height = baseColorTexture.image.height;

    // Draw base color texture
    context.drawImage(baseColorTexture.image, 0, 0);

    // Apply AO texture as a multiply layer
    context.globalCompositeOperation = 'multiply';
    context.drawImage(aoTexture.image, 0, 0);

    // Reset blend mode
    context.globalCompositeOperation = 'source-over';

    return canvas.toDataURL();
}

const createAndApplyTexture = async (materialToChange, texturePath) => {
    const texture = await modelViewer.createTexture(texturePath);
    materialToChange.setTexture(texture);
 }

async function applyNewTexture(baseColorURL, aoURL) {
    const [baseColorTexture, aoTexture] = await loadTextures(baseColorURL, aoURL);
    const newTextureURL = combineTextures(baseColorTexture, aoTexture);
    createAndApplyTexture(mat1.pbrMetallicRoughness.baseColorTexture, newTextureURL)
}