GOMLの基本文書構造
GOMLは本質的にはXMLファイルなので、1行目に必ず以下のXML宣言が必要です。
<?xml version="1.0" encoding="UTF-8"?>
ルート要素は「goml」です。その直下にはHTMLと同じく「head」と「body」のみ配置します。
- head要素:素材となるデータを保持するタグを記述します
- body要素:描画したい3Dオブジェクトを記述します
今回の記事では、このbody要素内のタグの記述を解説していきます。次回はhead要素について解説しますので、そこでGOMLファイルが完成します。
基本的なタグの書き方はHTMLと同様ですが、XMLファイルの性質上「すべてのタグを正確に閉じる」ことが必要です。シングルタグでも「/」を忘れると描画されません。
逆に、どんな要素でも子要素がない場合、シングルタグとして記述できるメリットもあります。また、すべての要素にid属性とclass属性を指定できます。
①<camera><obj /></camera> ②<camera></camera> ③<camera />
<scene><camera></scene>(カメラの閉じタグがない)
<?xml version="1.0" encoding="UTF-8"?>
<goml>
<head>
<!--次回の記事で解説します。-->
</head>
<body>
<!--次の章から解説します-->
</body>
</goml>
body要素の記述
特に決まりはありませんが、body要素⇒head要素の順で記述する内容を決めていくと、コーディングしやすいと思います。
body要素で画面内に何をどこに配置するかを決めた後に、head要素で形や色を決めていく方が思考の流れとして自然だからです。
画用紙に大まかなレイアウトを決めてからディティールを書き込んでいくような流れに似ています。
この記事でも、まずはその流れでbody要素の記述方法から解説します。
body要素の直下には、scene要素のみをいくつでも記述できます。
scene要素は「今日の名シーン」と同じ意味のシーンを表しています。いくつも用意して描画するシーンを切り替えることが可能な仕様ですが、大抵は1つだけしか使いません。
scene要素自体は描画されませんが、描画したい3Dオブジェクトを自由な親子構造で配置できます。
次の章から、個別の3Dオブジェクトタグを解説していきます。
<?xml version="1.0" encoding="UTF-8"?>
<goml>
<head>
<!--次回の記事で解説します。-->
</head>
<body>
<scene>
<!--次の章から解説します-->
</scene>
<!--必要ならscene要素を複数配置できる-->
</body>
</goml>
物体オブジェクトを表すmesh要素の記述
mesh要素で、平面と立体形状の物体を描画できます。
具体的にどんな形であるかは記述せず、形状を表すgmt要素のCSSセレクタのみをgmt属性に必ず指定します。さらに色・画像・材質などの情報を持つmtr要素のCSSセレクタをmtr属性に指定することもできます(省略するとランダムカラーになります)。
gmt(Geometry)要素とmtr(Material)要素の解説は次回行いますので、今回は「一般的なオブジェクトはmeshだ」ということだけ覚えてください。
<mesh gmt=”#Geometry” mtr=”#Material” />
点オブジェクトを表すsprite要素の記述
sprite要素で1個の点を描画できます。mesh要素との違いは「どのアングルから見ても同じ見え方をする」ことです。太陽を描画したいときなどに、立体オブジェクトを使うより手軽に作れるメリットがあります。
「点」自体が形状なのでgmt属性はありません。mtr属性はmesh要素と同じように指定できます。
<sprite mtr=”#SpriteMtr” />
マーカー・グループ化に使えるobj要素の記述
obj要素はHTMLのdiv要素のように特別な意味を持たず、さらにそれ自身は描画されません。空間内に見えないマーカーを置いたり、複数の要素をグループ化する場合に使います。
gmt,mtr属性共に使いませんが、後述するstyle属性は有効です。
<obj>
<mesh gmt=”#Geometry” mtr=”#Material” />
<mesh gmt=”#Geometry” mtr=”#Material”>
<sprite mtr=”#SpriteMtr” />
</mesh>
</obj>
<obj id=”marker”/>
カメラオブジェクトを表すcamera要素の記述
camera要素は、シーンを撮影するカメラを表し、これ自身は描画されないものの3Dオブジェクトの一つとして扱います。
CSSでどんなアングルから撮影するかを指定できます。デフォルトで遠近感を表現できる透視投影カメラが設定されています。また、type属性に”Ort”を指定すると、平行投影カメラの設定が可能です。
1つのシーン内に複数のカメラを設置できます。各タイミングでどのカメラによって撮影するかは次回の記事で解説するrdr(renderer)要素で管理します。
<camra /> <camera type=”Ort” />
ライトオブジェクトを表すlight要素の記述
light要素はシーンを照らすライトを表し、カメラと同様これ自身は描画されないものの3Dオブジェクトの一つとして扱います。
lightには複数の種類がありtype属性での指定が必要です。
環境光) <light type=”Amb” /> 平行光源・太陽光)<light type=”Dir” /> 天空光)<light type=”Hem” /> 点光源)<light type=”Poi” /> スポットライト)<light type=”Spo” /> エリアライト)<light type=”Are” />
