Tween the opacityMaskOffset of a material

Hi

I’m reviewing some old code which has stopped working. Trying to understand if there has been a change in these API’s during the previous 2 years. My goal is to tween the offset values of a texture (opacity map to be precise)

Is it the texture_opacityMapTransform parameter that is deprecated? Is there documentation of all the parameters available on Materials?

var flowTween = this.app.tween(newMaterial.opacityMapOffset);
        
        var opacityMapOffset = new pc.Vec2(0,1);
        
        var opacityMapTransform = [newMaterial.opacityMapTiling.x, newMaterial.opacityMapTiling.y, newMaterial.opacityMapOffset.x, newMaterial.opacityMapOffset.y];

        flowTween
        .to(opacityMapOffset, this.duration, pc.QuadraticInOut)
        .loop(true)
        .delay(this.delay)
        .on('update', function (dt) {
            
            opacityMapTransform[2] = newMaterial.opacityMapOffset.x;
            opacityMapTransform[3] = newMaterial.opacityMapOffset.y;
            
            newMaterial.setParameter('texture_opacityMapTransform', opacityMapTransform);
        });

        if(this.yoyo) {
            flowTween.yoyo(true);
        }

        if(this.reverse) {
            flowTween.reverse();
        }

        
        flowTween.start();

Is it related to this?

Hi @bjorn.syse,

Yes exactly, use the new two transforms (instead of one) properly named for the opacityMap channel and it will work as expected.

1 Like

I see, I’m trying this code now, but not getting this to work. Is that the correct name of the parameter?

var offset = Flow.tmpOffset;

        var flowTween = this.app.tween(offset);
        
        var opacityMapTargetValue = new pc.Vec2(0,1);
        
        this.uniform0[0] = newMaterial.opacityMapTiling.x;
        this.uniform0[1] = 0;
        this.uniform0[2] = newMaterial.opacityMapOffset.x;
        
        this.uniform1[0] = 0; 
        this.uniform1[1] = newMaterial.opacityMapTiling.y;
        this.uniform1[2] = newMaterial.opacityMapOffset.y;

        flowTween
        .to(opacityMapTargetValue, this.duration, pc.QuadraticInOut)
        .loop(true)
        .delay(this.delay)
        .on('update', function (dt) {
            
            this.uniform0[2] = offset.x;
            this.uniform1[2] = offset.y;

            // this.renderComponent.meshInstances[0].material.opacityMapOffset = offset;
            // this.renderComponent.meshInstances[0].material.update();
         this.renderComponent.meshInstances[0].material.setParameter("texture_opacityMapTransform0", this.uniform0);
            this.renderComponent.meshInstances[0].material.setParameter("texture_opacityMapTransform1", this.uniform1);

        },this);

Hey, yes, I double checked and those are the correct uniform names:

Not sure why that doesn’t work for you, can you try changing the default values in the material to start with a value other than 1,1? Thinking if the shader program requires a non default value to pick it up.

2 Likes

Update; it DOES work now. I had forgotten to initialize my float array with 3 spots

before:

this.uniform0 = new Float32Array();
this.uniform1 = new Float32Array();

After:

this.uniform0 = new Float32Array(3);
this.uniform1 = new Float32Array(3);
2 Likes