Material Offset&Tiling

Hi there!
i am currently working on some waterfall effect , so far i have updated the model by changing the tile values as below
image
so, in launch seen model is been running in round direction(circle manner) not in the vertical manner



so is their any way that waterfall can be reflect in vertical direction (like natural waterfall)
any suggestion could be appreciated
thanks&regards

I think that depends on the UV coordinates of the model … it follows the flow of the coordinates.
You could also try this.offset.set(0, this.timestamp);

Hi @mvaligursky I have try this statement but it resultant in the same action,plz check the below launch once
https://launch.playcanvas.com/1566573?debug=true

Hi @surya,

I forked you project and took a look:

https://playcanvas.com/editor/scene/1566860

The problem appears to be that you’re always setting the offset to deltaTime multipled by speed. This means that your offset will always be roughly the same. You will want a way for your offset to grow with each frame. A quick way to do this is to create an object that gets modified by every frame, but not reset. I did this by modifying your script like this:

var Slotswaterfall = pc.createScript('slotswaterfall');

Slotswaterfall.attributes.add('speed', { type: "number", description: "Speed of water", default: 0.3 });
Slotswaterfall.attributes.add('waterFlow', { type: 'entity' });

// initialize code called once per entity
Slotswaterfall.prototype.initialize = function () {
    this.timestamp = 1;
    this.waterMaterial = this.waterFlow.render.material;
    this.offset = new pc.Vec2();
    this.time = 0;
};

Slotswaterfall.prototype.update = function (dt) {
    this.time += dt;
    this.timestamp = this.time * this.speed;
    this.offset.set(0, this.timestamp);
    // this.waterMaterial.diffuseMapOffset = this.offset;
    // this.waterMaterial.emissiveMapOffset = this.offset;
    this.waterMaterial.opacityMapOffset = this.offset;
    this.waterMaterial.update();
    if (this.timestamp <= 0) {
        this.timestamp = 1;
    }
    // this.entity.render.meshInstances[0].material.update();
};

You should see that the waterfalls now flow as expected. I hope this is helpful.

2 Likes

thankyou @eproasim it works well