A-Frameを使ってみたい８　テクスチャ１　3D/AR30

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

　アセットのテクスチャが使えるようになったのでチュートリアルビデオに戻る

　ここから再スタート

（画像内の円の記述はボックスの間違いです）

<body> 
    <a-scene>
<!-- 水色のボックス -->
     <a-box color="#87CEFA"
            width="4" height="4" depth="4"
            position="-2 1.5 -9">
     </a-box>
<!-- 茶色のボックス -->
     <a-box color="#A0522D"
            width="4" height="4" depth="4"
            position="2 1.5 -9">
     </a-box>
    </a-scene>
  </body>

　１. 画像のURLを用いてHTMLの属性で記述する方法

水色のボックスにサーチ属性（src=””）を追加。

フォルダ/画像名でテクスチャが反映された。

しかしこのままでは、colorで指定している水色が、テクスチャと混ざってしまっているので、colorをデフォルトの白色（color=”#FFFFFF”）に戻す。color 属性の削除でも可。

テクスチャを適応できれば、repeat属性を使って、XやY軸方向にテクスチャを繰り返し表示することができる。デフォルトは両軸とも１。

X軸に２を適応させると（repeat=”2 1″）、テクスチャは以下のようにX軸方向に２回繰り返される。

<body> 
    <a-scene>
<!-- 水色のボックス -->
     <a-box color="#FFFFFF"
            src="Textures/Metal_albedo.jpg"
            repeat="2 1"
            width="4" height="4" depth="4"
            position="-2 1.5 -9">
     </a-box>
<!-- 茶色のボックス -->
     <a-box color="#A0522D"
            width="4" height="4" depth="4"
            position="2 1.5 -9">
     </a-box>
    </a-scene>
  </body>

今回は、テクスチャのリピートは必要ないので、ここでは repeat=”1 1″ に戻して次へ。

アトリビュート/属性：ソフトウェアやデータ管理などの文脈では “property”(プロパティ)も「属性」と訳される場合があり、アトリビュートとほとんど同義のように用いられるが、HTMLのDOM操作のように両者に別々に意味が与えられて併用される場合もある。HTMLやXMLなどのマークアップ言語では、要素の持つ付加的な情報をタグの中に埋め込んだものをアトリビュートという。これをJavaScriptのオブジェクトの属性として表したものをプロパティという。
抜粋：アトリビュート 【attribute】 attr / 属性

　ノーマルマップで奥行きがあるような錯覚を作り出す

今の状態では、キューブの表面が平らなため、テクスチャが平坦になりすぎている。しかし、細部を再現するために、仮にポリゴン数の多いキューブを使用すると、ファイルサイズが大きくなり、メモリを大量に消費してしまう。

そこで、3Dアーティストがゲーム用のアセットを作るのと同じように、ノーマル（法線）マップを使って奥行き感のある表現を作り出すことができる。

参考：
法線マップについての基礎知識まとめ
シェーダ編　その５ 0から学ぶ法線マップ
テクスチャマップの理解
バンプマップとノーマルマップを理解する

　ノーマル（法線）マップとは

ノーマルマップとは、3次元空間のXYZ軸に直接対応するRGB情報を用いて、3Dアプリケーションに、ポリゴンの陰影の付け方を指示する画像のこと。

ノーマルマップ（RGB（赤、緑、青）の情報）とはどのようなものか、また、立方体に適用した結果、どのようになるかを下記のリンクで確認することができる。

Gamedev Glossary: What Is a “Normal Map”?

このサイトの内容に関連して色々試したいことがあるので、ノーマルマップについては、別の機会に改めてもう少し掘り下げていこううと思います。

　２. A-Frameのアセット管理システムを使う方法

ボックスにノーマルマップ属性を追加してみる。しかし今回は、画像テクスチャの時のように画像のURLを使ったHTMLの属性ではなく、A-frameのアセット管理システムを使用する。

画像や動画、モデルをシーン内でレンダリングする必要がある場合、その名前が示すように、アセットをプリロードしてキャッシュすることで、より良いパフォーマンスを得ることができる。

そのために、a-assets要素をシーンに追加し、a-assets内にテクスチャ画像をimgで定義する。HTML idを与え、GlitchのAssetsフォルダに保存してあるノーマルマップ画像のURLを、srcアトリビュートに割り当てる。この場合、A-frameはレンダリングの前にすべてのアセットを取得するようにする。

DOMセレクタ形式で、id（metal-NRM）を使ってノーマルマップを参照できるようになる。

はずが・・・色が濃くなっただけのような？　　　あ！

a-assets内に書いたsrcのスペルミスでした。。無事に反映しました。
これ以前も、これ以降も、全然見た目が変わらないな〜と思った時の、大半の原因は、初心者にありがちなスペルやコードの記述ミス。。

<body> 
    <a-scene>
<!-- アセットマネジメントシステム -->
    <a-assets>
        <img id="metal-NRM" src="Textures/Metal_normal.jpg">
    </a-assets>

