メインコンテンツまでスキップ

ビューアのセルフホスティング

SuperSplat Viewerはオープンソースであり、superspl.atに公開する代わりに（または併用して）スプラットコンテンツをセルフホストしたい場合は、SuperSplat Editorから直接エクスポートできます。エクスポートされたビューアは、使いやすいカメラコントロールを備えた任意のモダンブラウザで動作し、WebXRをサポートするデバイスではARおよびVRの可視化にも対応しています。

HTMLビューアのエクスポート​

スプラットをHTMLビューアとしてエクスポートするには：

  1. SuperSplat EditorでFile > Exportサブメニューを開きます。
  2. Viewer App…を選択します。
注記

ビューアのエクスポートには、WebGPUをサポートするブラウザが必要です。埋め込まれるスプラットデータのSOG圧縮がGPU上で実行されるためです。WebGPUのないブラウザでは、エクスポートは「This export requires WebGPU, which is not available in this browser. Please try a recent version of Chrome, Edge or Safari.」というエラーで失敗します。

エクスポートオプション​

ビューアのエクスポートはいくつかのオプションで設定できます：

Viewer Export

オプション説明
Export Typeエクスポートされるビューアの形式を制御します：
• HTML: スプラットがSOGに圧縮され、Base64エンコードされてファイルに直接埋め込まれた単一ページの.htmlファイル。すべてが1つのファイルにまとめられているため非常に便利で、ファイルをダブルクリックするだけでfile://プロトコルを使ってブラウザで動作します。ただし、Base64エンコードによりZIP Package形式よりも約30%大きくなり、ブラウザによって最大サイズに異なる制限があります（32MB未満であればどこでも読み込まれるはずですが、それ以上の場合は問題が発生する可能性があります）
• ZIP Package: ビューアアプリ（index.html、index.js、index.css、settings.json）と、バンドルされたSOGファイル（index.sog）としてのスプラットデータを含むzipファイル。サイズが小さく、読み込みが速く、どこでも読み込まれることが保証されています。ただし、http://経由でのみ読み込まれるため、ローカルウェブサーバ（例：NodeのserveやPythonのhttp.server（python -m http.server））を実行する必要があります
Animation有効にすると、タイムラインで作成したカメラアニメーションが含まれ、ビューアの読み込み時に再生されます。タイムラインにキーフレームがある場合にのみ使用でき（その場合はデフォルトで有効）ます
Loop Mode含まれたカメラアニメーションの再生方法：
• None: 1回再生して停止
• Repeat（デフォルト）: 連続してループ
• Ping Pong: 順方向と逆方向の再生を繰り返し
Backgroundビューアの背景色。Editorの現在の背景色がデフォルトになります
Field of Viewビューアのカメラの垂直視野角（度）。Editorカメラの現在の設定がデフォルトになります
SH Bandsエクスポートされるスプラットデータに含める球面調和バンドの数

エクスポートされたビューアのカメラは、エクスポートした瞬間のビューポートカメラのポーズから開始します。エクスポートする前に、お気に入りのビューでフレーミングしておきましょう。

HTMLビューアのウェブホスティング​

エクスポート後、HTMLビューアファイルをどこかにホストしてアクセス可能にできます。簡単なオプションの1つはGitHub Pagesを使うことです：

  1. GitHubで新しいリポジトリを作成します。

  2. エクスポートしたHTMLファイルを追加します（ZIP Packageの場合は、zipを展開した中身 index.html、index.sog、index.js、index.css、settings.json を追加します）。

  3. リポジトリのSettingsページにアクセスします。左側でPagesを選択します。SourceがDeploy from a branchに設定されていることを確認し、Branchをmainに設定してSaveをクリックします。

  4. ビューアが公開されるまでに数分かかります。URLは次の形式になります：

    https://<github-username>.github.io/<repository-name>/<html-filename>

関連項目​

  • SuperSplat Viewerの概要 — オープンソースのビューアとは何か、いつ使うか
  • Embedding — @playcanvas/supersplat-viewer npmパッケージを自分のウェブアプリで使う
  • Experience Settings — Studioが書き、Viewerが読むJSONコントラクト