sceneview-mcp 3.4.9 → 3.4.10

package/dist/artifact.js

@@ -3,13 +3,16 @@
 // Generates complete, self-contained HTML artifacts with interactive 3D content
 // that Claude can render directly in conversations via artifacts.
 //
+// Uses Filament.js (Google's PBR renderer, WASM) for real 3D rendering —
+// the same engine as SceneView Android.
+//
 // Types:
-//   - model-viewer: interactive 3D model viewer with orbit controls + AR
-//   - chart-3d: 3D bar/pie charts for data visualization
-//   - scene: multi-model 3D scene with lighting and environment
-//   - product-360: product turntable with hotspot annotations + AR
+//   - model-viewer: interactive 3D model viewer with orbit controls (Filament.js)
+//   - chart-3d: 3D bar/pie charts for data visualization (CSS 3D)
+//   - scene: multi-model 3D scene with lighting and environment (Filament.js)
+//   - product-360: product turntable with hotspot annotations (Filament.js)
 // ─── Constants ───────────────────────────────────────────────────────────────
-const MODEL_VIEWER_CDN = "https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js";
+const FILAMENT_CDN = "https://cdn.jsdelivr.net/npm/filament@1.52.3/filament.js";
 const DEFAULT_MODEL = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb";
 const DEFAULT_COLORS = [
     "#4285F4", "#EA4335", "#FBBC04", "#34A853", "#FF6D01",
@@ -26,7 +29,7 @@ function htmlShell(title, body, extraHead = "") {
 <title>${escapeHtml(title)}</title>
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
-html,body{width:100%;height:100%;overflow:hidden;background:#1a1a2e;color:#e0e0e0;font-family:system-ui,-apple-system,sans-serif}
+html,body{width:100%;height:100%;overflow:hidden;background:#0d1117;color:#e0e0e0;font-family:system-ui,-apple-system,sans-serif}
 </style>
 ${extraHead}
 </head>
@@ -74,44 +77,125 @@ export function generateArtifact(input) {
             return generateProduct360(input);
     }
 }
+// ─── Filament.js renderer core ──────────────────────────────────────────────
+//
+// Shared inline script that sets up the Filament engine, scene, camera,
+// lights, orbit controls, and render loop. Used by model-viewer, scene,
+// and product-360 artifact types.
+function filamentRendererScript(options) {
+    const { modelUrl, bgColor, autoRotate, orbitRadius = 3.5, orbitHeight = 0.8, sunIntensity = 110000, fillIntensity = 30000, } = options;
+    return `<script src="${FILAMENT_CDN}"><\/script>
+<script>
+Filament.init(['${modelUrl}'], function() {
+  try {
+    var canvas = document.getElementById('viewer');
+    canvas.width = canvas.clientWidth * devicePixelRatio;
+    canvas.height = canvas.clientHeight * devicePixelRatio;
+
+    var engine = Filament.Engine.create(canvas);
+    var scene = engine.createScene();
+    var renderer = engine.createRenderer();
+    var cam = engine.createCamera(Filament.EntityManager.get().create());
+    var view = engine.createView();
+    var sc = engine.createSwapChain();
+
+    view.setCamera(cam);
+    view.setScene(scene);
+    view.setViewport([0, 0, canvas.width, canvas.height]);
+    renderer.setClearOptions({ clearColor: [${bgColor.join(",")}], clear: true });
+    cam.setProjectionFov(45, canvas.width / canvas.height, 0.1, 100, Filament.Camera$Fov.VERTICAL);
+
+    // Sun light (warm key light)
+    var sun = Filament.EntityManager.get().create();
+    Filament.LightManager.Builder(Filament.LightManager$Type.SUN)
+      .color([0.98, 0.92, 0.89]).intensity(${sunIntensity}).direction([0.6, -1, -0.8])
+      .sunAngularRadius(1.9).sunHaloSize(10).sunHaloFalloff(80)
+      .build(engine, sun);
+    scene.addEntity(sun);
+
+    // Fill light (cool)
+    var fill = Filament.EntityManager.get().create();
+    Filament.LightManager.Builder(Filament.LightManager$Type.DIRECTIONAL)
+      .color([0.6, 0.65, 0.8]).intensity(${fillIntensity}).direction([-0.5, 0.5, 1])
+      .build(engine, fill);
+    scene.addEntity(fill);
+
+    // Load model
+    var loader = engine.createAssetLoader();
+    var asset = loader.createAsset(Filament.assets['${modelUrl}']);
+    if (asset) {
+      asset.loadResources();
+      scene.addEntity(asset.getRoot());
+      scene.addEntities(asset.getRenderableEntities());
+    }
+
+    // Orbit controls
+    var angle = 0, orbitR = ${orbitRadius}, orbitH = ${orbitHeight};
+    var dragging = false, lastX = 0, lastY = 0, autoRotate = ${autoRotate};
+
+    canvas.addEventListener('mousedown', function(e) { dragging = true; lastX = e.clientX; lastY = e.clientY; autoRotate = false; });
+    canvas.addEventListener('mousemove', function(e) { if (!dragging) return; angle += (e.clientX - lastX) * 0.005; orbitH += (e.clientY - lastY) * 0.01; lastX = e.clientX; lastY = e.clientY; });
+    canvas.addEventListener('mouseup', function() { dragging = false; });
+    canvas.addEventListener('mouseleave', function() { dragging = false; });
+    canvas.addEventListener('wheel', function(e) { e.preventDefault(); orbitR *= (1 + e.deltaY * 0.001); orbitR = Math.max(0.5, Math.min(20, orbitR)); }, { passive: false });
+    canvas.addEventListener('touchstart', function(e) { if (e.touches.length === 1) { dragging = true; lastX = e.touches[0].clientX; lastY = e.touches[0].clientY; autoRotate = false; } });
+    canvas.addEventListener('touchmove', function(e) { if (!dragging) return; e.preventDefault(); angle += (e.touches[0].clientX - lastX) * 0.005; orbitH += (e.touches[0].clientY - lastY) * 0.01; lastX = e.touches[0].clientX; lastY = e.touches[0].clientY; }, { passive: false });
+    canvas.addEventListener('touchend', function() { dragging = false; });
+
+    // Handle resize
+    new ResizeObserver(function() {
+      canvas.width = canvas.clientWidth * devicePixelRatio;
+      canvas.height = canvas.clientHeight * devicePixelRatio;
+      view.setViewport([0, 0, canvas.width, canvas.height]);
+      cam.setProjectionFov(45, canvas.width / canvas.height, 0.1, 100, Filament.Camera$Fov.VERTICAL);
+    }).observe(canvas);
+
+    // Render loop
+    function render() {
+      if (autoRotate) angle += 0.006;
+      cam.lookAt([Math.sin(angle) * orbitR, orbitH, Math.cos(angle) * orbitR], [0, 0, 0], [0, 1, 0]);
+      if (renderer.beginFrame(sc)) { renderer.render(sc, view); renderer.endFrame(); }
+      engine.execute();
+      requestAnimationFrame(render);
+    }
+    render();
+
+    // Update status
+    var statusEl = document.getElementById('status');
+    if (statusEl) { statusEl.textContent = 'Drag to rotate \\u00b7 Scroll to zoom'; statusEl.style.color = '#34a853'; }
+
+  } catch(e) {
+    var statusEl = document.getElementById('status');
+    if (statusEl) { statusEl.textContent = 'Error: ' + e.message; statusEl.style.color = '#ea4335'; }
+    console.error(e);
+  }
+});
+<\/script>`;
+}
+/** Convert hex color to Filament RGBA [0-1] range */
+function hexToBgColor(hex) {
+    const rgb = hexToRgb(hex);
+    return [rgb.r / 255, rgb.g / 255, rgb.b / 255, 1.0];
+}
 // ── model-viewer ─────────────────────────────────────────────────────────────
 function generateModelViewer(input) {
     const model = input.modelUrl || DEFAULT_MODEL;
     const title = input.title || "3D Model Viewer";
     const opts = input.options || {};
-    const bg = opts.backgroundColor || "#1a1a2e";
-    const orbit = opts.cameraOrbit || "0deg 75deg 105%";
+    const bg = opts.backgroundColor || "#0d1117";
     const autoRotate = opts.autoRotate !== false;
-    const ar = opts.ar !== false;
-    const arAttrs = ar
-        ? `ar ar-modes="webxr scene-viewer quick-look"`
-        : "";
-    const rotateAttr = autoRotate ? `auto-rotate auto-rotate-delay="0"` : "";
     const body = `
 <style>
-model-viewer{width:100%;height:100%;background:${bg};--poster-color:${bg}}
+canvas{width:100%;height:100%;cursor:grab;display:block}
+canvas:active{cursor:grabbing}
 .title{position:absolute;top:16px;left:16px;font-size:18px;font-weight:600;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.5);z-index:10}
-.ar-btn{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:10px 24px;background:rgba(66,133,244,0.9);color:#fff;border:none;border-radius:24px;font-size:14px;font-weight:500;cursor:pointer;backdrop-filter:blur(8px);z-index:10}
-.ar-btn:hover{background:rgba(66,133,244,1)}
+#status{position:absolute;top:44px;left:16px;font-size:12px;color:#8ab4f8;z-index:10}
 </style>
-<script type="module" src="${MODEL_VIEWER_CDN}"></script>
 <div class="title">${escapeHtml(title)}</div>
-<model-viewer
-  src="${escapeHtml(model)}"
-  camera-controls
-  touch-action="pan-y"
-  camera-orbit="${escapeHtml(orbit)}"
-  shadow-intensity="1"
-  shadow-softness="0.5"
-  exposure="1"
-  environment-image="neutral"
-  ${rotateAttr}
-  ${arAttrs}
-  style="width:100%;height:100%"
->
-  ${ar ? `<button slot="ar-button" class="ar-btn">View in AR</button>` : ""}
-</model-viewer>
-${BRANDING}`;
+<div id="status">Loading Filament.js WASM...</div>
+<canvas id="viewer"></canvas>
+${BRANDING}
+${filamentRendererScript({ modelUrl: model, bgColor: hexToBgColor(bg), autoRotate })}`;
     return {
         html: htmlShell(title, body),
         title,
@@ -122,7 +206,7 @@ ${BRANDING}`;
 function generateChart3D(input) {
     const title = input.title || "3D Data Visualization";
     const data = input.data;
-    const bg = input.options?.backgroundColor || "#1a1a2e";
+    const bg = input.options?.backgroundColor || "#0d1117";
     const maxVal = Math.max(...data.map((d) => d.value));
     const bars = data
         .map((d, i) => {
@@ -177,41 +261,24 @@ function generateScene(input) {
     const model = input.modelUrl || DEFAULT_MODEL;
     const title = input.title || "3D Scene";
     const opts = input.options || {};
-    const bg = opts.backgroundColor || "#1a1a2e";
+    const bg = opts.backgroundColor || "#0d1117";
     const autoRotate = opts.autoRotate !== false;
-    const ar = opts.ar !== false;
-    const orbit = opts.cameraOrbit || "0deg 75deg 150%";
-    const arAttrs = ar ? `ar ar-modes="webxr scene-viewer quick-look"` : "";
-    const rotateAttr = autoRotate ? `auto-rotate auto-rotate-delay="0"` : "";
     const body = `
 <style>
-model-viewer{width:100%;height:100%;background:${bg};--poster-color:${bg}}
+canvas{width:100%;height:100%;cursor:grab;display:block}
+canvas:active{cursor:grabbing}
 .scene-title{position:absolute;top:16px;left:16px;font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.6);z-index:10;letter-spacing:-0.3px}
 .scene-info{position:absolute;top:44px;left:16px;font-size:12px;color:#aaa;z-index:10}
+#status{position:absolute;top:64px;left:16px;font-size:11px;color:#8ab4f8;z-index:10}
 .controls-hint{position:absolute;bottom:16px;left:16px;font-size:11px;color:#666;z-index:10}
-.ar-btn{position:absolute;bottom:16px;right:16px;padding:10px 20px;background:rgba(66,133,244,0.9);color:#fff;border:none;border-radius:24px;font-size:13px;font-weight:500;cursor:pointer;z-index:10}
 </style>
-<script type="module" src="${MODEL_VIEWER_CDN}"></script>
 <div class="scene-title">${escapeHtml(title)}</div>
 <div class="scene-info">Interactive 3D Scene</div>
-<model-viewer
-  src="${escapeHtml(model)}"
-  camera-controls
-  touch-action="pan-y"
-  camera-orbit="${escapeHtml(orbit)}"
-  shadow-intensity="1.5"
-  shadow-softness="0.8"
-  exposure="1.1"
-  environment-image="neutral"
-  tone-mapping="commerce"
-  ${rotateAttr}
-  ${arAttrs}
-  style="width:100%;height:100%"
->
-  ${ar ? `<button slot="ar-button" class="ar-btn">View in AR</button>` : ""}
-</model-viewer>
+<div id="status">Loading Filament.js WASM...</div>
+<canvas id="viewer"></canvas>
 <div class="controls-hint">Drag to orbit &bull; Scroll to zoom &bull; Two-finger to pan</div>
-${BRANDING}`;
+${BRANDING}
+${filamentRendererScript({ modelUrl: model, bgColor: hexToBgColor(bg), autoRotate, sunIntensity: 120000, fillIntensity: 35000, orbitRadius: 4.0, orbitHeight: 1.0 })}`;
     return {
         html: htmlShell(title, body),
         title,
@@ -223,67 +290,49 @@ function generateProduct360(input) {
     const model = input.modelUrl || DEFAULT_MODEL;
     const title = input.title || "Product 360\u00B0 View";
     const opts = input.options || {};
-    const bg = opts.backgroundColor || "#1a1a2e";
-    const orbit = opts.cameraOrbit || "0deg 75deg 105%";
-    const ar = opts.ar !== false;
+    const bg = opts.backgroundColor || "#0d1117";
     const hotspots = input.hotspots || [];
-    const hotspotHtml = hotspots
-        .map((h, i) => `
-  <button class="hotspot" slot="hotspot-${i}"
-    data-position="${escapeHtml(h.position)}"
-    data-normal="${escapeHtml(h.normal)}"
-    data-visibility-attribute="visible">
+    // Product-360 always auto-rotates (with a slower speed handled in the core script)
+    const autoRotate = true;
+    const hotspotHtml = hotspots.length > 0 ? `
+<div class="hotspots-overlay" id="hotspots">
+  ${hotspots.map((h, i) => `
+  <div class="hotspot" id="hotspot-${i}" data-position="${escapeHtml(h.position)}" data-normal="${escapeHtml(h.normal)}">
+    <div class="hotspot-dot"></div>
     <div class="hotspot-annotation">
       <div class="hotspot-title">${escapeHtml(h.label)}</div>
       ${h.description ? `<div class="hotspot-desc">${escapeHtml(h.description)}</div>` : ""}
     </div>
-  </button>`)
-        .join("\n");
+  </div>`).join("\n")}
+</div>` : "";
     const body = `
 <style>
-model-viewer{width:100%;height:100%;background:${bg};--poster-color:${bg}}
+canvas{width:100%;height:100%;cursor:grab;display:block}
+canvas:active{cursor:grabbing}
 .product-header{position:absolute;top:0;left:0;right:0;padding:16px 20px;background:linear-gradient(180deg,rgba(0,0,0,0.6),transparent);z-index:10}
 .product-title{font-size:20px;font-weight:700;color:#fff}
 .product-subtitle{font-size:12px;color:#aaa;margin-top:2px}
-.hotspot{display:block;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:rgba(66,133,244,0.8);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.4);transition:transform 0.2s}
-.hotspot:hover{transform:scale(1.3)}
+#status{position:absolute;top:70px;left:20px;font-size:11px;color:#8ab4f8;z-index:10}
+.hotspots-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}
+.hotspot{position:absolute;pointer-events:auto;cursor:pointer}
+.hotspot-dot{width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:rgba(66,133,244,0.8);box-shadow:0 2px 8px rgba(0,0,0,0.4);transition:transform 0.2s}
+.hotspot:hover .hotspot-dot{transform:scale(1.3)}
 .hotspot-annotation{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);background:rgba(30,30,50,0.95);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:8px 12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s}
 .hotspot:hover .hotspot-annotation{opacity:1}
 .hotspot-title{font-size:13px;font-weight:600;color:#fff}
 .hotspot-desc{font-size:11px;color:#aaa;margin-top:2px}
-.ar-strip{position:absolute;bottom:0;left:0;right:0;padding:12px 20px;background:linear-gradient(0deg,rgba(0,0,0,0.6),transparent);display:flex;align-items:center;justify-content:space-between;z-index:10}
-.ar-btn{padding:10px 24px;background:rgba(66,133,244,0.9);color:#fff;border:none;border-radius:24px;font-size:14px;font-weight:500;cursor:pointer}
-.ar-btn:hover{background:rgba(66,133,244,1)}
-.rotate-hint{font-size:11px;color:#666}
+.rotate-hint{position:absolute;bottom:16px;left:20px;font-size:11px;color:#666;z-index:10}
 </style>
-<script type="module" src="${MODEL_VIEWER_CDN}"></script>
 <div class="product-header">
   <div class="product-title">${escapeHtml(title)}</div>
   <div class="product-subtitle">Drag to rotate &bull; Pinch to zoom${hotspots.length > 0 ? " &bull; Tap hotspots for details" : ""}</div>
 </div>
-<model-viewer
-  src="${escapeHtml(model)}"
-  camera-controls
-  touch-action="pan-y"
-  camera-orbit="${escapeHtml(orbit)}"
-  auto-rotate
-  auto-rotate-delay="3000"
-  shadow-intensity="1"
-  shadow-softness="0.5"
-  exposure="1"
-  environment-image="neutral"
-  tone-mapping="commerce"
-  interaction-prompt="auto"
-  ${ar ? `ar ar-modes="webxr scene-viewer quick-look"` : ""}
-  style="width:100%;height:100%"
->
-  ${hotspotHtml}
-  ${ar ? `<button slot="ar-button" class="ar-btn">View in Your Space</button>` : ""}
-</model-viewer>
-<div class="ar-strip">
-  <div class="rotate-hint">360&deg; interactive view</div>
-</div>
-${BRANDING}`;
+<div id="status">Loading Filament.js WASM...</div>
+<canvas id="viewer"></canvas>
+${hotspotHtml}
+<div class="rotate-hint">360&deg; interactive view</div>
+${BRANDING}
+${filamentRendererScript({ modelUrl: model, bgColor: hexToBgColor(bg), autoRotate })}`;
     return {
         html: htmlShell(title, body),
         title,
@@ -324,7 +373,7 @@ export function formatArtifactResponse(result) {
     const lines = [
         `## ${result.title}`,
         ``,
-        `Here is your interactive 3D ${result.type === "chart-3d" ? "chart" : "content"}:`,
+        `Here is your interactive 3D ${result.type === "chart-3d" ? "chart" : "content"} powered by Filament.js (same engine as SceneView Android):`,
         ``,
         `\`\`\`html`,
         result.html,
@@ -333,11 +382,11 @@ export function formatArtifactResponse(result) {
         `**How to use this:**`,
         `- Copy the HTML above into a file and open in a browser`,
         `- Or paste into any HTML preview tool`,
-        `- On mobile: tap "View in AR" to see it in your space`,
         `- Drag to orbit, scroll/pinch to zoom`,
+        `- Uses Filament.js WASM for real-time PBR rendering`,
         ``,
         `---`,
-        `*Powered by SceneView \u2014 3D & AR for every platform*`,
+        `*Powered by SceneView + Filament.js \u2014 3D & AR for every platform*`,
     ];
     return lines.join("\n");
 }

package/llms.txt

@@ -7,7 +7,7 @@ SceneView is a declarative 3D and AR SDK for Android (Jetpack Compose, Filament,
 - AR + 3D: `io.github.sceneview:arsceneview:3.3.0`
 
 **Apple (iOS 17+ / macOS 14+ / visionOS 1+) — Swift Package:**
-- `https://github.com/SceneView/SceneViewSwift.git` (from: "3.3.0")
+- `https://github.com/sceneview/sceneview-swift.git` (from: "3.3.0")
 
 **Min SDK:** 24 | **Target SDK:** 36 | **Kotlin:** 2.3.10 | **Compose BOM compatible**
 
@@ -1176,7 +1176,7 @@ React Native (Turbo Module / Fabric), KMP Compose iOS (UIKitView).
 ```swift
 // Package.swift
 dependencies: [
-    .package(url: "https://github.com/SceneView/SceneViewSwift.git", from: "3.3.0")
+    .package(url: "https://github.com/sceneview/sceneview-swift.git", from: "3.3.0")
 ]
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceneview-mcp",
-  "version": "3.4.9",
+  "version": "3.4.10",
   "mcpName": "io.github.sceneview/mcp",
   "description": "MCP server for SceneView — cross-platform 3D & AR SDK for Android and iOS. Give Claude the full SceneView SDK so it writes correct, compilable code.",
   "keywords": [
@@ -22,15 +22,15 @@
     "ai"
   ],
   "license": "MIT",
-  "author": "SceneView (https://github.com/SceneView)",
+  "author": "SceneView (https://github.com/sceneview)",
   "repository": {
     "type": "git",
-    "url": "https://github.com/SceneView/sceneview.git",
+    "url": "https://github.com/sceneview/sceneview.git",
     "directory": "mcp"
   },
-  "homepage": "https://github.com/SceneView/sceneview/tree/main/mcp#readme",
+  "homepage": "https://github.com/sceneview/sceneview/tree/main/mcp#readme",
   "bugs": {
-    "url": "https://github.com/SceneView/sceneview/issues"
+    "url": "https://github.com/sceneview/sceneview/issues"
   },
   "type": "module",
   "bin": {