【WebXR】”BLOCKVROCK”でVR空間をお試し制作
どうも、WebXR 1年生のAoya-Utaです。VR空間制作知識は”ほぼ初心者”で、Unityをインストールして1個サンプルを作って止まってしまいました。。
そこで期限を切って自身のモチベーションを高めるため、カレンダーに登録。有言実行で！
【開発ツールを決める(個人的)3つの視点】
出来るだけ前提知識が必要ない作り方を探していた時に、森ビル「キッズワークショップ2022」でレベルエンター株式会社 BLOCKVROCKを体験するこども向けワークショップの様子が取り上げられているのを見つけました。これを使えば私でもVR空間制作を再開できるかも？！
そこでBLOCKVROCKを使って「WebXR制作を始めるための3つの視点」を確認しました。
1. お気軽スタート
無料かつ前提知識がほとんどない状態で制作を始められること
2. 簡単な管理
サーバ側の複雑な設定がなく、制作した作品を簡単にシェアできること
3. 複雑な制御
ある程度詳細な制御ができること(気軽に始められても、出来る事が少ないと続けられない)
【再現するVR作品の選定】
BLOCKVROCKは「A-Frame のコードを生成して小学生やプログラミング未経験者でも VR 、 AR を構築できる、教育向け無料のコーディングサービス」とのこと。そこで、A-Frameで製作された作品をBLOCKVROCKで再現してみることで、3つの視点を確認してみます。
再現する作品はSamleコードもあるページの「Infinite Dice Tower」を選びました。サイコロが塔の中を落ち続ける、綺麗な作品です。
作品：Infinite Dice Towe
【BLOCKVROCKでの再現結果】
まずは結果から。”つたない私の知識&製作期間3日間でもそれっぽい作品が作れた※”気がします！
・動画：A-Frame作品(左)をBLOCKVROCK(右)で再現した結果
・再現した作品はこちら
※Javascript部分については知識が足りず、レベルエンター株式会社の山本 大様に逐次教えていただきました！この場を借りて、再度お礼申し上げます！！
【BLOCKVROCKで3視点検証】
1. 検証-お気軽スタート
A.無料ということでさっそくログイン。Google/Twitter/GitHub/メールを選択できます
B.土台となる塔と落ちてくる物体ですが、左メニューの「BLOCKタブから選んだだけ」で作成できました。この間、A-Frameの意識/知識はまったく必要ありませんでした。選べる物体は"直方体(box)と球体(sphere)"のみですが、位置/大きさ/角度/色/透明感/テクスチャ画像/物理動作を選択して出来上がりました。
最初不安だったのはBLOCKの使い方。これについては、メニューの"テンプレート一覧"にサンプルがたくさんあり、その中の「13.ジェンガ」「19.コードモード」※を参考に作り始めることで、動作と設定の仕方を確認しながら製作できました。
※ジェンガ：A-Frameの物理演算エンジン Ammo.jsを使用し、積み上げた直方体が落ちてくる前に、クリックで弾く？ゲームのようなサンプル
※コードモード：BLOCKタブで定義した直方体をCODEタブで回転の動きを付けるサンプル
2. 検証-簡単な管理
A. サーバ側の設定は必要ありませんでした(操作できないとも言う)。また自身の作品で使いたいファイル(3Dモデル/画像/動画/音楽等)のUploadは、左メニューのファイル管理から簡単に行えました。対応しているファイルは以下のようです。
B.制作した作品のシェアも右上のファイルメニューの”QRコード”を選べば、QRコードとURLが表示されるので、SNSでもスマホでも簡単にシェアできました。
3. 検証-複雑な制御
始めて2日目ということで冗長ですが、とりあえず下記のコードで「球体を上から塔の中に落として、地面に着床した際に、初期位置に再作成する」ということが実現できました！
コード(Javascript)を扱うとなると「A-Frameどころか"使用している物理演算エンジンは何か？"、"物理エンジンを含むCODEタブに記述するJapavascriptと、BLOCKタブに設定した物体との関係は？"」で悩みました。
今回、幸いにも、ユーザーメニューの"お問い合わせ"から、山本様にクイックに返信していただけたので、2日間という短期間で作りたいものが作れました。
※送信ボタンを押せない時がある？
CODEタブに記載したJavascript
forever(()=>{
let ball = document.querySelector("#ball");
// 設定値取得(xyz別プロパティ取得)
const bal1_pst = ball1.getAttribute("position");
const bal2_pst = ball2.getAttribute("position");
const bal3_pst = ball3.getAttribute("position");
// 出現位置をランダムに設定
let rdm_pst_x = Math.random() * 8 ;
//着床した際、再作成する
if( bal1_pst.y < 1) {
ball1.remove();
ball1 = document.createElement("a-sphere");
ball1.setAttribute("autofit-ammo", "type:dynamic;mass:10;");
ball1.setAttribute("class", "collidable");
ball1.setAttribute("id", "ball");
ball1.setAttribute("scale", '0.5, 0.5, 0.5');
ball1.setAttribute('position', {x: rdm_pst_x, y: 15, z: -5});
ball1.setAttribute("material", "color:#ff7171;");
ball1.setAttribute("src", "/assets/1794/uploaded/texture.png");
scene.append(ball1);
}
if( bal2_pst.y < 1) {
ball2.remove();
ball2 = document.createElement("a-sphere");
ball2.setAttribute("autofit-ammo", "type:dynamic;mass:10;");
ball2.setAttribute("class", "collidable");
ball2.setAttribute("id", "ball");
ball2.setAttribute("scale", '0.5, 0.5, 0.5');
ball2.setAttribute('position', {x: rdm_pst_x, y: 15, z: -5});
ball2.setAttribute("material", "color:#ffffff;");
ball2.setAttribute("src", "/assets/1794/uploaded/texture.png");
scene.append(ball2);
}
if( bal3_pst.y < 1) {
ball3.remove();
ball3 = document.createElement("a-sphere");
ball3.setAttribute("autofit-ammo", "type:dynamic;mass:10;");
ball3.setAttribute("class", "collidable");
ball3.setAttribute("id", "ball");
ball3.setAttribute("scale", '0.5, 0.5, 0.5');
ball3.setAttribute('position', {x: rdm_pst_x, y: 15, z: -5});
ball3.setAttribute("material", "color:#00f2ff;");
ball3.setAttribute("src", "/assets/1794/uploaded/texture.png");
scene.append(ball3);
}
})
【結論】
複雑な処理を行おうとすると、流石に知識とサポートが必要になると感じましたが、現時点で無料かつBLOCK選択でVR作品を気軽に作れるてシェアできるBLOCKVROCKは、”VR空間を初めて製作する人にとって、魅力的なツール”と感じました！
※ARに関しては触っていないため、機会があれば書き込む予定です
Discussion