オリジナルポストカードは”こちら”で好評発売中!

A-Frameを使ってみたい10 画像1 3D/AR32

参考ビデオ:Image And Curved-Image Primitives (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めています。詳しくはリンク先をご覧ください。


テクスチャの回では、シーン内の3Dオブジェクトにテクスチャを加えたり、materialコンポーネントのプロパティを変えてみました。また、より良いパフォーマンスのために、A-Frameのアセットマネジメントシステムを使って、アセットをロードしキャッシュする方法も試してきました。

この回では、a-image(画像)や、a-curvedimage(曲面画像)プリミティブを扱っていきます。

 アセットマネジメントシステムに画像をアップロード

シーンに配置するプリミティブの外観と比較しやすくするため、使用する画像は全て同じ1024*768ピクセル画像。HTML ID を持つアセットとして準備しておく。

ここでは、A-Frameを使ってみたい7 テクスチャのアップロードで試した方法で、画像(image.zip)をアップロードしています。Udemyのコースを購入したので、画像はそこからダウンロードしたものに、自分のイラストも大きさを揃えて(1024*768ピクセル画像)紛れ込ませました。

(この画像の回ではTextures.zipは必要ありません)

展開し、無事にアップロード完了。画像の名前を短くしておけばよかったとあげてしまってから思う。IDは動画のものより短くしました。
<!-- A-Frameのアセットマネジメントシステム -->
    <a-assets>
     <img id="img-01" src="images/L09-img-1024x768-flat.jpg">
     <img id="img-02" src="images/L09-img-1024x768-curved.jpg">
    </a-assets>

 先ずはa-imageプリミティブ

カスタムシーンで使用できるa-imageプリミティブは、平面上に画像を表示するために使用する。

<a-image> プリミティブを追加し、DOMセレクタ形式でIDを使って画像を参照、potisionコンポーネント(position=”0 1.5 -3″)を追加する。

なぜ画像が歪む?と思ったら、なるほど、デフォルト値がheight、width共に1メートルでした。
1.2.0 › PRIMITIVES > <a-image>

 widthとheightの調整とscaleコンポーネント

ここで、画像が歪まないように、widthやheightを調整していく必要がある。

ピクセルは、ミリメートル単位で考えるのが正しく、例えば、幅を1.024メートル、高さを0.768メートルとすれば、正しい比率の画像が出来上がる。正しい比率にしてからscaleコンポーネントを使用することで、画像を歪ませることなく変形させることができる。

では、ある決まった値の幅、例えば、画像の幅を3メートルにしたい場合は、widthやheightにどのような値を与えればよいか。また、後で変更したくなった場合はどうすれば良いか。

a-imageやa-curvedimageプリミティブをシーンで使用する場合、何らかの計算を行う必要がある。

ミリメートル単位で考えるのが、単位が一番近いということかな?

1ピクセルは何mm?:1ピクセルが何mmかは解像度によって違うよ。通常パソコンの解像度は72dpiで表示されるから、1インチ(2.54センチ)に72個のドット(ピクセル)があるということになり、1ピクセルが何mmかを求めるなら、計算式は次のようになる。2.54cm÷72=0.035cm=0.35mm
抜粋:
カメラ知識(1) > 1ピクセルは何mm?

 ピクセルとメートル

画像の幅(ピクセル)を、1メートルに換算する必要がある。

つまりは、幅を1mとした場合の画像の高さを、ピクセルの値から求めるということですかね。。。

 a-imageプリミティブの計算 縦横比

widthとheight属性を追加し、1メートルにしておく。これは、a-imageプリミティブのデフォルトの値でもある。

widthが1の時のheightの値を求めるには、下記の数式を使用する。

画像の高さ(m) =画像の幅(m) / 画像の幅(px) * 画像の高さ(px)

  1. 画像の幅(m) / 画像の幅(px):1メートルが1024個のピクセルで構成されているので、まず1pxの大きさを求めるために、1メートルを1024個で割る。
  2. * 画像の高さ(px):次に、その1pxの大きさに、画像の高さの画素数(768px)を掛ける。

計算すると画像の高さ(m)は、0.75メートル。

画像の高さ(m) =画像の幅(m) / 画像の幅(px) * 画像の高さ(px)
割り算を先にするから()はいらないのかしら?

 a-imageプリミティブの計算 スケール

ミリメートル数とピクセル数を一致させたい場合は、scaleコンポーネントを使用して、X軸とY軸の両方の値を1.024メートルに設定する。

画像の幅を基準(1m)にして、高さの値を出し、widthとheightで縦横比を保った状態にしておいて、実際の大きさはscaleで調整するということですか。

仮に、画像の幅を3mにしたい場合も問題なく変更できる。


次回は、a-curvedimageプリミティブを扱います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です