すっかり時間が経ってしまいましたが、2022年8月24日に開催のオンライン勉強会「Babylon.jsではじめるHoloLens 2 / Meta Quest対応WebXR」（主催：ARコンテンツ作成勉強会）にブログ執筆枠で参加させてもらってきました。

インタラクティブな操作ができるWebXRコンテンツがとてもかんたんに作成できてしまうハンズオン形式のワークショップで、途中で挫折しないように教材も工夫されていて、初心者の方にもおすすめですの勉強会でした！

この勉強会に参加しようと思ったきっかけは、XRコンテンツをプログラミング初心者が作成するときに、3DCGのオブジェクトを選択してつかんだり、拡大縮小したり、インタラクティブな操作をかんたんに体験できる方法がないか、ちょうど探しているときだったからです。そして、実際に参加してみると、その答えがbabylon.jsにあることを短時間で体験しながら学ぶことができたのです。

A-FRAMEは入門のハードルは低くて、初心者の挫折も少ないけれど、その先に進もうとすると急に大変に

わたしはウェブサイト制作の基礎を扱う授業づくりに、非常勤講師先の青山学院大学で総合文化政策学部で携わっています。そのなかで、メタバースやXRへの関心の高まりを踏まえ、近年はWebXRのコンテンツづくりも体験も授業に取り入れています。A-FRAMEとGlitchを使うと、環境構築にいたずらに時間をとられることなく、見た目のインパクトのあるARコンテンツを自分のスマートフォンで表示できるるので、教える側としても心強く、いい時代になったなと思います。

実はこのA-FRAMEとGlitchをつかったWebXRの授業の準備のときに、ARコンテンツ作成勉強会の下記のスライドも参照させてもらっていました。

数行のコードのなかのいくつかのファイル名や変数を変更するだけで、自分が選んだ360度の風景写真や、ARマーカー上でグルグルと回転する月や火星がPCやスマホの画面に表示されたたときに学生さんたちのキラキラした目には、こちらまでうれしくなりました！　

また、理解と作業が早い人はどんどん先に進んでいくので、そういう学生さんには応用課題として簡単なクリエイティブコーディングにも挑戦してもらうようにしました。いろいろな工夫をこらした作品を作成した学生さんもいて、効果的な応用課題だったと思います。

なお、A-FRAMEとクリエイティブコーディングについては、下記のブログ記事も参考にさせてもらいました。

ただ、ここまでやってみるともう少し欲が出てきました。応用課題のクリエイティブコーディングも含めて、A-FRAMEでつくりはじめると、基本的には作成したものをただ眺めたり、鑑賞するところまではスムーズなのですが、XRでの没入感を高めるために不可欠な、3DCGの物体に触れたり、動かしたりするインタラクティブな操作を自分でもやってみたくなるし、授業でも取り入れて学生さんにも体験してもらいたくなります。けれども、いろいろと調べてみたところ、A-FRMAEではそういった体験をつくるチュートリアルは見つかりませんでした。

何かいい方法があるといいのだけど...…と思っていたところで、「Babylon.jsではじめるHoloLens 2 / Meta Quest対応WebXR」再開催の告知を見つけて、探し物はこれなんじゃないかと感じて、早速、申し込んでみたのでした。

はじめの設定は少しだけ煩雑だけど、インタラクティブな体験づくりをWeb XRで簡単にはじめられるBabylon.js

講習会の内容については、上記のスライドを見ていただくのが一番だと思います。ポイントとしては3D空間の中に立方体や球体などを表示するだけならA-FRAMEがわかりやすいけれど、3DCGで配置した物をつかんだり、動かしたり、よりインタラクティブな体験をつくるには、Babylon.jsを取り入れたほうが簡単だということにつきます。

わたしの場合は特に授業の前半でHTMLやCSSの基礎を学んだ学生さんたちに教えるという目的があるので、HTMLと同じようなタグを使うA-FRAMEから入るのは自然な流れであることは間違いありません。一方で体系的なプログラミングを学ぶ機会がなかった学生さんたちにとって、Babylon.jsで立方体や球体を表示するためには、テンプレートに書かれたいろいろな”呪文”を、えいやっと飲み込んで、先に進んでもらわなければなりません。

