Trying to get transparent color from png to be the color of the material

Questions
,
1

Good day.

I do have a .png with transparency, when I load as a texture in a mesh the transparent parts are transparent. My problem goes I need the transparent parts to be the color of the material and not transparent.

I was thinking a shader could help with that, since I’m already using a shader to merge two separate images into one for the material in another instance, but the problem I have now is, I want to use MeshLambertMaterial to fuse the color with the image and having some lights applied to the model, but I have no idea where to start replacing code using onBeforeCompile to get the result I need.

Please help :frowning:

1 Like
2

Wouldn’t simply setting transparent: false in the material help in this case :thinking: ? You can handle it with shaders ofc, but is it necessary at all.

4

If you don’t need alpha blending, it’s actually better to set the alphaTest property of the material to 0.5 in order to create an alpha cutout.

1 Like
5

Thanks, but then, how I get the color I gave to the material instead of been just transparent?

6

Um, your fiddle does not seem to work. According to the browser console, you can’t load the asset via the current URL.

7

I’m sorry for taking this long, here’s fixed: https://jsfiddle.net/dx32ba15/

Thanks

8

I did some digging around the code for the ShaderChunks and I dicovered the shader chunk for alphaTest: three.js/alphatest_fragment.glsl.js at 9694de0fb9d9e45f36b2943642d534365e6d5965 · mrdoob/three.js · GitHub

#ifdef ALPHATEST
      if ( diffuseColor.a < ALPHATEST ) discard;
#endif

I guess my question would be something among the lines of: How I can, instead of discard that pixel, give it alpha 1 and color white (Or the color of the material)? Because if I go diffuseColor.a = 1, the console.log at jsfiddle go kinda crazy. :frowning:

9

How about using two boxes? A complete white one and the other one with your texture:

By defining renderOrder, you can ensure that the textured box is always rendered after the white one.

10

Thanks a lot, but I found out how to do it eventually

new THREE.MeshPhongMaterial({
        map: texture,
        alphaTest: 0.7,
        color: 0xbbbbbb,
        specular: 0x000005,
        reflectivity: 0.3,
        side: THREE.DoubleSide, 
        onBeforeCompile: shader => {
            shader.fragmentShader = shader.fragmentShader.replace('#include <alphatest_fragment>', `
                if ( diffuseColor.a < ALPHATEST ) diffuseColor = vec4(vec3(0.733,0.733,0.733), 1.0);
            `);
        }
    });

The problem I have right now though, is the fact that vec3 should be what I assigned in color, but for the moment this works for me.

Thanks again

1 Like
11

Seems like a simple built-in option would be nice because drawing an extra mesh is a whole new GPU call and double the processing, and using alphaTest can leave sharp edges between the texture and non-texture areas (instead of a smooth gradient).

12

I have same issue, I used this code but not working for me.

const customMaterialPatch_3 = new THREE.MeshStandardMaterial({
color: 0xbbbbbb,
map: texturePatch,
side: THREE.DoubleSide,
alphaTest: 0.5,
needUpdate: true,
onBeforeCompile: shader => {
shader.fragmentShader = shader.fragmentShader.replace(’#include <alphatest_fragment>’, #ifdef ALPHATEST if ( diffuseColor.a > ALPHATEST ) diffuseColor = vec4(vec3(0,1,0.33), 1.0); #endif );
}

  });

image
image540×512 50.4 KB

13

Quotes and ALPHATEST to alphaTest.

const customMaterialPatch_3 = new THREE.MeshStandardMaterial({
color: 0xbbbbbb,
map: texturePatch,
side: THREE.DoubleSide,
alphaTest: 0.5,
needUpdate: true,
onBeforeCompile: shader => {
shader.fragmentShader = shader.fragmentShader.replace(
"#include <alphatest_fragment>",
"if ( diffuseColor.a > alphaTest ) diffuseColor = vec4(vec3(0,1,0.33), 1.0);");
}
});
1 Like
14

Thanks a lot Chaser,

I am willing to change my sleeve color to red in png transparent area, and logo to default color. I am sure there will be a easy way but I am new in this

my code for texture:
texturePatch = new THREE.TextureLoader().load(
./…/…/assets/img/3d/1/patch-01.png,
function (t) {
t.flipY = false;
}
);

Material code:
const customMaterialPatch_3 = new THREE.MeshStandardMaterial({
color: 0xe10912,
map: texturePatch,
side: THREE.DoubleSide,
alphaTest: 0.9,
needUpdate: true,
onBeforeCompile: shader => {
shader.fragmentShader = shader.fragmentShader.replace(
‘#include <alphatest_fragment>’,
‘if ( diffuseColor.a > alphaTest ) diffuseColor = vec4(vec3(0,1,0.33), 1.0);’
);
},
});

image
image746×996 64.6 KB

15

i dont know english very good.
'if ( diffuseColor.a < 0.9 ) diffuseColor = vec4(vec3(1,0,0), 1.0);'
image

1 Like
16

Thanks a Lot Chaser, it works for me :slight_smile:

1 Like