Miyabiarts.net

一年に一度の更新頻度

カテゴリーアーカイブ: WebGL

GLGE入門

最近WebGLが流行りだし、Webブラウザで3Dモデルを表示することができるようになりました。
表示を簡単にするライブラリがいくつか出ていますが、GLGEを試してみました。

ダウンロード&インストール

GLGEからGLGEv0.8.zip(2011/2/15現在)をダウンロードします。
この圧縮ファイルを展開したら、中にはドキュメントやサンプルが入っていますが、当面必要なのは、トップ階層にあるglge-compiled-min.jsだけです。
このファイルに対してパスを通すなり、使う場所にコピーするなりしてください。

サンプル

赤色の平面を表示するだけのサンプルです。

ファイル構成は以下のようになります。

[cc width=”650″ lines=”100″]
– index.html HTMLページ
– glge-compiled-min.js GLGEスクリプト
– scene.xml シーン定義XML
[/cc]

scene.xmlで表示するシーンを定義してやり、それをindex.html内のスクリプトで呼び出しています。
それぞれのファイルの中身を以下に示します。

index.html

[cc lang=”html” width=”650″ lines=”100″]

GLGE

var canvas = document.getElementById( ‘canvas’ )
var renderer = new GLGE.Renderer( canvas );

var doc = new GLGE.Document();

doc.onLoad = function()
{
var scene = doc.getElement( “mainscene” );
renderer.setScene( scene );
renderer.render();

setInterval( function(){ renderer.render();}, 15 ); }
doc.load(“scene.xml”);

[/cc]

scene.xml

[cc lang=”html” width=”650″ lines=”100″]

-100.0,0.0,-100.0,
100.0,0.0,-100.0,
100.0,0.0, 100.0,
-100.0,0.0, 100.0

0,1,2,
0,2,3

[/cc]