WebGL で色々な表現に挑戦する - ノイズを作成する

この記事の概要

前回の記事ではグラデーションを扱いました。
今回はノイズを作ってみようと思います。

単純な白黒のノイズ

組み込みのノイズ生成関数などは無いので、自作します。¹

plane.frag

  void main() {
    float noise = fract(sin(dot(vTextureCoord.xy, vec2(12.9898,78.233))) * 43758.5453);

    outColor = vec4(noise, noise, noise, 1.0);
  }

このように、白黒のノイズが得られました。

上記のノイズの色ズレ

vTextureCoord.xy の値を操作すると、生成されるノイズが変わります。
r, g, b それぞれを少しずつ変えるため、関数に切り出して操作できるようにします。

plane.frag

+ float createNoise(float seed) {
+   return fract(sin(dot(vTextureCoord.xy * seed, vec2(12.9898,78.233))) * 43758.5453);
+ }

  void main() {
-   float noise = fract(sin(dot(vTextureCoord.xy, vec2(12.9898,78.233))) * 43758.5453)
+   float r = createNoise(2.0);
+   float g = createNoise(5.0);
+   float b = createNoise(10.0);

-   outColor = vec4(noise, noise, noise, 1.0);
+   outColor = vec4(r, g, b, 1.0);   
  }

r, g, b を分解したため、白黒ではなくカラフルな感じのノイズになりました。

この状態だと、どの色もおよそ平等に出現しています。
これを例えば赤ベースにしたければ次のようにします。

plane.frag

  float createNoise(float seed) {
    return fract(sin(dot(vTextureCoord.xy * seed, vec2(12.9898,78.233))) * 43758.5453);
  }

  void main() {
-   float r = createNoise(2.0);
+   float r = createNoise(2.0) * 2.0;
    float g = createNoise(5.0);
    float b = createNoise(10.0);

    outColor = vec4(r, g, b, 1.0);   
  }

グラデーション + ノイズ

前回、前々回の記事で作ったようなグラデーションは、ノイズと組み合わせることもできます。

plane.frag

  void main() {
+   float gradient = sin(vTextureCoord.y);
+   float noiseIntensity = mix(1.0, 0.5, gradient);
    float r = createNoise(2.0) * 2.0; // 一旦使わない
    float g = createNoise(5.0); // 一旦使わない
    float b = createNoise(10.0); // 一旦使わない
+   vec3 color = vec3(gradient) + createNoise(1.0) * noiseIntensity;

-   outColor = vec4(r, g, b, 1.0);
+   outColor = vec4(color, 1.0);
  }

このように、上行くにつれてノイズが弱くなるようなグラデーションを作れました。

これを r, g, b それぞれに適用すれば、

plane.frag

  void main() {
    float gradient = sin(vTextureCoord.y);
    float noiseIntensity = mix(1.0, 0.5, gradient);
+   float r = createNoise(2.0) * 2.0 + gradient;
+   float g = createNoise(5.0) + gradient;
+   float b = createNoise(10.0) + gradient;
-   float r = createNoise(2.0) * 2.0;
-   float g = createNoise(5.0);
-   float b = createNoise(10.0);
-   vec3 color = vec3(gradient) + createNoise(1.0) * noiseIntensity;
+   vec3 color = vec3(r, g, b) * noiseIntensity;   

    outColor = vec4(color, 1.0);
  }

先ほど作った赤ベースのノイズ + グラデーション、という表現になりました。

ここまで来れば数値を適当に足したり掛けたりするだけで楽しくなってきます。

:plane.frag

  void main() {
    float gradient = sin(vTextureCoord.y);
    float noiseIntensity = mix(1.0, 0.5, gradient);
    float r = createNoise(2.0) * 2.0 + gradient;
    float g = createNoise(5.0) + gradient;
-   float b = createNoise(10.0) + gradient;
+   float b = createNoise(10.0) + gradient * noiseIntensity;
    vec3 color = vec3(r, g, b) * noiseIntensity;

    outColor = vec4(color, 1.0);
}

今回はこのように色相を変えてみました。

最後に

かなり複雑な表現ができるようになってきたと思います。
ノイズ関数は調べると色々なものがあり、深い理解はできませんでしたが、単に「ザラっとした質感を表現をしたい」くらいであれば実際にも使えると思います。

次は時間による変化をつけていきます。

1. このノイズ関数、調べているといたるところで目にするのですが、出典が分かりません。Stack Overflow でも質問している人がいましたが、明確な答えは出ていなさそうでした。 ↩