pbrMetallicRoughness.baseColorTexture ?

[gcrockenberg]

I've been reading about how model-viewer uses the linear color space but have been unable to match colors properly. This is my test to see if creating a texture based on the original material color would look the same:

const mvMaterial = modelViewer.model.getMaterialByName("PianoTop");

const bcf= mvMaterial.pbrMetallicRoughness.baseColorFactor;
// I verified the material color values match the model's material color values.
const bcfColor = new Color(bcf[0], bcf[1], bcf[2]);

// Observe differences
const bestColor = new Color().copySRGBToLinear(bcfColor);
console.log(bcfColor, new Color().copyLinearToSRGB(bcfColor), bestColor);

// Create an image using the best color, all 3 color variations above render darker that the original material color.
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 2048;
const ctx = canvas.getContext('2d');
ctx.fillStyle = `rgb(${bestColor.r * 255} ${bestColor.g * 255}  ${bestColor.b * 255})`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
const imageURL = canvas.toDataURL('image/png');

// Create and apply texture to the material 
const texture = await modelViewer.createTexture(imageUrl);
mvMaterial.pbrMetallicRoughness.baseColorTexture.setTexture(texture);

The top of this piano demonstrates the result using the color obtained via new Color().copySRGBToLinear(mvColor); The sides and keyboard are the original material color.