tmlib.js x three.js(WebGL) で10000個のパーティクルを表示してみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

tmlib.js x three.js(WebGL) でパーティクル表示してみました!
10000 個表示しても 30 fps でるのは脅威!!

jsdo.it で作ってあるので実際に実行したり, fork して遊んでもらえると幸いです.

Table of contens

tmlib.js とは?

そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです.

詳しくは下記のリンクにて

up

three.js とは?

今最もメジャーな WebGL ライブラリです.

WebGL は複雑なセットアップだったりシェーダを自前で用意しないといけなかったりするのですが, その辺を全てやってくれるのが three.js です.

ちまたにある WebGL のサンプルは全て three.js が使われているといっても過言ではありません.

ここでは詳しく説明しませんが, こちらのサンプルを見ればどれだけ優れたライブラリかがわかるかと思います.

View

up

コード

コードはたったこれだけ. 100 行程度のコードでこれだけのことができるとは… three.js 恐るべし!!

/*
 * constant
 */
var SCREEN_WIDTH    = 465;              // 画面幅
var SCREEN_HEIGHT   = 465;              // 画面高さ
var SCREEN_CENTER_X = SCREEN_WIDTH/2;   // 画面中央X座標値
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;  // 画面中央Y座標値


tm.preload(function() {
    tm.util.ScriptManager.loadStats();
});


/*
 * main
 */
tm.main(function() {
    // アプリケーション
    var app = tm.three.ThreeApp("#world");
    // リサイズ
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    // 画面にフィット
    app.fitWindow();
    
    // メインシーンに切り替える
    app.replaceScene(MainScene());
    
    // 実行
    app.run();
    
    app.enableStats();
});


/*
 * scene
 */
var MainScene = tm.createClass({
    // three.js 用シーンを継承
    superClass: tm.three.Scene,
    
    init: function() {
        // 親を初期化 fov: 視野角, aspect: 縦横比
        this.superInit(60, SCREEN_WIDTH/SCREEN_HEIGHT);
        
        var geometry = this.geometry = new THREE.Geometry();
        
        for (var i=0; i<10000; ++i) {
            var vertex = new THREE.Vector3();
            vertex.x = tm.util.Random.randfloat(-500, 500);
            vertex.y = tm.util.Random.randfloat(-500, 500);
            vertex.z = tm.util.Random.randfloat(-500, 500);
            geometry.vertices.push(vertex);
        }
        
        // tm.graphics.Canvas でテクスチャを作成
        var canvas = tm.graphics.Canvas();
        canvas.resize(64, 64);
        canvas.clearColor("black");
        canvas.setTransformCenter();
        canvas.setFillStyle("yellow");
        canvas.fillStar(0, 0, 30, 5);
        var texture = new THREE.Texture(canvas.element);
        texture.needsUpdate = true;
        
        // パーティクル用マテリアル
        var material = new THREE.ParticleBasicMaterial( {
            map: texture,
            size:15,
            depthTest: false,
            transparent: true,
            blending: THREE.AdditiveBlending
        } );
        
        // パーティクル
        var particle = this.particle = new THREE.ParticleSystem(geometry, material);
        this.add(particle);
        
        // カメラセットアップ
        this.camera.position.set(0, 0, 500);
        this.camera.lookAt({ x: 0, y: 0, z: 0 });
    },
    
    update: function(app) {
        // 回転
        this.particle.rotation.y += Math.degToRad(1);
        
        if (app.keyboard.getKey("Z")) {
            this.camera.position.z -= 10;
        }
        if (app.keyboard.getKey("X")) {
            this.camera.position.z += 10;
        }
    }
});

up

解説

やってることはすごくシンプルです.

  • three.js 用のアプリケーションを生成
  • シーンを切り替え
  • パーティクル用の geometry を作成
  • Canvas と THREE.Texture を使ってパーティクルに表示するテクスチャを作成
  • パーティクル用 material を作成
  • geometry と material を引数として ParticleSystem を生成
  • シーンに ParticleSystem を登録
  • 更新処理内で ParticleSystem をクルクル
  • ついでに”Z”, “Y” キーでズームイン/アウトできるようカメラの z 値をいじる

ってな感じです. 何も難しいことはやっていません. それでこの迫力!!

up

『Global Game Jam 2013 【新宿会場】with tmlib.js』やります!!

ついに明日と迫りました GlobalGameJam with tmlib.js !!!!

View

tmlib.js は初心者の方でも気軽に使えるライブラリなので, ゲームを作ったことが無い方や, プログラマさんじゃなくても気軽にご参加下さい.

私は基本サポートに徹するのでその場でサンプルを作ったり, 質問やバグ対応を主にやるつもりです.

また, プランナさんとしてやデザイナさんとして参加したいって方もぜひ! 私が形にします!!

3日間ありますが, 1日だけの参加とかでも大丈夫なので お気軽にぜひ♪

今までに tmlib.js を使ったゲームとして

などがあります.

実際にこれらを作られた方も参加するので みんなで協力して楽しくゲームプログラミングをしましょう:D

up

近々, 学生の頃に作ってた 3D ゲームの移植でもしようと思ってます.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT