ちょっと他とは毛色の違うライブラリ「csg.js」の紹介

17日目の id:edvakf さんの「WebGLでライフゲーム」に続いて18日目担当のnakamura001です。

今回は最近目にした csg.js というちょっと変わったWebGLのライブラリを紹介します。

csg.js
http://evanw.github.com/csg.js/

このライブラリは2つの3Dモデルを合成したり、差分を行った3Dモデルを作成する事が可能です。

簡単なプログラムを書きつつ解説しますのでみなさんも良ければ実際に入力して試しつつ見て下さい。

前準備

ライブラリにはサンプルも有るのですがちょっとだけボリュームが有るので実際に気にすべき箇所がちょっと分かりづらくなっています。その為、本当に必要な要素だけを含んだテンプレートとなるファイルを準備しました。実際に手を動かしながら読みたい方はこちらからDLしてから続きを読んで下さい。

動作確認

テンプレートのファイルをDL、解凍した中から index.html ファイルをWebGL対応のブラウザで開いてみて下さい。
キューブ(立方体)が表示されたかと思います。マウスでドラッグすると回転させる事も出来ます。

プログラム解説

次に index.html ファイルをエディタで開いて下さい。そして、ファイルの中から以下の記述部分を確認して下さい。こではキューブを作成し、そのメッシュをビューアーに渡して描画を行なっています。

  // ※ここでMeshの演算を行う
  var cube = CSG.cube({ center: [-0.25, -0.25, -0.25] });
  cube.setColor(1, 1, 0);
  var solid = cube;
  // 最終的なメッシュを生成
  viewer.mesh = solid.toMesh();
  viewer.gl.ondraw();

以降の解説では「※ここでMeshの演算を行う」のコメントから「最終的なメッシュを生成」コメントの間の部分を色々と変更して csg.js でどんな事が出来るかを紹介していきます。

union(2つの3モデルを合成)

unionメソッドを使用すると2つの3Dモデルを合成する事が出来ます。プログラムをこの様に書き換えてみて下さい。

  // ※ここでMeshの演算を行う
  var cube = CSG.cube({ center: [-0.25, -0.25, -0.25] });
  cube.setColor(1, 1, 0);
  var sphere = CSG.sphere({ radius: 1.3, center: [0.25, 0.25, 0.25] });
  sphere.setColor(0, 0.5, 0);
  var solid = cube.union(sphere);
  // 最終的なメッシュを生成
  viewer.mesh = solid.toMesh();
  viewer.gl.ondraw();

【描画結果】

subtract(引く)

次に引数に指定した3Dモデルを引くsubtractメソッドを試してみます。
var solid = cube.union(sphere); の部分を var solid = cube.subtract(sphere); に変えてみて下さい。
【描画結果】

intersect(交わった部分を残す)

intersectメソッドでは引数に指定した3Dモデルと重なる部分が残ります。intersectに変更して実行してみて下さい。
【描画結果】

なお、ここではcubeやsphereなどライブラリが提供している3Dモデルを使用しましたが付属のサンプル more.html を見れば分かるように3Dモデルデータ(頂点は法線データなど)を読み込ませて表示させる事にも対応しています。

more.html では gourd.js から3Dモデルデータを読み込んで使っています。 gourd.js ファイルにこの様に3Dモデル表示に必要な情報が記述されています。

さて、 csg.js というライブラリがちょっと他のライブラリとは毛色が異なる事が理解出来たでしょうか？確かにちょっと使い所を悩むライブラリでは有りますが3Dモデリングツールを作成するときなどにこの様な機能を含めるという場面などで使えそうな気がしました。皆さんも良かったらどこかで使ってみて下さい。