読者です 読者をやめる 読者になる 読者になる

初めてのシステムと日記

システムも日記も初めてです。

Three.jsを使ってメッシュとFPSを表示をしてみた

WebGL and Three.js
http://www.slideshare.net/yomotsu/webgl-and-threejs


先日、HTML5 Conference 2012に参加し、
このセッションは参加しなかったのですが、資料を見て非常に興味を持ったので触ってみました。


■Three.jsとは


WebGLを扱うのはそれなりに敷居が高いのですが、
※ほんの少しリアルタイム3Dの研究に携わってた身ですが挑戦して挫折Orz

このThree.jsはWebGLをラッパーしたライブラリであり、
複雑な手順もなく直感的にWebGLを扱うことが出来ます。
https://github.com/mrdoob/three.js/


■Three.jsをダウンロードして読み込む


githubから/build/three.min.jsを任意の場所に置き、HTMLから読み込みます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js</title>
<script src='resource/js/three.min.js'></script>
</head>
<body>
<script>
.
. // ここに処理を書く
.
</script>
</body>
</html>


■Three.jsの初期設定をする


3Dを表示するには以下の設定が必要です。

  • レンダリング:3D処理を描画する
  • シーン:3Dモデルやカメラ等を登録する空間
  • カメラ:空間内の視点

Three.jsでは以下のように設定します。

<script>
    var camera, scene, renderer;
    // 描画する領域
    var width = window.innerWidth;
    var height = window.innerHeight;

    init();

    function init() {
        // set renderer
        // ブラウザサイズで描画するよう設定
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

        // set scene
        // シーンを宣言
        scene = new THREE.Scene();

        // set camera
        // カメラの位置を手前にして設定
        camera = new THREE.PerspectiveCamera(75, width / height, 1, 10000 );
        camera.position.z = 1000;

        // シーン、カメラをレンダリングする
        renderer.render(scene, camera);
    }
</script>


■3Dモデルを登録する


これだけだと何もない空間になってしまうので3Dモデルをシーンに登録します。
今回はgithubのサンプル通り四角形メッシュを登録します。

<script>
    var camera, scene, renderer;
    // 3Dモデルを格納する変数
    var geometry, material, mesh;
    .
    .
    .
    init();
    animate();

    function init() {
        .
        .
        .
        // set model
        // 正方形を宣言
        geometry = new THREE.CubeGeometry(200, 200, 200);
        // 赤っぽいワイヤーフレームを宣言
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
        // 上記2つを基にメッシュを生成してシーンに登録
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
    }

    // 生成したメッシュを回転させながらレンダリング
    function animate() {
        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        renderer.render(scene, camera);
    }
</script>


FPSを表示する


ブラウザ表示で気になるのが処理速度。3DではよくFPSを用いて計測します。
stats.jsを使うとJSによるFPSの計測が可能なのでこれを使ってみます。
https://github.com/mrdoob/stats.js

<script src='resource/js/three.min.js'></script>
// Stats.jsを読み込む
<script src='resource/js/Stats.js'></script>
.
.
.
<script>
    var camera, scene, renderer;
    // FPS表示を格納する変数
    var stats;
        .
        .
        .
        document.body.appendChild(renderer.domElement);

        // set stats
        // 左上に表示するようCSSを記述してbody直下に表示
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        stats.domElement.style.zIndex = 100;
        document.body.appendChild(stats.domElement);
        .
        .
        .
        renderer.render(scene, camera);

        // レンダリングするたびにFPSを計測
        stats.update();
    }
</script>

ブラウザで確認すると以下のようになります。
http://bossato.github.com/sample/three/


今回は触りだけですが、APIが豊富で3Dモデルのインポートも出来るようなので、
何か作ってみたいですねー。