👾

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

2022/05/30に公開約2,400字2件のコメント

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を作って試せる ←これ!

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

おしまい

Discussion

(Google翻訳の使用)

これは素晴らしい記事です!ワンダーランドエンジンをお試しいただきありがとうございます。

SafariはWebXRをサポートしていません。 iOS上のChromeは、その下にあるSafariWebViewです。

MacOSの改善とバグ修正があります!

Thanks for your comment!
It's a handy tool, easy to navigate and understand!
I would like to make something else.

I see that iOS is not yet supported.
Chrome on Android does not seem to recognize the plane, but hist-test, etc. using the WebXR Devices API is not supported?👀

ログインするとコメントできます