WebGL で色々な表現に挑戦する - 2 色以上のグラデーション表現

この記事の概要

前回の記事で、ようやく表現の幅が広がる気配を感じられたと思います。

今回は更に踏み込んで、2 色以上のグラデーション表現を模索します。

おさらい: 単純な 1 色のグラデーション

前回の複雑なグラデーションは一度リセットして、単純な状態に戻します。

  #version 300 es

  precision mediump float;

  in vec2 vTextureCoord;
  out vec4 outColor;

  void main() {
    float pi = acos(-1.0);
    float r = vTextureCoord.x;
    outColor = vec4(r, 0.0, 0.0, 1.0);
  }

見た目はこうなっています。

これを基準に手を加えていきましょう。

単純な 2 色のグラデーション

最も簡単にグラデーションの表情を増やすなら、次のようにコードを変えます。

  void main() {
    float pi = acos(-1.0);
    float r = vTextureCoord.x;
+   float g = vTextureCoord.y;
-   outColor = vec4(r, 0.0, 0.0, 1.0);
+   outColor = vec4(r, g, 0.0, 1.0);
  }

これにより、x 座標と y 座標それぞれのグラデーションが合成されたような結果が得られます。

もちろん斜め方向に指定をすることもできます。

  void main() {
    float pi = acos(-1.0);
-   float r = vTextureCoord.x;
-   float g = vTextureCoord.y;
+   float r = (vTextureCoord.x + vTextureCoord.y) / 2.0;
+   float g = (vTextureCoord.x - vTextureCoord.y) / 2.0 + 0.5;
    outColor = vec4(r, g, 0.0, 1.0);
  }

また、放射状に広がるグラデーションを設定することもできるので、

  void main() {
    float pi = acos(-1.0);
    float r = (vTextureCoord.x + vTextureCoord.y) / 2.0;
    float g = (vTextureCoord.x - vTextureCoord.y) / 2.0 + 0.5;
+   float b = 1.0 - length(vTextureCoord - vec2(0.5, 0.5));
-   outColor = vec4(r, g, 0.0, 1.0);
+   outColor = vec4(r, g, b, 1.0);
  }

このような、なんと形容すると良いのか分からないグラデーションも作成することができます。

そして組み合わせ方次第で色々な柄を作ることができます。

  void main() {
    float pi = acos(-1.0);
    float r = (vTextureCoord.x + vTextureCoord.y) / 2.0;
    float g = (vTextureCoord.x - vTextureCoord.y) / 2.0 + 0.5;
-   float b = 1.0 - length(vTextureCoord - vec2(0.5, 0.5));
+   float b = 1.0 - sin((vTextureCoord.x - vTextureCoord.y) * pi * 50.0);
    outColor = vec4(r, g, b, 1.0);
  }

最後に

さすがにここまで来ると CSS ではできないような表現になってきたと思います。
現段階ではまだ模様を動かしていませんが、今後これらを時間にあわせて変化させてもいけるので、そうなったら尚更です。

一旦グラデーションは終わりにして、次はノイズ関連を記事にしたいと思います。