sparkjsdev · MasahiroOgawa · Dec 25, 2025 · Dec 25, 2025 · Dec 25, 2025 · Dec 25, 2025
diff --git a/README.md b/README.md
@@ -26,6 +26,18 @@
     </picture>
   </a>
 
+> ## Spark 2.0 Preview
+> 
+> Spark 2.0 Developer Preview is now available!
+> - [Read the docs](https://sparkjs.dev/2.0.0-preview/docs/)
+> - [Check out the preview branch](https://github.com/sparkjsdev/spark/tree/v2.0.0-preview)
+> 
+> Version 2.0 is a major rewrite of the renderer to enable huge worlds made of dynamic 3D Gaussian Splats. It's a complete solution for creating, streaming, and rendering huge 3DGS worlds on the web on any device. It is mostly backward compatible with with Spark 0.1.*.
+> 
+> Read about all the [New Features in 2.0](https://sparkjs.dev/2.0.0-preview/docs/new-features-2.0/), learn how to migrate in our [1.0 → 2.0 Migration Guide](https://sparkjs.dev/2.0.0-preview/docs/0.1-2.0-migration-guide/), and get started quick with our [Level-of-Detail system](https://sparkjs.dev/2.0.0-preview/docs/lod-getting-started/).
+
+> New [Spark 2.0 examples](https://sparkjs.dev/2.0.0-preview/examples/) have been added, including [huge streaming LoD worlds](https://sparkjs.dev/2.0.0-preview/examples/#streaming-lod) and [streaming multiple simultaneous LoD worlds](https://sparkjs.dev/2.0.0-preview/examples/#multi-lod).
+
 ## Features
 
 - Integrates with THREE.js rendering pipeline to fuse splat and mesh-based objects

diff --git a/docs/distance-rescale-guide-ja.md b/docs/distance-rescale-guide-ja.md
@@ -0,0 +1,122 @@
+# Distance Measurement & Rescale 使用ガイド
+
+## アクセス方法
+
+**URL**: [https://nice-meadow-018297c00.eastasia.6.azurestaticapps.net/examples/distance-rescale/](https://nice-meadow-018297c00.eastasia.6.azurestaticapps.net/examples/distance-rescale/)
+
+---
+
+## 機能概要
+
+3DGSモデル上で2点間の距離を測定し、実際の寸法に合わせてモデルをリスケール（拡大縮小）できます。座標系の可視化、原点の変更、柔軟なファイル読み込み機能を備えています。
+
+---
+
+## 使い方
+
+### 1. 3DGSファイルの読み込み
+
+3つの方法でファイルを読み込むことができます:
+
+**方法A: ボタンから読み込み**
+1. 画面右上の **Controls** パネルにある **「Load PLY File」** ボタンをクリック
+2. ファイル選択ダイアログから `.ply`、`.spz`、`.splat` ファイルを選択
+3. モデルが自動的に読み込まれ、カメラが自動調整される
+
+**方法B: ドラッグ&ドロップ**
+1. `.ply`、`.spz`、`.splat` ファイルをファイルエクスプローラーからドラッグ
+2. 3Dキャンバス上に直接ドロップ
+3. モデルが自動的に読み込まれる
+
+**方法C: デフォルトモデル**
+- ページを開くとペンギンのモデルがデフォルトで読み込まれます
+
+### 2. 座標軸の表示
+
+1. Controls パネルの **「Toggle Axes」** ボタンをクリック
+2. 原点(0,0,0)から赤(X軸)、緑(Y軸)、青(Z軸)の軸が表示される
+3. もう一度クリックすると軸を非表示にできる
+
+### 3. 新しい原点の設定
+
+1. モデル上の任意の点を **右ダブルクリック**
+2. モデル全体の座標が変換され、その点が新しい原点(0,0,0)になる
+3. 座標軸(表示されている場合)が新しい原点を示す
+4. 既存の測定点はすべてクリアされる
+
+**ヒント:**
+- カメラ位置は視点を維持するように自動調整される
+- 異なる点を右ダブルクリックすることで、何度でも原点を変更できる
+- エクスポートされるPLYファイルには変換後の座標が含まれる
+
+### 4. 測定点の配置
+
+1. **1点目**: モデル上の任意の位置を左クリック（緑のマーカーが表示）
+2. **2点目**: モデル上の別の位置を左クリック（青のマーカーが表示）
+3. 2点間に黄色の線が表示され、距離が表示される
+
+### 5. 測定点の調整
+
+- マーカーをドラッグすると、視線方向に沿って位置を調整可能
+- 距離はリアルタイムで更新される
+- 測定距離はControlsパネルと画面右下に表示される
+
+### 6. リスケール（サイズ変更）
+
+1. **「Measured Distance」** フィールドに現在の測定値が表示される
+2. **「New Distance」** に実際の距離（メートル単位）を入力
+3. **「Apply Rescale」** をクリック
+4. モデル全体が指定した寸法に合わせてスケーリングされる
+
+### 7. モデルの保存
+
+1. **「Export PLY」** をクリック
+2. `rescaled_model.ply` としてダウンロードされる
+3. エクスポートされるファイルにはすべての変換（リスケールと原点変更）が含まれる
+
+### 8. リセット
+
+- **「Reset Points」** をクリックすると測定点がクリアされ、最初からやり直せる
+- 原点の変換とリスケールは保持される
+
+---
+
+## 操作方法
+
+| 操作 | 動作 |
+|------|------|
+| 左クリック | 測定点を配置 |
+| マーカーをドラッグ | 測定点の位置を調整 |
+| 左ドラッグ（空白部分） | カメラ回転（無制限回転） |
+| 右ドラッグ / 2本指ドラッグ | カメラ移動 |
+| スクロール / ピンチ | ズーム |
+| 右ダブルクリック | 座標原点を設定 |
+
+**カメラ操作:**
+- すべての方向に無制限回転可能（角度制限なし）
+- ズーム制限によりパフォーマンス問題を防止（最小: 0.5、最大: 50）
+
+---
+
+## UI レイアウト
+
+- **左上**: 操作説明
+- **右上**: Controls パネル（折りたたみ可能）
+  - Load PLY File（PLYファイル読み込み）
+  - Toggle Axes（軸の表示切替）
+  - Measured Distance（測定距離・読み取り専用）
+  - New Distance（新しい距離）
+  - Apply Rescale（リスケール適用）
+  - Reset Points（測定点リセット）
+  - Export PLY（PLY出力）
+- **右下**: 距離表示（測定中に表示）
+
+---
+
+## 注意事項
+
+- リスケール後のモデルは現在の原点を基準にスケーリングされます
+- 新しい原点を設定すると、すべての測定がクリアされます
+- 原点変更時、カメラは視点を維持するように自動調整されます
+- エクスポートされるPLYファイルには最終的な変換後の座標が含まれます
+- すべてのファイル形式（.ply、.spz、.splat）が読み込みとドラッグ&ドロップに対応しています
diff --git a/docs/distance-rescale-guide.md b/docs/distance-rescale-guide.md
@@ -0,0 +1,122 @@
+# Distance Measurement & Rescale Usage Guide
+
+## Access
+
+**URL**: [https://nice-meadow-018297c00.eastasia.6.azurestaticapps.net/examples/distance-rescale/](https://nice-meadow-018297c00.eastasia.6.azurestaticapps.net/examples/distance-rescale/)
+
+---
+
+## Overview
+
+Measure distances between two points on a 3D Gaussian Splatting (3DGS) model and rescale the model to match real-world dimensions. Features include coordinate system visualization, custom origin setting, and flexible file loading.
+
+---
+
+## Usage
+
+### 1. Loading 3DGS Files
+
+You can load files in three ways:
+
+**Option A: Load Button**
+1. Click the **"Load PLY File"** button in the Controls panel (top-right)
+2. Select a `.ply`, `.spz`, or `.splat` file from the dialog
+3. The model loads automatically and the camera adjusts
+
+**Option B: Drag & Drop**
+1. Drag a `.ply`, `.spz`, or `.splat` file from your file explorer
+2. Drop it directly onto the 3D canvas
+3. The model loads automatically
+
+**Option C: Default Model**
+- A penguin model loads by default when you first open the page
+
+### 2. Coordinate Axes Display
+
+1. Click the **"Toggle Axes"** button in the Controls panel
+2. Red (X), Green (Y), Blue (Z) axes appear from the origin (0,0,0)
+3. Click again to hide the axes
+
+### 3. Setting a New Origin
+
+1. Right double-click on any point of the model
+2. The model geometry transforms so that point becomes the new origin (0,0,0)
+3. The coordinate axes (if visible) mark the new origin
+4. All previous measurements are cleared
+
+**Tips:**
+- The camera position adjusts to maintain your view
+- You can set multiple new origins by right double-clicking different points
+- Exported PLY files include the transformed coordinates
+
+### 4. Placing Measurement Points
+
+1. **First point**: Left-click anywhere on the model (green marker appears)
+2. **Second point**: Left-click another location (blue marker appears)
+3. A yellow line connects the points and displays the distance
+
+### 5. Adjusting Measurement Points
+
+- Drag any marker to adjust its position along the view direction
+- The distance updates in real-time
+- The measured distance appears in the Controls panel and bottom-right display
+
+### 6. Rescaling the Model
+
+1. The **"Measured Distance"** field shows the current measurement
+2. Enter the actual real-world distance (in meters) in **"New Distance"**
+3. Click **"Apply Rescale"**
+4. The entire model scales to match the specified dimensions
+
+### 7. Exporting the Model
+
+1. Click **"Export PLY"**
+2. The file downloads as `rescaled_model.ply`
+3. The exported file includes all transformations (rescale and origin changes)
+
+### 8. Reset
+
+- Click **"Reset Points"** to clear measurement markers and start over
+- Origin transformations and rescaling remain applied
+
+---
+
+## Controls
+
+| Action | Function |
+|--------|----------|
+| Left-click | Place measurement point |
+| Drag marker | Adjust measurement point position |
+| Left-drag (empty space) | Rotate camera (infinite rotation) |
+| Right-drag / Two-finger drag | Pan camera |
+| Scroll / Pinch | Zoom |
+| Right double-click | Set new coordinate origin |
+
+**Camera Controls:**
+- Infinite rotation in all directions (no angle limits)
+- Zoom limits prevent performance issues (min: 0.5, max: 50)
+
+---
+
+## UI Layout
+
+- **Top-left**: Instructions
+- **Top-right**: Controls panel (collapsible)
+  - Load PLY File
+  - Toggle Axes
+  - Measured Distance (read-only)
+  - New Distance
+  - Apply Rescale
+  - Reset Points
+  - Export PLY
+- **Bottom-right**: Distance display (appears during measurement)
+
+---
+
+## Notes
+
+- After rescaling, the model scales relative to the current origin
+- After setting a new origin, all measurements are cleared
+- The camera automatically adjusts to maintain view during origin changes
+- Exported PLY files contain the final transformed coordinates
+- All file formats (.ply, .spz, .splat) are supported for both loading and drag & drop
diff --git a/examples.html b/examples.html
@@ -246,7 +246,8 @@
           'debug-color': '/examples/debug-color/index.html',
           'depth-of-field': '/examples/depth-of-field/index.html',
           'splat-texture': '/examples/splat-texture/index.html',
-          'editor': '/examples/editor/index.html'
+          'editor': '/examples/editor/index.html',
+          'distance-rescale': '/examples/distance-rescale/index.html'
         };
 
         function getExampleFromHash() {
@@ -451,6 +452,7 @@
           <a href="#depth-of-field" data-example="depth-of-field" class="example-link">Depth of Field</a>
           <a href="#splat-texture" data-example="splat-texture" class="example-link">Splat Texture</a>
           <a href="#editor" data-example="editor" class="example-link">Editor</a>
+          <a href="#distance-rescale" data-example="distance-rescale" class="example-link">Distance Measurement & Rescale</a>
         </div>
       </div>
       <div class="content">

diff --git a/examples/distance-rescale/index.html b/examples/distance-rescale/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spark - Distance Measurement & Rescale</title>
+  <style>
+    body {
+      margin: 0;
+      overflow: hidden;
+      font-family: Arial, sans-serif;
+      background: #000;
+    }
+
+    header {
+      position: absolute;
+      color: silver;
+      font-family: sans-serif;
+      padding: 12px 16px;
+      text-align: left;
+      width: calc(100vw - 32px);
+      pointer-events: none;
+      text-shadow:
+        2px 2px 4px rgba(0, 0, 0, 0.8),
+        -1px -1px 2px rgba(0, 0, 0, 0.6),
+        1px -1px 2px rgba(0, 0, 0, 0.6),
+        -1px 1px 2px rgba(0, 0, 0, 0.6);
+      -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.7);
+      z-index: 10;
+    }
+
+    #distance-display {
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      padding: 15px 20px;
+      border-radius: 8px;
+      font-size: 16px;
+      z-index: 100;
+      display: none;
+    }
+
+    #distance-display .label {
+      color: #aaa;
+      font-size: 12px;
+      margin-bottom: 5px;
+    }
+
+    #distance-display .value {
+      font-size: 24px;
+      font-weight: bold;
+    }
+  </style>
+</head>
+
+<body>
+  <header id="instructions">Left-click to measure distance | Right double-click to set origin</header>
+
+  <!-- Hidden file input triggered by lil-gui button -->
+  <input type="file" id="file-input" accept=".ply,.spz,.splat" style="display: none;">
+
+  <div id="distance-display">
+    <div class="label">Distance</div>
+    <div class="value" id="distance-value">0.000</div>
+  </div>
+
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "/examples/js/vendor/three/build/three.module.js",
+        "three/addons/": "/examples/js/vendor/three/examples/jsm/",
+        "@sparkjsdev/spark": "/dist/spark.module.js",
+        "lil-gui": "/examples/js/vendor/lil-gui/dist/lil-gui.esm.js"
+      }
+    }
+  </script>
+  <script type="module" src="main.js"></script>
+</body>
+
+</html>