はじめに
WebAR開発プラットフォームの8th WallにあるSky Effectsは現実世界の状況に対応したリアルなダイナミックスカイで、より没入感のあるAR体験を実現するための強力なツールです。
開発者はARアプリケーションにダイナミックな空を簡単に追加することができます。
2023年3月に本機能を用いたSky Effects Challengeというグローバルコンテストが開催され、アップフロンティアでは「Lantern Festival」という作品を応募して佳作賞を受賞しました！
上記の開発時に得た知見を元に、8th Wallが用意しているテンプレートから独自のプロジェクトを作成する際に先に知っておくと開発が進めやすい内容についてご紹介していこうと思います。
制作の流れ
Project Libraryからのクローン
8th WallのProject Libraryには様々な参考となるプロジェクトが用意されています。
Sky EffectsをThree.jsで始める際には以下からクローンが行えます。
● three.js: Sky Effects Template
また、ある程度の形となっているものとしては以下のプロジェクトが参考になります。
● three.js: Sky Effects + World Tracking
◇ 変更していく主なもの
three.js: Sky Effects Templateのクローンから変更していく主なものは
- app.js
- sky-scene-pipeline-module.js
の2つになります。
また追加のjsなどのテキストファイルはFilesの中に、テクスチャとなる画像ファイルや3DモデルなどはAssetsの中に追加を行って行きます。
app.js
エントリーポイントとなるファイルです。
独自の設定を行いたい場合には以下の部分を調整して行きます。
◇ XR8.addCameraPipelineModules
XR8.addCameraPipelineModules()
こちらは引数の配列で指定されているpipelineModuleを順番にXR8.addCameraPipelineModule()で処理するようなものとなっています。
実際に調整するケースとしては、 Sky Effects Coaching Overlay自体を行わせない場合にSkyCoachingOverlay.pipelineModule()を削除するなどの調整が考えられます。
◇ XR8.LayersController.configure
addCameraPipelineModulesの中で設定しているXR8.LayersControllerですが、XR8.LayersController.configureで渡すパラメーターによって空を置き換えるレイヤーに対する調整が行えます。
現在はレイヤーとしてサポートされているのは”sky”のみとなっています。
invertLayerMaskはtrueとすることで”sky”のレイヤーに追加した内容であっても常に表示を行うことができ、デバッグ時などで表示を確認しながら開発を行いたい場合などに有効な設定となります。
edgeSmoothnessについては”sky”のレイヤーにおけるエッジの滑らかさを設定することができます。
またXR8.LayersController.configureのページにIMPORTANTとしてXR8.LayersControllerとXR8.FaceControllerは同時に使用できないという記述があります。
以前はXR8.LayersControllerとXR8.XrControllerも同時に使用でなかったという経緯があるため、もしかするといずれはXR8.FaceControllerも同時に使用できるようになるのかもしれません。
◇ Sky Effects Coaching Overlay
空にカメラを向けさせるためにオーバーレイ表示されるSky Effects Coaching Overlayですが、SkyCoachingOverlay.configureでanimationColorやpromptTextを設定することで色やメッセージを変更することができます。
以下が参考になります。
Example – Sky Coaching Overlay with user specified parameters
sky-scene-pipeline-module.js
empty-sky-threejs/code/sky-scene-pipeline-module.js
カスタムpipeline moduleとしての実装が記載されています。
◇ addSkyDome
スカイドームとなるSphereを追加する処理を行っています。
Assetsに画像を追加し使用するテクスチャを差し替えることで簡単に空の背景を差し替えることができます。
◇ addCube
three.js: Sky Effects Templateの内容は単純に空に対して立方体を配置するものとなっています。
addCubeと同様のやり方でAssetsに追加した任意の3Dモデルを表示させる際の参考となります。
◇ initSkyScene
Pipeline modulesとしての開始後であるonStartで呼ばれ、rendererの設置とオブジェクトの追加の初期化処理を行っています。
初期化時に追加したい処理などをここから呼ぶと良いと思います。
◇ XR8.Threejs.pipelineModule()としてのライフサイクル
app.jsからカスタムpipeline moduleとして使用されるsky-scene-pipeline-module.jsですが、最初から設定されているonStart以外にもonUpdateやonRenderを呼ぶことができます。
アニメーションを行う際にonStart内でrequestAnimationFrameを使用するようなやり方もありますが、onUpdateやonRenderで更新毎に処理を行わせることも可能となっています。
◇ XR8.Threejs.xrScene()
scene、camera、renderer、layerScenesへのハンドルを取得する際に使用します。
表示するオブジェクトを常に表示できるsceneへの追加、空の置き換えとなるlayerScenes.sky.sceneへの追加など行う際に、またcameraやrendererなどに設定を行いたい際などにハンドルを取得して使用します。
◇ Sky Effects Coaching Overlayのイベント
Sky Effects Coaching Overlayの表示/非表示のタイミングとして以下のイベントが使用できます。
- sky-coaching-overlay.show
- sky-coaching-overlay.hide
まとめ
簡単にですがSky EffectsのThree.jsにおけるテンプレートの内容について解説してみました。
もし今回の内容に興味を持たれた方いれば是非触れてみてください。
参考
・ドキュメント
・プロジェクトライブラリ
https://www.8thwall.com/projects
・three.js: Sky Effects Template
https://www.8thwall.com/8thwall/empty-sky-threejs
・three.js: Sky Effects + World Tracking
https://www.8thwall.com/8thwall/sky-slam-threejs
・three.js: Sky Effects
https://www.8thwall.com/8thwall/sky-effects-threejs
・Sky Effects Challenge Workshop Session | 8th Wall
https://www.youtube.com/watch?v=Pq7lspXNK7g
・現実の世界の空をキャンバスに!?
https://zenn.dev/junni/articles/2e978ccdd58035
・8th WallのSky Effectsを使用したアプリの作成・体験のコツ
https://webar-lab.palanar.com/example/webar-example/8th-wall-sky-effects-tips
