【PlayCanvas】シェーダーの基礎！！砂浜編！！

福田です！！
今日はシェーダーの基礎！砂浜編！ということで今回は、砂浜のシェーダーを例に出してシェーダーを触っていきたいと思います！

さて、ではさっそく砂のシェーダーを作っていきます！
砂のシェーダーですが、今回は少し凝ってノイズを使ってざらざら感まで出していこうと思います！

まずは砂のベースカラーを決めましょう。

vec4 color = vec4(0.8,0.7,0.6,1.0);

う～ん…まぁこんな感じの色でいいんじゃないかなと思います！

ただこれだけでは砂の色をしているだけなので、ざらざら感を追加していきましょう！
ざらざら感を出すためにはランダム性のあるノイズが必要なので、まずはノイズを作るためのランダム関数を作っていきます！

float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}

float noise (in vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));

    vec2 u = f*f*(3.0-2.0*f);

    return mix(a, b, u.x) + 
            (c - a)* u.y * (1.0 - u.x) + 
            (d - b) * u.x * u.y;
}

偉大なる先人から知恵をお借りしたノイズ周りの関数です！
(参考:https://thebookofshaders.com/11/?lan=jp)
この二つの関数を用いて、ノイズをかけていきます。

vec2 st = vec2(gl_FragCoord.xy/vUv0.xy);
float n = noise(st);
color = (color.x - n * 0.3, color.y - n * 0.3, color.z - n * 0.3);

1行目のgl_FragCoordは今処理をしているピクセルの座標が入っています。vUv0には、オブジェクトのUV座標が入っています。
stはユーザーの画面のピクセルと3D空間上にあるオブジェクトのUV座標を紐づけたものが格納されるわけですね。
ウィンドウ座標(30,30)のピクセルにオブジェクトのUV座標(0.5,0.5)が乗ってる！みたいなイメージですね。
これは何のために作っているのかというと、ノイズのランダム性を作る際に毎処理、違う値を取得するためですね。

このある程度のランダム性をもったstをnoise()の中に投げてあげると、float型のnに結果が帰ってきます。
特に指定がない場合は0.0~1.0までの値になります。

次に、この値を利用してノイズをcolorに乗っけていきます。

今回は元の色が十分に明るいので、nの値の0.3倍をcolorの各色成分から引いていくことで暗さを足す方向で調整しました。