Custom Material/Shader Semi-Transparency

Help & Support
1

Hi there,
I’m trying to get a custom shader to have semi-transparency. I’ve actually gotten this to work in the past but for some reason it’s no longer working for me. Things I’ve tried:

enabling material.alphaWrite,
enabling alphaToCoverage,
fiddling with alphaTest value,
enabling material.blend,
trying different blendTypes including Blend_Normal.

Here is my current code which has worked in other projects but doesn’t seem to work here:

this.material = new pc.Material();
    this.material.shader = this.shader;
    if(this.enableTransparency){
        this.material.alphaWrite = true;
        this.material.alphaToCoverate = true;
        this.material.alphaTest = 0.0;
        this.material.blend = true;
        this.material.blendSrc = pc.gfx.BLENDMODE_SRC_ALPHA;
        this.material.blendDst = pc.gfx.BLENDMODE_ONE_MINUS_SRC_ALPHA;
    }
    this.material.update();

Additionally, in my custom shader I just set the alpha value of gl_FragColor to 0.5 for testing purposes, no matter what I seem to try, the object is completely invisible.

2

Is there a specific reason why you want to do this with a shader?

Either way, all you should need to do is set:

this.material.blendType = pc.BLEND_MULTIPLICATIVE;

Or another one of the blendTypes depending on your needs.

It looks as if some of the properties of the material that you are trying to reference might be outdated in todays version of the engine. What I usually try to do when I need to dynamically create materials using a script, is to first create it in the editor. Then you can hover over the properties in the editor to get the name of the property.

For instance, if I create a new material in the editor, then select the Opacity dropdown and hover over “Blend Type”, I’ll see that its name is blendType and I’ll see what each options name is as well.

2 Likes
3

It would also be great to post a small public project for the community to have a closer look your issue too :slight_smile:

1 Like