のぐそんブログ

暗いおじさんがシコシコ書くブログです。

PLYファイルを使ってパーティクルを作成

PLYファイルからパーティクルシステムを作成してみます。

PLYファイルとは

PLY(Polygon Model File)3Dファイル形式の一つです。 ポリゴンファイルのフォーマットで、3Dスキャナから得られた情報を保持するためによく利用されます。

PLYファイルをTHREE.jsで読み込み

PLYファイルはPLYLoaderを使って読み込みます。 PLYLoaderはPLYLoader.jsを別途読み込むことで使えるようになります。

読み込み部分のソースはこんな感じです。

var loader = new THREE.PLYLoader();
var group = new THREE.Group();

var material = new THREE.PointsMaterial({
    color: 0xffffff,
    size: 0.025,
    opacity:0.5,
    transparent:true
});

loader.load('./images/test.ply', function (geometry) {

    group = new THREE.Points(geometry, material);
    group.sortParticles = true;

    scene.add(group);
});

表示はこうなります。

まとめ

PLYファイルの使い所がよくわかりませんでした。 パーティクルシステムでつかうのかな・・・

WebGLでライトを実装する為に最低限理解しておく必要基礎知識

今回はWebGLでライトを実装する為に最低限理解しておく必要があることについてまとめました。

法線

法線とは向きを表すベクトルです。法線ベクトルと呼ぶ場合のあります。

続きを読む

Three.jsでGLSLを触るための基礎基礎メモ

GLSLの基礎

「WebGLを使って三角形を描画する為の基礎知識」でも少しかきましたが、GLSLは頂点シェーダーと、フラグメントシェーダーがあります。

頂点シェーダーではgl_Positionという組み込み変数に頂点データを必ず渡す必要があります。 フラグメントシェーダーには、gl_FragColorという組み込み変数がありピクセルの色を指定します。

gl_Positionには、後述するカメラの視野範囲の空間であるクリッピング座標が入ります。

続きを読む

WebGLでの行列による変換処理を理解する上で、最低限知る必要がある言葉

WebGLでの行列による変換処理を理解する上で、最低限しっていないといけない言葉について書きたいと思います。

下記を参考にさせていただきました。 3D 描画の基礎知識

続きを読む

Three.jsでパーティクルを作ろうと思った際に調べたこと

Three.jsでパーティクルをつくるにはどうすればいいのか調べてみました。

続きを読む

Three.jsで頂点座標を指定して三角形を描く

以前、「WebGLを使って三角形を描画する為の基礎知識」の記事をかきましたが、WebGLのラッパーライブラリであるTHREE.jsでも同じようなことができるのでメモしておきます。

当然ですが、ナマのWebGLを触るよりより簡単に書けるようになっています。

続きを読む

expressでサーバ−を立てるの超基礎編

サーバー側の知識が限りなくゼロに近いオジサンですが、 expressを使って、まずはindex.htmlを表示だけしてみようと思います。

続きを読む