WebAR/VR開発プラットフォーム、Wonderland Engineを触ってみた

Wonderland Engine
https://wonderlandengine.com/

Wonderland Engineとは

WebAR, WebVRの開発用プラットフォーム。
2019年頃から開発されていたようです。
環境構築が不要で、簡単にWebAR/VRアプリの開発ができるらしい。
さらにWebAssemblyとWebGL2により高いVRパフォーマンスが実現されているようです。

基本無料で利用することができます！

Quick Start

まずはアカウントを作成して、ソフトのダウンロード
https://wonderlandengine.com/getting-started/installing/

起動できたらログインし、新規プロジェクトの作成。
最初なのでDefault Sceneにしてみる。

これは、、Unityかな？

不要なオブジェクトを削除して、好きな3Dモデルを置いてみる。

Unityを少し触ったことがあるのでなんとなくわかる！
左下のAsset Browserにassetsディレクトリを作り、その中に3Dモデルを入れる。
（推奨ディレクトリ構成はこちら）
そして3DモデルをScene Viewにドラッグすると、、！
（各ウィンドウにピンクで名前がついてるから分かりやすい）

自作の3Dモデルなので作り方が悪いのか、
左側のScene Outlineで3Dモデルのパーツがバラバラになっている、、

右クリックから新規オブジェクトを追加できるのでMeshを追加し、（後で思ったけどEmptyの方がいいかも）
その中に全パーツを入れることでスッキリした

上の緑の再生ボタンを押すとブラウザで表示を確認できる。
また変更を加えた場合は一番左のトンカチマークをクリックでブラウザに最新の内容が反映される。

かんたん！

ARをGithub Pagesにあげてみる

一通りわかったのでARを作ってGithub Pagesにあげてみる。

こんな感じで置いてみた。

今回はBlenderでアニメーションをつけたahiruを動かしてみる！
右側のPropertiesにUnityで見慣れた「Add Component」がある。

なんとここにanimationが！！

どれどれ。なんか上手く名前が出てないけど、それっぽいのがある。
palyCountはとりあえず10にしてみる。

おおおお！！うごいたああああ！！

Github Pagesにあげてみる

ここからプロジェクトのファイルが確認できる。

この中身をとりあえず丸ごとGithubにあげてGithub Pagesで公開してみる。

DEMO: https://raihara3.github.io/wonderland-engine-demo/deploy/

iPhoneで見てみたら、safari, chrome共に真っ暗...😇
Androidのchromeでは見れました！

平面認識は対応しておらず、宙に浮く。
そしてahiruのアニメーションは動いてなかった。
ただ、確かに読み込みは早かった。

あと壁の認識はしていて、タップすると紫のボックスが生成されるギミックが隠れてた！

思ったこと

• それなりの頻度で強制終了する（MacOS 11.6 M1）
• ARはChrome for Androidでしか見れないかも？
• 構築した製品から収益を上げたら、収益の10％のロイヤルティが必要になる
• 最初のローディング時にWonderland ENGINEのロゴが入る（有料のプランでは消せるのかな？）
• 3Dモデルの色味はライティングでもう少しどうにかなるのかも
• プログラミングができなくても秒でVRやARを作って試せる ←これ！

まだ触ってない機能がたくさんあるから一概には言えないですが、
ここまで触った感想として
不具合がいくつかありそうだけど、
プログラミングなしで、手元で楽しむ程度ならかなり楽で良さそうでした！

おしまい