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

合言葉はガンガンいこうぜ!!最近はiPhoneとUnityと
立体視、WebGL辺りにお熱です。整理された情報はこちらへどうぞ。

2011年12月17日

■[WebGL]ちょっと他とは毛色の違うライブラリ「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();

【描画結果】