<!-- 水色のボックス -->
     <a-box color="#FFFFFF"
            src="Textures/Metal_albedo.jpg"
            repeat="1 1"
            normal-map="#metal-NRM"
            width="4" height="4" depth="4"
            position="-2 1.5 -9">
     </a-box>
<!-- 茶色のボックス -->
     <a-box color="#A0522D"
            width="4" height="4" depth="4"
            position="2 1.5 -9">
     </a-box>
    </a-scene>
  </body>

DOM(Document Object Model)について：ドキュメント(ブラウザーではDOMとして表現されます)はウィンドウに実際に読み込まれているページのことで、JavaScript では Document オブジェクトで表わされます。
抜粋：ドキュメントの操作

セレクタ：HTML文書内部の要素を、階層構造やclass（クラス）や属性、順番などの条件で取得するためのクエリのこと。旧来からCSSでは利用されている記法だ。
抜粋：DOM操作の主流になるか！？ セレクタAPIを使いこなそう

クエリ ：一般的には、情報の検索や抽出を行うために、含まれるキーワードやフレーズ、探索対象や範囲、対象期間などを組み合わせて検索条件を書き記した文字列を指す。
抜粋：クエリ【query】

参考：
フェッチとは
JavaScript初心者でもすぐわかる！DOMとは何か？

　ノーマルマップの繰り返し

ノーマルマップの繰り返しには、normal-texture-repeat属性を使用する。ボックスの画像テクスチャをデフォルト（repeat=”1 1″）に設定しているので、normal-texture-repeat属性も、x、y軸ともにデフォルト値のままにしている。

いくつか試して、repeat="1 1"にした時に、normal-texture-repeatを"1 1"と"1 2"にしてみたけど、効果の違いがいまいち良く分からず。

repeat=”1 1″ normal-texture-repeat=”1 1″

repeat=”1 1″ normal-texture-repeat=”1 2″

ただ、テクスチャの繰り返しを増やしてrepeat="1 2"や"1 3"にしてみたら、normal-texture-repeat="1 1"の適応範囲の違いが見えてきた。

repeat=”1 2″ normal-texture-repeat=”1 1″

repeat=”1 3″ normal-texture-repeat=”1 1″

　ノーマルマップの向き

そして、normal-scale属性（デフォルトはnotmal-scale=”1 1″）を追加。これはx、y方向に対してノーマルマップの効果を変更することができる。

     <a-box color="#FFFFFF"
            src="Textures/Metal_albedo.jpg"
            repeat="1 1"
            normal-map="#metal-NRM"
            normal-texture-repeat="1 1"
            normal-scale="1 1"
            width="4" height="4" depth="4"
            position="-2 1.5 -9">
     </a-box>

解説動画では、ボックスに近づいて影の向きをよく見てみると、光源がボックスの下に配置されているように見える（notmal-scale=”1 1″）ため、notmal-scaleのY軸を負の値に設定（notmal-scale=”1 -1″）し、箱の上から光が当たっているような見た目になるようにしている。

というより、凹凸が逆になる感じ？ 面白い。

ところで、自分がダウンロードしたノーマルマップの方は、notmal-scale="1 1"の設定が、動画で解説しているnotmal-scale="1 -1"の設定の状態と思われるので、動画ではこの向きの解説するために教材画像を使用しているのだろうとの勝手な判断で、このブログではnotmal-scale="1 1"で進めます。

Image Textures And Materials (A-Frame Tutorial - WebVR)
動画 5:45

　マテリアルの粗さを指定

マテリアルが反射光をどのように集めているかを見てとることができ、roughnessアトリビュート（デフォルトは 0.5）で制御できる。例えば、値を 0.3 に下げるとマテリアルは滑らかに見え、逆に 0.7 にするとより粗く見える。

ここまで、テクスチャに馴染ませる色、metalイメージテクスチャ、奥行きのディテールを表現するノーマルマップ、反射光の散乱を制御するラフネスなど、HTML属性で様々な外観を与えてきた。

こうすることで、実際にA-Frameのマテリアルコンポーネントの一連のプロパティを定義している。

A-Frameのサイト内リンクメモ
<a-box＞のアトリビュート v1.2.0
v1.2.0 > COMPONENTS > material > Build-in Materials > standard > Properties
normalMap：複雑なディテールを追加するために使用される。インラインURLまたは<img>へのセレクタを使用。
normalScale：ノーマルマップのX、Y軸方向の効果の大きさ。
normalTextureRepeat：ノーマルテクスチャがX、Y方向に何回繰り返されるか。
repeat：srcで定義したテクスチャがX、Y方向に何回繰り返されるかを指定。
roughness：マテリアルの粗さを0〜1で指定する。デフォルトは0.5。粗い素材は、滑らかな素材よりも多くの方向に反射光を散乱させる。

次回はまた少し違う方法で茶色のボックスの外観を変えていきます。