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

ビューアの埋め込み

SuperSplat Viewerはnpmで@playcanvas/supersplat-viewerとして公開されています。自分のサイトに組み込み、任意のスプラットファイルを指定し、URLパラメータまたはJSON設定ドキュメントで設定できる、自己完結型の静的ウェブアプリです。

インストール​

npm install @playcanvas/supersplat-viewer

パッケージはビューアのindex.html、index.css、index.jsを文字列としてエクスポートしており、自分のビルドパイプラインでテンプレート化できます：

import { html, css, js } from '@playcanvas/supersplat-viewer';

// The full markup of the viewer page
console.log(html);

// The viewer's stylesheet
console.log(css);

// The viewer's compiled JS bundle
console.log(js);

これは、EditorのHTMLエクスポートが単一ファイルのビューアを生成する際に内部的に使う仕組みと同じです。特定のsettings.jsonを埋め込んだり、カスタムスカイボックスに差し替えたり、デフォルトのポスター画像を置き換えたりした自前のテンプレートバンドルを構築したいときに使います — CDNからビューアを読み込むランタイムコストを支払うことなく行えます。

URLパラメータ​

ビューアのビルド済みファイルを自前でホストし、各インスタンスをクエリパラメータで設定したい場合、次のパラメータがサポートされています：

パラメータ説明デフォルト
settingsExperience Settings JSONファイルのURL./settings.json
contentシーンファイルのURL（.ply、.sog、.meta.json、.lod-meta.json、.compressed.ply）./scene.compressed.ply
skyboxエクイレクタンギュラースカイボックス画像のURL(なし)
posterシーン読み込み中に表示する画像のURL(なし)
nouiビューアの組み込みUIを非表示(off)
noanimアニメーショントラックを一時停止状態で開始(off)
ministatsランタイムのCPU/GPUパフォーマンスグラフを表示(off)
unified統一レンダリングを強制(off)
aaアンチエイリアシングを有効化（unifiedモードでは非対応）(off)

これらのフラグはビューアの進化に伴って変更される可能性があります。現在のセットについてはプロジェクトREADMEを参照してください。

Settings JSON​

settings URLパラメータはExperience Settings v2ドキュメントを指します — StudioがSaveのたびに保存するのと同じJSONフォーマットです。完全なスキーマ、デフォルト、移行に関するメモはExperience Settingsリファレンスを参照してください。

完全な最小限のsettings.json（v2スキーマが要求するすべてのフィールドを、新規シーンに対してStudioが出力するデフォルトで埋めたもの）：

{
  "version": 2,
  "tonemapping": "linear",
  "highPrecisionRendering": false,
  "background": {
    "color": [0, 0, 0]
  },
  "postEffectSettings": {
    "sharpness": { "enabled": false, "amount": 0 },
    "bloom":     { "enabled": false, "intensity": 0.1, "blurLevel": 2 },
    "grading":   { "enabled": false, "brightness": 1, "contrast": 1, "saturation": 1, "tint": [1, 1, 1] },
    "vignette":  { "enabled": false, "intensity": 0.5, "inner": 0.3, "outer": 0.75, "curvature": 1 },
    "fringing":  { "enabled": false, "intensity": 0.5 }
  },
  "cameras": [
    { "initial": { "position": [0, 1, -1], "target": [0, 0, 0], "fov": 75 } }
  ],
  "animTracks": [],
  "annotations": [],
  "startMode": "default"
}

すべてのフィールド — ポストエフェクトのパラメータ、注釈、アニメーションキーフレーム、トーンマッピングオプションなど — の完全なカバレッジについては、Experience Settingsリファレンスを参照してください。

プログラム的な公開​

EditorやStudioのUIを経由せずにスプラットを公開し、設定を更新したい場合、Splat Publishing APIが背後のRESTエンドポイントを提供しています。

関連項目​