アニメーションテクスチャ

#VRML V1.0 ascii

	Separator {
		DEF BackgroundImage Info{
			string "star.gif"
		}

		Texture2 {
       			filename    "gon_ani.gif"
		}

		SpinGroup {
			rotation 1 0 0 .05
			local FALSE
			SpinGroup {
				rotation 0 1 1 -0.1
				local TRUE
				DEF cube Separator {
					Translation {  translation 0 0 10  }
					Cube {
						width   10
						height  10
						depth   10
					}
				}
			}
		}
		Separator {
			Texture2Transform {
				translation  0 0
				rotation     0.5
				scaleFactor  8 4
				center       0 0
			} 
			Texture2 { filename "star_ani.gif" }
			SpinGroup {
				rotation 0 1 0 -0.01
				local TRUE
				Transform {
					translation       0 0 0
					rotation          0 0 1  -0.2
					scaleFactor       1.5 1 0.5
					scaleOrientation  0 0 0  0
					center            0 0 0
				}
				Sphere { radius 4 }
			}
		}
	}

string "file名"

と指定するだけです。指定できるイメージはgifとbmpの２種類です。もしかしたらブラウザによってはjpgやその他のフォーマットもサポートしているかもしれません。
サンプルで使用しているのは上の星空のgifファイルです。
ここにファイルとして夕焼けとか街とかいったイメージを使えば、いい感じの世界も作れると思います。ただし、背景へイメージファイルを貼り付ける場合、自動的に格子状に張り付くので、サンプルのように格子状に張り付けられても気にならないものは問題ありません。しかし、街などの写真を背景にする場合には、イメージのサイズとHTMLのembedタグで指定する領域のサイズ、そして、オブジェクトのサイズにも気を使わないといけません。
メインページの｢VRMLで遊ぼう｣のタイトルには空の背景を使っています。

Transform { }
Transform nodeはオブジェクトを変形させるnodeです。オブジェクトを伸縮させることができます。したがって、球を縦長にしたり、薄っぺらにしたり、立方体をひしゃげさせたりと色んな変形が可能です。
このサンプルでは球の形を変形させています。オブジェクトに透過(透明)色を使っているので形は見づらいでしょうが、中心にあるのが変形した球なのです。
指定できるパラメータは以下の５つ。

translation	0 0 0	<--- 通常のtranslationと同じ機能
rotation	0 0 0 0	<---オブジェクトの傾き現す。最初の３つがx、y、z、
		それれの軸を現し、最後の一桁が角度を現します。
scaleFactor	1.5 1 0.5	<---x、y、z、それぞれの方向へのサイズ指定
scaleOrientation	0 0 0 0	<---図形の傾きを現す。表記方法は上記のrotationと同じです。
center	0 0 0	<--- オブジェクトの中心の座標を設定する。

translationは１つ目のサンプルで説明しました。

scaleFactorはしごく単純にオブジェクトをx、y、ｚそれぞれの方向にどれだけ拡大縮小するかということです。このサンプルでは"1.5 1 0.5"という値を設定していますが、これはx軸に(左右の長さ)を1.5拡大し、y軸(高さ)を変更せず、そしてz軸に(奥行き)を半分にしているわけです。

scaleOrientationで図形をひしゃげさせることができます。rotationでは図形を傾けることができますが、このパラメータでは、ひし形を作ることができます。
ただ、ひしゃげる度合いはscaleFactorと連動します。たとえば、

Transform {
	scaleFactor       1 1 1 
	scaleOrientation  1 0 0 0.76
}
Cube { }

Transform {
	scaleFactor       1 2 1 
	scaleOrientation  1 0 0 0.76
}
Cube { }

Transform {
	scaleFactor       2 2 2 
	scaleOrientation  1 0 0 0.76
}
Cube { }

centerパラメータですが、これはtranslationと同じにオブジェクトの位置を移動させる機能を持ちます。指定方法はおなじみのx、y、zの値です。ただし、他のパラメータの値が設定されてない場合は機能しません。また、値はマイナスになります。つまり、3と指定した場合には負の方向に3動くということです。
まぁ、このパラメータは省略してもかまわないでしょう。

Texture2Transform { }
Texture2Transform nodeはTextureの変形します。指定できるパラメータはTransformと同じです。しかしながら、２次元なのでパラメータの因数は2つになります。

translation	0 0	<--- オブジェクトまたは面のどの位置をテクスチャの右上にするか
rotation	0.5	<---テクスチャはどれくらい傾けるかをラジアン角度(57.2958)で指定。
scaleFactor	8 4	<--- テクスチャを格子状に張るときの縦横の数。
center	0 0	<---テクスチャの位置指定。

テクスチャ関連の説明をします。

アニメーションテクスチャ LIVE3DやInternet ExplorerのVRML plug-inではアニメーションテクスチャというものがサポートされています。これは通常のgifアニメーションのように複数のイメージを繰り返し、表示することにより実現されます。しかし、VRMLではアニメーションgifはサポートしません。それでも、これを実現するのはそれほど難しいことではありません。 左のような縦長のテクスチャを貼り付ければいいだけです。ただし、一つだけルールがあります。縦の長さが横の長さの整数倍になってなければなりません。言い換えると連続して表示させたい画像を正方形にして縦にならべて、それを一つのイメージにすればいいのです。 左の顔の絵は同じものを２回づつ使っています。なぜかというと歯が出ていない顔と歯がでている顔を一つづつ、合計２つの画像のアニメーションにすると、動きが速すぎて痙攣しているように見えたからです。このアニメーションテクスチャには一つの絵が表示されている時間の設定などがないのです。したがって、アニメーションテクスチャを作成する場合、多少細かな動きの連続にする方がスムースなアニメーションになるでしょう。 透過gif 左の赤と黄色の点があるイメージはご存知透過gifです。VRMLでは透過gifをサポートするのです。このサンプルでは真ん中に位置する楕円にこれを貼り付けています。しかも、アニメーションテクスチャになっています。立方体が楕円の後ろ側に回り込んだときにも、立方体は隠れずにちゃんと見えるはずです。これをアニメーションテクスチャにすると何かが流れたりする様を現すことができます。たとえば、大きな奥行きのない直方体を前後に二つ作ってそこに雪が降っているようなアニメーションgifを張り付ます。そして、二つの直方体の間に人のオブジェクトを置けば、雪の中に立つ人が描けます。また、アニメーションテクスチャは前述のTexture2Transformと一緒に使えるので、雪の大きさもコントロールできるわけです。

最後にSpinGroupの多重使用の簡単な解説を加えておきます。
今回のサンプルでは下のSpinGroupを使用してます。

  SpinGroup {
    rotation 1 0 0 .05
    local FALSE
    SpinGroup {
      rotation 0 1 1 -0.1
      local TRUE
      DEF cube Separator {
        Translation {  translation 0 0 10  }
        Cube {
          width   10
          height  10
          depth   10
        }
      }
    }
  }

このサンプルの解説はここまでです。

戻る

次のサンプルへ

メインページ