投稿者 tel | 2011年11月19日

WebGLでトーラスを表示する

プログラム中で頂点とインデックスを生成してWebGLでトーラスを表示してみる。

法線の生成は頂点座標からトーラスのチューブの中心座標を引いたものになる。nは分割数。

function createTorus(n) {
    var vertices = [],
        indices = [],
        normals = [],
        s = 3.0,
        t = 1.0;

    for(var i = 0; i <=n; i++) {
        var ph = Math.PI * 2.0 * i / n,
            r = Math.cos(ph) * t,
            y = Math.sin(ph) * t;

        for(var j = 0; j <= n; i++) {
            var th = 2.0 * Math.PI * j / n,
                x = Math.cos(th) * (s + r),
                z = Math.sin(th) * (s + r);
            // 座標
            vertices.push(x, y, z);
            // 法線
            normals.push(r * Math.cos(th), y, r * Math.sin(th));
        }
    }

    for(i = 0; i < n; i++) {
        for(j = 0; j < n; j++) {
            var count = (n + 1) * j + i;
            indices.push(count, count + n + 2, count + 1);
            indices.push(count, count + n + 1, count + n + 2);
        }
    }
    return {size: indices.length, v: vertices, i: indices, n: normals};
}

適当にフラグメントシェーダを適用して表示してみた。

トーラス

WebGLに対応したブラウザ、環境なら下のURLから実際に見れます

http://jsdo.it/sapphire_al2o3/zeCQ


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。