Images with transparent backgrounds losing transparency when applied as material

Questions
,
1

Hi everybody! I’m trying to migrate a Three.js project into babylon and have gotten super stuck. I had a feature where a user can upload an image file (using JSFileManager). This image file is then saved to that user’s profile (using firebase) before being applied to a 2D circle geometry (using the image’s firebase src link). I’ve managed to get everything working save for images with transparent backgrounds. When trying to apply an image with a transparent background. The area that should be rendered transparent is rendered black, like so:
Screenshot 2022-03-04 at 14.54.59
The only thing that seems to somewhat remedy this is setting material.opacityTexture.getAlphaFromRGB = true but this then seems to make the image look strange (faded + wrong colour) you can see what I mean here:
Screenshot 2022-03-04 at 14.57.33

Unfortunately, I can’t seem to recreate this in a playground so i’m starting to think that maybe its got more to do with the image src itself rather than how i’m applying the material. Below is the function i use to create the material:

 /** Return an image material using a given image URL */
    getImageMaterial(src, alpha=1) {
        // Create material from image url
        console.log("src: " + src)
        let texture = new BABYLON.Texture(src, this.scene)
        texture.vScale = -1
        texture.hasAlpha = true
        let material = new BABYLON.StandardMaterial("ImageMaterial: src=" + src, this.scene)
        material.diffuseTexture = texture
        material.opacityTexture = texture
        // material.opacityTexture.getAlphaFromRGB = true
        material.specularColor = new BABYLON.Color3(0, 0, 0)
        // material.opacityFresnel = true;
        // material.diffuseColor = new BABYLON.Color3(0, 0, 0)
        // material.useAlphaFromDiffuseTexture = true
        // material.transparencyMode = BABYLON.Material.MATERIAL_ALPHABLEND
        material.alpha = alpha || 1
        return material
    }

You can see by all my commented out lines that I have tried a lot of different things without success so i would really appreciate any assistance or ideas you can provide to try and fix this issue. Thanks!

2

Hey! Can you create a PG with your images so we can check what’s the issue? I am not sure of your setup but did you try this?

    material.useAlphaFromDiffuseTexture = true;

I don’t think you need the opacityTexure here:

The basic setup for a transparent texture is as follows.

    const diffuseTexture = new BABYLON.Texture("whatever.png", scene);
    diffuseTexture.hasAlpha = true;
    material.diffuseTexture = diffuseTexture;

:vulcan_salute:

r.

2 Likes
3

Hey! @roland I created a PG here: https://playground.babylonjs.com/#RNLV5Q#2 I do wonder if its got something to with how the image is stored on firebase that is causing this behaviour. As using regular images from elsewhere seem to work. Let me know if you know what might be going on here.

4

The problem is that despite this is a PNG file it has a .jpg extension and BabylonJS assumes it is a JPG. Rename the file and try again. Should work :slight_smile:

image

2 Likes
5

Good catch @roland !!!

2 Likes
6

Quick workaround is to force the extension https://playground.babylonjs.com/#RNLV5Q#3

2 Likes
7

Cool! I didn’t know about this. Handy when you are not able to change the filename. But NGL, I don’t like this solution. I am a man of order LOL and I bet I would forget about the issue a few months later and booby-trap myself again :smiley: :smiley: :smiley:

2 Likes
8

@roland good catch indeed! Not entirely sure why png files are being saved with a .jpg extension but that was the issue. Considering that these image files are uploaded by users (meaning i can’t control the files themselves). I think forcing the .png extension ala @sebavan solution works. At least until i get to the bottom of why they are being forced to .jpg extension in the first place. Thanks to the both of you for your help. Super appreciate it :grin:

2 Likes