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

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

材質を表すmtr要素の記述

　mtr要素は3Dオブジェクト表面の材質データを保持します。

　type属性によって材質の種類を指定し、param属性でディティールを設定します。複数の3Dオブジェクト要素からmtr属性で参照できます。

　まずはtype属性の種類について紹介します。

type属性の値	質感と解説
MeshBasic	単純な着色のみ。陰影は付きません。
MeshLambert	ゴムのような質感。陰影が付きます。
MeshPhong	ツヤのある質感。陰影が付きます。
Sprit	Sprite（点）要素用マテリアル。

　次にparam属性の主要なプロパティを紹介します。style属性のように、param=”プロパティ名:値; …”と記述します。

プロパティ名	値
color	物体の基本色のカラーコードまたは数値
ambient	環境光反射色のカラーコードまたは数値
specular	鏡面反射光のカラーコードまたは数値
shininess	鏡面反射光の強さ（数値）
map	txrタグ（テクスチャ要素）のCSSセレクタ
bumpScale	mapテクスチャの凹凸の深さ（数値）
wireframe	面の境界線を表示するか否か（boolean）
blending	1:アルファブレンディング、2:加算合成、3:減算合成、4:乗算合成
size	spriteの大きさ
side	0:表面のみ描画、1:裏面のみ描画、2:両面を描画

mtr要素の記述例：

<mtr type="MeshPhong" param="side:1;ambient: #fff; map:#blueSky;"/>

mtr要素用のテクスチャを取得するtxr要素の記述

　txr要素はテクスチャ（画像）情報を保持し、mtr要素のmapプロパティなどから参照されます。

　まず、type属性によって異なるテクスチャの種類と有効な属性を紹介します。

type 属性の値	解説	属性
なし	同一ドメインの画像 （ブラウザ標準の他TGA形式も可）を取得できます。	src=”画像のURL” onLoad=”画像取得が完了したら実行する式”
canvas	canvasコンテキストを利用して テクスチャを生成できます。	draw=”コンテキストを操作する式。 変数aにcanvasコンテキストが渡されます”
scene	任意のカメラから見たリアルタイムの 描画結果をテクスチャにできます。	camera=”カメラ要素のCSSセレクタ （デフォルトはcamera:last） ”invisible=”テクスチャに描画したくない 3Dオブジェクト要素のCSSセレクタ”

　次に、param属性の主要なプロパティを紹介します。style属性のように、param=”プロパティ名:値; …”と記述します。

プロパティ名	値
width	テクスチャの横幅を指定します。type=”scene”では2の累乗数のみ指定できます。
height	テクスチャの高さを指定します。type=”scene”では2の累乗数のみ指定できます。
repeat	テクスチャの繰り返し回数を指定します。
wrap	0:同一方向でテクスチャを繰り返す 1:繰り返さず面に合わせてテクスチャを伸縮させる 2:テクスチャを1回ごとに反転させながら繰り返す

txr要素の記述例：

<txr src="test.png" onLoad=”alert( ‘ 画像のロード完了！’ );” />

画面への描画をコントロールするrdr要素の記述

　rdr要素は、どのカメラでどのHTML要素内に描画するのかを設定できます。

　カメラ要素をcamera属性にCSSセレクタで指定します（デフォルトは”camera:first”）。WebGLを設置したいHTML要素を、frame属性にCSSセレクタで指定します（デフォルトは”body”）。

　以下で主要なparam属性のプロパティを紹介します。style属性のように、param=”プロパティ名:値; …”と記述します。

プロパティ名	値	デフォルト値
antialias	アンチエイリアス処理を行うかどうか	false
clearColor	WebGLの背景色のカラーコードあるいは値	0x000000
clearAlpha	WebGLの背景色の不透明度（1が100%）	1

rdr要素の記述例：

<rdr frame=”div:first” camera=”#cam” param=”antialias: true;” />