GOMLを扱う

概要

Grimoire.jsでは扱う3D空間をXML記法を用いて宣言的に記述することが可能です。ここでは基本的な3D空間の描画に必要なタグを含んでいるgrimoirejs-fundamentalプラグインを用いて、GOMLの基本的に記述について学びましょう。基本的にはユーザーはこのgrimoirejs-fundamentalプラグインを用いてWeb3Dの表現を組み立てることになります。
grimoirejs-fundamentalプラグインはリファレンスを参照することで詳細を知ることができます。今回はこのプラグインの中から基本的な3D表現に必要なタグの使い方を学びます。

学べること

  • GOMLとは何か
  • GOMLタグの扱い方
  • GOMLタグの属性の扱い方
  • grimoire-fundamentalプラグインを用いたシーンの記述方法

以下に示すのが、基本的な3D表現を行うために必要な機能を記述したGOMLです。

GOMLはGrimoire Object Markup Languageの略であり、描画するキャンバス内の状態をXMLで記述するための言語です。Grimoire.jsが定義しています。これから上記のサンプルを例にGOMLのタグについて確認してみましょう。

<goml>タグは一番基本となるタグです。キャンバス自体の状態に関わります。widthやheight属性でキャンバスの大きさを指定できます。また、fullscreenにも対応しています。セレクタにも対応しており、

1
<goml containerId="main">

とすることでGOMLに対応するキャンバスを囲む<div>要素が取得されます。

<geometry>タグはジオメトリを定義します。name属性でジオメトリの識別子を設定し、それらを<mesh>タグのgeometry属性で指定することで、使うことができます。

1
<geometry name="cone" type="cone" divide="30" />
  • name属性 - 識別子
  • type属性 - ジオメトリの種類。cube, quad, triangle, sphere, cornなどがデフォルトで用意されています。
    その他にも各プリミティブ型ではそれに応じて、属性を持つことがあります。cone型ではdivide属性を持つことができます。これはメッシュの分割数を指定します。これはジオメトリの種類に依存した属性であり、各ジオメトリーに応じた属性を設定することが可能です。

<render>タグは描画に関するタグです。sceneを描写する際に必要です。基本的な3Dの空間を描画する際には、この<render>のタグは省略することが可能です。

1
2
3
<renderer camera=".camera" viewport="0,0,100%,100%">
  <render-scene/>
<renderer/>

シーンの全容は<scene>タグの以下に記述します。3Dのループの処理はこのタグの内部のノードに対して行われることになります。基本的に<scene>には<camera>が存在します。

1
<camera class="camera" near="0.01" far="40.0" aspect="1.5" fovy="45d" position="0,0,10" />

<camera>タグはカメラを配置します。<camera>タグにはnear,far,fovy,aspectの属性を設定できます。

これらはgrimoirejs-fundamentalプラグインを利用することにより、使用することができます。grimoirejs-fundamentalプラグインは多くのユーザーが利用することになるでしょう。

grimoirejs-fundamentalがサポートしているタグには他にも、

  • <mesh>
  • <render-quad>
  • <texture>

などがあります。

円錐を表示してみる

それでは実際にgrimoire-fundamentalで定められたタグを使用してみましょう。
円錐(cone)を表示するためにはジオメトリを<geometry>タグを用いて読み込む必要があります。ジオメトリの定義は<scene>の外に書きましょう。

1
<geometry name="cone" type="cone" divide="30" />

ジオメトリを読み込んだら実際に表示するために<mesh>タグが必要です。<geometry>タグにconeが指定して、下のようにタグを<scene>以下に追加してみましょう。

1
<mesh geometry="cone" position="1,1,0" color="#99f" />

テクスチャを表示してみる

次は画像をキャンバス内に表示してみます。下記のようにtexture属性に画像へのパスを指定することで、メッシュに画像を貼り付ける事ができます。

1
<mesh geometry="cube" position="0,0,0" texture="t02-01/img1.jpg" />

このようにGrimorire.jsを利用することにより、キャンバス内の3D表現を宣言的に記述できます。

次は読み込んだGOMLをJavaScriptから操作する方法を学びます。これによりGOMLで記述したタグやその属性を動的に変更することが可能になります。イベントハンドラを利用して、特定のタイミングで動作させることも可能です。

JavaScriptからGOMLを扱う

Edit this page on Github