Tween the opacityMaskOffset of a material


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 =;
        var opacityMapOffset = new pc.Vec2(0,1);
        var opacityMapTransform = [newMaterial.opacityMapTiling.x, newMaterial.opacityMapTiling.y, newMaterial.opacityMapOffset.x, newMaterial.opacityMapOffset.y];

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

        if(this.yoyo) {

        if(this.reverse) {


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 =;
        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;

        .to(opacityMapTargetValue, this.duration, pc.QuadraticInOut)
        .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);


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.


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


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


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