スクロールに連動した背景WebGLを実装する Scroll Spiral が面白い

WebGL Scroll Spiral

GLSLの記述箇所なんかは僕もちゃんと理解しきってはいないのですが、スクロール連動のWebGL描画というのがあまり見たことなく面白かったので紹介しようと思います。

用意するもの

まずは公式からファイル一式をダウンロードします。最低限必要なものは下記のとおりです。
regl.min.jsは軽量なWebGLライブラリ、生のWebGLのコードよりは書きやすくしてくれるようです。

<script src="js/regl.min.js"></script>
<!— 好きなdemoを読み込む —>
<script src="js/demo1.js"></script>

body{
  /* スクロールできないと挙動確認できないので */
  min-height: 3000px;
}
canvas#webgl {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

基本的な使い方

サンプルを試すには、html側はあとcanvasタグを用意するのと、jsを読み込んだ後にシェーダーの記述が必要です。シェーダーの中身は長いのでサンプルをDLして見てみてください。

<canvas id="webgl"></canvas>

<script src="js/regl.min.js"></script>
<script src="js/demo1.js"></script>

<script type="x-shader/x-fragment" id="fragmentShader">
#define TWO_PI 6.2831853072
#define PI 3.14159265359

precision highp float;

　〜〜省略〜〜

</script>

僕もGLSLそんなに詳しいわけじゃないので曖昧な説明になってしまうのですが…。

歪みの処理に関してはdemoごとにシェーダ側でやっているようなので、カスタマイズする際はそちらの値やアルゴリズムをいじってみると良いです。下記の部分は変数の名前通りだったりするので、値の変化がわかりやすいです。
シェーダの中のconstで設定している値を変えると良いと思います。

スクロールに連動させるための記述に関しては、demo.jsのregl.frameのところに書いてあります。
そこで取得した値をシェーダに渡し、それを使ってmainの中で回転や色を変化させています。

やってることを理解するのは少し難しいですが、試すのは簡単なので興味ある方ぜひ見てみてください。
詳細は公式へどうぞ。

明解WebGL　iOS/Androidも対応した3D CGプログラミングのWeb標準