three.js でカスタムシェーダを実装するためのチュートリアルがなかなかのボリュームで良記事
基本機能だけじゃない three.js の魅力
私個人は WebGL を常にスクラッチでガリガリ書いてしまうのですが、もはや世界的に WebGL 用のライブラリとして地位を確立しつつある three.js の、非常に有用な記事を発見したのでご紹介します。
投稿された日付を見ると若干古いですので、細かい部分で現行の three.js とは若干違う部分があるかもしれません。しかし基本とするところは同じだと思いますので、ぜひ参考にしてみてください。
プログラマブルシェーダ
WebGL の特徴の一つに、GLSL を用いて自前のシェーダを記述できるというものがあります。実際のところ、これはメリットともデメリットとも捉えることができます。
良く言えば、自分で好きなようにカスタマイズしたシェーダが書けるので、それなりに複雑なことでもがんばれば実現することができる――ということが言えます。
悪く言うと、GLSL に関する知識がなければそもそも話にならないので、GLSL を理解するための学習コストが WebGL の実装とは全く別の部分で出てきてしまうということが言えますね。
その点、three.js にはあらかじめシェーダが組み込まれているため、とりあえずなんかレンダリングしたいだけなんだ！ というときには three.js に任せれば GLSL のことなんか気にせず簡単に 3D モデルを描き出すことができてしまいます。
簡単に 3D を扱えるという点で three.js は非常におすすめです。そして今回の紹介記事でも触れられているように、three.js は自前のシェーダを使って動かすこともできるように設計されているんですね。
この簡単に実装することも、あるいは複雑で高度な実装をすることもできるという汎用性に富んだ仕様が、世界中で three.js が利用されている所以なのでしょうね。
多数のリンクと技術解説
記事内からリンクをたどって様々なデモを見ることができる。
該当記事のなかには、たくさんの文献やサンプル、デモンストレーションへのリンクが含まれています。記事は全部英語ですが、リンクや画像が多く使われていることにより、あまり難しい小難しい印象はありません。私もあまり英語は得意ではないのですが、雰囲気でいろいろ察知できるレベルです。
上のキャプチャ画像は three.js の生みの親である Mr.doob 氏のデモで、まるで漫画のスクリーントーンのように陰影が点で表現されているものですね。ソースを見ると、カスタムシェーダをどのように実装したらいいのかが非常にわかりやすいのではないでしょうか。
なぜか日本のテレビ CM が使われているノイズを利用したデモなんかも。
GLSL でシェーダを記述するための最低限の用語の解説なども併せて記載されているので、three.js を利用したことはあるけどシェーダってよくわからないし――という人は、一度目を通してみてはいかがでしょうか。
とにかく非常に有用なリンクがたくさん埋め込まれているので、three.js だけでなく、シェーダを勉強しようと思っている人には参考になると思います。
