How to Build a Virtual Makeup Try-On (VTO) App: A Step-by-Step Guide

				
					const originalImageData = {};
const gammaFactorValue = 1.6;

function applyGammaCorrection(value, gammaFactor = gammaFactorValue){
  return Math.pow(value, 1 / gammaFactor);
}

function changeTextureColor(texture, colorHex, material){
  if (!texture.image) return; // Wait for texture to load

  // Cache the original, clean texture data if we haven't already
  if (!originalImageData[texture.uuid]) {
    const c = document.createElement('canvas');
    c.width = texture.image.width; c.height = texture.image.height;
    c.getContext('2d').drawImage(texture.image, 0, 0);
    originalImageData[texture.uuid] = c.getContext('2d').getImageData(0, 0, c.width, c.height);
  }

  // Create a new canvas to draw the modified texture
  const c = document.createElement('canvas');
  c.width = texture.image.width; c.height = texture.image.height;
  const ctx = c.getContext('2d');
  
  // Start with the pristine, original mask data
  ctx.putImageData(originalImageData[texture.uuid], 0, 0);

  const imageData = ctx.getImageData(0, 0, c.width, c.height);
  const data = imageData.data;
  const color = new THREE.Color(colorHex);
  
  // Apply gamma correction to the target color
  const r = applyGammaCorrection(color.r) * 255;
  const g = applyGammaCorrection(color.g) * 255;
  const b = applyGammaCorrection(color.b) * 255;

  // Loop through all pixels (4 bytes at a time: R,G,B,A)
  for (let i = 0; i < data.length; i += 4) {
    const R = data[i], G = data[i+1], B = data[i+2];
    const brightness = (R + G + B) / 3;
    
    // If the pixel is part of the mask (not white/transparent)
    if (brightness <= 200 && !(R === 255 && G === 255 && B === 255)) {
      // Apply the new color
      data[i] = r; 
      data[i+1] = g; 
      data[i+2] = b;
    }
  }
  
  // Put the modified pixel data back on the canvas
  ctx.putImageData(imageData, 0, 0);
  
  // Update the Three.js texture with the new image
  texture.image.src = c.toDataURL();
  if (material) { 
    material.visible = true; // Make sure the layer is visible
    material.needsUpdate = true; 
  }
  texture.needsUpdate = true;
}