[SOLVED] Fade in a material

Help & Support
1

At start I set the material opacity intensity on 0 and I try to make a fade in effect with the script below.
The console.log gives the good result, but I don’t see the material in the game.

Item.prototype.update = function(dt) {
    if (this.entity.model.material.opacity < 1) {
        console.log(this.entity.model.material.opacity);
        this.entity.model.material.opacity += 0.1;
    }
};

It actually made more sense to me to use opacity.intensity, but that doesn’t seem to be possible.

Also I would only like to modify the material on this entity and not the same material on other entities.

2

First problem solved by adding:

this.entity.model.material.update();
3

Okay, I did it. This is my complete solution:

var Item = pc.createScript('item');

// initialize code called once per entity
Item.prototype.initialize = function() {
    var orginal = this.entity.model.material;
    var material = orginal.clone();
    this.entity.model.material = material;
};

Item.prototype.update = function(dt) {
    if (this.entity.model.material.opacity <= 1) {
        this.entity.model.material.opacity += 0.1;
        this.entity.model.material.update();
    }
};
1 Like
4

Nice! Though if you are doing a material.update() per frame that can be quite expensive performance wise.

Usually it’s better to change a single material uniform to do the same thing. This isn’t documented right now.

  1. Set your material opacity in editor to a starting value, if that’s 1.0 then put 0.999. That forces the engine to include the opacity shader chunk to the material, which makes the 2nd step possible.

  2. Use the following code to change your opacity:

var Item = pc.createScript('item');

// initialize code called once per entity
Item.prototype.initialize = function() {
    this.entity.model.material = material;

    this.opacity = this.entity.model.material.opacity;
};

Item.prototype.update = function(dt) {
    if (this.opacity <= 1) {
        this.opacity += 0.1;
        this.entity.model.material.setParameter('material_opacity', this.opacity);
    }
};
5

Hay @Leonidas!

Thanks for your improvement! It’s bad that I have no clue which things are bad for performance.

I change the script to this:

var Item = pc.createScript('item');

// initialize code called once per entity
Item.prototype.initialize = function() {
    var orginal = this.entity.model.material;
    var material = orginal.clone();
    
    this.entity.model.material = material;
    this.opacity = this.entity.model.material.opacity;
};

Item.prototype.update = function(dt) {
    if (this.opacity <= 1) {
        this.opacity += 0.01;
        this.entity.model.material.setParameter('material_opacity', this.opacity);
    }
};

Is that correct?

I don’t understand your step 1. The start opacitiy is 0.
Can I just set it to 0 or do I need it to set to 0.001 or something?

6

When you create a new material in editor, there is a bunch of default values in its parameters. Playcanvas will attempt to create an optimized shader to render the material each time.

So if you aren’t using the Opacity channel for example, it will not include the opacity shader. The oldest trick that I know of is to change the default value value to force the engine to include it.

Anything !== 1.0 is fine, so 0.0 I think is fine.

Your code seems correct.

7

Ah ok, because if the opacity is 1 then it’s not really necessary.

Everything seems to be working so we can continue.

Thanks!

1 Like