奥会津只見 イラスト美術館 参考ビデオ：Image Textures And Materials (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めていますが、この回は、テクスチャのインストール以外はGlitchの仕様に関する内容なので、ビデオからは脱線しています。
テクスチャを3Dオブジェクトに追加し、マテリアルプロパティを使って調整していく。
（画像内の円の記述はボックスの間違いです）
<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>テクスチャは、textures.comからダウンロード。登録すると、1日15テクスチャまで無料で使用できる。
参考：
textures.com
取り敢えず、動画の説明にあるのと似た感じのmetalとbrickのスタンダードなテクスチャ（Albedo）とノーマルマップ（Normal）の画像をダウンロード。tiffだったので、jpegに変換。
物理ベースレンダリング（PBR（Physically-Based Rendering））では、Albedo、Metallic、Roughness、Normal あたりが重要みたい。textures.comには、それに加え、HeightとAmbient Occlusionというのもありました。 MetallicとRoughnessについては、動画では、HTMLのアトリビュートで調整していたので、コードで書くか、画像をダウンロードしてブレンドさせるか、どちらでも良いということなのかしら。 参考： リアルなCGの作りかた 一口に3DCGと言っても最近ではPBRが主力なのでマテリアルに関する知識が変わりつつあるみたいだよ 物理ベースレンダリング -基礎編-
Glitchのアセットセクションに、イメージをまとめてアップロードしたいのだけど、フォルダはグレーアウトしてアップロードできないみたい。
仕方がないので、先ず試しに1枚だけアップロードしてみる。
YouTubeビデオのA-Frameのチュートリアルは、Braketsを使っているのですが、Adobeが提供していたらしいコードエディタのBraketsは、今年2021年9月1日にサポート終了でVSCodeへの移行と推奨という記事が多くあって、ダウンロードのリンクも削除されている記事もあるけど、公式ページとされるサイトを見るとv2.0.1は普通にダウンロードできるみたいに思えるけど、供給を復活したということなのかな？ どうなんでしょう。 A-Frameをチュートリアルに合わせて試す程度なら、Braketsでも良さそうですが、ここまでGlitchでやってきたので、このブログではこのままGlitchで進めて行きます。
WebVR Starter Kit. Part 3: A-Frame Concepts 動画：1:11くらいから
動画で言っているequirectangularと言うのは、正距円筒図法というものらしい。 Upload an Assetからだと、1枚ずつしか出来なそうだけど、アセットセクションにドラッグする場合もフォルダ毎ではできない。
アップロード後、metalのalbedoの画像のURLをコピーして、動画にあるように<a-assets>の中にidと、サーチアトリビュート（src=）を作って<a-box>にリンクしてみる。Glitchの解説ビデオに、crossorigin=”anonymous”というのもサーチアトリビュートの後に書いてあったので、意味がよくわからないまま、取り敢えずそれも付け加えてみる。
テクスチャ現れず、真っ黒に。
Chromenoのコンソールで確認したら、a-assetsの書く場所を間違えていたらしく、a-sceneの中に配置し直す。
エラーメッセージを見る限り、コンテンツセキュリティポリシーというもの関連のことをやらないといけないみたい。これは理解に時間がかかりそう。。。 今後の参考： Refused to load the script because it violates the following Content Security Policy directive Content-Security-Policy コンテンツセキュリティポリシー (CSP) コンテンツ セキュリティ ポリシーが設定されているページでの Google タグ マネージャーの使用 コンテンツ セキュリティ ポリシー SNSボタンが表示されない＆GoogleAnalytics（GAタグ）が動かない時はContent-Security-Policyの設定を確認する Content Security Policy コンテンツセキュリティーポリシー 指定 【.htaccess】CSP(Content Security Policy)を設定する方法 CSP(コンテンツセキュリティポリシー)について調べてみた
cdn.glitch.meとかをリンク先に使わなければエラーは出ないのかな？ フォルダでまとめてアップロードできたら、cdn.glitch.meは使わなくてもよさそうな気がするので、コンテンツセキュリティーポリシーはひとまず保留にして、調べて何となく行けそうな、フォルダごと送る方法に舵を切ろうかと思います。
今回必要そうなコマンドメモ。
- pwd 現在のディレクトリを確認
- wget ネットワーク上のファイルを取得
- unzip ファイルの解凍
- ls 中身を見る
- ls -la 詳細表示
- rm ファイルの削除
- rm -r ディレクトリ削除
- refresh リロード
この時、Safariだとターミナルでテキストが打てない現象があり、何度やってもダメだったので、Chromeにきりかえる。（後日Safariで試してみたら、同じ環境なのに打てた理由は不明。。） 今後の参考： UNIXコマンド
最終的に、下記のような手順でやってみた。
- 必要なファイルやフォルダのZIPファイルを作成
- プロジェクトのassetsセクションにフォルダをアップロード
- プロジェクトのTool > Terminal
- urlからzipファイルを取り出す
$ wget -O file.zip https://url-to-your-zip - カレントディレクトリに展開
$ unzip file.zip - ZIPファイルを削除
$ rm file.zip - 最後に、アプリを更新して、新しいファイルがエディタに表示されるようにする
$ refresh
参考： Uploading a whole folder Glitchで複数ファイルアップロードできる？ – Glitchでプログラミング WebARが楽しすぎた！A-Frameで3Dモデルを表示させる方法の備忘録 ウェブサイトの公開 「__MACOSX」の意味は? いま敢えて「zip」を見直す
zipファイルでアップロードすると、jpgのパスの参照先がないから解凍するのはいいとして、（assetsフォルダにアップロードしているはずの）zipは左側のファイル名には出てこない。一体どこ（cdn.glitch.me下）に？ オプションの意味も解明できないままですが、取り敢えず進む。 色々疑問に思いながらも、上の手順で試しているうちに、zipファイルの展開まで漕ぎ着けた。余計なものがいっぱい出来てしまったので、いらないと思われるfile.zipと、modelsフォルダと__MACOSXを削除。
どうやら無事、アセットセクションでの展開が反映されたようで、albedoが反映された。
こちらも反映されてくっきり浮き出てきた。
途中から失敗したり戻ったりと、曖昧になったので、次回はテクスチャのアップロード部分を、手順を踏んでもう一度やってまとめてみようと思います。
