WEBGL.TNKER.COM

ちょこっと入門してみる!

基本となるテンプレートを用意したので、ちょっとコードを書いてみる。

作ったテンプレート使って準備してみる

作ったテンプレート用のリポジトリcloneして、準備してみる

$ git clone git@github.com:tnker/awayjs-simply-template.git ./001
$ cd 001
$ sudo npm install

で、準備完了!:)

新しくクラス作ってサンプル実装してみる

src配下に Template.ts(公式のExampleにあったBasic_View.tsを若干そぎ落としたもの)が既に入っていますが、手癖付けるためにも新しくクラスファイル作って実装してみます。

src配下に Sample001.ts を新たに作成

クラス名がアレですが、適当な名称でファイルを作成したら gulp で watch しておきましょう

$ gulp watch --file Sample001

あとは、bin配下のindex.html(新しくhtml作るでも良いかと)の読み込んでいるクラスのJSファイルを変更しておきましょう。

ということで作ってみる

今のところは動く物を表示出来れば良いので、ページ読み込み完了時に実装したクラスのconstructor実行するだけ。

とりあえず最終形のソースコードをぺたり。

// awayjs-core
import RequestAnimationFrame= require("awayjs-core/lib/utils/RequestAnimationFrame");
// awayjs-renderergl
import DefaultRenderer      = require('awayjs-renderergl/lib/DefaultRenderer');
// awayjs-display
import View                 = require('awayjs-display/lib/containers/View');
import Mesh                 = require("awayjs-display/lib/entities/Mesh");
import PrimitiveSpherePrefab= require("awayjs-display/lib/prefabs/PrimitiveSpherePrefab");
// awayjs-methodmaterials
import MethodMaterial       = require("awayjs-methodmaterials/lib/MethodMaterial");
import MethodRendererPool   = require("awayjs-methodmaterials/lib/pool/MethodRendererPool");

class Sample001
{
    private _view: View;

    private _material: MethodMaterial;

    private _prefab: PrimitiveSpherePrefab;

    private _mesh: Mesh;

    private _timer: RequestAnimationFrame;

    constructor()
    {
        // 土台生成
        this._view = new View(new DefaultRenderer(MethodRendererPool));
        // リサイズ時処理
        window.onresize = (e: UIEvent): void => this.onResize(e);
        // 初回サイズ設定
        this.onResize();
        // マテリアル生成
        this._material = new MethodMaterial(0xFF0000);
        // 形状生成
        this._prefab = new PrimitiveSpherePrefab(300);
        // メッシュ取得
        this._mesh = <Mesh> this._prefab.getNewObject();
        this._mesh.material = this._material;
        // ステージ上に追加
        this._view.scene.addChild(this._mesh);
        // アニメーション用の毎フレーム描画処理
        this._timer = new RequestAnimationFrame(this.onEnterFrame, this);
        this._timer.start();
    }

    private onEnterFrame(dt: number): void
    {
        this._mesh.rotationY += 1;
        this._view.render();
    }

    private onResize(event: UIEvent = null): void
    {
        this._view.x = 0;
        this._view.y = 0;
        this._view.width = window.innerWidth;
        this._view.height = window.innerHeight;
    }

}

window.onload = function()
{
    new Sample001();
}

細かい部分分かってないですが、分かってる範囲での補足を :(

土台(canvasが吐き出される?)を生成する。
土台の中に何か追加したい場合は、sceneプロパティにaddChildしてあげる。

addChildとか懐かしい・・・ ;(

constructor()
{
    // 土台生成
    this._view = new View(new DefaultRenderer(MethodRendererPool));
    ...
}

ブラウザのリサイズ時に、表示されている土台(canvas)も合わせてリサイズするようにブラウザのリサイズイベントに onReiszeメソッド をバインドする

constructor()
{
    ...
    // リサイズ時処理
    window.onresize = (e: UIEvent): void => this.onResize(e);
    // 初回サイズ設定
    this.onResize();
    ...
}

このメソッド自体は、ブラウザのサイズに合わせて土台のサイズを設定し直しているだけです。

private onResize(event: UIEvent = null): void
{
    this._view.x = 0;
    this._view.y = 0;
    this._view.width = window.innerWidth;
    this._view.height = window.innerHeight;
}

続いて、表示したいオブジェクトのマテリアル(スタイル情報のようなもの?)を生成してあげます。ここで引数にカラーコード(赤色)指定してあげてるので、最終的に表示されるオブジェクトが赤色になってくれます。

次に実際の3Dオブジェクトの形状を表すオブジェクト(今回は球体)を生成し、getNewObjectメソッド から実際の3Dオブジェクトのインスタンスを取得します。

この3Dオブジェクトに前もって生成しておいたマテリアルを設定してあげると、赤い球体が出来上がります。

constructor()
{
    ...
    // マテリアル生成
    this._material = new MethodMaterial(0xFF0000);
    // 形状生成
    this._prefab = new PrimitiveSpherePrefab(300);
    // メッシュ取得
    this._mesh = <Mesh> this._prefab.getNewObject();
    this._mesh.material = this._material;
    ...
}

あとは、最初の方で少し触れた土台のsceneプロパティに、先ほど生成した3Dオブジェクトの this._meshaddChildメソッド で追加してあげて、画面上に描画を行うための処理を追加してあげれば完了です。

RequestAnimationFrameに毎フレーム行いたいメソッドをバインドしてあげて、生成されたインスタンスの startメソッド を叩いてあげれば描画処理が開始します。

constructor()
{
    ...
    // ステージ上に追加
    this._view.scene.addChild(this._mesh);
    // アニメーション用の毎フレーム描画処理
    this._timer = new RequestAnimationFrame(this.onEnterFrame, this);
    this._timer.start();
}

土台上に3Dオブジェクトを追加しましたが、this._viewrenderメソッド を叩いてあげないと描画されないので、それも下記処理で行います。

ついでに、球体が回転するように毎フレームY座標を加算してます。

private onEnterFrame(dt: number): void
{
    this._mesh.rotationY += 1;
    this._view.render();
}

これを動かしてみると

http://webgl.tnker.com/upload/2015/03/04/index.html

こんな感じになります。

動いてるんですけど、SWFのフォールバックが動いてないですねぇ〜。
公式のサンプルも動いてないっぽいですけど、これはどうにかしたいなぁ。

Github

今回のソースコード
https://github.com/tnker/awayjs-simply-template/tree/001

参考サイト

HTML5の3D表現を身につけよう!簡単なJSではじめるWebGL版Away3D入門―第1回入門編
http://ics-web.jp/lab/archives/1129