トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

WWDC23で流れたSpatial Conputing関連の動画メモ

WWDC23で流れたSpatial Conputing関連の動画を見あさる

カテゴリ別

https://developer.apple.com/videos/wwdc2023/?q=Spatial

時間順

developer.apple.com

動画多すぎてどれを優先的に見たらいいかわからん・・・

www.moguravr.com

メモは間違っている可能性が大いにあります!!!!

空間コンピューティング向けの優れたゲームを構築する

初日の一番最初っぽかったのでこれから見た。ゲームとは書いているけど、できることがいろいろ紹介されててよかった

developer.apple.com

すべてのアプリはWindow状態から始まる。(Shared Space)

Full Space(一つだけウィンドウを出す)

Full Immersive (VRモード)

床に2Dのスクリーンを敷くことも可能

Bluetoothのコントローラーを接続してゲームもできる

平面に奥行きを付けたりパーティクルも付けたり拡張できる

見ている場所だけ解像度を高くすることもできる

ARKitで頭の位置を推定する?

 

ハンドトラッキングの許可を取得することができ、独自のジェスチャーを使うことができる

現実の床や壁、材質も取得できる。これも許可が必要

ハンドジェスチャーが多いと、長いゲームだと疲れる

iPhoneを使っているユーザーとマルチプレイできる

Unityのセッションもある

 

いろいろなコンテンツ表示方法

Volumesというのは決めた立方体?の大きさの範囲にコンテンツが描画される。多分自動でそのボックスの大きさに応じてコンテンツのサイズも変化する?

手にコンテンツを引っ付けることもできる

壁に穴をあけることもできる

空間コンピューティング用のアプリの構築を始めましょう

基本っぽい

developer.apple.com

記事書いてる方がいた

note.com

Volumeってこれか

SharePlayがあるんだ~どうやって接続するんだろう?

InstrumentというXcode付属のアプリでパフォーマンスを見れる。Realitykit Trace

RealityComposerProの画面初めて見たけどUnityじゃん。パーティクルや音など

RealityKitとの関係は?

zenn.dev

デザイン

視線と手での入力

かなり具体的だった!

developer.apple.com

視界の中央を見るのが一番楽

奥行が頻繁に変わると目が疲れる。例えばモーダルをZ軸的に手前に出すとき、元のモーダルを奥にやる。

丸みを帯びたUIは支店を中央に集めやすい

タッチターゲットのサイズは60pt ボタン自体は44pt

 
距離に応じてウィンドウの大きさを変えて、中央からは一定の大きさに見えるようにする。タップしやすくするため

視線で見たときは、そのUIに光が落ちる(ハイライトされる)ようにする。さりげなくフィードバック

スマホと違って、PCと同じようにマウスオーバー時のホバーやチップ表示ができる

手元でドラッグできる

指で直接操作する際は視線と同じように見た目のフィードバックを提供する

空間ユーザーインターフェイスのデザイン

developer.apple.com

アプリアイコンには奥行きを付ける。3レイヤーまで作れる

ガラスウィンドウ(そういえば現実空間のARで使えるバーチャルなすりガラスって体験したことないかも)

ダークモードという概念はない。現実の光量に応じて自動で変わる

色の暗さでセグメント分け

フォントは少し太くしている

文字の色は白が確実。背景の色は現実世界によって変わるから

重要な情報は真ん中に

縦長より横長

ボタンの間隔は最低16pt

28ptのミニボタンでも、タッチエリアは60pt

 要素の間はホバーの光の範囲が重ならないように4ptあける

グリッド要素などタップエリアを示す範囲を作ってそこが光るようにする

タブバーはスマホだと画面下だったが、左に置いた。6項目以内

ツールバーなどは画面下手前に置く。画面下 20ptだけ重なるようにする

丸はいらない

iPadなどで出るポップオーバーはXR空間でははみ出すことができる!ボタンの真下に置く

閉じるや戻るボタンは左上に置く

SharePlay

developer.apple.com

できればアカウントログインなしでもシェアできる方法を考えよう

参加者が増えたときの席順は3種類から選べる。5人まで参加できる

 

空間デザインの原則

developer.apple.com

できるだけ静止した状態で使うことを想定

奥行はほどほどにテキストやボタンはフラットのほうが見やすい。角度がついているときは余計に

 

映像やプレゼンを表示するときは周りを暗くする 調光

湖や雲の動きなどわずかなアニメーションを加えると活気が生まれる

映画館を描画しなくても、部屋に映像の光を落とすだけで映画館にいる気持ちになる

大きい動きの時にはイマーシブ体験をフェードアウト

イマーシブ体験の出口もはっきりと

いいアプリを作るにはそのプロダクト(VisionPro)にあったものを作るべき

既存アプリを移行するとき、そのアプリのコアとなる空間を使った体験にまず焦点を当てる 

safari

developer.apple.com

視線でハイライトがちゃんと反応するようにしようという話

Quic kLookによるAR

WebXRの話しあった!

ビルドインでサポートされている

イマーシブなWebはまだ探求の余地がたくさんあるから、意見をお聞かせくださいだって

Unity

VR app

RecRoomをVisionProに移植するには・・・という内容なのかと最初は思ったが、そこまで細かい話はなかった

developer.apple.com

URPを選ぶといい。見ているところを改造度高くできるfoveated renderingが使用できる

single-pass instanced renderingも使える。

昔Mtoonはうまく表示されなかったけど対応されたかな?

bibinbaleo.hatenablog.com

オリジナルのシェーダーの場合、深度に値があることを確認せよ

XR Interaction Toolkitでハンドコントロール

Grab,Teleport Hoverなど入力できる

poke?

Gaze Interactorで視線対応

ピンチジェスチャー

Unity Hands Package

自分の好きなハンドモデルに置き換えることもできる

テレポートを具体的にどんな操作でやるか説明なかったが、テレポートの映像は流れてたのでテレポートさせてもいいんだな~

没入型の Unity アプリを作成する

developer.apple.com

フルVRじゃなくてこういうタイプのアプリの作り方

Unity Poly SatialがRealityKitに変換してくれる?(変換しないといけないの・・・?)

Play to deviceでビルドしなくても実機でプレビューや編集ができる。今はShare Spaceタイプのアプリでのみ使用可能

QuickLook(AR)

3Dモデルの作り方

developer.apple.com

アニメーションさせるときはBox内に収まるように

正面が自動でこっちを向く

最初に表示されるときの最小の大きさと最大の大きさが定義されている。そのあと独自の大きさに変更できる

勝手に影は落とすのでオリジナルな影を入れない

正面向き調整

パフォーマンス

Reality Compose Proでメッシュ数などいろいろ見れる↑

25MB以下にすることをおすすめ

組み込み方

developer.apple.com

 

最後に

UIデザイン周りは具体的で面白かった。

理解が深まった気がする

まだ全部見てないけど、他のは開発周りやSwiftに特化した話が多そう。どれが私の役に立つんだろう?

 

動画内でxrOSって言ってることに途中で気づいた。

このツイートを昔見たから直前までxrOSという名前だった説は知ってたけど、普通に動画でも言ってたんだね~