のぐそんブログ

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

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

Three.js javascript WebGL

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ファイルの使い所がよくわかりませんでした。 パーティクルシステムでつかうのかな・・・

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

Three.js WebGL javascript

GLSLの基礎

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

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

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

続きを読む

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

WebGL javascript

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

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

続きを読む

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

Three.js WebGL

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

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

続きを読む