jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.12. 6

ポートフォリオ sketch of three.js を公開しました。

Category:
Canvas
Math
Physics
WebGL

前回の記事から半年以上のブランクになってしまいましたが、ブログを休んでいる間にずっとWebGLとthree.jsの学習を続けていました。
3Dレンダリングの知識がゼロからのスタートだったのでまともに使えるようになるまで随分と時間がかかってしまいましたが、そこで得たノウハウを元につい最近ポートフォリオを作成しました。

個々の作品では3Dレンダリングだけでなく、簡単な物理演算も取り入れるようにしています。その詳細については別途個別に記事にしていきたいと思いますが、今回はこのポートフォリオを完成させるまでの学習内容と参考にした書籍について、順を追って紹介していきたいと思います。

ベクトル、力、三角関数の計算

WebGLやCanvasRenderingContext2Dなどに限らず、インタラクティブコーディングに取り組もうとするなら最低限、ベクトル演算、力の計算らを習得しておかなければなりません。これらはゲームプログラミング入門の書籍などでは必ず掲載されているといっていいほど基本的な内容になりますが、私がとくに参考にしたのは以下の書籍になります。

Nature of Code -Processingではじめる自然現象のシミュレーション

Processingの書籍なので、掲載されているサンプルコードは当然JavaScriptではありません。しかしProcessingのPVectorクラスと同様のものをJavaScriptで作成すれば、この書籍で紹介されているコードは容易に応用することができます。
またこの本は類似する他の書籍とは少し趣が異なり、1章でベクトル演算、2章で力の計算、3章で三角関数を早々に説明してくれているので、インタラクティブコーディングの基礎学習がしやすい流れになっています。

three.js APIの学習

WebGLのコンテンツを作成するにあたってthree.jsの導入は必須とはいえませんが、JavaScriptを書けないコーダーがjQueryを使用するように、WebGLネイティブは敷居が高すぎるという人にとってシェーダ言語を記載しなくても済むところからレンダリングを始められるthree.jsはおおいに助けになります。
2015年現在、three.jsのAPIを詳細に解説してくれている日本語のドキュメントはまだほとんどなく、なにか躓いたときに解決策を探すにはブログ記事やQiitaに書かれているものを用途ごとに探すか、もしくは頑張って英語を読むかのどちらかしかないように感じます。書籍についてもWebGLというジャンルに属するものがまず少なく、three.jsとなると更に選択肢は狭まってしまいます。
そのような現状において、もっとも頼りになった書籍が以下の2冊です。

three.jsによるHTML5 3Dグラフィックス 上・下

 

three.jsのリファレンスです。およそ2年前に刊行された書籍なので、three.jsの最新バージョンでは名前の変わったクラスや使用できないプロパティもありますが、大半はまだそのまま使用することができます。なによりthree.jsの公式ドキュメント以上にきちんと整理された、且つ日本語で書かれたリファレンスというだけで貴重です。

上巻は主に3Dオブジェクトの描画と制御についての内容で、Object3DやVectorなど、three.jsが予め汎用的で便利なクラスをどれだけ用意してくれているのかが理解できます。またVector系のクラスのメソッド、プロパティとProcessingのPVectorクラスの類似が読み取れ、ノウハウを転用できそうだということもわかってきます。
下巻はバッファリング、マッピング、シェーダなど少し突っ込んだ内容になっています。上巻の内容だけでも3Dレンダリングは可能ですが、業務でWebGLを利用する場合はパフォーマンスチューニングや演出面のこだわりが必要になってくるので、そのため下巻の内容も避けて通れないもののように思えます。
今回作成したポートフォリオも、まだ下巻の内容を読み解きながら1つずつ実践しているレベルです。

WebGLは旧いブラウザでは動作しないものの、それでも今年に入ってからWebGLを使用したウェブサイトを多く見かけるようになってきました。そういう時勢を受けてきっとWebGLの書籍や情報は今後充実していくのではないかと思いますが、今すぐWebGLを覚えたいという方にとって、今回紹介した内容がお役に立てば幸いです。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.