【PlayCanvas】軽くてシンプルな水の表現を作ろう！！

福田です！今回はPlayCanvasで簡単に使える水の表現について書いて行こうと思います！
ぜひ最後までお付き合いください！

さて、一言で水の表現と言ってもやり方はかなり多くあります。
青色の板をただ貼るだけから始まり、そこにノーマルを追加して波っぽい表現を足したり透過を追加して透け感を出したりとテクスチャ回りだけでもいろいろやり方があります。
シェーダーやポストエフェクトに手を出すとそれこそ無限大といってもいいでしょう。

そういったリッチな表現もとてもいいのですが、今回はできる限りシンプル、最低限で水の表現を作ります！
というのも、PlayCanvasは基本的にブラウザ上で動作するため、あまりクオリティにこだわっていると処理が重くなってしまうからです。
では早速作っていきましょう！

まずは適当なプロジェクトを立ち上げてください！
自分はなんかプールっぽいものを置いたシーンを用意しました！

スザンヌも気持ちよさそうですね～！
ではこいつの水部分に板を張ります！

スザンヌが埋まってしまいましたが、これから水の表現を作っていきましょう。
使うものはマテリアル一つとテクスチャが一つととてもシンプルです！

どうでしょうか？
良い感じに水っぽい質感が出ているのではないでしょうか？
ただちょっと水深が深く見えるかもしれないので、そこはDiffuseのカラーを変更して対応しましょう！

マテリアル構成と使用したNormalMapはこんな感じです！
これだけだと動きがないので水としては少し物寂しくなっています。
なので最後に水に動きを与えるスクリプトを追加します！
以下を参考ください！

var ScrollingMaps = pc.createScript('scrollingMaps');

ScrollingMaps.attributes.add('diffuseSpeed', {
    type: 'vec2',
    default: [0.1, 0.1],
    title: 'Diffuse Scroll Speed'
});

ScrollingMaps.attributes.add('normalSpeed', {
    type: 'vec2',
    default: [0.05, 0.05],
    title: 'Normal Scroll Speed'
});

ScrollingMaps.attributes.add('opacitySpeed', {
    type: 'vec2',
    default: [0.15, 0.15],
    title: 'Opacity Scroll Speed'
});

ScrollingMaps.prototype.initialize = function () {
    this.material = this.entity.render.meshInstances[0].material;
    this.diffuseOffset = new pc.Vec2();
    this.normalOffset = new pc.Vec2();
    this.opacityOffset = new pc.Vec2();
};

ScrollingMaps.prototype.update = function (dt) {
    if (this.material) {
        this.diffuseOffset.x += this.diffuseSpeed.x * dt;
        this.diffuseOffset.y += this.diffuseSpeed.y * dt;
        this.material.diffuseMapOffset = this.diffuseOffset;

        this.normalOffset.x += this.normalSpeed.x * dt;
        this.normalOffset.y += this.normalSpeed.y * dt;
        this.material.normalMapOffset = this.normalOffset;

        this.opacityOffset.x += this.opacitySpeed.x * dt;
        this.opacityOffset.y += this.opacitySpeed.y * dt;
        this.material.opacityMapOffset = this.opacityOffset;

        this.material.update();
    }
};

このコードはDiffuseとOpacityとNormalを任意のスピードでスクロールすることが出来ます！
これによってかなり自然な動きになります！