[SOLVED] Normals Offset Material

Hello! I forked the project below to add water to my game:
https://playcanvas.com/project/438476/overview/simple-water-surface

But then I noticed something: the water’s not animated. I devised a quick plan and I came up with this solution: change the normals offset with code to make it look like the water is flowing. I researched on how to do that, and I tried everything I found, but nothing would work. So I came here in desperate need of help. Thank you guys so much!

Link to my project:
https://playcanvas.com/editor/scene/1874902

-Many thanks again!

Hi @SoySauceStudios,

Your offset script is missing a few properties, that you use but you never defined. Here is an updated script that will work:

Offset.prototype.initialize = function () {
    this.mat = this.app.assets.find('water').resource;
    this.speed = 0.2;
};

// update code called every frame
Offset.prototype.update = function (dt) {
    const offset = this.mat.normalMapOffset;
    offset.x += dt * this.speed;
    offset.y += dt * this.speed * -0.25;
    this.mat.update();
};

It worked! Thank you so much, @Leonidas!!!

1 Like