Hello,

I’m drawing an image onto an HTML canvas where unpainted areas are transparent. I then compute contour boundaries from the image data—even if not all painted parts are contiguous—and use a function to simplify the resulting vectors. Using these vectors, I create a THREE.Shape that I extrude with extrude settings, map the texture (with proper UV-mapping), and display it with a MeshStandardMaterial.

The issue is that the transparent areas of the texture come out black on the extruded geometry. If I enable transparency in the material, the textured parts disappear along with the non-painted regions (they turn transparent). Ideally, I want those originally transparent parts to show as white (or a custom cardboard color).

Below is the code I’m using. I’ve already tried various approaches and even asked ChatGPT without success. I’m now looking for any ideas (aside from writing custom shaders, which I’ve never done) to achieve the desired white background for the transparent areas.

JAVASCRIPTCopied
createFromImage(imageInfo) { //Ist für Testzwecke, um zu sehen, wie die Konturen überhaupt aussehen
    let dataUrl = imageInfo.base64Url; //base64;png data-url
    let wPixels = parseFloat(imageInfo.width); //Image Width in pixels
    let hPixels = parseFloat(imageInfo.height); //Image Height in pixels
    let imageData = imageInfo.imageData; // ctx = canvas.getContext('2d'); ctx.getImageData(0 , 0 , w , h);
    let contourPoints = this.createContourFromImageData(imageData);
    const shape = this.contourToShape(contourPoints);
    const extrudeSettings = {
        steps: 1,
        depth: 1,
        bevelEnabled: true,
        bevelThickness: 1,
        bevelSize: 1,
        bevelOffset: 0,
        bevelSegments: 3,
        UVGenerator: {
            generateTopUV: function (geometry, vertices, indexA, indexB, indexC) {
                const ax = vertices[indexA * 3];
                const ay = vertices[indexA * 3 + 1];
                const bx = vertices[indexB * 3];
                const by = vertices[indexB * 3 + 1];
                const cx = vertices[indexC * 3];
                const cy = vertices[indexC * 3 + 1];

                return [
                    new THREE.Vector2(ax / wPixels, 1 - ay / hPixels),
                    new THREE.Vector2(bx / wPixels, 1 - by / hPixels),
                    new THREE.Vector2(cx / wPixels, 1 - cy / hPixels)
                ];
            },
            generateSideWallUV: function (geometry, vertices, indexA, indexB, indexC, indexD) {
                // UV-Koordinaten für die Seitenwände definieren
                const ax = vertices[indexA * 3];
                const ay = vertices[indexA * 3 + 1];
                const bx = vertices[indexB * 3];
                const by = vertices[indexB * 3 + 1];

                return [
                    new THREE.Vector2(ax / wPixels, ay / hPixels),
                    new THREE.Vector2(bx / wPixels, by / hPixels),
                    new THREE.Vector2(ax / wPixels, ay / hPixels),
                    new THREE.Vector2(bx / wPixels, by / hPixels)
                ];
            }
        }
    };

    let widthMesh = 5.0;
    let heightMesh = widthMesh * (hPixels / wPixels);
    let texture = new THREE.TextureLoader().load(dataUrl);
    //texture.encoding = THREE.sRGBEncoding;
    //texture.needsUpdate = true;
    let geometry = new THREE.ExtrudeGeometry(shape , extrudeSettings);
    geometry.attributes.uv.array.forEach((_, i, uvArray) => {
        if (i % 2 === 1) {
            // Y-Koordinate (v-Wert) invertieren
            uvArray[i] = 1 - uvArray[i];
        }
    });
    let material = new THREE.MeshStandardMaterial({
        color: 0xffffff,         // Weiß als Grundfarbe für den Hintergrund
        map: texture,            // PNG-Textur
        transparent: false,       // Aktiviere Transparenz
        opacity: 1,              // Setze die Gesamt-Deckkraft
        side: THREE.DoubleSide   // Beide Seiten sichtbar
    });
    let mesh = new THREE.Mesh(geometry , material);
    geometry.computeBoundingSphere();
    let radius = geometry.boundingSphere.radius;
    let scaleFactor = widthMesh / radius;
    mesh.scale.set(scaleFactor , scaleFactor, scaleFactor);
    mesh.position.set(0 , 4 , 0);
    this.m_stage.add(mesh);
}

