SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQueryの記法でWebGLを操作できるライブラリ「jThree」の活用

jQuery+three.jsを実現したWebGLライブラリ「jThree」の「GOMLファイル」使い方(body編)

jQueryの記法でWebGLを操作できるライブラリ「jThree」の活用 第2回

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>(カメラの閉じタグがない)
GOMLサンプル
<?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オブジェクトタグを解説していきます。

GOMLサンプル
<?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要素の記述例:
<mesh gmt=”#Geometry” mtr=”#Material” />

点オブジェクトを表すsprite要素の記述

 sprite要素で1個の点を描画できます。mesh要素との違いは「どのアングルから見ても同じ見え方をする」ことです。太陽を描画したいときなどに、立体オブジェクトを使うより手軽に作れるメリットがあります。

 「点」自体が形状なのでgmt属性はありません。mtr属性はmesh要素と同じように指定できます。

sprite要素の記述例:
<sprite mtr=”#SpriteMtr” />

マーカー・グループ化に使えるobj要素の記述

 obj要素はHTMLのdiv要素のように特別な意味を持たず、さらにそれ自身は描画されません。空間内に見えないマーカーを置いたり、複数の要素をグループ化する場合に使います。

 gmt,mtr属性共に使いませんが、後述するstyle属性は有効です。

obj要素の記述例:
<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)要素で管理します。

camera要素の記述例:
<camra />
<camera type=”Ort” />

ライトオブジェクトを表すlight要素の記述

 light要素はシーンを照らすライトを表し、カメラと同様これ自身は描画されないものの3Dオブジェクトの一つとして扱います。

 lightには複数の種類がありtype属性での指定が必要です。

light要素の記述例:
環境光) <light type=”Amb” />
平行光源・太陽光)<light type=”Dir” />
天空光)<light type=”Hem” />
点光源)<light type=”Poi” />
スポットライト)<light type=”Spo” />
エリアライト)<light type=”Are” />

次のページ
CSSプロパティの一覧

この記事は参考になりましたか?

jQueryの記法でWebGLを操作できるライブラリ「jThree」の活用連載記事一覧

もっと読む

この記事の著者

松田 光秀(jThree合同会社)(マツダ ミツヒデ)

jQueryの記法で操作できるWebGLライブラリ「jThree」の開発者でjThree合同会社の代表。JavaScriptのスキルのみで平成26年2月に1人で起業する。平成元年生まれの24歳で現役高校生(平成26年5月時点)。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/7785 2014/06/11 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー