three.js を利用して GLSL でパラメトリック方程式による曲線描画を行うチュートリアル
コードの掲載もある親切なチュートリアル
今回ご紹介するのは、three.js を利用して複数の曲線を描くことを実現するチュートリアル記事です。
その場で実際に動いている様子を見ることができる埋め込まれたデモや、コードの記述例も掲載されており、実用性の高い内容になっています。
three.js はもともとたくさんのジオメトリがデフォルトの状態で利用できますが、それを高速に処理するために GLSL を使ってみようというテーマになっていて、ひとつ上の表現を行うための非常に参考になるチュートリアルだと思います。
シェーダを活用する方法に思いを巡らせよう
今回のチュートリアルを書いている方は、いくつかの WebGL 作品をこれまでに発表している方なので、もしかすると氏の作品を見たことがあるという人もいるかもしれません。
チュートリアル記事は全編英語なのですが、先にも触れたとおりでコードの掲載が多数あるため、それほど理解するのは難しく無いと思います。
また実際に動いている様子を確認できる WebGL のデモが埋め込まれていて、マウスなどからのインタラクティブな操作が行えます。
デモの実行エリアをクリックすると色が変化すると共に、モデルが一瞬膨らむような感じでアニメーションします。
シンプルですが、非常にかっこいいですね。
色が変化するときのエフェクトがかっこいい。
チュートリアル式のブログ記事なので、途中に掲載されているコードとキャプチャ画像を見ながら、少しずつ理解を深めていくことができると思います。
ジオメトリのデータを生成するところから、シェーダを使って頂点の形状を自在に操る方法など、かなり具体的に書かれています。
掲載されているコードは JavaScript に関しては ES6 の文法になってますね。
GLSL のコードも同時に掲載されているので、シェーダ内でどのようにコードを記述し、それによってどんな結果が得られるのかもイメージしやすいと思います。
three.js は非常に扱いやすいライブラリだと思いますが、いろいろな機能が揃っているだけに、既存の機能までしか利用していないとどうも似たような出来栄えの作品になってしまいがちです。
今回のチュートリアル記事で書かれているような、少し凝った見せ方を修得しておけば、表現の幅が広がるだけでなく、自分なりのオリジナリティを活かせる場面もどんどん増えていくと思います。
WebGL をスクラッチで記述していくには、WebGL の API そのものに対する理解や、3D プログラミングの多数のノウハウなどが必要です。
それらを全て駆使してデモを作っていくのはとても難しいですが、かといって、three.js を使うときにそれらの知識が必要ないかと言えば、そんなことはないんですね。
今回のチュートリアル記事にあるような、シェーダを使った工夫を加えてやるだけでも、表現の幅はぐっと広がります。最初はすごく難しく感じる部分が多いかもしれませんが、少しずつでも自分なりの表現にシェーダを活用してみるといいでしょう。
今回の記事はそういった意味で、非常に取り組みやすいテーマを扱っていると思います。
ぜひ活用してみてください。
