全画面Web3Dコンテンツ実装時の確認事項
sngazmWebサイトのファーストビューのようなものを想定。
主にReact(ViteやNext)とThree.js(R3F周辺ライブラリ)を使って開発してるけど、
今回はこのツールを使おうみたいな話ではなく、Web3Dならではの仕様の段階でトラブルを減らすために気にした方がいいことなどをまとめていく
対応端末
めちゃめちゃ当たり前だけど対応端末は事前にはっきりさせておく
PC
- モダンブラウザでもMacのSafariで仕様が違ったりする
タブレット
- 大きさPCなのにタッチイベントしかなかったりして一癖ある
- iPad ProだけUAが違って扱いを分ける必要があったりする
モバイル
- iOSのChromeとか、微妙なところで問題が起こったりする(した)
- AR系の機能など、WebViewからだと呼び出せない機能もある
sngazmモデル最適化
ファイルサイズやポリゴン数についてよく聞かれるが完全な基準はない
ユースケースによって様々だが、Webブラウザ上で動かすなら基準として35000ポリゴン、ファイルサイズ10MB以下を挙げられる(結構厳しめ)
他社にモデル作ってもらうならこの記事を送った方がいいかも
最適化じゃないけどThree.jsで表示する予定のモデルならglTF Viewerでの見た目を確認しながら作ってもらったほうがいい。これが一番シンプルなThree.jsでのロード時の見え方に近い。美しいレンダリング画像でクライアントを期待させすぎてしまうとバッドサプライズになることも
他にもiOS QuicklookでARする用のusdzモデルだとApple公式では10万ポリゴン以下を推奨してたりする。他にも色々ある
コンテンツの性質によっては結構厳しい基準だと思うが、あくまで過去の低スペックな端末も対応させるための基準なので、多少超えたところで最近のデバイスなら問題なく動くことも多い。
ただ、お客さんの端末で急に落ちてトラブルになったりするので、基準を越えるなら越えるで想定デバイスをレンタルするなどして試しながら進めるようにしたい
sngazmデバイスの操作方法の違いに起因する問題
タッチ端末でのホバー表現はどうするか
マウス操作しか考えてないとホバーありきでの表現がタッチ端末で対応できないことがある
一般的な解決策
- スライド操作で前面にアイテムが来たときにホバーと同じ挙動をさせる
- 一回タップでホバーと同じ挙動、二回目のタップでクリック
タッチ端末でのスクロールはどうするか
マウス操作しか考えてないとスクロール移動(ページ自体のスクロール)に対応できてないことがある(Webページの下に行こうとして指をスライドすると3Dビューがクルクル〜ってなるみたいな)
一般的な解決策
- コンテンツ部分をスライドで回転、余白をスライドでスクロール
- (touchmoveイベントを条件で分けてpreventDefaultする必要があるので、挙動にカクつきが発生する可能性がある旨を納得してもらう必要あり)
- コンテンツと余白部分がDOMで別れてるなら、CSSでtouch-eventを設定して挙動を分ければ良い
sngazmローディング表現
モデルを読み込む場合はローディング画面が必要になる場合が多い
ローディングもコンテンツの一部として考えてて、回線が早くて逆に一瞬で終わってもらうと困る、という場合は、一定時間の経過とロードの完了の2つの条件が揃ったときにコンテンツを開始する必要がある。ローディングとは
sngazm出現アニメーション
いきなり出てくるよりはちょっといい感じに…ぐらいの感じで考えられがちだが、具体的にPCの場合、スマホの場合でどうすべきか明確に握っておいた方がいい。
一定の修正フィードバックは必ず発生するものと考える
sngazmコンテンツレイアウト
大抵の場合3Dコンテンツと一緒にテキストコンテンツとか他のものを同時に表示させる必要があるので、そのレイアウトとの兼ね合いを考える必要がある
- 3Dコンテンツは横幅だけじゃなくて画面のアスペクト比が変わると見え方が大きく変わる場合が多い。高さが低い場合に崩れたりしないようにする
- PCとスマホで両方全画面にしたい場合、別々でデザイン組んでもその中間のサイズで配置どうするか問題が発生したりする
- iOS Safariでは初回スクロール時に高さのリサイズが発生するので、素朴にサイズ基準で描画してると変な挙動になる場合がある
sngazmDOMとの連携問題
3Dコンテンツの上にインタラクティブなDOMを表示する場合、細かいトラブル起こりがち
DOMにマウスカーソルが乗った瞬間に3Dコンテンツから離れた判定が起こる…など