WebGLをはじめる

IE11がWebGLをサポートしたので

少し興味が出てきたのでドキュメントを覗くと、もうすでにプログラマブルシェーダーもサポートしていたのに驚き、ちょっといじってみることにした。

まずは開発環境作り

開発環境であるがまずはブラウザはChromeをベースとし、ライブラリはjQuery,Three.jsを使う。three.jsはWebGLを楽に取り扱えるようにするヘルパーライブラリである。編集するツールとしてはVS2013 Preview For Webを使うことにした。jQueryのインテリセンスも効くしね。

表示してみる

開発環境も整えたので、このチュートリアル記事を参考に作ってみたのが下のものである。Startを押すと地球と飛行機を描画する。

iframeで表示してわかったけど、IE11はseamless属性をサポートしてないのね。。

飛行機モデルはBlenderからthree.js付属のエクスポーターで出力し、表示している。なのでモデルデータも簡単に表示できる。チュートリアル記事と違う点はメッシュデータの読み込みのところ。

var myship_mesh;
var loader = new THREE.JSONLoader();
loader.load("./data/myship.js",createScene,"./data/");
function createScene(geometry,materials) {
   for (var i = 0; i < materials.length; i++) {
       materials[i].shading = THREE.SmoothShading;
   };
   var material = new THREE.MeshFaceMaterial(materials);

   myship_mesh = new THREE.Mesh(geometry, material);
   myship_mesh.scale.x = myship_mesh.scale.y = myship_mesh.scale.z = 0.5;
   scene.add(myship_mesh);
}

BlenderのモデルデータはJSONデータでエクスポートできるのだけれども、そのコールバックが2つの引数になっているところが違う点。1つ目にジオメトリ、2つ目にマテリアルの配列を引数としてコールバックされる。マテリアルの配列のほうはMeshFaceMaterialオブジェクトに引数で渡してマテリアルオブジェクトを作成する。それをメッシュを作成するためのマテリアルとして指定するとうまく表示できる。