レンダリング性能最適化ガイド
本ガイドは、さまざまな性能レベルのデバイスで SDK を最適化し、スムーズな 3DGS(3D Gaussian Splatting)レンダリング体験を実現するためのものです。
1. アンチエイリアシングの無効化
Three.js の WebGLRenderer はデフォルトでアンチエイリアシングを有効にしません。プロジェクトで antialias: true を有効にしている場合、パフォーマンスが重要なシーンでは無効化を検討してください:
const renderer = new THREE.WebGLRenderer({ antialias: false });
なぜ無効化できるのか? 3DGS の各ガウシアンポイントは、滑らかに減衰する半透明な楕円です。多数の楕円が重なることでエッジが自然に滑らかになり、追加のマルチサンプルアンチエイリアシング(MSAA)は不要です。MSAA を無効にすることで、GPU のピクセルあたりのサンプリング回数を削減でき(通常4回から1回に)、レンダリングフレームレートが向上します。
Cesium ユーザー:Cesium の Viewer はデフォルトで MSAA を有効にしないため、追加の操作は不要です。
2. レンダリング解像度の低減
デバイスピクセル比を下げることで、GPU が処理する必要のあるピクセル総数を比例的に削減できます。これは GPU フィルレートのボトルネックに対して最も効果的な手段です。
Three.js:
// 高性能デバイス:ネイティブピクセル比を使用
renderer.setPixelRatio(window.devicePixelRatio);
// 中性能デバイス:ピクセル比を制限
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
// 低性能デバイス/モバイル:固定1xレンダリング
renderer.setPixelRatio(1.0);
Cesium:
const viewer = new Cesium.Viewer('container', {
// resolutionScale でレンダリング解像度を制御
resolutionScale: 1.0 // 低性能デバイスは 1.0、高性能デバイスは window.devicePixelRatio を使用
});
パフォーマンス比較参考(1080p 論理解像度基準):
| ピクセル比 | 実際レンダリングピクセル数 | 相対コスト |
|---|---|---|
| 1.0 | 1920×1080 ≈ 207万 | 1× |
| 1.5 | 2880×1620 ≈ 466万 | 2.25× |
| 2.0 | 3840×2160 ≈ 829万 | 4× |
| 3.0 | 5760×3240 ≈ 1866万 | 9× |
高DPIスクリーン(Retina等)の
devicePixelRatioは通常2または3です。1.0に下げることで、フラグメント処理性能が4〜9倍向上しますが、レンダリング画面がぼやけるトレードオフがあります。
3. 最大レンダリングスプラット数の制限 — setMaxSplats
これは最も重要なパフォーマンス調整パラメータです。 フレームあたりのレンダリングに参加するガウシアンスプラットの上限を制御します。
lccObj.setMaxSplats(3000000); // フレームあたり最大300万スプラット
SDK の LOD スケジューラは各フレームでシーンの空間インデックスを走査し、距離と視錐台に基づいてレンダリングするノードを選択します。合計スプラット数がこの制限を超えると、スケジューラは遠方や低優先度のノードから破棄を開始し、合計数が制限を満たすまで続けます。
参考値:PC 端:90万~1000万、モバイル端:50万~260万。デバイスの性能に応じて選択してください。詳細は末尾のデバイスティア別推奨設定を参照してください。
4. ノードあたりの最大スプラット数の制限 — setMaxNodeSplats
個々の空間ノードの最大レンダリングスプラット数を制御します。このしきい値を超えるノードは、自動的により粗い LOD レベルにダウングレードされます。
lccObj.setMaxNodeSplats(1500000); // ノードあたり最大150万スプラット
なぜこのパラメータが必要か? 大規模シーンでは、建物が密集したエリアなどの高密度領域の単一ノードが最高 LOD で数百万のガウシアンポイントを含む場合があります。制限がなければ、カメラがこのようなエリアに近づくと、1つのノードがレンダリング予算全体を消費し、他の領域に予算が残りません。このパラメータにより、レンダリング予算の配分がより均等になります。
推奨値:通常は setMaxSplats 値の 1/3~2/3 に設定します。シーンの密度とデバイスティアに応じて調整してください。詳細は末尾のデバイスティア別推奨設定を参照してください。
5. レンダリング開始 LOD の制限 — setStartLod
最高精度レベルを制御します。LOD 0 が最も精細で、値が大きいほど精度が低くなります。
lccObj.setStartLod(0); // 最高品質(デスクトップのデフォルト)
lccObj.setStartLod(1); // 最精細レベルをスキップ(モバイルのデフォルト)
lccObj.setStartLod(2); // 最初の2レベルをスキップ(非常に低性能なデバイス)
SDK はシーンデータに対してマルチレベル LOD を構築します。LOD 0 は完全な精度データを含み、LOD 1 は LOD 0 の約1/2のスプラット数となり、以降各レベルで順次減少します。setStartLod はスケジューラが選択できる最高精度の LOD レベルを制限します。1に設定すると、カメラがオブジェクトに近づいても LOD 0 データはロードされません。
パフォーマンスへの影響:
| 設定 | 近距離品質 | スプラット数削減 | 使用シーン |
|---|---|---|---|
setStartLod(0) | 最高 | — | ハイエンド PC |
setStartLod(1) | 中程度 | 約50% | ミッドレンジ PC 以下、全モバイル |
setStartLod(2) | やや低い | 約75% | ローエンド PC/モバイル |
6. 最大レンダリング距離の制限 — setMaxDistance
カメラからの最大レンダリング距離をメートル単位で制御します。この距離を超えるコンテンツはダウンロード、解凍、レンダリングされません。
lccObj.setMaxDistance(200); // デスクトップのデフォルト
lccObj.setMaxDistance(100); // モバイルのデフォルト
最大距離を小さくすると可視ノード数が減り、ネットワークダウンロード、CPU ソート、GPU レンダリングの全パイプラインコストが低減します。屋内や近距離閲覧シーンに適しています。
注意:SDK には高度適応メカニズムが組み込まれており、カメラが20メートル以上の高さに上昇すると距離制限が自動的に緩和され、俯瞰視点でより遠くまで見渡せるようになります。
参考値:
| プラットフォーム | 範囲 |
|---|---|
| PC | 100~240 |
| モバイル | 80~110 |
詳細は末尾のデバイスティア別推奨設定を参照してください。
7. LOD 自動最適化 — setLodAutoLevelUp
有効にすると、レンダリング予算に余裕がある場合に SDK が自動的に一部のノードの精度を向上させます。
lccObj.setLodAutoLevelUp(true); // 有効化(中〜高性能デバイス推奨)
lccObj.setLodAutoLevelUp(false); // 無効化(低性能デバイスまたは安定フレームレート重視の場合推奨)
実際のレンダリングスプラット数が setMaxSplats の制限を下回る場合(例えばカメラが開放的なエリアを向いている場合)、自動最適化メカニズムは残りの予算を近くのノードに割り当て、より高精度の LOD データを自動的にロードして詳細を補完します。
トレードオフ:有効にすると視覚品質が向上しますが、追加のデータダウンロードと解凍が発生し、低性能デバイスでは時折フレームレートの変動が生じる可能性があります。
8. 球面調和関数ライティング — useShcoef
球面調和関数ライティング(SH)により、ガウシアンスプラットの色が視線角度に応じて変化し、よりリアルな反射と光沢効果を実現します。SDK ではデフォルトで無効です。
// 有効にする前に SH 係数データが含まれているか確認
if (lccObj.hasShcoef()) {
lccObj.useShcoef(true, (percent) => {
console.log('SH loading: ' + (percent * 100).toFixed(1) + '%');
});
}
// 無効化
lccObj.useShcoef(false, () => {});
有効にした場合の効果:
- オブジェクト表面の反射や光沢が視線角度に応じて自然に変化
- レンダリング品質が大幅に向上(特に金属、ガラス、塗装面などの高光沢素材)
パフォーマンスコスト:
- GPU メモリの増加(RGB 球面調和係数の追加保存が必要)
- GPU 頂点シェーダーの計算量増加(15の追加 SH 基底関数の計算が必要)
- LCC フォーマットの場合、追加の SH データファイルのダウンロードが必要
推奨:ハイエンドデスクトップデバイスでのみ有効にしてください。モバイルでの使用は推奨しません。
9. その他の最適化オプション
ローカルキャッシュ(IndexedDB)
useIndexDB: true(デフォルトで有効)によりローカルデータキャッシュを有効にします。同じシーンへの2回目以降のアクセスではローカルから直接データを読み込み、ロード時間を大幅に短縮します。
LOD スムーズ遷移
LCC2 は LOD スムーズ遷移に対応しています(デフォルトで有効)。LOD 切り替え時の視覚的なポッピングを軽減します:
lccObj.setSmooth(true); // 有効化(デフォルト)
lccObj.setSmooth(false); // 無効化
この機能は隣接する空間ノード間の LOD 差を制約し、精度の不連続を解消します。CPU オーバーヘッドは極めて小さく、有効のままにすることを推奨します。
デバイスティア別推奨設定
PC
| ティア | splatCount | nodeSplatCount | distance | startLod | devicePixelRatio |
|---|---|---|---|---|---|
| High | 10,000,000 | 6,000,000 | 240 | 0 | ネイティブ dpr |
| MidHigh | 4,200,000 | 1,500,000 | 220 | 1 | ネイティブ dpr |
| Balance | 2,200,000 | 1,000,000 | 200 | 1 | dpr > 1 ? 1.4 : dpr |
| MidLow | 1,800,000 | 700,000 | 150 | 2 | 1 |
| Low | 900,000 | 400,000 | 100 | 2 | dpr > 1 ? 0.8 : 0.5 |
モバイル
| ティア | splatCount | nodeSplatCount | distance | startLod | devicePixelRatio |
|---|---|---|---|---|---|
| High | 2,600,000 | 1,000,000 | 110 | 1 | ネイティブ dpr |
| MidHigh | 1,800,000 | 800,000 | 100 | 1 | ネイティブ dpr |
| Balance | 1,000,000 | 600,000 | 90 | 1 | dpr > 1 ? 1.2 : dpr |
| MidLow | 800,000 | 400,000 | 80 | 2 | 1 |
| Low | 500,000 | 300,000 | 80 | 2 | 0.8 |