contourToShape(contourPoints) {
    if(!contourPoints || contourPoints.length < 3) return null;
    const shape = new THREE.Shape();
    for(let i = 0 ; i < contourPoints.length ; i++) { //Kontur spiegeln
        let pi = contourPoints[i];
        pi.y *= -1;
    }
    let p0 = contourPoints[0];
    let minX = p0.x;
    let minY = p0.y;
    for(let i = 1 ; i < contourPoints.length ; i++) {
        let pi = contourPoints[i];
        if(pi.x < minX) minX = pi.x;
        if(pi.y < minY) minY = pi.y;
    }
    for(let i = 0 ; i < contourPoints.length ; i++) {
        let pi = contourPoints[i];
        pi.x = pi.x - minX;
        pi.y = pi.y - minY;
    }
    shape.moveTo(p0.x , p0.y);
    for(let i = 1 ; i < contourPoints.length ; i++) {
        let pi = contourPoints[i];
        shape.lineTo(pi.x , pi.y);
    }
    shape.lineTo(p0.x , p0.y);
    return shape;
}

createContourFromImageData(imageData) {
    let wPixels = imageData.width;
    let hPixels = imageData.height;
    const data = imageData.data;

    const pointsL = [];
    const pointsR = [];
    for(let y = 0 ; y < hPixels ; y++) {
        let left = null; 
        let right = null; 
        for(let x = 0 ; x < wPixels ; x++) {
            const alpha = data[(y * wPixels + x) * 4 + 3];
            if(alpha > 0) {
                if(left === null) left = x;
                right = x;
            }
        }
        if(left !== null) {
            pointsL.push({x: left , y:y});
            pointsR.unshift({x:right , y:y});
        }
    }
    let points = pointsL.concat(pointsR); //Die Punkte bilden nun ein linksläufiges Polygon
    this.minimizeEdges(points);
    return points;
}

//Betrachtet wird der Vector P[i]->P[i+1] und verglichen mit P[i+1] -> P[i+2]
//Haben beide Vektoren die gleiche Richtung kann der Punkt P[i+1] entfallen
minimizeEdges(points) {
    let i = 0;
    while(i < points.length - 2) {
        let p0 = points[i];
        let p1 = points[i+1];
        let p2 = points[i+2];
        let p10 = {x: p1.x-p0.x , y: p1.y-p0.y};
        let p11 = {x: p2.x-p1.x , y: p2.y-p1.y};
        //Normalisierung hier nicht notwendig und sorgt für Rundungsfehler.
        //Nicht notwendig, weil ein Vektor immer nur von einem Pix zu seinem Nachbarpixel geht.
        //Im Zweifelsfall bleiben ein paar Vectoren übrig, die man auch noch hätte vereinheitlichen können,
        //aber das ist erst interessant, wenn das System unbedingt optimiert werden soll.
        let crossProduct = (p10.x * p11.y) - (p10.y * p11.x);
        if(crossProduct == 0) {
            points.splice(i , 1);
        }else {
            i++;
        }
    }
}

Additionally, here is the function for creating the “imageInfo” object from the cropped canvas:

JAVASCRIPTCopied
cropImageFromCanvas(ctx) {
    var canvas = ctx.canvas, 
      w = canvas.width, h = canvas.height,
      pix = {x:[], y:[]},
      imageData = ctx.getImageData(0,0,canvas.width,canvas.height),
      x, y, index;
    
    for (y = 0; y < h; y++) {
      for (x = 0; x < w; x++) {
        index = (y * w + x) * 4;
        if (imageData.data[index+3] > 0) {
          pix.x.push(x);
          pix.y.push(y);
        } 
      }
    }
    pix.x.sort(function(a,b){return a-b});
    pix.y.sort(function(a,b){return a-b});
    var n = pix.x.length-1;
    
    w = 1 + pix.x[n] - pix.x[0];
    h = 1 + pix.y[n] - pix.y[0];
    var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
  
    canvas.width = w;
    canvas.height = h;
    ctx.putImageData(cut, 0, 0);
          
    var base64Url = canvas.toDataURL();
    let imageDataCropped = ctx.getImageData(0 , 0 , w , h);
    return {base64Url: base64Url , width: w , height: h , imageData: imageDataCropped};
}

Thanks in advance for any ideas or suggestions!