初めまして
bravesoft株式会社でiOSエンジニアをしているsaito(和尚)です。
さてQiitaでの初めての記事は、visionOSアプリの実装をする際に使われる「Reality Composer Pro」についての記事となります。
この記事では実際にチェスセットを作りながら、このツールについて学んでいきましょう。
この記事で得られるもの
- Reality Composer Proの基本知識
- Reality Composer Proを使って静的なシーンを作成する方法
- 3Dオブジェクトの配置
- マテリアルの作成・適用
- 音楽の設定
Reality Composer Proについて
Reality Composer Proとは
Reality Composer Proとは2019年に登場したReality Composerのプロ版ツールでvisionOSと共にAppleから発表された開発ツールです。
Reality Composerがお手軽にAR体験の作成ができるのに対して、Reality Composer ProはvisionOS用に3Dコンテンツのコンポーズや編集、空間オーディオの設定などイマーシブな3D体験を作ることができ、XcodeでvisionOSアプリを作成する場合には欠かせない開発ツールとなります。
UI
Reality Composer ProのUIについての紹介です。各エリアの名称と担当業務を紹介します。
viewport（中央上部）
シーン内の3Dオブジェクトを可視化したり、ナビゲートしたり、表示したりできるエリアです。
階層パネル（左上部）
3Dオブジェクトなどのシーン内のコンテンツを整理したり、検索したり、選択したりするエリアです。
インスペクタパネル（右上部）
3Dオブジェクトの位置を微調整したり拡大縮小したり、マテリアルのカラーを変更したりなど、シーンで扱うオブジェクトの細かい編集を行うエリアです。
編集パネル（下部）
編集パネルには4つのタブが含まれており、初期選択されているProject BrowserはReality Composer Proプロジェクトに含まれるファイルをナビゲートするエリアです。
新たに追加する3Dオブジェクトや音楽ファイルなどは一度こちらに入れてからシーンにコピーしていきます。
他タブのShader Graph、Audio Mixer、Statisticsは高度な編集をするために用意されています。
注意
今回の記事では、これら3つのタブは使用しません
シーン
Reality Composer Proに登場するシーンとは、visionOSを通してユーザーが体験する視覚的および物理的な空間のことを指します。シーン内には3Dオブジェクトや雨や雪などのパーティクル、そしてオーディオが含まれており、これらを組み合わせてシーンを作成していきます。
またReality Composer Proプロジェクト内にはシーンを複数作成することができ、一つのアプリで作成した複数のシーンを使い分けることも可能です。
実践編
1. visionOSプロジェクトの作成
最後にシュミレータで、作ったものを表示して確認するためにXcodeプロジェクトから作成していきます。
Reality Composer Proから直接Reality Composer Proプロジェクトを作成することも可能ですが、XcodeでvisionOSアプリプロジェクトを作成すると自動でリンクされたReality Composer Proプロジェクトが作成され、簡単に連動させることが可能です。
1.1. visionOS Appで新しいプロジェクトを作成する
Xcodeを開いてCreate New Projectから、visionOS > Appを選択します。
空間上にシーンを表示するため、Initial Sceneは「Volume」で設定してください。
ヒント
今回Immersive Spaceは利用しないので、Immersive Space RenderとImeersive Spaceは何でも大丈夫です。
1.2. ContentViewを最低限にする。
プロジェクトを新規作成すると、ContentView.swiftファイルにデフォルトシーンを表示するためのコードが記載されています。
今回はReality Composer Proを使って作成したチェスセットを表示するのみになるので不要なコードは削除しておきます。
import SwiftUI
import RealityKit
import RealityKitContent
struct ContentView: View {
var body: some View {
RealityView { content in
if let scene = try? await Entity(named: "Scene", in: realityKitContentBundle) {
content.add(scene)
}
}
}
}
#Preview(windowStyle: .volumetric) {
ContentView()
}
1.3. XcodeプロジェクトからReality Composer Proを開く
プロジェクトナビゲータより [ProjectName] > Packages > Package を開き、右上の「Open in Reality Composer Pro」をクリックして、Reality Composer Proを開きます。
ContentViewで表示しているプレビューはReality Composer Proでシーンの変更を行い保存すると、リアルタイムで書き変わっていきます。
2. 素材のインポート
チェスに必要な駒素材をインポートします。
今回チェス駒は下記のサイトからダウンロードしました。
2.1. USD(Universal Scene Description)ファイルに変換する
Reality Composer Proで3Dオブジェクトをインポートするために、ダウンロードした3Dオブジェクトファイルをsltファイルからusdファイルに変換します。
2.1.1 rarファイルを解凍し、駒ファイル(.slt)をXcodeで開く
記載したリンクから3Dオブジェクトをダウンロードした場合、rarファイルでダウンロードされるので解凍アプリなどを使ってファイルを解凍してください。
解凍後に6種類の駒のsltファイルを全て選択した状態でクリックしてXcodeを開きます。
2.1.2. USDファイルフォーマットで書き出す
一つずつ選択した状態で File > Export...をクリックし、ファイルを書き出します。
書き出す際にフォーマットをUniversal Scene Description(USD)に変更して書き出してください。USDファイルはAppleがサポートする3Dオブジェクトファイルの拡張子で、基本的にはUSDやUSDZの拡張子でないと取り込むことはできません。
Reality Converter Proというベータ版アプリがAppleから提供されていますが、stlファイルはサポートされていなかったのでこの方法で変換しました。
ヒント
初期位置が若干ズレていて、サイズも標準で用意されている3Dオブジェクトよりかなり大きいので、調整をしてからExportすると作業が楽です。
添付画像では0.008倍に縮小していますが後ほど0.2倍に更に小さくしているので、この時点で0.0016倍に縮小しておくと後ほど縮小する手間が省けます。
2.2. 駒を取り込む
USDに変換した駒をReality Composer Proプロジェクトに取り込んでいきます。
編集パネルのProject Browserタブに駒ファイルを格納するFolderを作成します。
⭕️ Pieces
❌ Peaces
駒ファイルをドラック&ドロップもしくは左上のアイコンより取り込みます。
Xcode15時点でvisonOSプロジェクトを作成すると、Sceneシーンにはデフォルトで球体が中心に置かれている状態でシーンが作成されます。
今回この球体は不要のため、左側の階層パネルより Root > Sphereを削除してください。
球体が2つ表示されている場合
SceneシーンではなくImmersiveシーンが表示されています。
編集パネルのProject Browserタブ内の階層パネルよりRealityKitContent.rkassetsを選択し、Scene.usdaをダブルクリックしてSceneシーンを開いてください。
試しに駒を一つ配置してみましょう。
King.usdを上部の階層パネルのRoot直下にドラック&ドロップしてシーン内にキングを追加してください。
command + Sで保存し、Xcodeプロジェクトに戻ってプレビューを確認してみます。
画面中央に大きなキングが表示されていたら成功です。
3. チェス盤作成
駒の取り込みが完了したので、先にチェス盤を作成していきます。
3.1. Cubeを使って盤ベースを作成
立方体を8x8個おいて、チェス盤を作成していきます。
階層パネルの左下にある+ボタンより、Primitive Shape > Cubeをクリックして立方体をシーンに追加します。
1列ずつ作っていくため、先ほど作成した立方体を8つ複製し、マスの名前をつけていきます。
1列ごとグルーピングしていきましょう。8つの立方体を選択して右クリックをし、Groupをクリックします。
このグループを8つに複製して8x8マス分のマスに対応する立方体を64個シーンに追加します。
立方体のサイズと各場所をインスペクタパネルより1つずつ設定していきます。
ヒント
編集パネルより複数の立方体を選択して、まとめて座標位置を変更することも可能です。
3.1.1. サイズ
複製した立方体を全て選択し、右のインスペクタパネルのCube Primitive > Sizeを「6cm」に設定します。
3.1.2. 座標情報
8x8の盤になるため、x座標を-21~21cm、z座標を-21~21cm、6cm間隔でズラして設定してください。
設定が完了したらXcodeプロジェクトでプレビューを確認してみましょう。盤のベースが空間上に表示されます。
3.2. マテリアルを作成
盤に質感を持たせるために、マテリアルを作成します。
古からあるボードゲームということで、リアルに忠実に木の質感を持つマテリアルを設定していきます。
Reality Composer Proにはデフォルトでいくつかのマテリアルが用意されています。ツールの右上＋ボタンよりMaterial Libraryを選択し、その中にあるWood Plankをクリックしてプロジェクトに追加します。
追加した木のマテリアルをシーンに追加します。駒同様に階層パネルのRoot直下にマテリアルをドラック&ドロップします。
追加したら、黒マスと白マスの2色作成するためにマテリアルを複製し、それぞれBlackSquare、WhiteSquereと名前を変更します。
黒マスは木らしく茶色に設定してみました。
白マスはWoodPlankそのままの色を採用します。
マテリアルを実際に立方体に適用してみましょう。
左側階層パネルよりA1マスを選択し、右側インスペクタパネルのMaterial Bindingsより先ほど作成した黒マスのマテリアルBlackSquereを選択します。
遠くからだと茶色の立方体ですが、近くで見るとちゃんと木の木目が見えますね。
問題なければ全てのマスに、交互にBlackSquereとWhiteSquareマテリアルを設定していきます。
マテリアルの設定が完了したらXcodeプロジェクトでプレビューを確認してみましょう。無事にチェス盤が空間上に表示されていれば完璧です。
4. 駒配置
チェス盤が完成したので、仕上げに駒の設定と配置をしていきます。
4.1. 黒駒と白駒を作る
まずは自分の駒と相手の駒を見分けられるようにマテリアルを作成して、3Dオブジェクトに適用していきます。
4.1.1. マテリアルを作成する。
駒はプラスチックのマテリアルを使ってツヤツヤしたものにしていきます。マス同様にツール右上よりBlack ABS Plasticマテリアルをクリックしてプロジェクトに追加してください。
下側の編集パネルより、左側の階層パネルに追加したプラスチックマテリアルをドラック&ドロップし、シーンに追加します。
黒駒と白駒二つのマテリアルにするため、複製してそれぞれBlackPiece、WhitePieceと名前をつけましょう。
このマテリアルはデフォルトで黒色が付いているため、WhitePieceの方だけ色の調整を行います。Diffuse Colorを白色に、Emissive Colorは黒に設定してください。これで立体感のある白駒が出来上がります。
4.2. シーンに駒を置く
編集パネルのProject Browserより最初にインポートした駒を、階層パネルにドラック&ドロップし、ゲームに必要な駒の数分、3Dオブジェクトを複製します。
- Pawn x 16
- Rook x 4
- Knight x 4
- Bishop x 4
- Queen x 2
- King x 2
自分と味方のコマだとわかるように階層パネルを整理しておきましょう。
Root/
├ Board/ チェス盤フォルダ
└ Pieces/ 駒フォルダ
└ Self/ 自分の駒（黒駒）
└ Opponent/ 相手の駒（白駒）
4.3. 駒のサイズ調整
駒が大きすぎるので、全ての駒を0.2倍に縮小しておきます。
ヒント
USD変換時に、0.0016倍にした人は0.2倍に縮小しなくても大丈夫です。
4.4. マテリアルをつける
階層パネルで3D駒オブジェクトを開くと、GeomとMaterialsというフォルダが入っています。まずは自駒のGeom > COLOR___MATERIファイルを全て選択して、インスペクタパネルより先ほど作成したマテリアルBlackPieceを選びます。
16個の駒がプラスチック素材の黒色になりました。
残り16駒にWhitePieceを選択して、プラスチック素材の白色のコマに変更しましょう。
4.5. 黒駒の向きを変える
チェスということで駒が向き合っていないといけないので黒駒の向きを反転させます。
黒駒を左側階層パネルより全部選択します。
右側インスペクタパネルより Rotation > Y を180°に変更します。
これで黒駒と白駒が向き合いました。
4.6. 配置を調整する
最後の仕上げです。全ての駒の位置を調整していきます。
駒を一つずつ選択し、右側インスペクタパネルよりPositionを変更していきます。
y座標：2.5cm固定
x座標とz座標はマス同様に、x座標を-21~21cm、z座標を-21~21cm、6cm間隔でズラして各駒が適切な初期値になるように設定してください。
これにてチェスセットの作成は完了です。
Xcodeプロジェクトよりプレビューもしくはシュミレータを起動して実際に作成したチェスセットを確認してみましょう。
(おまけ) バックグラウンドミュージックの設定
Reality Composer Proでは空間オーディオの設定が可能です。
ただ今回は静的なチェスセットということで、特定の場所からだったり方向に対して音を出す設定はせずに、場所や方向を指定しないChannel Audioでバックグラウンドミュージックとして音をシーンにつけていきましょう。
このサイトより適当に音楽をダウンロードして、bgm.mp3とファイル名を変更します。
1. 音楽ファイルの取り込み
ダウンロードした音楽ファイルを編集パネルにドラック&ドロップし、プロジェクト内に音楽ファイルを取り込みます。
その後階層パネルにもドラック&ドロップし、シーンにも音楽ファイルを追加してください。
左側階層パネルより Audio > Channel Audioを選択し、発生場所も、方向も問わない音設定をシーンに追加します。
階層パネルよりChannelAudioを選択し、インスペクタパネルの Preview > Resourceで先ほどシーンに追加した音楽ファイルを選択します。
2. コードで音楽を再生する。
このままでは音楽は再生されないので、コードからchannel audioを再生するように記述します。
struct ContentView: View {
var body: some View {
RealityView { content in
if let scene = try? await Entity(named: "Scene", in: realityKitContentBundle) {
content.add(scene)
guard
let channelAudio = scene.findEntity(named: "ChannelAudio"),
let resource = try? await AudioFileResource(
named: "/Root/bgm_mp3",
from: "Scene.usda",
in: realityKitContentBundle
) else { return }
let audioPlaybackController = channelAudio.prepareAudio(resource)
audioPlaybackController.play()
}
}
}
}
これでシュミレーターを起動すると音楽がなります。
これにて終了です。お疲れ様でした。
終わりに
日本でもApple Vision Proの発売が間近に迫っており、会社でもここ最近はvisionOSの話題で盛り上がっています。
私はこれまでARやXRのアプリ開発経験がなかったためこういったツールを使った経験もなく、visionOSアプリを作ろうと試みるもReality Composer Proの使い方が全くわからずに最初はツールと睨めっこをしていました。
ようやく静的なシーンなど基礎的なところはできるようになってきました。
今回の記事では、初心者の視点からReality Composer Proの基本的な使い方を紹介しました。まだまだ奥深いツールなので、今後さらに探求していきたいと思っています。
また、昨年のWWDCでは、Reality Composer Proの紹介や使い方に関する動画がいくつか公開されていますので、ぜひそちらも参考にしてみてください。これからも一緒にvisionOSの可能性を探っていきましょう。
bravesoftではiOSアプリやAndroidアプリの開発を行っています。最近は研究としてvisionOSの開発にも取り組んでいます。
アプリ開発に興味がある方は是非是非、採用ページをご確認ください
参考資料