理想的にはWeb XRの授業として、HTMLやCSSからの流れを受けて、はじめにA-FRAMEを体験し、そのあとでBabylon.jsを使った方法も試してもらい、それぞれの得意・不得意を学生さんたちにも実際に体験してもらえるのが理想かもしれません。ただ、来年度の授業計画は、限られた授業時間のなかでどこまでをスコープとするべきか、他のカリキュラムとの連携も確認しながら、改めて、決める必要があると思っています。

おまけ：フォトグラメトリーで作成した3DオブジェクトをSceneLoaderで読み込んでみる

ところで、LiDARを搭載したiPhoneが登場して、フォトグラメトリーが話題になる機会が増えたように思います。フォトグラメトリー用のアプリも使い勝手のよいものがいくつもリリースされていて、わたしもスキャンしたとんかつなどの食事を #メシグラメトリ というタグでTwitterに投稿したりして、楽しんでいました。学生たちも自分がスキャンして作成した3Dデータを取り込んめるようになると、より自分事としてこうした技術を感じられるようになるのではないでしょうか。

そんなことをぼんらいと考えていたところ、勉強会の最後に、フォトグラメトリーで作成したデータを取り込んで表示するにはどうしたらよいか？　という話題になり、できる人はその場で実装してみるという、楽しい流れになりました。

その時にチャットで共有してもらったのが、下記のnoteの記事です。

noteの記事ではサンプルとして赤いリンゴの3Dデータを取り込んでいますが、勉強会が終わった直ぐ後に、九州大学が1400店以上の3Dデジタル標本をCC-BYライセンスで公開して話題になったので、そのからダウンロードしたglbデータを取り込んでみました。

このコレクションはタイトル画像で用いたミノカサゴの背びれの細い棘がわかりやすいですが、とても細かな造形まできれいにスキャンされていて、ついつい見入ってしまいます。

実際にシーンにglbファイルを読み込むところまでは、わたしにも何とかできました！

さらなる勉強のためのメモ

あとは、取り込んだ3Dデジタル標本を、立方体や正八面体のように、マウスやコントローラーで選択して、拡大・縮小できるところまで応用でできたら楽しそうですよね。いろいろ検索してみましたが、同じようなケースをあつかったチュートリアルやサンプルコードが見つからず、少し試行錯誤してみましたが、基本を飛ばしているので、思った挙動を実現できていないのが今後の課題です。

Babylon.jsの基礎的な勉強には、公式チュートリアルを一度、通してやってみるといいかもしれませんね。ちょまどさんがざっくり和訳されている公式チュートリアルもあるので、日本語でも参照できてよさそうです。

もうひとつ、この記事の例も面白そうでした。基本的な知識がある人に向けて書かれているようなので、写経するだけになってしまうかもですが。

最後になりますが、ブログ執筆枠で申込して勉強会が終わってから、1ヶ月あまり経ってしまいました。主催者の吉永さん、すみませんでした！ noteの公開が遅れましたこと、ご容赦いただけたらありがたいです。

でも、勉強会はとてもわかりやすくて、モチベーションもあがるので、また、機会があればこれに懲りずに参加してみたいと思っています。興味を持たれた方がほかにもいらっしゃれば、ARコンテンツ作成勉強会のconnpassページやTwitterの公式アカウント、講師を務められた吉永さんTwitterアカウントもチェックしてみてください！

あわせて、講師を務められた吉永さんのTwitterアカウントもチェックしてみてもらえればと思います。

最後にもうひとつ、当日の #AR_Fukuoka のタグ付きで投稿されたツイートのまとめも貼っておきます。

＊タイトル画像で使用した3Dデジタル生物標本：ミノカサゴ Luna Lionfish, Pterois lunulata by ffish.asia / floraZia.com