docs: track Web Components 0.22.0 — engine 2.22.0 and budgeted splat LOD

docs/user-manual/web-components/tags/pc-anim-clip.md

@@ -77,7 +77,7 @@ The same walk cycle declared as two clips, `walk` and a reversed, slowed `sneak`
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset src="https://developer.playcanvas.com/assets/t-rex.glb" id="t-rex"></pc-asset>
     <pc-material id="floor" diffuse="#3a3f4b"></pc-material>
     <pc-scene>

docs/user-manual/web-components/tags/pc-anim.md

@@ -107,7 +107,7 @@ A GLB with a single walk cycle, declared twice: `walk` at its authored speed and
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset src="https://developer.playcanvas.com/assets/t-rex.glb" id="t-rex"></pc-asset>
     <pc-material id="floor" diffuse="#3a3f4b"></pc-material>
     <pc-scene>

docs/user-manual/web-components/tags/pc-asset.md

@@ -107,7 +107,7 @@ Two assets: a script (an engine helper loaded straight from a CDN) and a GLB mod
 ```html live-example
 <pc-app>
     <!-- Script asset: type inferred from the .mjs extension -->
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <!-- Container asset: type inferred from the .glb extension -->
     <pc-asset src="https://developer.playcanvas.com/assets/playcanvas-cube.glb" id="cube"></pc-asset>
     <pc-scene>

docs/user-manual/web-components/tags/pc-gsplat.md

@@ -22,20 +22,42 @@ When rendering splat-based scenes, it is recommended to set `antialias` to `fals
 | `asset` | [Asset ID](../attributes.md#asset-and-material-ids) | - | Gaussian splat asset ID (must reference a `gsplat` type asset) |
 | `cast-shadows` | Boolean | `"false"` | Whether the gsplat component casts shadows |
 | `enabled` | Boolean | `"true"` | Enabled state of the component |
-| `lod-base-distance` | Number | `"5"` | Distance for the first LOD transition (LOD 0 to LOD 1). Splats closer than this use the highest-quality LOD. Minimum `0.1`. Only affects assets that contain LOD levels. |
-| `lod-multiplier` | Number | `"3"` | Multiplier between successive LOD distance thresholds, forming a geometric progression. Higher values switch to coarser LODs sooner. Minimum `1.2`. Only affects assets that contain LOD levels. |
+| `lod-falloff` | Number | `"1"` | How quickly this splat's detail falls off away from the camera, as an exponent from 0 to 8. Higher values concentrate more of the scene-wide splat budget near the camera; lower values spread it more evenly. Only affects assets that contain LOD levels. |
 | `lod-range-max` | Number | `"99"` | Maximum allowed LOD index (inclusive). The LOD selected by distance is clamped so it never goes coarser (higher index) than this value. The default of `99` effectively means "no cap". Only affects assets that contain LOD levels. |
 | `lod-range-min` | Number | `"0"` | Minimum allowed LOD index (inclusive). The LOD selected by distance is clamped so it never goes finer (lower index) than this value. Raising it avoids downloading the highest-quality (largest) LOD files. Only affects assets that contain LOD levels. |
 
 </div>
 
+## Level of Detail
+
+A streamed splat asset is one exported with LOD levels: its [`<pc-asset>`](../pc-asset) `src` points at the export's `lod-meta.json`, which is downloaded up front while the splat data itself streams in on demand. Such an asset is not rendered at full detail everywhere. The engine works to a **scene-wide splat budget**: a target number of splats on screen across every `<pc-gsplat>` in the scene, spent where it buys the most. The budget and how it is spent are properties of the scene, so they live on [`<pc-scene>`](../pc-scene); how each splat competes for its share lives here:
+
+| Attribute | On | What it controls |
+| --- | --- | --- |
+| `gsplat-splat-budget` | [`<pc-scene>`](../pc-scene) | The total number of splats to render across the scene. Defaults to 1,000,000; a budget larger than the scene resolves every node at its finest level |
+| `gsplat-lod-mode` | [`<pc-scene>`](../pc-scene) | `"error"` spends the budget where it removes the most approximation error; `"distance"` ignores the error metadata and steps detail down in concentric bands around the camera, for captures whose error tables are unreliable |
+| `lod-falloff` | `<pc-gsplat>` | How steeply *this* splat trades far-field detail for near-field detail within its share of the budget. 1 is neutral; higher values pull detail towards the camera |
+| `lod-range-min`, `lod-range-max` | `<pc-gsplat>` | Hard clamps on the LOD index this splat may use, whatever the budget decides — raise the minimum to avoid ever downloading the largest files |
+
+```html
+<pc-scene gsplat-splat-budget="1500000" gsplat-lod-mode="error">
+    <pc-entity name="capture">
+        <pc-gsplat asset="capture" lod-falloff="1.5" lod-range-min="1"></pc-gsplat>
+    </pc-entity>
+</pc-scene>
+```
+
+There is no way to switch budgeted selection off: a budget of zero or less would pin every node to its coarsest level rather than lift the cap, so the engine warns and keeps the default instead. To see everything at full detail, set a budget larger than the capture. None of this affects a plain `.ply`, `.sog` or `.splat` asset with no LOD levels, which always renders in full.
+
+The [Splat Streaming example](https://playcanvas.github.io/web-components/examples/splat-streaming.html) streams a large LOD capture and exposes the budget, so the trade-off can be watched rather than imagined.
+
 ## Example
 
 A Gaussian splat scanned from a real toy. Drag to orbit and scroll to zoom — and note the `<pc-app>` attributes recommended above:
 
 ```html live-example
 <pc-app antialias="false" max-pixel-ratio="1">
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
     <pc-scene>
         <pc-entity name="camera" position="0 0 2.5">

docs/user-manual/web-components/tags/pc-model.md

@@ -102,7 +102,7 @@ A GLB with a skeletal animation, played by the [`<pc-anim>`](../pc-anim) nested
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset src="https://developer.playcanvas.com/assets/t-rex.glb" id="t-rex"></pc-asset>
     <pc-material id="floor" diffuse="#3a3f4b"></pc-material>
     <pc-scene>

docs/user-manual/web-components/tags/pc-node.md

@@ -109,7 +109,7 @@ This GLB instantiates two nodes — `play` (the orange shell, its logo cut out o
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset src="https://developer.playcanvas.com/assets/playcanvas-cube.glb" id="cube"></pc-asset>
     <pc-material id="repaint" name="Repaint" diffuse="#4a9eff"></pc-material>
     <pc-scene>

docs/user-manual/web-components/tags/pc-scene.md

@@ -23,6 +23,8 @@ The `<pc-scene>` tag is used to define the scene.
 | `fog-density` | Number | `"0"` | Fog density for exponential fog types |
 | `fog-end` | Number | `"1000"` | End distance for linear fog |
 | `fog-start` | Number | `"0"` | Start distance for linear fog |
+| `gsplat-lod-mode` | Enum | `"error"` | How LOD levels are chosen for streamed Gaussian splats, within the splat budget: `"error"` \| `"distance"`. See [Level of Detail](../pc-gsplat#level-of-detail) |
+| `gsplat-splat-budget` | Number | `"1000000"` | Target number of splats rendered across every Gaussian splat in the scene. Distributed between streamed splat assets; a value of 0 or less warns and keeps the default |
 | `gravity` | Vector3 | `"0 -9.81 0"` | Gravity applied to rigid bodies as "X Y Z" values |
 
 </div>

docs/user-manual/web-components/tags/pc-sky.md

@@ -34,7 +34,7 @@ An equirectangular texture as a dome-projected sky that also lights the scene (n
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset id="skybox" src="https://developer.playcanvas.com/assets/sepulchral-chapel-rotunda-4k.webp"></pc-asset>
     <pc-scene>
         <pc-sky asset="skybox" type="dome" center="0 0.05 0" scale="20 20 20" lighting></pc-sky>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/web-components/tags/pc-anim-clip.md

@@ -77,7 +77,7 @@ description: "pc-anim-clip要素のリファレンス: pc-animコンポーネン
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset src="https://developer.playcanvas.com/assets/t-rex.glb" id="t-rex"></pc-asset>
     <pc-material id="floor" diffuse="#3a3f4b"></pc-material>
     <pc-scene>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/web-components/tags/pc-anim.md

@@ -107,7 +107,7 @@ const done = baseLayer.activeStateCurrentTime >= baseLayer.activeStateDuration;
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset src="https://developer.playcanvas.com/assets/t-rex.glb" id="t-rex"></pc-asset>
     <pc-material id="floor" diffuse="#3a3f4b"></pc-material>
     <pc-scene>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/web-components/tags/pc-asset.md

@@ -107,7 +107,7 @@ document.querySelector('pc-app').addEventListener('error', (event) => {
 ```html live-example
 <pc-app>
     <!-- スクリプトアセット: タイプは.mjs拡張子から推論されます -->
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <!-- コンテナアセット: タイプは.glb拡張子から推論されます -->
     <pc-asset src="https://developer.playcanvas.com/assets/playcanvas-cube.glb" id="cube"></pc-asset>
     <pc-scene>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/web-components/tags/pc-gsplat.md

@@ -22,20 +22,42 @@ description: "pc-gsplat要素のリファレンス: Gaussian splat Assetをレ
 | `asset` | [Asset ID](../attributes.md#asset-and-material-ids) | - | Gaussian splatアセットID (`gsplat`タイプのアセットを参照する必要があります) |
 | `cast-shadows` | Boolean | `"false"` | gsplatコンポーネントが影を落とすかどうか |
 | `enabled` | Boolean | `"true"` | コンポーネントの有効状態 |
-| `lod-base-distance` | Number | `"5"` | 最初のLOD遷移 (LOD 0 から LOD 1) の距離。これより近いスプラットは最高品質のLODを使用します。最小値は`0.1`。LODレベルを含むアセットにのみ影響します。 |
-| `lod-multiplier` | Number | `"3"` | 連続するLOD距離しきい値の間の乗数で、等比数列を形成します。値が大きいほど、より粗いLODへ早く切り替わります。最小値は`1.2`。LODレベルを含むアセットにのみ影響します。 |
+| `lod-falloff` | Number | `"1"` | このスプラットのディテールがカメラから離れるにつれてどれだけ速く落ちるかを、0から8の指数で指定します。値が大きいほどシーン全体のスプラット予算をカメラ近くに集中させ、小さいほど均等に分散させます。LODレベルを含むアセットにのみ影響します。 |
 | `lod-range-max` | Number | `"99"` | 許可される最大のLODインデックス (この値を含む)。距離によって選択されるLODは、この値より粗い (インデックスが大きい) ものにならないようにクランプされます。デフォルトの`99`は事実上「上限なし」を意味します。LODレベルを含むアセットにのみ影響します。 |
 | `lod-range-min` | Number | `"0"` | 許可される最小のLODインデックス (この値を含む)。距離によって選択されるLODは、この値より細かい (インデックスが小さい) ものにならないようにクランプされます。値を上げると、最高品質 (最大) のLODファイルのダウンロードを回避できます。LODレベルを含むアセットにのみ影響します。 |
 
 </div>
 
+## レベルオブディテール {#level-of-detail}
+
+ストリーミング用のスプラットアセットとは、LODレベル付きでエクスポートされたものです。その[`<pc-asset>`](../pc-asset)の`src`はエクスポートの`lod-meta.json`を指し、このファイルが先に読み込まれ、スプラットデータ自体はオンデマンドでストリーミングされます。こうしたアセットは、どこでもフルディテールで描画されるわけではありません。エンジンは**シーン全体のスプラット予算**、つまりシーン内のすべての`<pc-gsplat>`を合わせて画面に描くスプラット数の目標値に従って動き、最も効果の高い場所にそれを使います。予算とその使い方はシーンの性質なので[`<pc-scene>`](../pc-scene)に置かれ、各スプラットが自分の取り分をどう競うかはここに置かれます。
+
+| 属性 | 場所 | 制御する内容 |
+| --- | --- | --- |
+| `gsplat-splat-budget` | [`<pc-scene>`](../pc-scene) | シーン全体で描画するスプラットの総数。デフォルトは1,000,000。シーンより大きい予算を与えると、すべてのノードが最も細かいレベルで解決されます |
+| `gsplat-lod-mode` | [`<pc-scene>`](../pc-scene) | `"error"`は近似誤差を最も減らせる場所に予算を使います。`"distance"`は誤差メタデータを無視し、カメラを中心とした同心円状の帯でディテールを段階的に下げます。誤差テーブルが信頼できないキャプチャ向けです |
+| `lod-falloff` | `<pc-gsplat>` | *この*スプラットが自分の予算の中で、遠方のディテールを近くのディテールとどれだけ急にトレードするか。1が中立で、大きい値ほどディテールをカメラ側へ引き寄せます |
+| `lod-range-min`・`lod-range-max` | `<pc-gsplat>` | 予算の判断にかかわらず、このスプラットが使えるLODインデックスの上下限。最小値を上げれば、最大のファイルを一切ダウンロードしないようにできます |
+
+```html
+<pc-scene gsplat-splat-budget="1500000" gsplat-lod-mode="error">
+    <pc-entity name="capture">
+        <pc-gsplat asset="capture" lod-falloff="1.5" lod-range-min="1"></pc-gsplat>
+    </pc-entity>
+</pc-scene>
+```
+
+予算による選択を無効にする方法はありません。0以下の予算は上限を外すのではなく、すべてのノードを最も粗いレベルに固定してしまうため、エンジンは警告を出してデフォルトを使い続けます。すべてをフルディテールで見たい場合は、キャプチャより大きい予算を設定してください。LODレベルを持たない通常の`.ply`・`.sog`・`.splat`アセットにはどれも影響せず、常にフルで描画されます。
+
+[Splat Streamingのサンプル](https://playcanvas.github.io/web-components/examples/splat-streaming.html)は大きなLODキャプチャをストリーミングし、予算を操作できるようにしているので、このトレードオフを想像ではなく実際に眺めることができます。
+
 ## 例 {#example}
 
 実物のぬいぐるみをスキャンしたガウシアンスプラットです。ドラッグで軌道回転、スクロールでズームできます。上で推奨した `<pc-app>` の属性にも注目してください:
 
 ```html live-example
 <pc-app antialias="false" max-pixel-ratio="1">
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
     <pc-scene>
         <pc-entity name="camera" position="0 0 2.5">

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/web-components/tags/pc-model.md

@@ -102,7 +102,7 @@ console.log(anim.clips); // ['Walk', 'Idle']
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset src="https://developer.playcanvas.com/assets/t-rex.glb" id="t-rex"></pc-asset>
     <pc-material id="floor" diffuse="#3a3f4b"></pc-material>
     <pc-scene>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/web-components/tags/pc-node.md

@@ -109,7 +109,7 @@ pc-node 'Wheel' is ambiguous in model 'car' - specify index: [0] Body/Wheel_FL/W
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset src="https://developer.playcanvas.com/assets/playcanvas-cube.glb" id="cube"></pc-asset>
     <pc-material id="repaint" name="Repaint" diffuse="#4a9eff"></pc-material>
     <pc-scene>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/web-components/tags/pc-scene.md

@@ -23,6 +23,8 @@ description: "pc-scene要素のリファレンス: pc-app内のシーンコン
 | `fog-density` | Number | `"0"` | 指数フォグタイプの場合のフォグの密度 |
 | `fog-end` | Number | `"1000"` | 線形フォグの終了距離 |
 | `fog-start` | Number | `"0"` | 線形フォグの開始距離 |
+| `gsplat-lod-mode` | Enum | `"error"` | ストリーミングされるGaussian splatのLODレベルを、スプラット予算の範囲内でどう選ぶか：`"error"` \| `"distance"`。[レベルオブディテール](../pc-gsplat#level-of-detail)を参照 |
+| `gsplat-splat-budget` | Number | `"1000000"` | シーン内のすべてのGaussian splatを合わせて描画するスプラット数の目標値。ストリーミングされるスプラットアセット間で配分されます。0以下の値は警告を出し、デフォルトが維持されます |
 | `gravity` | Vector3 | `"0 -9.81 0"` | 「X Y Z」値としてリジッドボディに適用される重力 |
 
 </div>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/web-components/tags/pc-sky.md

@@ -34,7 +34,7 @@ description: "pc-sky要素のリファレンス: テクスチャアセットに
 
 ```html live-example
 <pc-app>
-    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/scripts/esm/camera-controls.mjs"></pc-asset>
+    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.0/scripts/esm/camera-controls.mjs"></pc-asset>
     <pc-asset id="skybox" src="https://developer.playcanvas.com/assets/sepulchral-chapel-rotunda-4k.webp"></pc-asset>
     <pc-scene>
         <pc-sky asset="skybox" type="dome" center="0 0.05 0" scale="20 20 20" lighting></pc-sky>

src/components/LiveExample/shell.js

@@ -4,8 +4,8 @@
 // The versions below pin every live example on the site. Bump them together
 // when the docs are updated to track a new @playcanvas/web-components release
 // (the engine version should match the library's dev-pinned engine).
-export const ENGINE_VERSION = '2.21.4';
-export const PWC_VERSION = '0.21.0';
+export const ENGINE_VERSION = '2.22.0';
+export const PWC_VERSION = '0.22.0';
 
 const CDN = 'https://cdn.jsdelivr.net/npm';