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();
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