sceneview-web 1.2.0 → 1.5.0

package/sceneview.js

@@ -4,51 +4,26 @@
  * One line to render a 3D model:
  *   SceneView.modelViewer("canvas", "model.glb")
  *
- * No prerequisites — sceneview.js loads Filament.js CDN automatically.
- * Just include one script:
- *   <script src="js/sceneview.js"></script>
- *
- * Powered by Filament.js (Google's PBR renderer, WASM).
+ * Powered by Filament.js v1.70.1 (Google's PBR renderer, WASM).
  * https://sceneview.github.io
  *
- * @version 1.1.0
+ * @version 1.5.0
  * @license MIT
  */
 (function(global) {
   'use strict';
 
-  var FILAMENT_CDN = 'https://cdn.jsdelivr.net/npm/filament@1.52.3/filament.js';
-
-  /**
-   * Load Filament.js CDN dynamically if not already present.
-   * Returns a Promise that resolves when the Filament global is available.
-   */
   function _ensureFilament() {
     return new Promise(function(resolve, reject) {
-      // Already loaded
-      if (typeof Filament !== 'undefined') {
-        resolve();
-        return;
-      }
-      // Check if script tag already exists but hasn't finished loading
-      var existing = document.querySelector('script[src*="filament"]');
-      if (existing) {
-        existing.addEventListener('load', function() { resolve(); });
-        existing.addEventListener('error', function() { reject(new Error('SceneView: Failed to load Filament.js from CDN')); });
-        return;
-      }
-      // Inject script tag
-      var script = document.createElement('script');
-      script.src = FILAMENT_CDN;
-      script.onload = function() { resolve(); };
-      script.onerror = function() { reject(new Error('SceneView: Failed to load Filament.js from CDN (' + FILAMENT_CDN + ')')); };
-      document.head.appendChild(script);
+      if (typeof Filament !== 'undefined') { resolve(); return; }
+      var attempts = 0;
+      var check = setInterval(function() {
+        if (typeof Filament !== 'undefined') { clearInterval(check); resolve(); }
+        if (++attempts > 100) { clearInterval(check); reject(new Error('SceneView: Filament.js not loaded')); }
+      }, 50);
     });
   }
 
-  /**
-   * SceneView instance — wraps Filament engine, scene, camera, renderer.
-   */
   class SceneViewInstance {
     constructor(canvas, engine, scene, renderer, view, swapChain, camera, cameraEntity, loader) {
       this._canvas = canvas;
@@ -61,7 +36,7 @@
       this._cameraEntity = cameraEntity;
       this._loader = loader;
       this._asset = null;
-      this._angle = 0;
+      this._angle = 0.785;
       this._autoRotate = true;
       this._orbitRadius = 3.5;
       this._orbitHeight = 0.8;
@@ -69,158 +44,366 @@
       this._running = true;
       this._isDragging = false;
       this._lastMouse = { x: 0, y: 0 };
+      this._velocityAngle = 0;
+      this._velocityHeight = 0;
+      this._dampingFactor = 0.95;
+      this._wantsAutoRotate = true;
+      this._autoRotateTimer = null;
+      this._userLights = [];
       this._setupControls();
       this._setupResizeObserver();
       this._startRenderLoop();
     }
 
-    /** Load a glTF/GLB model from URL */
+    // ── Model loading ──
+
     loadModel(url) {
       var self = this;
       return new Promise(function(resolve, reject) {
-        // If already fetched, show immediately
-        if (Filament.assets && Filament.assets[url]) {
-          try {
-            self._showModel(url);
-            resolve(self);
-          } catch (e) {
-            reject(e);
-          }
-          return;
-        }
-        // Fetch via Filament.init with asset — this always fires the callback
-        // because it needs to fetch the asset even if WASM is already loaded
-        Filament.init([url], function() {
-          try {
-            self._showModel(url);
-            resolve(self);
-          } catch (e) {
-            reject(e);
-          }
-        });
+        fetch(url)
+          .then(function(resp) { return resp.arrayBuffer(); })
+          .then(function(buffer) {
+            Filament.assets = Filament.assets || {};
+            Filament.assets[url] = new Uint8Array(buffer);
+            try { self._showModel(url); resolve(self); } catch (e) { reject(e); }
+          })
+          .catch(reject);
       });
     }
 
     _showModel(url) {
-      // Remove previous model
       if (this._asset) {
-        this._asset.getRenderableEntities().forEach(function(e) { this._scene.remove(e); }.bind(this));
-        this._scene.remove(this._asset.getRoot());
+        try {
+          this._asset.getRenderableEntities().forEach(function(e) { this._scene.remove(e); }.bind(this));
+          this._scene.remove(this._asset.getRoot());
+        } catch (e) {}
         this._asset = null;
       }
-
       var data = Filament.assets[url];
       if (!data) throw new Error('Failed to fetch model: ' + url);
-
       var asset = this._loader.createAsset(data);
       if (!asset) throw new Error('Failed to parse model: ' + url);
-
       asset.loadResources();
       this._scene.addEntity(asset.getRoot());
       this._scene.addEntities(asset.getRenderableEntities());
       this._asset = asset;
+      this._autoFrame(asset);
+    }
 
-      // Auto-frame: try getBoundingBox, fall back to defaults
+    _autoFrame(asset) {
       try {
         var bbox = asset.getBoundingBox();
         var cx = (bbox.min[0] + bbox.max[0]) / 2;
         var cy = (bbox.min[1] + bbox.max[1]) / 2;
         var cz = (bbox.min[2] + bbox.max[2]) / 2;
-        var sx = bbox.max[0] - bbox.min[0];
-        var sy = bbox.max[1] - bbox.min[1];
-        var sz = bbox.max[2] - bbox.min[2];
-        var maxDim = Math.max(sx, sy, sz);
+        var maxDim = Math.max(bbox.max[0] - bbox.min[0], bbox.max[1] - bbox.min[1], bbox.max[2] - bbox.min[2]);
         if (maxDim > 0) {
           this._orbitTarget = [cx, cy, cz];
-          this._orbitRadius = maxDim * 2.5;
+          this._orbitRadius = maxDim * 1.8;
           this._orbitHeight = cy;
         }
-      } catch (e) {
-        // getBoundingBox not available on all assets, use defaults
+      } catch (e) {}
+    }
+
+    addModel(url) {
+      var self = this;
+      return new Promise(function(resolve, reject) {
+        fetch(url)
+          .then(function(resp) { return resp.arrayBuffer(); })
+          .then(function(buffer) {
+            try {
+              var asset = self._loader.createAsset(new Uint8Array(buffer));
+              if (!asset) { reject(new Error('Failed to parse: ' + url)); return; }
+              asset.loadResources();
+              self._scene.addEntity(asset.getRoot());
+              self._scene.addEntities(asset.getRenderableEntities());
+              resolve(asset);
+            } catch (e) { reject(e); }
+          })
+          .catch(reject);
+      });
+    }
+
+    loadGLBBuffer(buffer) {
+      var asset = this._loader.createAsset(buffer);
+      if (!asset) return null;
+      asset.loadResources();
+      this._scene.addEntity(asset.getRoot());
+      this._scene.addEntities(asset.getRenderableEntities());
+      return asset;
+    }
+
+    removeAsset(asset) {
+      if (!asset) return;
+      try {
+        asset.getRenderableEntities().forEach(function(e) { this._scene.remove(e); }.bind(this));
+        this._scene.remove(asset.getRoot());
+      } catch (e) {}
+    }
+
+    get engine() { return this._engine; }
+    get scene() { return this._scene; }
+    get view() { return this._view; }
+    get camera() { return this._camera; }
+
+    // ── Basic setters ──
+
+    setAutoRotate(enabled) { this._autoRotate = enabled; this._wantsAutoRotate = enabled; return this; }
+    setCameraDistance(d) { this._orbitRadius = d; return this; }
+
+    setBackgroundColor(r, g, b, a) {
+      this._renderer.setClearOptions({ clearColor: [r, g, b, a !== undefined ? a : 1], clear: true });
+      return this;
+    }
+
+    // ── Post-processing ──
+
+    setBloom(opts) {
+      try { this._view.setBloomOptions(Object.assign({ enabled: true, strength: 0.1, resolution: 360, levels: 6, blendMode: 0 }, opts)); } catch (e) {}
+      return this;
+    }
+
+    setFog(opts) {
+      try { this._view.setFogOptions(Object.assign({ enabled: true, distance: 10, maximumOpacity: 0.8, color: [0.5, 0.55, 0.65] }, opts)); } catch (e) {}
+      return this;
+    }
+
+    setVignette(opts) {
+      try { this._view.setVignetteOptions(Object.assign({ enabled: true, midPoint: 0.5, roundness: 0.5, feather: 0.5 }, opts)); } catch (e) {}
+      return this;
+    }
+
+    setDOF(opts) {
+      try { this._view.setDepthOfFieldOptions(Object.assign({ enabled: true, cocScale: 1.0 }, opts)); } catch (e) {}
+      return this;
+    }
+
+    setMSAA(opts) {
+      try { this._view.setMultiSampleAntiAliasingOptions(Object.assign({ enabled: true, sampleCount: 4 }, opts)); } catch (e) {}
+      return this;
+    }
+
+    setTAA(opts) {
+      try { this._view.setTemporalAntiAliasingOptions(Object.assign({ enabled: true }, opts)); } catch (e) {}
+      return this;
+    }
+
+    setSSR(opts) {
+      try { this._view.setScreenSpaceReflectionsOptions(Object.assign({ enabled: true }, opts)); } catch (e) {}
+      return this;
+    }
+
+    setQuality(level) {
+      if (level === 'low') {
+        this.setBloom({ enabled: false }); this.setMSAA({ enabled: false });
+      } else if (level === 'medium') {
+        this.setBloom({ enabled: true, strength: 0.05 }); this.setMSAA({ enabled: true, sampleCount: 2 });
+      } else if (level === 'high') {
+        this.setBloom({ enabled: true, strength: 0.1 }); this.setMSAA({ enabled: true, sampleCount: 4 }); this.setVignette({ enabled: true });
+      } else if (level === 'ultra') {
+        this.setBloom({ enabled: true, strength: 0.15 }); this.setMSAA({ enabled: true, sampleCount: 4 });
+        this.setTAA({ enabled: true }); this.setSSR({ enabled: true }); this.setVignette({ enabled: true });
+      }
+      return this;
+    }
+
+    // ── Camera helpers ──
+
+    setCameraPosition(x, y, z) {
+      this._orbitRadius = Math.sqrt(x * x + z * z);
+      this._orbitHeight = y;
+      this._angle = Math.atan2(x, z);
+      return this;
+    }
+
+    setCameraTarget(x, y, z) { this._orbitTarget = [x, y, z]; return this; }
+
+    setCameraFOV(degrees) {
+      this._fov = degrees;
+      var c = this._canvas;
+      this._camera.setProjectionFov(degrees, c.width / c.height, 0.1, 1000, Filament.Camera$Fov.VERTICAL);
+      return this;
+    }
+
+    setOrbitSpeed(speed) { this._orbitSpeed = speed; return this; }
+
+    setOrbitLimits(opts) {
+      if (opts.minDistance !== undefined) this._minRadius = opts.minDistance;
+      if (opts.maxDistance !== undefined) this._maxRadius = opts.maxDistance;
+      return this;
+    }
+
+    animateCamera(opts) {
+      var self = this;
+      var duration = opts.duration || 1000;
+      var startTime = performance.now();
+      var sA = this._angle, sR = this._orbitRadius, sH = this._orbitHeight;
+      var sT = this._orbitTarget.slice();
+      var eT = opts.target || sT;
+      var eR = opts.distance !== undefined ? opts.distance : sR;
+      var eH = opts.height !== undefined ? opts.height : sH;
+      var eA = opts.angle !== undefined ? opts.angle : sA;
+      var wasAuto = this._autoRotate;
+      this._autoRotate = false;
+      this._cameraAnimating = true;
+
+      function ease(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
+      function lerp(a, b, t) { return a + (b - a) * t; }
+
+      function step(now) {
+        if (!self._running || !self._cameraAnimating) return;
+        var t = ease(Math.min((now - startTime) / duration, 1));
+        self._angle = lerp(sA, eA, t);
+        self._orbitRadius = lerp(sR, eR, t);
+        self._orbitHeight = lerp(sH, eH, t);
+        self._orbitTarget = [lerp(sT[0], eT[0], t), lerp(sT[1], eT[1], t), lerp(sT[2], eT[2], t)];
+        if (t < 1) { requestAnimationFrame(step); }
+        else { self._cameraAnimating = false; if (wasAuto) self._autoRotate = true; if (opts.onComplete) opts.onComplete(); }
       }
+      requestAnimationFrame(step);
+      return this;
     }
 
-    /** Enable/disable auto-rotation */
-    setAutoRotate(enabled) {
-      this._autoRotate = enabled;
+    // ── Dynamic lights ──
+
+    addLight(type, opts) {
+      opts = opts || {};
+      var entity = Filament.EntityManager.get().create();
+      var typeMap = { sun: Filament.LightManager$Type.SUN, directional: Filament.LightManager$Type.DIRECTIONAL, point: Filament.LightManager$Type.POINT, spot: Filament.LightManager$Type.SPOT };
+      var builder = Filament.LightManager.Builder(typeMap[type] || Filament.LightManager$Type.POINT)
+        .color(opts.color || [1, 1, 1]).intensity(opts.intensity || 100000);
+      if (opts.direction) builder.direction(opts.direction);
+      if (opts.position) builder.position(opts.position);
+      if (opts.falloff) builder.falloff(opts.falloff);
+      if (opts.castShadows) builder.castShadows(true);
+      if (type === 'spot') builder.spotLightCone(opts.innerCone || 0.5, opts.outerCone || 0.7);
+      if (type === 'sun') { builder.sunAngularRadius(opts.angularRadius || 1.9); builder.sunHaloSize(opts.haloSize || 10.0); builder.sunHaloFalloff(opts.haloFalloff || 80.0); }
+      builder.build(this._engine, entity);
+      this._scene.addEntity(entity);
+      this._userLights.push(entity);
+      return entity;
+    }
+
+    removeLight(entity) {
+      this._scene.remove(entity);
+      var i = this._userLights.indexOf(entity);
+      if (i >= 0) this._userLights.splice(i, 1);
       return this;
     }
 
-    /** Set camera orbit distance */
-    setCameraDistance(distance) {
-      this._orbitRadius = distance;
+    clearLights() {
+      this._userLights.forEach(function(e) { this._scene.remove(e); }.bind(this));
+      this._userLights = [];
       return this;
     }
 
-    /** Set background color [r, g, b, a] (0-1 range) */
-    setBackgroundColor(r, g, b, a) {
-      this._renderer.setClearOptions({ clearColor: [r, g, b, a !== undefined ? a : 1], clear: true });
+    // ── Skybox control ──
+
+    setSkyboxColor(r, g, b) {
+      try { this._scene.setSkybox(Filament.Skybox.Builder().color([r, g, b, 1]).build(this._engine)); } catch (e) {}
       return this;
     }
 
-    /** Dispose all resources */
+    removeSkybox() { try { this._scene.setSkybox(null); } catch (e) {} return this; }
+
+    // ── Asset querying ──
+
+    getEntitiesByName(name) { if (!this._asset) return []; try { return this._asset.getEntitiesByName(name); } catch (e) { return []; } }
+    getEntitiesByPrefix(prefix) { if (!this._asset) return []; try { return this._asset.getEntitiesByPrefix(prefix); } catch (e) { return []; } }
+
+    // ── Lifecycle ──
+
     dispose() {
       this._running = false;
-      if (this._resizeObserver) {
-        this._resizeObserver.disconnect();
-      }
-      Filament.Engine.destroy(this._engine);
+      if (this._resizeObserver) this._resizeObserver.disconnect();
+      _activeCanvases.delete(this._canvas);
+      try { Filament.Engine.destroy(this._engine); } catch (e) {}
     }
 
-    // --- Private ---
-
     _setupControls() {
       var canvas = this._canvas;
       var self = this;
 
-      // Mouse orbit
       canvas.addEventListener('mousedown', function(e) {
         self._isDragging = true;
         self._lastMouse = { x: e.clientX, y: e.clientY };
         self._autoRotate = false;
+        self._velocityAngle = 0;
+        self._velocityHeight = 0;
+        if (self._autoRotateTimer) { clearTimeout(self._autoRotateTimer); self._autoRotateTimer = null; }
       });
       canvas.addEventListener('mousemove', function(e) {
         if (!self._isDragging) return;
-        self._angle -= (e.clientX - self._lastMouse.x) * 0.005;
-        self._orbitHeight += (e.clientY - self._lastMouse.y) * 0.01;
+        var dx = (e.clientX - self._lastMouse.x) * 0.005;
+        var dy = (e.clientY - self._lastMouse.y) * 0.01;
+        self._velocityAngle = -dx;
+        self._velocityHeight = dy;
+        self._angle -= dx;
+        self._orbitHeight += dy;
         self._lastMouse = { x: e.clientX, y: e.clientY };
       });
-      canvas.addEventListener('mouseup', function() { self._isDragging = false; });
-      canvas.addEventListener('mouseleave', function() { self._isDragging = false; });
+      canvas.addEventListener('mouseup', function() {
+        self._isDragging = false;
+        if (self._wantsAutoRotate) {
+          self._autoRotateTimer = setTimeout(function() { self._autoRotate = true; }, 3000);
+        }
+      });
+      canvas.addEventListener('mouseleave', function() {
+        self._isDragging = false;
+        if (self._wantsAutoRotate) {
+          self._autoRotateTimer = setTimeout(function() { self._autoRotate = true; }, 3000);
+        }
+      });
 
-      // Scroll zoom
       canvas.addEventListener('wheel', function(e) {
         e.preventDefault();
         self._orbitRadius *= (1 + e.deltaY * 0.001);
-        self._orbitRadius = Math.max(0.5, Math.min(50, self._orbitRadius));
+        var minR = self._minRadius || 0.5;
+        var maxR = self._maxRadius || 50;
+        self._orbitRadius = Math.max(minR, Math.min(maxR, self._orbitRadius));
       }, { passive: false });
 
-      // Touch orbit
       canvas.addEventListener('touchstart', function(e) {
         if (e.touches.length === 1) {
           self._isDragging = true;
           self._lastMouse = { x: e.touches[0].clientX, y: e.touches[0].clientY };
           self._autoRotate = false;
+          self._velocityAngle = 0;
+          self._velocityHeight = 0;
+          if (self._autoRotateTimer) { clearTimeout(self._autoRotateTimer); self._autoRotateTimer = null; }
         }
       });
       canvas.addEventListener('touchmove', function(e) {
         if (!self._isDragging || e.touches.length !== 1) return;
         e.preventDefault();
-        self._angle -= (e.touches[0].clientX - self._lastMouse.x) * 0.005;
-        self._orbitHeight += (e.touches[0].clientY - self._lastMouse.y) * 0.01;
+        var dx = (e.touches[0].clientX - self._lastMouse.x) * 0.005;
+        var dy = (e.touches[0].clientY - self._lastMouse.y) * 0.01;
+        self._velocityAngle = -dx;
+        self._velocityHeight = dy;
+        self._angle -= dx;
+        self._orbitHeight += dy;
         self._lastMouse = { x: e.touches[0].clientX, y: e.touches[0].clientY };
       }, { passive: false });
-      canvas.addEventListener('touchend', function() { self._isDragging = false; });
+      canvas.addEventListener('touchend', function() {
+        self._isDragging = false;
+        if (self._wantsAutoRotate) {
+          self._autoRotateTimer = setTimeout(function() { self._autoRotate = true; }, 3000);
+        }
+      });
     }
 
     _setupResizeObserver() {
       var self = this;
       this._resizeObserver = new ResizeObserver(function() {
         var canvas = self._canvas;
-        canvas.width = canvas.clientWidth * devicePixelRatio;
-        canvas.height = canvas.clientHeight * devicePixelRatio;
+        var dpr = Math.min(devicePixelRatio, 2);
+        canvas.width = canvas.clientWidth * dpr;
+        canvas.height = canvas.clientHeight * dpr;
         self._view.setViewport([0, 0, canvas.width, canvas.height]);
-        self._camera.setProjectionFov(45, canvas.width / canvas.height, 0.1, 1000, Filament.Camera$Fov.VERTICAL);
+        self._camera.setProjectionFov(
+          self._fov || 45, canvas.width / canvas.height, 0.1, 1000,
+          Filament.Camera$Fov.VERTICAL
+        );
       });
       this._resizeObserver.observe(this._canvas);
     }
@@ -229,43 +412,52 @@
       var self = this;
       function render() {
         if (!self._running) return;
-        if (self._autoRotate) self._angle += 0.006;
-
+        if (self._autoRotate) self._angle += (self._orbitSpeed || 0.00873);
+        if (!self._isDragging && !self._cameraAnimating) {
+          self._angle += self._velocityAngle;
+          self._orbitHeight += self._velocityHeight;
+          self._velocityAngle *= self._dampingFactor;
+          self._velocityHeight *= self._dampingFactor;
+          if (Math.abs(self._velocityAngle) < 0.00005) self._velocityAngle = 0;
+          if (Math.abs(self._velocityHeight) < 0.00005) self._velocityHeight = 0;
+        }
         var t = self._orbitTarget;
         var r = self._orbitRadius;
         var h = self._orbitHeight;
         self._camera.lookAt(
           [t[0] + Math.sin(self._angle) * r, h, t[2] + Math.cos(self._angle) * r],
-          t,
-          [0, 1, 0]
+          t, [0, 1, 0]
         );
-
-        if (self._renderer.beginFrame(self._swapChain)) {
-          self._renderer.render(self._swapChain, self._view);
-          self._renderer.endFrame();
-        }
         self._engine.execute();
+        try {
+          if (self._renderer.beginFrame(self._swapChain)) {
+            self._renderer.renderView(self._view);
+            self._renderer.endFrame();
+          }
+        } catch (e) {
+          console.error('SceneView render error:', e.message);
+          self._running = false;
+        }
         requestAnimationFrame(render);
       }
       render();
     }
   }
 
-  /**
-   * Internal: set up Filament engine, scene, lights on a canvas.
-   * Called inside a Filament.init() callback where WASM is guaranteed ready.
-   */
+  var _activeCanvases = new Set();
+
   function _createEngine(canvasOrId, options) {
     options = options || {};
-
-    var canvas = typeof canvasOrId === 'string'
-      ? document.getElementById(canvasOrId)
-      : canvasOrId;
-
+    var canvas = typeof canvasOrId === 'string' ? document.getElementById(canvasOrId) : canvasOrId;
     if (!canvas) throw new Error('Canvas not found: ' + canvasOrId);
+    if (_activeCanvases.has(canvas)) { console.warn('SceneView: Canvas already initialized, skipping'); return null; }
+    _activeCanvases.add(canvas);
 
-    canvas.width = canvas.clientWidth * devicePixelRatio;
-    canvas.height = canvas.clientHeight * devicePixelRatio;
+    var dpr = Math.min(devicePixelRatio, 2);
+    var cssW = canvas.clientWidth || canvas.offsetWidth || 500;
+    var cssH = canvas.clientHeight || canvas.offsetHeight || 500;
+    canvas.width = cssW * dpr;
+    canvas.height = cssH * dpr;
 
     var engine = Filament.Engine.create(canvas);
     var scene = engine.createScene();
@@ -282,106 +474,116 @@
     var bg = options.backgroundColor || [0.05, 0.06, 0.1, 1.0];
     renderer.setClearOptions({ clearColor: bg, clear: true });
 
-    var aspect = canvas.width / canvas.height;
-    camera.setProjectionFov(options.fov || 45, aspect, 0.1, 1000, Filament.Camera$Fov.VERTICAL);
+    var fov = options.fov || 45;
+    camera.setProjectionFov(fov, canvas.width / canvas.height, 0.1, 1000, Filament.Camera$Fov.VERTICAL);
     camera.lookAt([0, 1, 5], [0, 0, 0], [0, 1, 0]);
 
-    // Default sunlight
+    try { view.setAmbientOcclusionOptions({ enabled: true, radius: 0.3, bias: 0.0005, intensity: 1.0, quality: 1 }); } catch (e) {}
+
     var sun = Filament.EntityManager.get().create();
     Filament.LightManager.Builder(Filament.LightManager$Type.SUN)
-      .color([0.98, 0.92, 0.89])
-      .intensity(options.lightIntensity || 110000)
-      .direction([0.6, -1.0, -0.8])
-      .sunAngularRadius(1.9)
-      .sunHaloSize(10.0)
-      .sunHaloFalloff(80.0)
+      .color([0.98, 0.92, 0.89]).intensity(options.lightIntensity || 110000)
+      .direction([0.6, -1.0, -0.8]).sunAngularRadius(1.9).sunHaloSize(10.0).sunHaloFalloff(80.0)
       .build(engine, sun);
     scene.addEntity(sun);
 
-    // Fill light
     var fill = Filament.EntityManager.get().create();
     Filament.LightManager.Builder(Filament.LightManager$Type.DIRECTIONAL)
-      .color([0.6, 0.65, 0.8])
-      .intensity(30000)
-      .direction([-0.5, 0.5, 1.0])
+      .color([0.7, 0.75, 0.9]).intensity(60000).direction([-0.5, 0.5, 1.0])
       .build(engine, fill);
     scene.addEntity(fill);
 
-    // Asset loader (reused across model loads)
-    var loader = engine.createAssetLoader();
+    var back = Filament.EntityManager.get().create();
+    Filament.LightManager.Builder(Filament.LightManager$Type.DIRECTIONAL)
+      .color([0.5, 0.6, 0.9]).intensity(50000).direction([0, 0.3, 1.0])
+      .build(engine, back);
+    scene.addEntity(back);
+
+    var iblUrl = options.iblUrl || 'environments/neutral_ibl.ktx';
+    fetch(iblUrl)
+      .then(function(r) {
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        return r.arrayBuffer().then(function(ab) { return new Uint8Array(ab); });
+      })
+      .then(function(buffer) {
+        try {
+          var ibl = engine.createIblFromKtx1(buffer);
+          ibl.setIntensity(options.iblIntensity || 40000);
+          scene.setIndirectLight(ibl);
+          if (options.skybox !== false) {
+            try {
+              var reflections = ibl.getReflectionsTexture();
+              if (reflections) {
+                scene.setSkybox(Filament.Skybox.Builder().environment(reflections).build(engine));
+                console.log('SceneView: Skybox created from IBL cubemap');
+              }
+            } catch (skyErr) { console.log('SceneView: Skybox not available (IBL-only mode)'); }
+          }
+          console.log('SceneView: KTX IBL loaded (' + Math.round(buffer.length / 1024) + 'KB)');
+        } catch (e) {
+          console.warn('SceneView: createIblFromKtx1 failed, using SH fallback', e);
+          _applySyntheticIBL(engine, scene);
+        }
+      })
+      .catch(function() { _applySyntheticIBL(engine, scene); });
 
+    var loader = engine.createAssetLoader();
     var instance = new SceneViewInstance(canvas, engine, scene, renderer, view, swapChain, camera, cameraEntity, loader);
+    instance._fov = fov;
 
-    if (options.autoRotate === false) {
-      instance.setAutoRotate(false);
-    }
+    if (options.autoRotate === false) instance.setAutoRotate(false);
+    if (options.quality) instance.setQuality(options.quality);
+    if (options.bloom) instance.setBloom(typeof options.bloom === 'object' ? options.bloom : {});
+    if (options.fog) instance.setFog(typeof options.fog === 'object' ? options.fog : {});
+    if (options.vignette) instance.setVignette(typeof options.vignette === 'object' ? options.vignette : {});
+    if (options.dof) instance.setDOF(typeof options.dof === 'object' ? options.dof : {});
+    if (options.msaa) instance.setMSAA(typeof options.msaa === 'object' ? options.msaa : {});
 
     return instance;
   }
 
-  /**
-   * Create an empty SceneView on a canvas.
-   * Filament.js is loaded automatically from CDN if not already present.
-   *
-   * @param {string|HTMLCanvasElement} canvasOrId - Canvas element or its ID
-   * @param {Object} [options] - Configuration options
-   * @returns {Promise<SceneViewInstance>}
-   */
+  function _applySyntheticIBL(engine, scene) {
+    try {
+      var ibl = Filament.IndirectLight.Builder()
+        .irradiance(3, [
+           0.65,  0.65,  0.70,  0.10,  0.10,  0.12,  0.15,  0.15,  0.18,
+          -0.02, -0.02, -0.01,  0.04,  0.04,  0.05,  0.08,  0.08,  0.10,
+           0.01,  0.01,  0.01, -0.02, -0.02, -0.02,  0.03,  0.03,  0.03
+        ])
+        .intensity(35000).build(engine);
+      scene.setIndirectLight(ibl);
+      console.log('SceneView: Using synthetic SH IBL');
+    } catch (e) {}
+  }
+
   function create(canvasOrId, options) {
     return _ensureFilament().then(function() {
       return new Promise(function(resolve, reject) {
-        // If WASM is already initialized (Engine exists), skip Filament.init
         if (typeof Filament.Engine !== 'undefined') {
           try {
-            resolve(_createEngine(canvasOrId, options));
-          } catch (e) {
-            reject(e);
-          }
+            var instance = _createEngine(canvasOrId, options);
+            if (instance) resolve(instance); else reject(new Error('SceneView: Canvas already initialized'));
+          } catch (e) { reject(e); }
           return;
         }
-        // First time: initialize WASM
         Filament.init([], function() {
           try {
-            resolve(_createEngine(canvasOrId, options));
-          } catch (e) {
-            reject(e);
-          }
+            var instance = _createEngine(canvasOrId, options);
+            if (instance) resolve(instance); else reject(new Error('SceneView: Canvas already initialized'));
+          } catch (e) { reject(e); }
         });
       });
     });
   }
 
-  /**
-   * One-liner: create viewer and load a model.
-   * Filament.js is loaded automatically from CDN if not already present.
-   *
-   * @param {string|HTMLCanvasElement} canvasOrId
-   * @param {string} modelUrl - URL to .glb/.gltf model
-   * @param {Object} [options]
-   * @returns {Promise<SceneViewInstance>}
-   */
   function modelViewer(canvasOrId, modelUrl, options) {
-    return _ensureFilament().then(function() {
-      return new Promise(function(resolve, reject) {
-        // Always use Filament.init with the model URL in the assets array.
-        // This works whether WASM is already loaded or not, because Filament
-        // needs to fetch the model asset and will call back when done.
-        Filament.init([modelUrl], function() {
-          try {
-            var instance = _createEngine(canvasOrId, options);
-            instance._showModel(modelUrl);
-            resolve(instance);
-          } catch (e) {
-            reject(e);
-          }
-        });
-      });
+    return create(canvasOrId, options).then(function(instance) {
+      return instance.loadModel(modelUrl);
     });
   }
 
-  // Public API
   global.SceneView = {
-    version: '1.1.0',
+    version: '1.5.0',
     create: create,
     modelViewer: modelViewer
   };