@myned-ai/gsplat-flame-avatar-renderer 1.0.2 → 1.0.4

package/src/core/Viewer.js

@@ -0,0 +1,2895 @@
+/**
+ * Viewer
+ * 
+ * Based on @mkkellogg/gaussian-splats-3d (MIT License)
+ * https://github.com/mkkellogg/GaussianSplats3D
+ * 
+ * HEAVILY MODIFIED for FLAME avatar support:
+ * - Added FLAME head model integration
+ * - Extended with expression/pose controls
+ * - Additional rendering pipeline modifications
+ * - Additional ~900 lines of FLAME-specific code
+ */
+
+import { Bone, DynamicDrawUsage, InstancedBufferAttribute, MathUtils, Matrix4, OrthographicCamera, PerspectiveCamera, Quaternion, Scene, Skeleton, Vector2, Vector3, WebGLRenderer } from 'three';
+import { 
+    getCurrentTime, 
+    clamp, 
+    delayedExecute, 
+    isIOS, 
+    getIOSSemever, 
+    Semver,
+    fetchWithProgress,
+    nativePromiseWithExtractedComponents,
+    abortablePromiseWithExtractedComponents,
+    disposeAllMeshes,
+    AbortedPromiseError
+} from '../utils/Util.js';
+import { RenderMode } from '../enums/RenderMode.js';
+import { LogLevel } from '../enums/LogLevel.js';
+import { SplatRenderMode } from '../enums/SplatRenderMode.js';
+import { SceneFormat, sceneFormatFromPath } from '../enums/SceneFormat.js';
+import { SceneRevealMode } from '../enums/SceneRevealMode.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { SplatMesh } from './SplatMesh.js';
+import { SplatScene } from './SplatScene.js';
+import { DirectLoadError } from '../loaders/DirectLoadError.js';
+import { PlyLoader } from '../loaders/PlyLoader.js';
+import { Raycaster } from '../raycaster/Raycaster.js';
+import { createSortWorker } from '../worker/SortWorker.js';
+import { 
+    SCENE_FADEIN_RATE_FAST,
+    SCENE_FADEIN_RATE_GRADUAL,
+    THREE_CAMERA_FOV,
+    MINIMUM_DISTANCE_TO_NEW_FOCAL_POINT,
+    CONSECUTIVE_RENDERED_FRAMES_FOR_FPS_CALCULATION,
+    MIN_SPLAT_COUNT_TO_SHOW_SPLAT_TREE_LOADING_SPINNER,
+    FOCUS_MARKER_FADE_IN_SPEED,
+    FOCUS_MARKER_FADE_OUT_SPEED,
+    Constants,
+    LoaderStatus
+} from '../enums/EngineConstants.js';
+
+// UI components - stub implementations for now
+class LoadingSpinner {
+    constructor(msg, container) { this.tasks = []; }
+    show() {}
+    hide() {}
+    setContainer(c) {}
+    addTask(msg) { return this.tasks.push(msg); }
+    removeTask(id) {}
+    removeAllTasks() { this.tasks = []; }
+    setMessageForTask(id, msg) {}
+}
+
+class LoadingProgressBar {
+    constructor(container) {}
+    show() {}
+    hide() {}
+    setContainer(c) {}
+    setProgress(p) {}
+}
+
+class SceneHelper {
+    constructor(scene) { 
+        this.scene = scene; 
+        this.meshCursor = null;
+        this.meshCursorVisible = false;
+        this.focusMarker = null;
+        this.focusMarkerOpacity = 0;
+        this.controlPlane = null;
+        this.controlPlaneVisible = false;
+    }
+    setupMeshCursor() {}
+    setupFocusMarker() {}
+    setupControlPlane() {}
+    updateMeshCursor(pos, active) {}
+    updateFocusMarker(target, camera, renderDimensions) {}
+    updateControlPlane(cam, ctrl) {}
+    setFocusMarkerVisibility(v) {}
+    setFocusMarkerOpacity(o) { this.focusMarkerOpacity = o; }
+    getFocusMarkerOpacity() { return this.focusMarkerOpacity; }
+    positionAndOrientFocusMarker(pos, cam) {}
+    positionAndOrientMeshCursor(pos, cam) {}
+    setMeshCursorVisibility(visible) { this.meshCursorVisible = visible; }
+    getMeschCursorVisibility() { return this.meshCursorVisible; }
+    setControlPlaneVisibility(visible) { this.controlPlaneVisible = visible; }
+    positionAndOrientControlPlane(pos, quat, scale) {}
+    updateForRenderMode(mode, mesh) {}
+    dispose() {}
+}
+
+/**
+ * Viewer - Core Gaussian Splatting Viewer
+ * Handles the Three.js scene, camera, controls, and rendering loop.
+ */
+export class Viewer {
+  /**
+   * @param {object} options - Configuration options
+   * @param {Array<number>} [options.cameraUp=[0, 1, 0]] - Camera up vector
+   * @param {Array<number>} [options.initialCameraPosition=[0, 10, 15]] - Initial camera position
+   * @param {Array<number>} [options.initialCameraRotation=[0, 0, 0]] - Initial camera rotation
+   * @param {Array<number>} [options.initialCameraLookAt=[0, 0, 0]] - Initial camera look-at point
+   * @param {boolean} [options.dropInMode=false] - If true, viewer is used as a Three.js scene object
+   * @param {boolean} [options.selfDrivenMode=true] - If true, viewer manages its own render loop
+   * @param {boolean} [options.useBuiltInControls=true] - If true, uses OrbitControls
+   * @param {HTMLElement} [options.rootElement] - Parent element for the canvas
+   * @param {HTMLCanvasElement} [options.threejsCanvas] - Existing canvas to use
+   * @param {boolean} [options.ignoreDevicePixelRatio=false] - If true, forces DPR to 1
+   * @param {boolean} [options.halfPrecisionCovariancesOnGPU=false] - Use 16-bit float for covariances
+   * @param {THREE.Scene} [options.threeScene] - External Three.js scene to render
+   * @param {THREE.WebGLRenderer} [options.renderer] - External Three.js renderer
+   * @param {THREE.Camera} [options.camera] - External Three.js camera
+   * @param {boolean} [options.gpuAcceleratedSort=false] - Use GPU for sorting distances
+   * @param {boolean} [options.integerBasedSort=true] - Use integer arithmetic for sorting
+   * @param {boolean} [options.sharedMemoryForWorkers=true] - Use SharedArrayBuffer for workers
+   * @param {boolean} [options.dynamicScene=false] - Optimize for dynamic scenes
+   */
+  constructor(options = {}) {
+    // The natural 'up' vector for viewing the scene (only has an effect when used with orbit controls and
+    // when the viewer uses its own camera).
+    if (!options.cameraUp) options.cameraUp = [0, 1, 0];
+    this.cameraUp = new Vector3().fromArray(options.cameraUp);
+
+    // The camera's initial position (only used when the viewer uses its own camera).
+    if (!options.initialCameraPosition)
+      options.initialCameraPosition = [0, 10, 15];
+    this.initialCameraPosition = new Vector3().fromArray(
+      options.initialCameraPosition
+    );
+
+    if (!options.initialCameraRotation)
+        options.initialCameraRotation = [0, 0, 0];
+      this.initialCameraRotation = new Vector3().fromArray(
+        options.initialCameraRotation
+    );
+    this.backgroundColor = options.backgroundColor;
+
+    // The initial focal point of the camera and center of the camera's orbit (only used when the viewer uses its own camera).
+    if (!options.initialCameraLookAt) options.initialCameraLookAt = [0, 0, 0];
+    this.initialCameraLookAt = new Vector3().fromArray(
+      options.initialCameraLookAt
+    );
+
+    // 'dropInMode' is a flag that is used internally to support the usage of the viewer as a Three.js scene object
+    this.dropInMode = options.dropInMode || false;
+
+    // If 'selfDrivenMode' is true, the viewer manages its own update/animation loop via requestAnimationFrame()
+    if (options.selfDrivenMode === undefined || options.selfDrivenMode === null)
+      options.selfDrivenMode = true;
+    this.selfDrivenMode = options.selfDrivenMode && !this.dropInMode;
+    this.selfDrivenUpdateFunc = this.selfDrivenUpdate.bind(this);
+
+    // If 'useBuiltInControls' is true, the viewer will create its own instance of OrbitControls and attach to the camera
+    if (options.useBuiltInControls === undefined)
+      options.useBuiltInControls = true;
+    this.useBuiltInControls = options.useBuiltInControls;
+
+    // parent element of the Three.js renderer canvas
+    this.rootElement = options.rootElement;
+    this.canvas = options.threejsCanvas;
+    // Tells the viewer to pretend the device pixel ratio is 1, which can boost performance on devices where it is larger,
+    // at a small cost to visual quality
+    this.ignoreDevicePixelRatio = options.ignoreDevicePixelRatio || false;
+    this.devicePixelRatio = this.ignoreDevicePixelRatio
+      ? 1
+      : window.devicePixelRatio || 1;
+
+    // Tells the viewer to use 16-bit floating point values when storing splat covariance data in textures, instead of 32-bit
+    this.halfPrecisionCovariancesOnGPU =
+      options.halfPrecisionCovariancesOnGPU || false;
+
+    // If 'threeScene' is valid, it will be rendered by the viewer along with the splat mesh
+    this.threeScene = options.threeScene;
+    // Allows for usage of an external Three.js renderer
+    this.renderer = options.renderer;
+    // Allows for usage of an external Three.js camera
+    this.camera = options.camera;
+
+    // If 'gpuAcceleratedSort' is true, a partially GPU-accelerated approach to sorting splats will be used.
+    // Currently this means pre-computing splat distances from the camera on the GPU
+    this.gpuAcceleratedSort = options.gpuAcceleratedSort || false;
+
+    // if 'integerBasedSort' is true, the integer version of splat centers as well as other values used to calculate
+    // splat distances are used instead of the float version. This speeds up computation, but introduces the possibility of
+    // overflow in larger scenes.
+    if (
+      options.integerBasedSort === undefined ||
+      options.integerBasedSort === null
+    ) {
+      options.integerBasedSort = true;
+    }
+    this.integerBasedSort = options.integerBasedSort;
+
+    // If 'sharedMemoryForWorkers' is true, a SharedArrayBuffer will be used to communicate with web workers. This method
+    // is faster than copying memory to or from web workers, but comes with security implications as outlined here:
+    // https://web.dev/articles/cross-origin-isolation-guide
+    // If enabled, it requires specific CORS headers to be present in the response from the server that is sent when
+    // loading the application. More information is available in the README.
+    if (
+      options.sharedMemoryForWorkers === undefined ||
+      options.sharedMemoryForWorkers === null
+    )
+      options.sharedMemoryForWorkers = true;
+    this.sharedMemoryForWorkers = false; //options.sharedMemoryForWorkers;
+
+    // if 'dynamicScene' is true, it tells the viewer to assume scene elements are not stationary or that the number of splats in the
+    // scene may change. This prevents optimizations that depend on a static scene from being made. Additionally, if 'dynamicScene' is
+    // true it tells the splat mesh to not apply scene tranforms to splat data that is returned by functions like
+    // SplatMesh.getSplatCenter() by default.
+    this.dynamicScene = !!options.dynamicScene;
+
+    // When true, will perform additional steps during rendering to address artifacts caused by the rendering of gaussians at a
+    // substantially different resolution than that at which they were rendered during training. This will only work correctly
+    // for models that were trained using a process that utilizes this compensation calculation. For more details:
+    // https://github.com/nerfstudio-project/gsplat/pull/117
+    // https://github.com/graphdeco-inria/gaussian-splatting/issues/294#issuecomment-1772688093
+    this.antialiased = options.antialiased || false;
+
+    // This constant is added to the projected 2D screen-space splat scales
+    this.kernel2DSize =
+      options.kernel2DSize === undefined ? 0.3 : options.kernel2DSize;
+
+    // if 'renderMode' is RenderMode.Always, then the viewer will rrender the scene on every update. If it is RenderMode.OnChange,
+    // it will only render when something in the scene has changed.
+    this.renderMode = options.renderMode || RenderMode.Always;
+
+    // SceneRevealMode.Default results in a nice, slow fade-in effect for progressively loaded scenes,
+    // and a fast fade-in for non progressively loaded scenes.
+    // SceneRevealMode.Gradual will force a slow fade-in for all scenes.
+    // SceneRevealMode.Instant will force all loaded scene data to be immediately visible.
+    this.sceneRevealMode = options.sceneRevealMode || SceneRevealMode.Default;
+
+    // Hacky, experimental, non-scientific parameter for tweaking focal length related calculations. For scenes with very
+    // small gaussians, small details, and small dimensions -- increasing this value can help improve visual quality.
+    this.focalAdjustment = options.focalAdjustment || 1.0;
+
+    // Specify the maximum screen-space splat size, can help deal with large splats that get too unwieldy
+    this.maxScreenSpaceSplatSize = options.maxScreenSpaceSplatSize || 1024;
+
+    // The verbosity of console logging
+    this.logLevel = options.logLevel || LogLevel.None;
+
+    // Degree of spherical harmonics to utilize in rendering splats (assuming the data is present in the splat scene).
+    // Valid values are 0 - 2. Default value is 0.
+    this.sphericalHarmonicsDegree = options.sphericalHarmonicsDegree || 0;
+
+    // When true, allows for usage of extra properties and attributes during rendering for effects such as opacity adjustment.
+    // Default is false for performance reasons. These properties are separate from transform properties (scale, rotation, position)
+    // that are enabled by the 'dynamicScene' parameter.
+    this.enableOptionalEffects = options.enableOptionalEffects || false;
+
+    // Enable the usage of SIMD WebAssembly instructions for the splat sort
+    if (
+      options.enableSIMDInSort === undefined ||
+      options.enableSIMDInSort === null
+    )
+      options.enableSIMDInSort = true;
+    this.enableSIMDInSort = options.enableSIMDInSort;
+
+    // Level to compress non KSPLAT files when loading them for direct rendering
+    if (
+      options.inMemoryCompressionLevel === undefined ||
+      options.inMemoryCompressionLevel === null
+    ) {
+      options.inMemoryCompressionLevel = 0;
+    }
+    this.inMemoryCompressionLevel = options.inMemoryCompressionLevel;
+
+    // Reorder splat data in memory after loading is complete to optimize cache utilization. Default is true.
+    // Does not apply if splat scene is progressively loaded.
+    if (
+      options.optimizeSplatData === undefined ||
+      options.optimizeSplatData === null
+    ) {
+      options.optimizeSplatData = true;
+    }
+    this.optimizeSplatData = options.optimizeSplatData;
+
+    // When true, the intermediate splat data that is the result of decompressing splat bufffer(s) and is used to
+    // populate the data textures will be freed. This will reduces memory usage, but if that data needs to be modified
+    // it will need to be re-populated from the splat buffer(s). Default is false.
+    if (
+      options.freeIntermediateSplatData === undefined ||
+      options.freeIntermediateSplatData === null
+    ) {
+      options.freeIntermediateSplatData = false;
+    }
+    this.freeIntermediateSplatData = options.freeIntermediateSplatData;
+
+    // It appears that for certain iOS versions, special actions need to be taken with the
+    // usage of SIMD instructions and shared memory
+    if (isIOS()) {
+      const semver = getIOSSemever();
+      if (semver.major < 17) {
+        this.enableSIMDInSort = false;
+      }
+      if (semver.major < 16) {
+        this.sharedMemoryForWorkers = false;
+      }
+    }
+
+    // Tell the viewer how to render the splats
+    if (
+      options.splatRenderMode === undefined ||
+      options.splatRenderMode === null
+    ) {
+      options.splatRenderMode = SplatRenderMode.ThreeD;
+    }
+    this.splatRenderMode = options.splatRenderMode;
+
+    // Customize the speed at which the scene is revealed
+    this.sceneFadeInRateMultiplier = options.sceneFadeInRateMultiplier || 1.0;
+
+    // Set the range for the depth map for the counting sort used to sort the splats
+    this.splatSortDistanceMapPrecision =
+      options.splatSortDistanceMapPrecision ||
+      Constants.DefaultSplatSortDistanceMapPrecision;
+    const maxPrecision = this.integerBasedSort ? 20 : 24;
+    this.splatSortDistanceMapPrecision = clamp(
+      this.splatSortDistanceMapPrecision,
+      10,
+      maxPrecision
+    );
+
+    this.onSplatMeshChangedCallback = null;
+    this.createSplatMesh();
+
+    this.controls = null;
+    this.perspectiveControls = null;
+    this.orthographicControls = null;
+
+    this.orthographicCamera = null;
+    this.perspectiveCamera = null;
+
+    this.showMeshCursor = false;
+    this.showControlPlane = false;
+    this.showInfo = false;
+
+    this.sceneHelper = null;
+
+    this.sortWorker = null;
+    this.sortRunning = false;
+    this.splatRenderCount = 0;
+    this.splatSortCount = 0;
+    this.lastSplatSortCount = 0;
+    this.sortWorkerIndexesToSort = null;
+    this.sortWorkerSortedIndexes = null;
+    this.sortWorkerPrecomputedDistances = null;
+    this.sortWorkerTransforms = null;
+    this.preSortMessages = [];
+    this.runAfterNextSort = [];
+
+    this.selfDrivenModeRunning = false;
+    this.splatRenderReady = false;
+
+    this.raycaster = new Raycaster();
+
+    this.infoPanel = null;
+
+    this.startInOrthographicMode = false;
+
+    this.currentFPS = 0;
+    this.lastSortTime = 0;
+    this.consecutiveRenderFrames = 0;
+
+    this.previousCameraTarget = new Vector3();
+    this.nextCameraTarget = new Vector3();
+
+    this.mousePosition = new Vector2();
+    this.mouseDownPosition = new Vector2();
+    this.mouseDownTime = null;
+
+    this.resizeObserver = null;
+    this.mouseMoveListener = null;
+    this.mouseDownListener = null;
+    this.mouseUpListener = null;
+    this.keyDownListener = null;
+
+    this.sortPromise = null;
+    this.sortPromiseResolver = null;
+    this.splatSceneDownloadControllers = [];
+    this.splatSceneDownloadPromises = {};
+    this.splatSceneDownloadAndBuildPromise = null;
+    this.splatSceneRemovalPromise = null;
+
+    this.loadingSpinner = new LoadingSpinner(
+      null,
+      this.rootElement || document.body
+    );
+    this.loadingSpinner.hide();
+    this.loadingProgressBar = new LoadingProgressBar(
+      this.rootElement || document.body
+    );
+    this.loadingProgressBar.hide();
+    // this.infoPanel = new InfoPanel(this.rootElement || document.body)
+    // this.infoPanel.hide()
+
+    this.usingExternalCamera = this.dropInMode || this.camera ? true : false;
+    this.usingExternalRenderer = this.dropInMode || this.renderer ? true : false;
+
+    this.initialized = false;
+    this.disposing = false;
+    this.disposed = false;
+    this.disposePromise = null;
+
+    this.lastTime = 0;
+    this.gaussianSplatCount = 0;
+    this.totalFrames = 0; 
+    this.flame_params = null;
+    this.bone_tree = null;
+    this.lbs_weight_80k = null;
+    this.frame = 0;
+  
+    this.useFlame = true;
+    this.bones = null;
+    this.skeleton = null;
+    this. avatarMesh = null;
+    this.skinModel = null;
+    this.boneRoot = null;
+    this.baseMesh = null;
+    this.setSkinAttibutes = false;
+
+    if (!this.dropInMode) this.init();
+  }
+
+  createSplatMesh() {
+    this.splatMesh = new SplatMesh(
+      this.splatRenderMode,
+      this.dynamicScene,
+      this.enableOptionalEffects,
+      this.halfPrecisionCovariancesOnGPU,
+      this.devicePixelRatio,
+      this.gpuAcceleratedSort,
+      this.integerBasedSort,
+      this.antialiased,
+      this.maxScreenSpaceSplatSize,
+      this.logLevel,
+      this.sphericalHarmonicsDegree,
+      this.sceneFadeInRateMultiplier,
+      this.kernel2DSize
+    );
+    this.splatMesh.frustumCulled = false;
+    if (this.onSplatMeshChangedCallback) this.onSplatMeshChangedCallback();
+  }
+
+  init() {
+    if (this.initialized) return
+
+    if (!this.rootElement) {
+      if (!this.usingExternalRenderer) {
+        this.rootElement = document.createElement('div');
+        this.rootElement.style.width = '100%';
+        this.rootElement.style.height = '100%';
+        this.rootElement.style.position = 'absolute';
+        document.body.appendChild(this.rootElement);
+      } else {
+        this.rootElement = this.renderer.domElement || document.body;
+      }
+    }
+
+    this.setupCamera();
+    this.setupRenderer();
+    // 暂时去掉控制器
+    // this.setupControls()
+    this.setupEventHandlers();
+
+    this.threeScene = this.threeScene || new Scene();
+    this.sceneHelper = new SceneHelper(this.threeScene);
+    this.sceneHelper.setupMeshCursor();
+    this.sceneHelper.setupFocusMarker();
+    this.sceneHelper.setupControlPlane();
+
+    this.loadingProgressBar.setContainer(this.rootElement);
+    this.loadingSpinner.setContainer(this.rootElement);
+    // this.infoPanel.setContainer(this.rootElement)
+
+    this.initialized = true;
+  }
+
+  setupCamera() {
+    if (!this.usingExternalCamera) {
+      const renderDimensions = new Vector2();
+      this.getRenderDimensions(renderDimensions);
+
+      this.perspectiveCamera = new PerspectiveCamera(
+        THREE_CAMERA_FOV,
+        renderDimensions.x / renderDimensions.y,
+        0.1,
+        1000
+      );
+      this.orthographicCamera = new OrthographicCamera(
+        renderDimensions.x / -2,
+        renderDimensions.x / 2,
+        renderDimensions.y / 2,
+        renderDimensions.y / -2,
+        0.1,
+        1000
+      );
+      this.camera = this.startInOrthographicMode
+        ? this.orthographicCamera
+        : this.perspectiveCamera;
+      this.camera.position.copy(this.initialCameraPosition);
+      // this.camera.up.copy(this.cameraUp).normalize()
+      // this.camera.lookAt(this.initialCameraLookAt)
+      this.camera.rotateX(MathUtils.degToRad(this.initialCameraRotation.x));
+      this.camera.rotateY(MathUtils.degToRad(this.initialCameraRotation.y));
+      this.camera.rotateZ(MathUtils.degToRad(this.initialCameraRotation.z));
+    }
+  }
+
+  setupRenderer() {
+    if (!this.usingExternalRenderer) {
+      const renderDimensions = new Vector2();
+      this.getRenderDimensions(renderDimensions);
+
+      this.renderer = new WebGLRenderer({
+        antialias: false,
+        precision: 'highp',
+        canvas: this.canvas
+      });
+      this.renderer.setPixelRatio(this.devicePixelRatio);
+      this.renderer.autoClear = true;
+      this.renderer.setClearColor(this.backgroundColor, 1.0); // set background color according to the config
+
+      this.renderer.setSize(renderDimensions.x, renderDimensions.y);
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.getRenderDimensions(renderDimensions);
+        this.renderer.setSize(renderDimensions.x, renderDimensions.y);
+        this.forceRenderNextFrame();
+      });
+      this.resizeObserver.observe(this.rootElement);
+      this.rootElement.appendChild(this.renderer.domElement);
+    }
+  }
+
+  setupControls() {
+    if (this.useBuiltInControls) {
+      if (!this.usingExternalCamera) {
+        this.perspectiveControls = new OrbitControls(
+          this.perspectiveCamera,
+          this.renderer.domElement
+        );
+        this.orthographicControls = new OrbitControls(
+          this.orthographicCamera,
+          this.renderer.domElement
+        );
+      } else {
+        if (this.camera.isOrthographicCamera) {
+          this.orthographicControls = new OrbitControls(
+            this.camera,
+            this.renderer.domElement
+          );
+        } else {
+          this.perspectiveControls = new OrbitControls(
+            this.camera,
+            this.renderer.domElement
+          );
+        }
+      }
+      for (let controls of [
+        this.orthographicControls,
+        this.perspectiveControls
+      ]) {
+        if (controls) {
+          controls.listenToKeyEvents(window);
+          controls.rotateSpeed = 0.5;
+          controls.maxPolarAngle = Math.PI * 0.5;// + Math.PI / 24
+          controls.minPolarAngle = Math.PI * 0.5;// - Math.PI / 24
+          controls.minAzimuthAngle = -Math.PI / 72;
+          controls.maxAzimuthAngle = Math.PI / 72;
+          controls.enableDamping = true;
+          controls.dampingFactor = 0.05;
+          controls.target.copy(this.initialCameraLookAt);
+          controls.update();
+        }
+      }
+      this.controls = this.camera.isOrthographicCamera
+        ? this.orthographicControls
+        : this.perspectiveControls;
+      this.controls.update();
+    }
+  }
+
+  setupEventHandlers() {
+    if (this.useBuiltInControls) {
+      this.mouseMoveListener = this.onMouseMove.bind(this);
+      this.renderer.domElement.addEventListener(
+        'pointermove',
+        this.mouseMoveListener,
+        false
+      );
+      this.mouseDownListener = this.onMouseDown.bind(this);
+      this.renderer.domElement.addEventListener(
+        'pointerdown',
+        this.mouseDownListener,
+        false
+      );
+      this.mouseUpListener = this.onMouseUp.bind(this);
+      this.renderer.domElement.addEventListener(
+        'pointerup',
+        this.mouseUpListener,
+        false
+      );
+      this.keyDownListener = this.onKeyDown.bind(this);
+      // 暂时去掉键盘事件的监听
+      // window.addEventListener('keydown', this.keyDownListener, false)
+    }
+  }
+
+  removeEventHandlers() {
+    if (this.useBuiltInControls) {
+      this.renderer.domElement.removeEventListener(
+        'pointermove',
+        this.mouseMoveListener
+      );
+      this.mouseMoveListener = null;
+      this.renderer.domElement.removeEventListener(
+        'pointerdown',
+        this.mouseDownListener
+      );
+      this.mouseDownListener = null;
+      this.renderer.domElement.removeEventListener(
+        'pointerup',
+        this.mouseUpListener
+      );
+      this.mouseUpListener = null;
+      window.removeEventListener('keydown', this.keyDownListener);
+      this.keyDownListener = null;
+    }
+  }
+
+  setRenderMode(renderMode) {
+    this.renderMode = renderMode;
+  }
+
+  setActiveSphericalHarmonicsDegrees(activeSphericalHarmonicsDegrees) {
+    this.splatMesh.material.uniforms.sphericalHarmonicsDegree.value =
+      activeSphericalHarmonicsDegrees;
+    this.splatMesh.material.uniformsNeedUpdate = true;
+  }
+
+  onSplatMeshChanged(callback) {
+    this.onSplatMeshChangedCallback = callback;
+  }
+
+  tempForward = new Vector3()
+  tempMatrixLeft = new Matrix4()
+  tempMatrixRight = new Matrix4()
+  onKeyDown = (e) => {
+    this.tempForward.set(0, 0, -1);
+    this.tempForward.transformDirection(this.camera.matrixWorld);
+    this.tempMatrixLeft.makeRotationAxis(this.tempForward, Math.PI / 128);
+    this.tempMatrixRight.makeRotationAxis(this.tempForward, -Math.PI / 128);
+    switch (e.code) {
+      case 'KeyG':
+        this.focalAdjustment += 0.02;
+        this.forceRenderNextFrame();
+        break
+      case 'KeyF':
+        this.focalAdjustment -= 0.02;
+        this.forceRenderNextFrame();
+        break
+      case 'ArrowLeft':
+        this.camera.up.transformDirection(this.tempMatrixLeft);
+        break
+      case 'ArrowRight':
+        this.camera.up.transformDirection(this.tempMatrixRight);
+        break
+      case 'KeyC':
+        this.showMeshCursor = !this.showMeshCursor;
+        break
+      case 'KeyU':
+        this.showControlPlane = !this.showControlPlane;
+        break
+      case 'KeyI':
+        this.showInfo = !this.showInfo;
+        if (this.showInfo) {
+          // this.infoPanel.show()
+        } else {
+          // this.infoPanel.hide()
+        }
+        break
+      case 'KeyO':
+        if (!this.usingExternalCamera) {
+          this.setOrthographicMode(!this.camera.isOrthographicCamera);
+        }
+        break
+      case 'KeyP':
+        if (!this.usingExternalCamera) {
+          this.splatMesh.setPointCloudModeEnabled(
+            !this.splatMesh.getPointCloudModeEnabled()
+          );
+        }
+        break
+      case 'Equal':
+        if (!this.usingExternalCamera) {
+          this.splatMesh.setSplatScale(this.splatMesh.getSplatScale() + 0.05);
+        }
+        break
+      case 'Minus':
+        if (!this.usingExternalCamera) {
+          this.splatMesh.setSplatScale(
+            Math.max(this.splatMesh.getSplatScale() - 0.05, 0.0)
+          );
+        }
+        break
+    }
+  }
+
+  onMouseMove(mouse) {
+    this.mousePosition.set(mouse.offsetX, mouse.offsetY);
+  }
+
+  onMouseDown() {
+    this.mouseDownPosition.copy(this.mousePosition);
+    this.mouseDownTime = getCurrentTime();
+  }
+
+  onMouseUp = (function () {
+    const clickOffset = new Vector2();
+
+    return function (mouse) {
+      clickOffset.copy(this.mousePosition).sub(this.mouseDownPosition);
+      const mouseUpTime = getCurrentTime();
+      const wasClick =
+        mouseUpTime - this.mouseDownTime < 0.5 && clickOffset.length() < 2;
+      if (wasClick) {
+        this.onMouseClick(mouse);
+      }
+    }
+  })()
+
+  onMouseClick(mouse) {
+    this.mousePosition.set(mouse.offsetX, mouse.offsetY);
+    this.checkForFocalPointChange();
+  }
+
+  checkPointRenderDimensions = new Vector2()
+  checkPointToNewFocalPoint = new Vector3()
+  checkPointOutHits = []
+  checkForFocalPointChange = () => {
+    if (!this.transitioningCameraTarget) {
+      this.getRenderDimensions(this.checkPointRenderDimensions);
+      this.checkPointOutHits.length = 0;
+      this.raycaster.setFromCameraAndScreenPosition(
+        this.camera,
+        this.mousePosition,
+        this.checkPointRenderDimensions
+      );
+      this.raycaster.intersectSplatMesh(this.splatMesh, this.checkPointOutHits);
+      if (this.checkPointOutHits.length > 0) {
+        const hit = this.checkPointOutHits[0];
+        const intersectionPoint = hit.origin;
+        this.checkPointToNewFocalPoint
+          .copy(intersectionPoint)
+          .sub(this.camera.position);
+        if (
+          this.checkPointToNewFocalPoint.length() >
+          MINIMUM_DISTANCE_TO_NEW_FOCAL_POINT
+        ) {
+          this.previousCameraTarget.copy(this.controls.target);
+          this.nextCameraTarget.copy(intersectionPoint);
+          this.transitioningCameraTarget = true;
+          this.transitioningCameraTargetStartTime = getCurrentTime();
+        }
+      }
+    }
+  }
+
+  getRenderDimensions(outDimensions) {
+    if (this.rootElement) {
+      outDimensions.x = this.rootElement.offsetWidth;
+      outDimensions.y = this.rootElement.offsetHeight;
+    } else {
+      this.renderer.getSize(outDimensions);
+    }
+  }
+
+  setOrthographicMode(orthographicMode) {
+    if (orthographicMode === this.camera.isOrthographicCamera) return
+    const fromCamera = this.camera;
+    const toCamera = orthographicMode
+      ? this.orthographicCamera
+      : this.perspectiveCamera;
+    toCamera.position.copy(fromCamera.position);
+    toCamera.up.copy(fromCamera.up);
+    toCamera.rotation.copy(fromCamera.rotation);
+    toCamera.quaternion.copy(fromCamera.quaternion);
+    toCamera.matrix.copy(fromCamera.matrix);
+    this.camera = toCamera;
+
+    if (this.controls) {
+      const resetControls = (controls) => {
+        controls.saveState();
+        controls.reset();
+      };
+
+      const fromControls = this.controls;
+      const toControls = orthographicMode
+        ? this.orthographicControls
+        : this.perspectiveControls;
+
+      resetControls(toControls);
+      resetControls(fromControls);
+
+      toControls.target.copy(fromControls.target);
+      if (orthographicMode) {
+        Viewer.setCameraZoomFromPosition(toCamera, fromCamera, fromControls);
+      } else {
+        Viewer.setCameraPositionFromZoom(toCamera, fromCamera, toControls);
+      }
+      this.controls = toControls;
+      this.camera.lookAt(this.controls.target);
+    }
+  }
+
+  static setCameraPositionFromZoom = (function () {
+    const tempVector = new Vector3();
+
+    return function (positionCamera, zoomedCamera, controls) {
+      const toLookAtDistance = 1 / (zoomedCamera.zoom * 0.001);
+      tempVector
+        .copy(controls.target)
+        .sub(positionCamera.position)
+        .normalize()
+        .multiplyScalar(toLookAtDistance)
+        .negate();
+      positionCamera.position.copy(controls.target).add(tempVector);
+    }
+  })()
+
+  static setCameraZoomFromPosition = (function () {
+    const tempVector = new Vector3();
+
+    return function (zoomCamera, positionZamera, controls) {
+      const toLookAtDistance = tempVector
+        .copy(controls.target)
+        .sub(positionZamera.position)
+        .length();
+      zoomCamera.zoom = 1 / (toLookAtDistance * 0.001);
+    }
+  })()
+
+  updateSplatMesh = (function () {
+    const renderDimensions = new Vector2();
+
+    return function () {
+      if (!this.splatMesh) return
+      const splatCount = this.splatMesh.getSplatCount();
+      if (splatCount > 0) {
+        this.splatMesh.updateVisibleRegionFadeDistance(this.sceneRevealMode);
+        this.splatMesh.updateTransforms();
+        this.getRenderDimensions(renderDimensions);
+        const focalLengthX =
+          this.camera.projectionMatrix.elements[0] *
+          0.5 *
+          this.devicePixelRatio *
+          renderDimensions.x;
+        const focalLengthY =
+          this.camera.projectionMatrix.elements[5] *
+          0.5 *
+          this.devicePixelRatio *
+          renderDimensions.y;
+
+        const focalMultiplier = this.camera.isOrthographicCamera
+          ? 1.0 / this.devicePixelRatio
+          : 1.0;
+        const focalAdjustment = this.focalAdjustment * focalMultiplier;
+        const inverseFocalAdjustment = 1.0 / focalAdjustment;
+
+        this.adjustForWebXRStereo(renderDimensions);
+        this.splatMesh.updateUniforms(
+          renderDimensions,
+          focalLengthX * focalAdjustment,
+          focalLengthY * focalAdjustment,
+          this.camera.isOrthographicCamera,
+          this.camera.zoom || 1.0,
+          inverseFocalAdjustment
+        );
+      }
+    }
+  })()
+
+  adjustForWebXRStereo(renderDimensions) {
+    // TODO: Figure out a less hacky way to determine if stereo rendering is active
+    if (this.camera && this.webXRActive) {
+      const xrCamera = this.renderer.xr.getCamera();
+      const xrCameraProj00 = xrCamera.projectionMatrix.elements[0];
+      const cameraProj00 = this.camera.projectionMatrix.elements[0];
+      renderDimensions.x *= cameraProj00 / xrCameraProj00;
+    }
+  }
+
+  isLoadingOrUnloading() {
+    return (
+      Object.keys(this.splatSceneDownloadPromises).length > 0 ||
+      this.splatSceneDownloadAndBuildPromise !== null ||
+      this.splatSceneRemovalPromise !== null
+    )
+  }
+
+  isDisposingOrDisposed() {
+    return this.disposing || this.disposed
+  }
+
+  addSplatSceneDownloadController(controller) {
+    this.splatSceneDownloadControllers.push(controller);
+  }
+
+  removeSplatSceneDownloadController(controller) {
+    const index = this.splatSceneDownloadControllers.indexOf(controller);
+    if (index > -1) {
+        this.splatSceneDownloadControllers.splice(index, 1);
+    }
+  }
+
+  addSplatSceneDownloadPromise(promise) {
+    this.splatSceneDownloadPromises[promise.id] = promise;
+  }
+
+  removeSplatSceneDownloadPromise(promise) {
+    delete this.splatSceneDownloadPromises[promise.id];
+  }
+
+  setSplatSceneDownloadAndBuildPromise(promise) {
+    this.splatSceneDownloadAndBuildPromise = promise;
+  }
+
+  clearSplatSceneDownloadAndBuildPromise() {
+    this.splatSceneDownloadAndBuildPromise = null;
+  }
+
+  /**
+   * Add a splat scene to the viewer and display any loading UI if appropriate.
+   * @param {string} path Path to splat scene to be loaded
+   * @param {object} options {
+   *
+   *         splatAlphaRemovalThreshold: Ignore any splats with an alpha less than the specified
+   *                                     value (valid range: 0 - 255), defaults to 1
+   *
+   *         showLoadingUI:         Display a loading spinner while the scene is loading, defaults to true
+   *
+   *         position (Array<number>):   Position of the scene, acts as an offset from its default position, defaults to [0, 0, 0]
+   *
+   *         rotation (Array<number>):   Rotation of the scene represented as a quaternion, defaults to [0, 0, 0, 1]
+   *
+   *         scale (Array<number>):      Scene's scale, defaults to [1, 1, 1]
+   *
+   *         onProgress:                 Function to be called as file data are received, or other processing occurs
+   *
+   *         headers:                    Optional HTTP headers to be sent along with splat requests
+   * }
+   * @return {Promise}
+   */
+  addSplatScene(path, options = {}) {
+    if (this.isLoadingOrUnloading()) {
+      throw new Error(
+        'Cannot add splat scene while another load or unload is already in progress.'
+      )
+    }
+
+    if (this.isDisposingOrDisposed()) {
+      throw new Error('Cannot add splat scene after dispose() is called.')
+    }
+
+    if (
+      options.progressiveLoad &&
+      this.splatMesh.scenes &&
+      this.splatMesh.scenes.length > 0
+    ) {
+      console.log(
+        'addSplatScene(): "progressiveLoad" option ignore because there are multiple splat scenes'
+      );
+      options.progressiveLoad = false;
+    }
+
+    const format =
+      options.format !== undefined && options.format !== null
+        ? options.format
+        : sceneFormatFromPath(path);
+    const progressiveLoad =
+      Viewer.isProgressivelyLoadable(format) && options.progressiveLoad;
+    const showLoadingUI =
+      options.showLoadingUI !== undefined && options.showLoadingUI !== null
+        ? options.showLoadingUI
+        : true;
+
+    let loadingUITaskId = null;
+    if (showLoadingUI) {
+      this.loadingSpinner.removeAllTasks();
+      loadingUITaskId = this.loadingSpinner.addTask('Downloading...');
+    }
+    const hideLoadingUI = () => {
+      this.loadingProgressBar.hide();
+      this.loadingSpinner.removeAllTasks();
+    };
+
+    const onProgressUIUpdate = (
+      percentComplete,
+      percentCompleteLabel,
+      loaderStatus
+    ) => {
+      if (showLoadingUI) {
+        if (loaderStatus === LoaderStatus.Downloading) {
+          if (percentComplete == 100) {
+            this.loadingSpinner.setMessageForTask(
+              loadingUITaskId,
+              'Download complete!'
+            );
+          } else {
+            if (progressiveLoad) {
+              this.loadingSpinner.setMessageForTask(
+                loadingUITaskId,
+                'Downloading splats...'
+              );
+            } else {
+              const suffix = percentCompleteLabel
+                ? `: ${percentCompleteLabel}`
+                : `...`;
+              this.loadingSpinner.setMessageForTask(
+                loadingUITaskId,
+                `Downloading${suffix}`
+              );
+            }
+          }
+        } else if (loaderStatus === LoaderStatus.Processing) {
+          console.log('loaderStatus === LoaderStatus.Processing');
+          this.loadingSpinner.setMessageForTask(
+            loadingUITaskId,
+            'Processing splats...'
+          );
+        }
+      }
+    };
+
+    let downloadDone = false;
+    let downloadedPercentage = 0;
+    const splatBuffersAddedUIUpdate = (firstBuild, finalBuild) => {
+      if (showLoadingUI) {
+        if (
+          (firstBuild && progressiveLoad) ||
+          (finalBuild && !progressiveLoad)
+        ) {
+          this.loadingSpinner.removeTask(loadingUITaskId);
+          if (!finalBuild && !downloadDone) this.loadingProgressBar.show();
+        }
+        if (progressiveLoad) {
+          if (finalBuild) {
+            downloadDone = true;
+            this.loadingProgressBar.hide();
+          } else {
+            this.loadingProgressBar.setProgress(downloadedPercentage);
+          }
+        }
+      }
+    };
+
+    const onProgress = (
+      percentComplete,
+      percentCompleteLabel,
+      loaderStatus
+    ) => {
+      downloadedPercentage = percentComplete;
+      onProgressUIUpdate(percentComplete, percentCompleteLabel, loaderStatus);
+      if (options.onProgress)
+        options.onProgress(percentComplete, percentCompleteLabel, loaderStatus);
+    };
+
+    const buildSection = (splatBuffer, firstBuild, finalBuild) => {
+      if (!progressiveLoad && options.onProgress)
+        options.onProgress(0, '0%', LoaderStatus.Processing);
+      const addSplatBufferOptions = {
+        rotation: options.rotation || options.orientation,
+        position: options.position,
+        scale: options.scale,
+        splatAlphaRemovalThreshold: options.splatAlphaRemovalThreshold
+      };
+      return this.addSplatBuffers(
+        [splatBuffer],
+        [addSplatBufferOptions],
+        finalBuild,
+        firstBuild && showLoadingUI,
+        showLoadingUI,
+        progressiveLoad,
+        progressiveLoad
+      ).then(() => {
+        if (!progressiveLoad && options.onProgress)
+          options.onProgress(100, '100%', LoaderStatus.Processing);
+        splatBuffersAddedUIUpdate(firstBuild, finalBuild);
+      })
+    };
+
+    const loadFunc = progressiveLoad
+      ? this.downloadAndBuildSingleSplatSceneProgressiveLoad.bind(this)
+      : this.downloadAndBuildSingleSplatSceneStandardLoad.bind(this);
+    return loadFunc(
+      path,
+      format,
+      options.splatAlphaRemovalThreshold,
+      buildSection.bind(this),
+      onProgress,
+      hideLoadingUI.bind(this),
+      options.headers
+    )
+  }
+
+  /**
+   * Download a single splat scene, convert to splat buffer and then rebuild the viewer's splat mesh
+   * by calling 'buildFunc' -- all before displaying the scene. Also sets/clears relevant instance synchronization objects,
+   * and calls appropriate functions on success or failure.
+   * @param {string} path Path to splat scene to be loaded
+   * @param {SceneFormat} format Format of the splat scene file
+   * @param {number} splatAlphaRemovalThreshold Ignore any splats with an alpha less than the specified value (valid range: 0 - 255)
+   * @param {function} buildFunc Function to build the viewer's splat mesh with the downloaded splat buffer
+   * @param {function} onProgress Function to be called as file data are received, or other processing occurs
+   * @param {function} onException Function to be called when exception occurs
+   * @param {object} headers Optional HTTP headers to pass to use for downloading splat scene
+   * @return {Promise}
+   */
+  downloadAndBuildSingleSplatSceneStandardLoad(
+    path,
+    format,
+    splatAlphaRemovalThreshold,
+    buildFunc,
+    onProgress,
+    onException,
+    headers
+  ) {
+    const downloadPromise = this.downloadSplatSceneToSplatBuffer(
+      path,
+      splatAlphaRemovalThreshold,
+      onProgress,
+      false,
+      undefined,
+      format,
+      headers
+    );
+
+    // Create a promise that can be resolved/rejected externally, with abort capability
+    const downloadAndBuildPromise = abortablePromiseWithExtractedComponents(
+      downloadPromise.abort ? downloadPromise.abort.bind(downloadPromise) : undefined
+    );
+
+    downloadPromise
+      .then((splatBuffer) => {
+        this.removeSplatSceneDownloadPromise(downloadPromise);
+        return buildFunc(splatBuffer, true, true).then(() => {
+          downloadAndBuildPromise.resolve();
+          this.clearSplatSceneDownloadAndBuildPromise();
+        })
+      })
+      .catch((e) => {
+        if (onException) onException();
+        this.clearSplatSceneDownloadAndBuildPromise();
+        this.removeSplatSceneDownloadPromise(downloadPromise);
+        const error =
+          (e instanceof AbortedPromiseError || e.name === 'AbortError')
+            ? e
+            : new Error(`Viewer::addSplatScene -> Could not load file ${path}`);
+        downloadAndBuildPromise.reject(error);
+      });
+
+    this.addSplatSceneDownloadPromise(downloadPromise);
+    this.setSplatSceneDownloadAndBuildPromise(downloadAndBuildPromise.promise);
+
+    return downloadAndBuildPromise.promise
+  }
+
+  /**
+   * Download a single splat scene and convert to splat buffer in a progressive manner, allowing rendering as the file downloads.
+   * As each section is downloaded, the viewer's splat mesh is rebuilt by calling 'buildFunc'
+   * Also sets/clears relevant instance synchronization objects, and calls appropriate functions on success or failure.
+   * @param {string} path Path to splat scene to be loaded
+   * @param {SceneFormat} format Format of the splat scene file
+   * @param {number} splatAlphaRemovalThreshold Ignore any splats with an alpha less than the specified value (valid range: 0 - 255)
+   * @param {function} buildFunc Function to rebuild the viewer's splat mesh after a new splat buffer section is downloaded
+   * @param {function} onDownloadProgress Function to be called as file data are received
+   * @param {function} onDownloadException Function to be called when exception occurs at any point during the full download
+   * @param {object} headers Optional HTTP headers to pass to use for downloading splat scene
+   * @return {Promise}
+   */
+  downloadAndBuildSingleSplatSceneProgressiveLoad(
+    path,
+    format,
+    splatAlphaRemovalThreshold,
+    buildFunc,
+    onDownloadProgress,
+    onDownloadException,
+    headers
+  ) {
+    let progressiveLoadedSectionBuildCount = 0;
+    let progressiveLoadedSectionBuilding = false;
+    const queuedProgressiveLoadSectionBuilds = [];
+
+    const checkAndBuildProgressiveLoadSections = () => {
+      if (
+        queuedProgressiveLoadSectionBuilds.length > 0 &&
+        !progressiveLoadedSectionBuilding &&
+        !this.isDisposingOrDisposed()
+      ) {
+        progressiveLoadedSectionBuilding = true;
+        const queuedBuild = queuedProgressiveLoadSectionBuilds.shift();
+        buildFunc(
+          queuedBuild.splatBuffer,
+          queuedBuild.firstBuild,
+          queuedBuild.finalBuild
+        ).then(() => {
+          progressiveLoadedSectionBuilding = false;
+          if (queuedBuild.firstBuild) {
+            progressiveLoadFirstSectionBuildPromise.resolve();
+          } else if (queuedBuild.finalBuild) {
+            splatSceneDownloadAndBuildPromise.resolve();
+            this.clearSplatSceneDownloadAndBuildPromise();
+          }
+          if (queuedProgressiveLoadSectionBuilds.length > 0) {
+            delayedExecute(() => checkAndBuildProgressiveLoadSections());
+          }
+        });
+      }
+    };
+
+    const onProgressiveLoadSectionProgress = (splatBuffer, finalBuild) => {
+      if (!this.isDisposingOrDisposed()) {
+        if (
+          finalBuild ||
+          queuedProgressiveLoadSectionBuilds.length === 0 ||
+          splatBuffer.getSplatCount() >
+            queuedProgressiveLoadSectionBuilds[0].splatBuffer.getSplatCount()
+        ) {
+          queuedProgressiveLoadSectionBuilds.push({
+            splatBuffer,
+            firstBuild: progressiveLoadedSectionBuildCount === 0,
+            finalBuild
+          });
+          progressiveLoadedSectionBuildCount++;
+          checkAndBuildProgressiveLoadSections();
+        }
+      }
+    };
+
+    const splatSceneDownloadPromise = this.downloadSplatSceneToSplatBuffer(
+      path,
+      splatAlphaRemovalThreshold,
+      onDownloadProgress,
+      true,
+      onProgressiveLoadSectionProgress,
+      format,
+      headers
+    );
+
+    // Get abort handler from download promise
+    const abortHandler = splatSceneDownloadPromise.abort 
+      ? splatSceneDownloadPromise.abort.bind(splatSceneDownloadPromise) 
+      : undefined;
+
+    const progressiveLoadFirstSectionBuildPromise =
+      abortablePromiseWithExtractedComponents(abortHandler);
+
+    const splatSceneDownloadAndBuildPromise =
+      abortablePromiseWithExtractedComponents(abortHandler);
+
+    this.addSplatSceneDownloadPromise(splatSceneDownloadPromise);
+    this.setSplatSceneDownloadAndBuildPromise(
+      splatSceneDownloadAndBuildPromise.promise
+    );
+
+    splatSceneDownloadPromise
+      .then(() => {
+        this.removeSplatSceneDownloadPromise(splatSceneDownloadPromise);
+      })
+      .catch((e) => {
+        console.error('Viewer::addSplatScene actual error:', e);
+        this.clearSplatSceneDownloadAndBuildPromise();
+        this.removeSplatSceneDownloadPromise(splatSceneDownloadPromise);
+        const error =
+          (e instanceof AbortedPromiseError || e.name === 'AbortError')
+            ? e
+            : new Error(
+                `Viewer::addSplatScene -> Could not load one or more scenes: ${e.message}`
+              );
+        progressiveLoadFirstSectionBuildPromise.reject(error);
+        if (onDownloadException) onDownloadException(error);
+      });
+
+    return progressiveLoadFirstSectionBuildPromise.promise
+  }
+
+  /**
+   * Add multiple splat scenes to the viewer and display any loading UI if appropriate.
+   * @param {Array<object>} sceneOptions Array of per-scene options: {
+   *
+   *         path: Path to splat scene to be loaded
+   *
+   *         splatAlphaRemovalThreshold: Ignore any splats with an alpha less than the specified
+   *                                     value (valid range: 0 - 255), defaults to 1
+   *
+   *         position (Array<number>):   Position of the scene, acts as an offset from its default position, defaults to [0, 0, 0]
+   *
+   *         rotation (Array<number>):   Rotation of the scene represented as a quaternion, defaults to [0, 0, 0, 1]
+   *
+   *         scale (Array<number>):      Scene's scale, defaults to [1, 1, 1]
+   *
+   *         headers:                    Optional HTTP headers to be sent along with splat requests
+   *
+   *         format (SceneFormat)        Optional, the format of the scene data (.ply, .ksplat, .splat). If not present, the
+   *                                     file extension in 'path' will be used to determine the format (if it is present)
+   * }
+   * @param {boolean} showLoadingUI Display a loading spinner while the scene is loading, defaults to true
+   * @param {function} onProgress Function to be called as file data are received
+   * @return {Promise}
+   */
+  addSplatScenes(sceneOptions, showLoadingUI = true, onProgress = undefined) {
+    if (this.isLoadingOrUnloading()) {
+      throw new Error(
+        'Cannot add splat scene while another load or unload is already in progress.'
+      )
+    }
+
+    if (this.isDisposingOrDisposed()) {
+      throw new Error('Cannot add splat scene after dispose() is called.')
+    }
+
+    const fileCount = sceneOptions.length;
+    const percentComplete = [];
+
+    let loadingUITaskId;
+    if (showLoadingUI) {
+      this.loadingSpinner.removeAllTasks();
+      loadingUITaskId = this.loadingSpinner.addTask('Downloading...');
+    }
+
+    const onLoadProgress = (fileIndex, percent, percentLabel, loaderStatus) => {
+      percentComplete[fileIndex] = percent;
+      let totalPercent = 0;
+      for (let i = 0; i < fileCount; i++)
+        totalPercent += percentComplete[i] || 0;
+      totalPercent = totalPercent / fileCount;
+      percentLabel = `${totalPercent.toFixed(2)}%`;
+      if (showLoadingUI) {
+        if (loaderStatus === LoaderStatus.Downloading) {
+          this.loadingSpinner.setMessageForTask(
+            loadingUITaskId,
+            totalPercent == 100
+              ? `Download complete!`
+              : `Downloading: ${percentLabel}`
+          );
+        }
+      }
+      if (onProgress) onProgress(totalPercent, percentLabel, loaderStatus);
+    };
+
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    this.addSplatSceneDownloadController(abortController);
+
+    const downloadPromises = [];
+    for (let i = 0; i < sceneOptions.length; i++) {
+      const options = sceneOptions[i];
+      const format =
+        options.format !== undefined && options.format !== null
+          ? options.format
+          : sceneFormatFromPath(options.path);
+      const downloadPromise = this.downloadSplatSceneToSplatBuffer(
+        options.path,
+        options.splatAlphaRemovalThreshold,
+        onLoadProgress.bind(this, i),
+        false,
+        undefined,
+        format,
+        options.headers,
+        signal
+      );
+      downloadPromises.push(downloadPromise);
+    }
+
+    const downloadAndBuildPromise = Promise.all(downloadPromises)
+      .then((splatBuffers) => {
+        if (showLoadingUI) this.loadingSpinner.removeTask(loadingUITaskId);
+        if (onProgress) onProgress(0, '0%', LoaderStatus.Processing);
+        return this.addSplatBuffers(
+          splatBuffers,
+          sceneOptions,
+          true,
+          showLoadingUI,
+          showLoadingUI,
+          false,
+          false
+        ).then(() => {
+          if (onProgress) onProgress(100, '100%', LoaderStatus.Processing);
+          this.clearSplatSceneDownloadAndBuildPromise();
+        });
+      })
+      .catch((e) => {
+        if (showLoadingUI) this.loadingSpinner.removeTask(loadingUITaskId);
+        this.clearSplatSceneDownloadAndBuildPromise();
+        const error =
+          e.name === 'AbortError'
+            ? e
+            : new Error(
+                `Viewer::addSplatScenes -> Could not load one or more splat scenes.`
+              );
+        throw error;
+      })
+      .finally(() => {
+        this.removeSplatSceneDownloadController(abortController);
+      });
+
+    this.setSplatSceneDownloadAndBuildPromise(downloadAndBuildPromise);
+    return downloadAndBuildPromise
+  }
+
+  /**
+   * Download a splat scene and convert to SplatBuffer instance.
+   * @param {string} path Path to splat scene to be loaded
+   * @param {number} splatAlphaRemovalThreshold Ignore any splats with an alpha less than the specified
+   *                                            value (valid range: 0 - 255), defaults to 1
+   *
+   * @param {function} onProgress Function to be called as file data are received
+   * @param {boolean} progressiveBuild Construct file sections into splat buffers as they are downloaded
+   * @param {function} onSectionBuilt Function to be called when new section is added to the file
+   * @param {string} format File format of the scene
+   * @param {object} headers Optional HTTP headers to pass to use for downloading splat scene
+   * @param {AbortSignal} signal Optional AbortSignal to cancel the download
+   * @return {AbortablePromise}
+   */
+  downloadSplatSceneToSplatBuffer(
+    path,
+    splatAlphaRemovalThreshold = 1,
+    onProgress = undefined,
+    progressiveBuild = false,
+    onSectionBuilt = undefined,
+    format,
+    headers
+  ) {
+    const optimizeSplatData = progressiveBuild ? false : this.optimizeSplatData;
+    try {
+      if (format === SceneFormat.Ply) {
+        return PlyLoader.loadFromURL(
+          path,
+          onProgress,
+          progressiveBuild,
+          onSectionBuilt,
+          splatAlphaRemovalThreshold,
+          this.inMemoryCompressionLevel,
+          optimizeSplatData,
+          this.sphericalHarmonicsDegree,
+          headers
+        )
+      }
+    } catch (e) {
+      if (e instanceof DirectLoadError) {
+        throw new Error(
+          'File type or server does not support progressive loading.'
+        )
+      } else {
+        throw e
+      }
+    }
+
+    throw new Error(
+      `Viewer::downloadSplatSceneToSplatBuffer -> File format not supported: ${path}`
+    )
+  }
+
+  static isProgressivelyLoadable(format) {
+    return format === SceneFormat.Ply
+  }
+
+  /**
+   * Add one or more instances of SplatBuffer to the SplatMesh instance managed by the viewer and set up the sorting web worker.
+   * This function will terminate the existing sort worker (if there is one).
+   */
+  addSplatBuffers = (
+    splatBuffers,
+    splatBufferOptions = [],
+    finalBuild = true,
+    showLoadingUI = true,
+    showLoadingUIForSplatTreeBuild = true,
+    replaceExisting = false,
+    enableRenderBeforeFirstSort = false,
+    preserveVisibleRegion = true
+  ) => {
+    if (this.isDisposingOrDisposed()) return Promise.resolve()
+
+    let splatProcessingTaskId = null;
+    const removeSplatProcessingTask = () => {
+      if (splatProcessingTaskId !== null) {
+        this.loadingSpinner.removeTask(splatProcessingTaskId);
+        splatProcessingTaskId = null;
+      }
+    };
+
+    this.splatRenderReady = false;
+    return new Promise((resolve) => {
+      if (showLoadingUI) {
+        splatProcessingTaskId = this.loadingSpinner.addTask(
+          'Processing splats...'
+        );
+      }
+      delayedExecute(() => {
+        if (this.isDisposingOrDisposed()) {
+          resolve();
+        } else {
+          const buildResults = this.addSplatBuffersToMesh(
+            splatBuffers,
+            splatBufferOptions,
+            finalBuild,
+            showLoadingUIForSplatTreeBuild,
+            replaceExisting,
+            preserveVisibleRegion
+          );
+
+          const maxSplatCount = this.splatMesh.getMaxSplatCount();
+          if (
+            this.sortWorker &&
+            this.sortWorker.maxSplatCount !== maxSplatCount
+          )
+            this.disposeSortWorker();
+          // If we aren't calculating the splat distances from the center on the GPU, the sorting worker needs
+          // splat centers and transform indexes so that it can calculate those distance values.
+          if (!this.gpuAcceleratedSort) {
+            this.preSortMessages.push({
+              centers: buildResults.centers.buffer,
+              sceneIndexes: buildResults.sceneIndexes.buffer,
+              range: {
+                from: buildResults.from,
+                to: buildResults.to,
+                count: buildResults.count
+              }
+            });
+          }
+          const sortWorkerSetupPromise =
+            !this.sortWorker && maxSplatCount > 0
+              ? this.setupSortWorker(this.splatMesh)
+              : Promise.resolve();
+          sortWorkerSetupPromise.then(() => {
+            if (this.isDisposingOrDisposed()) return
+            this.runSplatSort(true, true).then((sortRunning) => {
+              if (!this.sortWorker || !sortRunning) {
+                this.splatRenderReady = true;
+                removeSplatProcessingTask();
+                resolve();
+              } else {
+                if (enableRenderBeforeFirstSort) {
+                  this.splatRenderReady = true;
+                } else {
+                  this.runAfterNextSort.push(() => {
+                    this.splatRenderReady = true;
+                  });
+                }
+                this.runAfterNextSort.push(() => {
+                  removeSplatProcessingTask();
+                  resolve();
+                });
+              }
+            });
+          });
+        }
+      }, true);
+    })
+  }
+
+  /**
+   * Add one or more instances of SplatBuffer to the SplatMesh instance managed by the viewer. By default, this function is additive;
+   * all splat buffers contained by the viewer's splat mesh before calling this function will be preserved. This behavior can be
+   * changed by passing 'true' for 'replaceExisting'.
+   * @param {Array<SplatBuffer>} splatBuffers SplatBuffer instances
+   * @param {Array<object>} splatBufferOptions Array of options objects: {
+   *
+   *         splatAlphaRemovalThreshold: Ignore any splats with an alpha less than the specified
+   *                                     value (valid range: 0 - 255), defaults to 1
+   *
+   *         position (Array<number>):   Position of the scene, acts as an offset from its default position, defaults to [0, 0, 0]
+   *
+   *         rotation (Array<number>):   Rotation of the scene represented as a quaternion, defaults to [0, 0, 0, 1]
+   *
+   *         scale (Array<number>):      Scene's scale, defaults to [1, 1, 1]
+   * }
+   * @param {boolean} finalBuild Will the splat mesh be in its final state after this build?
+   * @param {boolean} showLoadingUIForSplatTreeBuild Whether or not to show the loading spinner during construction of the splat tree.
+   * @return {object} Object containing info about the splats that are updated
+   */
+  addSplatBuffersToMesh = (function () {
+    let splatOptimizingTaskId;
+
+    return function (
+      splatBuffers,
+      splatBufferOptions,
+      finalBuild = true,
+      showLoadingUIForSplatTreeBuild = false,
+      replaceExisting = false,
+      preserveVisibleRegion = true
+    ) {
+      if (this.isDisposingOrDisposed()) return
+      let allSplatBuffers = [];
+      let allSplatBufferOptions = [];
+      if (!replaceExisting) {
+        allSplatBuffers =
+          this.splatMesh.scenes.map((scene) => scene.splatBuffer) || [];
+        allSplatBufferOptions = this.splatMesh.sceneOptions
+          ? this.splatMesh.sceneOptions.map((sceneOptions) => sceneOptions)
+          : [];
+      }
+      allSplatBuffers.push(...splatBuffers);
+      allSplatBufferOptions.push(...splatBufferOptions);
+      if (this.renderer) this.splatMesh.setRenderer(this.renderer);
+      const onSplatTreeIndexesUpload = (finished) => {
+        if (this.isDisposingOrDisposed()) return
+        const splatCount = this.splatMesh.getSplatCount();
+        if (
+          showLoadingUIForSplatTreeBuild &&
+          splatCount >= MIN_SPLAT_COUNT_TO_SHOW_SPLAT_TREE_LOADING_SPINNER
+        ) {
+          if (!finished && !splatOptimizingTaskId) {
+            this.loadingSpinner.setMinimized(true, true);
+            splatOptimizingTaskId = this.loadingSpinner.addTask(
+              'Optimizing data structures...'
+            );
+          }
+        }
+      };
+      const onSplatTreeReady = (finished) => {
+        if (this.isDisposingOrDisposed()) return
+        if (finished && splatOptimizingTaskId) {
+          this.loadingSpinner.removeTask(splatOptimizingTaskId);
+          splatOptimizingTaskId = null;
+        }
+      };
+      const buildResults = this.splatMesh.build(
+        allSplatBuffers,
+        allSplatBufferOptions,
+        true,
+        finalBuild,
+        onSplatTreeIndexesUpload,
+        onSplatTreeReady,
+        preserveVisibleRegion
+      );
+      if (finalBuild && this.freeIntermediateSplatData)
+        this.splatMesh.freeIntermediateSplatData();
+      return buildResults
+    }
+  })()
+
+  /**
+   * Set up the splat sorting web worker.
+   * @param {SplatMesh} splatMesh SplatMesh instance that contains the splats to be sorted
+   * @return {Promise}
+   */
+  async setupSortWorker(splatMesh) {
+    if (this.isDisposingOrDisposed()) return
+    const DistancesArrayType = this.integerBasedSort
+      ? Int32Array
+      : Float32Array;
+    const splatCount = splatMesh.getSplatCount();
+    const maxSplatCount = splatMesh.getMaxSplatCount();
+    this.sortWorker = await createSortWorker(
+      maxSplatCount,
+      this.sharedMemoryForWorkers,
+      this.enableSIMDInSort,
+      this.integerBasedSort,
+      this.splatMesh.dynamicMode,
+      this.splatSortDistanceMapPrecision
+    );
+    return new Promise((resolve) => {
+      this.sortWorker.onmessage = (e) => {
+        if (e.data.sortDone) {
+          this.sortRunning = false;
+          let numbersArray = Array.from(
+            { length: this.gaussianSplatCount },
+            (_, i) => i
+          );
+          if (this.sharedMemoryForWorkers) {
+            this.splatMesh.updateRenderIndexes(
+              this.sortWorkerSortedIndexes,
+              e.data.splatRenderCount
+            );
+          } else {
+            const sortedIndexes = new Uint32Array(
+              e.data.sortedIndexes.buffer,
+              0,
+              e.data.splatRenderCount
+            );
+            // console.log(sortedIndexes);
+            this.splatMesh.updateRenderIndexes(
+              sortedIndexes,
+              e.data.splatRenderCount
+            );
+          }
+
+          this.lastSplatSortCount = this.splatSortCount;
+
+          this.lastSortTime = e.data.sortTime;
+          this.sortPromiseResolver();
+          this.sortPromiseResolver = null;
+          this.forceRenderNextFrame();
+          if (this.runAfterNextSort.length > 0) {
+            this.runAfterNextSort.forEach((func) => {
+              func();
+            });
+            this.runAfterNextSort.length = 0;
+          }
+        } else if (e.data.sortCanceled) {
+          this.sortRunning = false;
+        } else if (e.data.sortSetupPhase1Complete) {
+          if (this.logLevel >= LogLevel.Info)
+            console.log('Sorting web worker WASM setup complete.');
+          if (this.sharedMemoryForWorkers) {
+            this.sortWorkerSortedIndexes = new Uint32Array(
+              e.data.sortedIndexesBuffer,
+              e.data.sortedIndexesOffset,
+              maxSplatCount
+            );
+            this.sortWorkerIndexesToSort = new Uint32Array(
+              e.data.indexesToSortBuffer,
+              e.data.indexesToSortOffset,
+              maxSplatCount
+            );
+            this.sortWorkerPrecomputedDistances = new DistancesArrayType(
+              e.data.precomputedDistancesBuffer,
+              e.data.precomputedDistancesOffset,
+              maxSplatCount
+            );
+            this.sortWorkerTransforms = new Float32Array(
+              e.data.transformsBuffer,
+              e.data.transformsOffset,
+              Constants.MaxScenes * 16
+            );
+          } else {
+            this.sortWorkerIndexesToSort = new Uint32Array(maxSplatCount);
+            this.sortWorkerPrecomputedDistances = new DistancesArrayType(
+              maxSplatCount
+            );
+            this.sortWorkerTransforms = new Float32Array(
+              Constants.MaxScenes * 16
+            );
+          }
+          for (let i = 0; i < splatCount; i++)
+            this.sortWorkerIndexesToSort[i] = i;
+          this.sortWorker.maxSplatCount = maxSplatCount;
+
+          if (this.logLevel >= LogLevel.Info) {
+            console.log('Sorting web worker ready.');
+            const splatDataTextures = this.splatMesh.getSplatDataTextures();
+            const covariancesTextureSize = splatDataTextures.covariances.size;
+            const centersColorsTextureSize = splatDataTextures.centerColors.size;
+            console.log(
+              'Covariances texture size: ' +
+                covariancesTextureSize.x +
+                ' x ' +
+                covariancesTextureSize.y
+            );
+            console.log(
+              'Centers/colors texture size: ' +
+                centersColorsTextureSize.x +
+                ' x ' +
+                centersColorsTextureSize.y
+            );
+          }
+
+          resolve();
+        }
+      };
+    })
+  }
+
+  disposeSortWorker() {
+    if (this.sortWorker) this.sortWorker.terminate();
+    this.sortWorker = null;
+    this.sortPromise = null;
+    if (this.sortPromiseResolver) {
+      this.sortPromiseResolver();
+      this.sortPromiseResolver = null;
+    }
+    this.preSortMessages = [];
+    this.sortRunning = false;
+  }
+
+  removeSplatScene(indexToRemove, showLoadingUI = true) {
+    return this.removeSplatScenes([indexToRemove], showLoadingUI)
+  }
+
+  removeSplatScenes(indexesToRemove, showLoadingUI = true) {
+    if (this.isLoadingOrUnloading()) {
+      throw new Error(
+        'Cannot remove splat scene while another load or unload is already in progress.'
+      )
+    }
+
+    if (this.isDisposingOrDisposed()) {
+      throw new Error('Cannot remove splat scene after dispose() is called.')
+    }
+
+    let sortPromise;
+
+    this.splatSceneRemovalPromise = new Promise((resolve, reject) => {
+      let revmovalTaskId;
+
+      if (showLoadingUI) {
+        this.loadingSpinner.removeAllTasks();
+        this.loadingSpinner.show();
+        revmovalTaskId = this.loadingSpinner.addTask('Removing splat scene...');
+      }
+
+      const checkAndHideLoadingUI = () => {
+        if (showLoadingUI) {
+          this.loadingSpinner.hide();
+          this.loadingSpinner.removeTask(revmovalTaskId);
+        }
+      };
+
+      const onDone = (error) => {
+        checkAndHideLoadingUI();
+        this.splatSceneRemovalPromise = null;
+        if (!error) resolve();
+        else reject(error);
+      };
+
+      const checkForEarlyExit = () => {
+        if (this.isDisposingOrDisposed()) {
+          onDone();
+          return true
+        }
+        return false
+      };
+
+      sortPromise = this.sortPromise || Promise.resolve();
+      sortPromise.then(() => {
+        if (checkForEarlyExit()) return
+        const savedSplatBuffers = [];
+        const savedSceneOptions = [];
+        const savedSceneTransformComponents = [];
+        for (let i = 0; i < this.splatMesh.scenes.length; i++) {
+          let shouldRemove = false;
+          for (let indexToRemove of indexesToRemove) {
+            if (indexToRemove === i) {
+              shouldRemove = true;
+              break
+            }
+          }
+          if (!shouldRemove) {
+            const scene = this.splatMesh.scenes[i];
+            savedSplatBuffers.push(scene.splatBuffer);
+            savedSceneOptions.push(this.splatMesh.sceneOptions[i]);
+            savedSceneTransformComponents.push({
+              position: scene.position.clone(),
+              quaternion: scene.quaternion.clone(),
+              scale: scene.scale.clone()
+            });
+          }
+        }
+        this.disposeSortWorker();
+        this.splatMesh.dispose();
+        this.sceneRevealMode = SceneRevealMode.Instant;
+        this.createSplatMesh();
+        this.addSplatBuffers(
+          savedSplatBuffers,
+          savedSceneOptions,
+          true,
+          false,
+          true
+        )
+          .then(() => {
+            if (checkForEarlyExit()) return
+            checkAndHideLoadingUI();
+            this.splatMesh.scenes.forEach((scene, index) => {
+              scene.position.copy(savedSceneTransformComponents[index].position);
+              scene.quaternion.copy(
+                savedSceneTransformComponents[index].quaternion
+              );
+              scene.scale.copy(savedSceneTransformComponents[index].scale);
+            });
+            this.splatMesh.updateTransforms();
+            this.splatRenderReady = false;
+
+            this.runSplatSort(true).then(() => {
+              if (checkForEarlyExit()) {
+                this.splatRenderReady = true;
+                return
+              }
+              sortPromise = this.sortPromise || Promise.resolve();
+              sortPromise.then(() => {
+                this.splatRenderReady = true;
+                onDone();
+              });
+            });
+          })
+          .catch((e) => {
+            onDone(e);
+          });
+      });
+    });
+
+    return this.splatSceneRemovalPromise
+  }
+
+  /**
+   * Start self-driven mode
+   */
+  start() {
+    if (this.selfDrivenMode) {
+      this.requestFrameId = requestAnimationFrame(this.selfDrivenUpdateFunc);
+      this.selfDrivenModeRunning = true;
+    } else {
+      throw new Error('Cannot start viewer unless it is in self driven mode.')
+    }
+  }
+
+  /**
+   * Stop self-driven mode
+   */
+  stop() {
+    if (this.selfDrivenMode && this.selfDrivenModeRunning) {
+      cancelAnimationFrame(this.requestFrameId);
+      this.selfDrivenModeRunning = false;
+    }
+  }
+
+  /**
+   * Dispose of all resources held directly and indirectly by this viewer.
+   */
+  async dispose() {
+    if (this.isDisposingOrDisposed()) return this.disposePromise
+
+    for (let controller of this.splatSceneDownloadControllers) {
+        controller.abort();
+    }
+
+    let waitPromises = [];
+    if (this.sortPromise) {
+      waitPromises.push(this.sortPromise);
+    }
+
+    this.disposing = true;
+    this.disposePromise = Promise.all(waitPromises).finally(() => {
+      this.stop();
+      if (this.orthographicControls) {
+        this.orthographicControls.dispose();
+        this.orthographicControls = null;
+      }
+      if (this.perspectiveControls) {
+        this.perspectiveControls.dispose();
+        this.perspectiveControls = null;
+      }
+      this.controls = null;
+      if (this.splatMesh) {
+        this.splatMesh.dispose();
+        this.splatMesh = null;
+      }
+      if (this.avatarMesh) {
+        disposeAllMeshes(this.avatarMesh);
+        this.avatarMesh = null;
+      }
+      if (this.sceneHelper) {
+        this.sceneHelper.dispose();
+        this.sceneHelper = null;
+      }
+      if (this.resizeObserver) {
+        this.resizeObserver.unobserve(this.rootElement);
+        this.resizeObserver = null;
+      }
+      this.disposeSortWorker();
+      this.removeEventHandlers();
+
+      this.loadingSpinner.removeAllTasks();
+      this.loadingSpinner.setContainer(null);
+      this.loadingProgressBar.hide();
+      this.loadingProgressBar.setContainer(null);
+      // this.infoPanel.setContainer(null)
+
+      this.camera = null;
+      this.threeScene = null;
+      this.splatRenderReady = false;
+      this.initialized = false;
+      if (this.renderer) {
+        if (!this.usingExternalRenderer) {
+          this.rootElement.removeChild(this.renderer.domElement);
+          this.renderer.dispose();
+        }
+        this.renderer = null;
+      }
+
+      if (!this.usingExternalRenderer) {
+        // document.body.removeChild(this.rootElement);
+      }
+
+      this.sortWorkerSortedIndexes = null;
+      this.sortWorkerIndexesToSort = null;
+      this.sortWorkerPrecomputedDistances = null;
+      this.sortWorkerTransforms = null;
+      this.disposed = true;
+      this.disposing = false;
+      this.disposePromise = null;
+    });
+    return this.disposePromise
+  }
+  vsyncNum = 4
+  selfDrivenUpdate() {
+    if (this.selfDrivenMode) {
+        this.requestFrameId = requestAnimationFrame(this.selfDrivenUpdateFunc);
+
+        // const currentTime = getCurrentTime();
+        // const calcDelta = currentTime - this.lastTime;
+        // if (calcDelta >= 1.0 / 30.0) {
+        //     this.lastTime = currentTime;
+        // } else {
+        //     return
+        // }
+    }
+    this.vsyncCount++;
+
+    if (this.vsyncCount < this.vsyncNum) {
+      return
+    }
+
+    this.vsyncCount = 0;
+
+    this.update();
+    if (this.shouldRender()) {
+      //add expression
+
+      this.render();
+      this.consecutiveRenderFrames++;
+    } else {
+      this.consecutiveRenderFrames = 0;
+    }
+    this.renderNextFrame = false;
+  }
+
+  forceRenderNextFrame() {
+    this.renderNextFrame = true;
+  }
+
+  shouldRender = (function () {
+    let renderCount = 0;
+    const lastCameraPosition = new Vector3();
+    const lastCameraOrientation = new Quaternion();
+    const changeEpsilon = 0.0001;
+
+    return function () {
+      if (
+        !this.initialized ||
+        !this.splatRenderReady ||
+        this.isDisposingOrDisposed()
+      )
+        return false
+
+      let shouldRender = false;
+      let cameraChanged = false;
+      if (this.camera) {
+        const cp = this.camera.position;
+        const co = this.camera.quaternion;
+        cameraChanged =
+          Math.abs(cp.x - lastCameraPosition.x) > changeEpsilon ||
+          Math.abs(cp.y - lastCameraPosition.y) > changeEpsilon ||
+          Math.abs(cp.z - lastCameraPosition.z) > changeEpsilon ||
+          Math.abs(co.x - lastCameraOrientation.x) > changeEpsilon ||
+          Math.abs(co.y - lastCameraOrientation.y) > changeEpsilon ||
+          Math.abs(co.z - lastCameraOrientation.z) > changeEpsilon ||
+          Math.abs(co.w - lastCameraOrientation.w) > changeEpsilon;
+      }
+
+      shouldRender =
+        this.renderMode !== RenderMode.Never &&
+        (renderCount === 0 ||
+          this.splatMesh.visibleRegionChanging ||
+          cameraChanged ||
+          this.renderMode === RenderMode.Always ||
+          this.dynamicMode === true ||
+          this.renderNextFrame);
+
+      if (this.camera) {
+        lastCameraPosition.copy(this.camera.position);
+        lastCameraOrientation.copy(this.camera.quaternion);
+      }
+
+      renderCount++;
+      return shouldRender
+    }
+  })()
+
+  render = (function () {
+    return function () {
+      if (
+        !this.initialized ||
+        !this.splatRenderReady ||
+        this.isDisposingOrDisposed()
+      )
+        return
+
+      const hasRenderables = (threeScene) => {
+        for (let child of threeScene.children) {
+          if (child.visible) return true
+        }
+        return false
+      };
+
+      const savedAuoClear = this.renderer.autoClear;
+      if (hasRenderables(this.threeScene)) {
+        this.renderer.render(this.threeScene, this.camera);
+        this.renderer.autoClear = false;
+      }
+      this.renderer.render(this.splatMesh, this.camera);
+      this.renderer.autoClear = false;
+      if (this.sceneHelper.getFocusMarkerOpacity() > 0.0)
+        this.renderer.render(this.sceneHelper.focusMarker, this.camera);
+      if (this.showControlPlane)
+        this.renderer.render(this.sceneHelper.controlPlane, this.camera);
+      this.renderer.autoClear = savedAuoClear;
+    }
+  })()
+
+
+  update(renderer, camera) {
+    // this.frame++
+    const fpsDiv = document.getElementById('fps');
+    if (fpsDiv) {
+      fpsDiv.textContent = `FPS: ${this.currentFPS}`;
+    }
+
+    if(this.frame >= this.totalFrames) 
+        this.frame = 0;
+    
+    if (this.dropInMode) this.updateForDropInMode(renderer, camera);
+
+    if (
+      !this.initialized ||
+      !this.splatRenderReady ||
+      this.isDisposingOrDisposed()
+    )
+      return
+
+    if (this.controls) {
+      this.controls.update();
+      if (this.camera.isOrthographicCamera && !this.usingExternalCamera) {
+        Viewer.setCameraPositionFromZoom(
+          this.camera,
+          this.camera,
+          this.controls
+        );
+      }
+    }
+    this.runMorphUpdate();
+    this.runSplatSort(true,true);
+
+    const replaceIndexes = false;
+    if (replaceIndexes) {
+      this.splatMesh.updateRenderIndexes(
+        this.sortedIndexes,
+        this.sortedIndexes.length
+      );
+    }
+
+    this.updateForRendererSizeChanges();
+    this.updateSplatMesh();
+    this.updateMeshCursor();
+    this.updateFPS();
+    this.timingSensitiveUpdates();
+    // this.updateInfoPanel()
+    this.updateControlPlane();
+  }
+
+  sortedIndexes
+  updateForDropInMode(renderer, camera) {
+    this.renderer = renderer;
+    if (this.splatMesh) this.splatMesh.setRenderer(this.renderer);
+    this.camera = camera;
+    if (this.controls) this.controls.object = camera;
+    this.init();
+  }
+
+  lastCalcTime = getCurrentTime()
+  fpsFrameCount = 0
+  updateFPS = () => {
+    if (
+      this.consecutiveRenderFrames >
+      CONSECUTIVE_RENDERED_FRAMES_FOR_FPS_CALCULATION
+    ) {
+      const currentTime = getCurrentTime();
+      const calcDelta = currentTime - this.lastCalcTime;
+      if (calcDelta >= 1.0) {
+        this.currentFPS = this.fpsFrameCount;
+        this.fpsFrameCount = 0;
+        this.lastCalcTime = currentTime;
+      } else {
+        this.fpsFrameCount++;
+      }
+    } else {
+      this.currentFPS = null;
+    }
+  }
+
+  updateForRendererSizeChanges = (function () {
+    const lastRendererSize = new Vector2();
+    const currentRendererSize = new Vector2();
+    let lastCameraOrthographic;
+
+    return function () {
+      if (!this.usingExternalCamera) {
+        this.renderer.getSize(currentRendererSize);
+        if (
+          lastCameraOrthographic === undefined ||
+          lastCameraOrthographic !== this.camera.isOrthographicCamera ||
+          currentRendererSize.x !== lastRendererSize.x ||
+          currentRendererSize.y !== lastRendererSize.y
+        ) {
+          if (this.camera.isOrthographicCamera) {
+            this.camera.left = -currentRendererSize.x / 2.0;
+            this.camera.right = currentRendererSize.x / 2.0;
+            this.camera.top = currentRendererSize.y / 2.0;
+            this.camera.bottom = -currentRendererSize.y / 2.0;
+          } else {
+            this.camera.aspect = currentRendererSize.x / currentRendererSize.y;
+          }
+          this.camera.updateProjectionMatrix();
+          lastRendererSize.copy(currentRendererSize);
+          lastCameraOrthographic = this.camera.isOrthographicCamera;
+        }
+      }
+    }
+  })()
+
+  timingSensitiveUpdates = (function () {
+    let lastUpdateTime;
+
+    return function () {
+      const currentTime = getCurrentTime();
+      if (!lastUpdateTime) lastUpdateTime = currentTime;
+      const timeDelta = currentTime - lastUpdateTime;
+
+      this.updateCameraTransition(currentTime);
+      this.updateFocusMarker(timeDelta);
+
+      lastUpdateTime = currentTime;
+    }
+  })()
+
+  tempCameraTarget = new Vector3()
+  toPreviousTarget = new Vector3()
+  toNextTarget = new Vector3()
+  updateCameraTransition = (currentTime) => {
+    if (this.transitioningCameraTarget) {
+      this.toPreviousTarget
+        .copy(this.previousCameraTarget)
+        .sub(this.camera.position)
+        .normalize();
+      this.toNextTarget
+        .copy(this.nextCameraTarget)
+        .sub(this.camera.position)
+        .normalize();
+      const rotationAngle = Math.acos(
+        this.toPreviousTarget.dot(this.toNextTarget)
+      );
+      const rotationSpeed = (rotationAngle / (Math.PI / 3)) * 0.65 + 0.3;
+      const t =
+        (rotationSpeed / rotationAngle) *
+        (currentTime - this.transitioningCameraTargetStartTime);
+      this.tempCameraTarget
+        .copy(this.previousCameraTarget)
+        .lerp(this.nextCameraTarget, t);
+      this.camera.lookAt(this.tempCameraTarget);
+      this.controls.target.copy(this.tempCameraTarget);
+      if (t >= 1.0) {
+        this.transitioningCameraTarget = false;
+      }
+    }
+  }
+
+  updateFocusMarker = (function () {
+    const renderDimensions = new Vector2();
+    let wasTransitioning = false;
+
+    return function (timeDelta) {
+      this.getRenderDimensions(renderDimensions);
+      if (this.transitioningCameraTarget) {
+        this.sceneHelper.setFocusMarkerVisibility(true);
+        const currentFocusMarkerOpacity = Math.max(
+          this.sceneHelper.getFocusMarkerOpacity(),
+          0.0
+        );
+        let newFocusMarkerOpacity = Math.min(
+          currentFocusMarkerOpacity + FOCUS_MARKER_FADE_IN_SPEED * timeDelta,
+          1.0
+        );
+        this.sceneHelper.setFocusMarkerOpacity(newFocusMarkerOpacity);
+        this.sceneHelper.updateFocusMarker(
+          this.nextCameraTarget,
+          this.camera,
+          renderDimensions
+        );
+        wasTransitioning = true;
+        this.forceRenderNextFrame();
+      } else {
+        let currentFocusMarkerOpacity;
+        if (wasTransitioning) currentFocusMarkerOpacity = 1.0;
+        else
+          currentFocusMarkerOpacity = Math.min(
+            this.sceneHelper.getFocusMarkerOpacity(),
+            1.0
+          );
+        if (currentFocusMarkerOpacity > 0) {
+          this.sceneHelper.updateFocusMarker(
+            this.nextCameraTarget,
+            this.camera,
+            renderDimensions
+          );
+          let newFocusMarkerOpacity = Math.max(
+            currentFocusMarkerOpacity - FOCUS_MARKER_FADE_OUT_SPEED * timeDelta,
+            0.0
+          );
+          this.sceneHelper.setFocusMarkerOpacity(newFocusMarkerOpacity);
+          if (newFocusMarkerOpacity === 0.0)
+            this.sceneHelper.setFocusMarkerVisibility(false);
+        }
+        if (currentFocusMarkerOpacity > 0.0) this.forceRenderNextFrame();
+        wasTransitioning = false;
+      }
+    }
+  })()
+
+  updateMeshCursor = (function () {
+    const outHits = [];
+    const renderDimensions = new Vector2();
+
+    return function () {
+      if (this.showMeshCursor) {
+        this.forceRenderNextFrame();
+        this.getRenderDimensions(renderDimensions);
+        outHits.length = 0;
+        this.raycaster.setFromCameraAndScreenPosition(
+          this.camera,
+          this.mousePosition,
+          renderDimensions
+        );
+        this.raycaster.intersectSplatMesh(this.splatMesh, outHits);
+        if (outHits.length > 0) {
+          this.sceneHelper.setMeshCursorVisibility(true);
+          this.sceneHelper.positionAndOrientMeshCursor(
+            outHits[0].origin,
+            this.camera
+          );
+        } else {
+          this.sceneHelper.setMeshCursorVisibility(false);
+        }
+      } else {
+        if (this.sceneHelper.getMeschCursorVisibility())
+          this.forceRenderNextFrame();
+        this.sceneHelper.setMeshCursorVisibility(false);
+      }
+    }
+  })()
+
+  updateInfoPanel = (function () {
+    const renderDimensions = new Vector2();
+
+    return function () {
+      if (!this.showInfo) return
+      const splatCount = this.splatMesh.getSplatCount();
+      this.getRenderDimensions(renderDimensions);
+      const cameraLookAtPosition = this.controls ? this.controls.target : null;
+      const meshCursorPosition = this.showMeshCursor
+        ? this.sceneHelper.meshCursor.position
+        : null;
+      const splatRenderCountPct =
+        splatCount > 0 ? (this.splatRenderCount / splatCount) * 100 : 0;
+      // this.infoPanel.update(
+      //   renderDimensions,
+      //   this.camera.position,
+      //   cameraLookAtPosition,
+      //   this.camera.up,
+      //   this.camera.isOrthographicCamera,
+      //   meshCursorPosition,
+      //   this.currentFPS || 'N/A',
+      //   splatCount,
+      //   this.splatRenderCount,
+      //   splatRenderCountPct,
+      //   this.lastSortTime,
+      //   this.focalAdjustment,
+      //   this.splatMesh.getSplatScale(),
+      //   this.splatMesh.getPointCloudModeEnabled()
+      // )
+    }
+  })()
+
+  updateControlPlane() {
+    if (this.showControlPlane) {
+      this.sceneHelper.setControlPlaneVisibility(true);
+      this.sceneHelper.positionAndOrientControlPlane(
+        this.controls.target,
+        this.camera.up
+      );
+    } else {
+      this.sceneHelper.setControlPlaneVisibility(false);
+    }
+  }
+
+  mvpMatrix = new Matrix4()
+  cameraPositionArray = []
+  lastSortViewDir = new Vector3(0, 0, -1)
+  sortViewDir = new Vector3(0, 0, -1)
+  lastSortViewPos = new Vector3()
+  sortViewOffset = new Vector3()
+  queuedSorts = []
+
+  partialSorts = [
+    {
+      angleThreshold: 0.55,
+      sortFractions: [0.125, 0.33333, 0.75]
+    },
+    {
+      angleThreshold: 0.65,
+      sortFractions: [0.33333, 0.66667]
+    },
+    {
+      angleThreshold: 0.8,
+      sortFractions: [0.5]
+    }
+  ]
+  runSplatSort = (force = false, forceSortAll = false) => {
+    if (!this.initialized) return Promise.resolve(false)
+    if (this.sortRunning) return Promise.resolve(true)
+    if (this.splatMesh.getSplatCount() <= 0) {
+      this.splatRenderCount = 0;
+      return Promise.resolve(false)
+    }
+
+    let angleDiff = 0;
+    let positionDiff = 0;
+    let needsRefreshForRotation = false;
+    let needsRefreshForPosition = false;
+
+    this.sortViewDir.set(0, 0, -1).applyQuaternion(this.camera.quaternion);
+    angleDiff = this.sortViewDir.dot(this.lastSortViewDir);
+    positionDiff = this.sortViewOffset
+      .copy(this.camera.position)
+      .sub(this.lastSortViewPos)
+      .length();
+
+    if (!force) {
+      if (!this.splatMesh.dynamicMode && this.queuedSorts.length === 0) {
+        if (angleDiff <= 0.99) needsRefreshForRotation = true;
+        if (positionDiff >= 1.0) needsRefreshForPosition = true;
+        if (!needsRefreshForRotation && !needsRefreshForPosition)
+          return Promise.resolve(false)
+      }
+    }
+
+    this.sortRunning = true;
+    let { splatRenderCount, shouldSortAll } = this.gatherSceneNodesForSort();
+    shouldSortAll = shouldSortAll || forceSortAll;
+    this.splatRenderCount = splatRenderCount;
+
+    this.mvpMatrix.copy(this.camera.matrixWorld).invert();
+    const mvpCamera = this.perspectiveCamera || this.camera;
+    this.mvpMatrix.premultiply(mvpCamera.projectionMatrix);
+    if (!this.splatMesh.dynamicMode)
+      this.mvpMatrix.multiply(this.splatMesh.matrixWorld);
+
+    let gpuAcceleratedSortPromise = Promise.resolve(true);
+    if (
+      this.gpuAcceleratedSort &&
+      (this.queuedSorts.length <= 1 || this.queuedSorts.length % 2 === 0)
+    ) {
+      gpuAcceleratedSortPromise = this.splatMesh.computeDistancesOnGPU(
+        this.mvpMatrix,
+        this.sortWorkerPrecomputedDistances
+      );
+    }
+
+    gpuAcceleratedSortPromise.then(() => {
+      if (this.queuedSorts.length === 0) {
+        if (this.splatMesh.dynamicMode || shouldSortAll) {
+          this.queuedSorts.push(this.splatRenderCount);
+        } else {
+          for (let partialSort of this.partialSorts) {
+            if (angleDiff < partialSort.angleThreshold) {
+              for (let sortFraction of partialSort.sortFractions) {
+                this.queuedSorts.push(
+                  Math.floor(this.splatRenderCount * sortFraction)
+                );
+              }
+              break
+            }
+          }
+          this.queuedSorts.push(this.splatRenderCount);
+        }
+      }
+      let sortCount = Math.min(this.queuedSorts.shift(), this.splatRenderCount);
+      this.splatSortCount = sortCount;
+
+      this.cameraPositionArray[0] = this.camera.position.x;
+      this.cameraPositionArray[1] = this.camera.position.y;
+      this.cameraPositionArray[2] = this.camera.position.z;
+
+      const sortMessage = {
+        modelViewProj: this.mvpMatrix.elements,
+        cameraPosition: this.cameraPositionArray,
+        splatRenderCount: this.splatRenderCount,
+        splatSortCount: sortCount,
+        usePrecomputedDistances: this.gpuAcceleratedSort
+      };
+      if (this.splatMesh.dynamicMode) {
+        this.splatMesh.fillTransformsArray(this.sortWorkerTransforms);
+      }
+      if (!this.sharedMemoryForWorkers) {
+        sortMessage.indexesToSort = this.sortWorkerIndexesToSort;
+        sortMessage.transforms = this.sortWorkerTransforms;
+        if (this.gpuAcceleratedSort) {
+          sortMessage.precomputedDistances = this.sortWorkerPrecomputedDistances;
+        }
+      }
+
+      this.sortPromise = new Promise((resolve) => {
+        this.sortPromiseResolver = resolve;
+      });
+
+      if (this.preSortMessages.length > 0) {
+        this.preSortMessages.forEach((message) => {
+          this.sortWorker.postMessage(message);
+        });
+        this.preSortMessages = [];
+      }
+      this.sortWorker.postMessage({
+        sort: sortMessage
+      });
+
+      if (this.queuedSorts.length === 0) {
+        this.lastSortViewPos.copy(this.camera.position);
+        this.lastSortViewDir.copy(this.sortViewDir);
+      }
+
+      return true
+    });
+
+    return gpuAcceleratedSortPromise
+  }
+
+  /**
+   * Determine which splats to render by checking which are inside or close to the view frustum
+   */
+  gatherSceneNodesForSort = (function () {
+    const nodeRenderList = [];
+    let allSplatsSortBuffer = null;
+    const tempVectorYZ = new Vector3();
+    const tempVectorXZ = new Vector3();
+    const tempVector = new Vector3();
+    const modelView = new Matrix4();
+    const baseModelView = new Matrix4();
+    const sceneTransform = new Matrix4();
+    const renderDimensions = new Vector3();
+    const forward = new Vector3(0, 0, -1);
+
+    const tempMax = new Vector3();
+    const nodeSize = (node) => {
+      return tempMax.copy(node.max).sub(node.min).length()
+    };
+
+    return function (gatherAllNodes = false) {
+      this.getRenderDimensions(renderDimensions);
+      const cameraFocalLength =
+        renderDimensions.y /
+        2.0 /
+        Math.tan((this.camera.fov / 2.0) * MathUtils.DEG2RAD);
+      const fovXOver2 = Math.atan(renderDimensions.x / 2.0 / cameraFocalLength);
+      const fovYOver2 = Math.atan(renderDimensions.y / 2.0 / cameraFocalLength);
+      const cosFovXOver2 = Math.cos(fovXOver2);
+      const cosFovYOver2 = Math.cos(fovYOver2);
+
+      const splatTree = this.splatMesh.getSplatTree();
+
+      if (splatTree) {
+        baseModelView.copy(this.camera.matrixWorld).invert();
+        if (!this.splatMesh.dynamicMode)
+          baseModelView.multiply(this.splatMesh.matrixWorld);
+
+        let nodeRenderCount = 0;
+        let splatRenderCount = 0;
+
+        for (let s = 0; s < splatTree.subTrees.length; s++) {
+          const subTree = splatTree.subTrees[s];
+          modelView.copy(baseModelView);
+          if (this.splatMesh.dynamicMode) {
+            this.splatMesh.getSceneTransform(s, sceneTransform);
+            modelView.multiply(sceneTransform);
+          }
+          const nodeCount = subTree.nodesWithIndexes.length;
+          for (let i = 0; i < nodeCount; i++) {
+            const node = subTree.nodesWithIndexes[i];
+            if (
+              !node.data ||
+              !node.data.indexes ||
+              node.data.indexes.length === 0
+            )
+              continue
+            tempVector.copy(node.center).applyMatrix4(modelView);
+
+            const distanceToNode = tempVector.length();
+            tempVector.normalize();
+
+            tempVectorYZ.copy(tempVector).setX(0).normalize();
+            tempVectorXZ.copy(tempVector).setY(0).normalize();
+
+            const cameraAngleXZDot = forward.dot(tempVectorXZ);
+            const cameraAngleYZDot = forward.dot(tempVectorYZ);
+
+            const ns = nodeSize(node);
+            const outOfFovY = cameraAngleYZDot < cosFovYOver2 - 0.6;
+            const outOfFovX = cameraAngleXZDot < cosFovXOver2 - 0.6;
+            if (
+              !gatherAllNodes &&
+              (outOfFovX || outOfFovY) &&
+              distanceToNode > ns
+            ) {
+              continue
+            }
+            splatRenderCount += node.data.indexes.length;
+            nodeRenderList[nodeRenderCount] = node;
+            node.data.distanceToNode = distanceToNode;
+            nodeRenderCount++;
+          }
+        }
+
+        nodeRenderList.length = nodeRenderCount;
+        nodeRenderList.sort((a, b) => {
+          if (a.data.distanceToNode < b.data.distanceToNode) return -1
+          else return 1
+        });
+
+        let currentByteOffset = splatRenderCount * Constants.BytesPerInt;
+        for (let i = 0; i < nodeRenderCount; i++) {
+          const node = nodeRenderList[i];
+          const windowSizeInts = node.data.indexes.length;
+          const windowSizeBytes = windowSizeInts * Constants.BytesPerInt;
+          let destView = new Uint32Array(
+            this.sortWorkerIndexesToSort.buffer,
+            currentByteOffset - windowSizeBytes,
+            windowSizeInts
+          );
+          destView.set(node.data.indexes);
+          currentByteOffset -= windowSizeBytes;
+        }
+
+        return {
+          splatRenderCount: splatRenderCount,
+          shouldSortAll: false
+        }
+      } else {
+        const totalSplatCount = this.splatMesh.getSplatCount();
+        if (
+          !allSplatsSortBuffer ||
+          allSplatsSortBuffer.length !== totalSplatCount
+        ) {
+          allSplatsSortBuffer = new Uint32Array(totalSplatCount);
+          for (let i = 0; i < totalSplatCount; i++) {
+            allSplatsSortBuffer[i] = i;
+          }
+        }
+        this.sortWorkerIndexesToSort.set(allSplatsSortBuffer);
+        return {
+          splatRenderCount: totalSplatCount,
+          shouldSortAll: true
+        }
+      }
+    }
+  })()
+
+  getSplatMesh() {
+    return this.splatMesh
+  }
+
+  /**
+   * Get a reference to a splat scene.
+   * @param {number} sceneIndex The index of the scene to which the reference will be returned
+   * @return {SplatScene}
+   */
+  getSplatScene(sceneIndex) {
+    return this.splatMesh.getScene(sceneIndex)
+  }
+
+  getSceneCount() {
+    return this.splatMesh.getSceneCount()
+  }
+
+  isMobile() {
+    return navigator.userAgent.includes('Mobi')
+  }
+
+  createBonesFromJson(bonesJson) {
+    const bones = [];
+
+    function createBoneRecursive(jsonBone, parent = null) {
+      const bone = new Bone();
+      bone.name = jsonBone.name;
+      if (parent) {
+        parent.add(bone);
+      }
+      bone.position.set(...jsonBone.position);
+      bones.push(bone);
+
+      if (jsonBone.children) {
+        jsonBone.children.forEach((childJsonBone) =>
+          createBoneRecursive(childJsonBone, bone)
+        );
+      }
+      return bone
+    }
+
+    bonesJson.forEach((boneJson) => createBoneRecursive(boneJson));
+
+    return bones
+  }
+
+  updateMorphTarget(inputMesh) {
+    this.avatarMesh = inputMesh;
+    this.splatMesh.flameModel = inputMesh;
+    this.splatMesh.useFlameModel = this.useFlame;
+    if(this.useFlame == true) {
+        // const skinData = {
+        //     bones: [
+        //         {
+        //         "name": "root",
+        //         "position": [-1.7149e-04, -1.4252e-01, -8.2541e-02],
+        //         "children": [
+        //             {
+        //             "name": "neck",
+        //             "position": [-5.6988e-05, -1.6069e-02, -5.7859e-02],
+                    
+        //             "children": [
+        //                 {
+        //                 "name": "jaw",
+        //                     "position": [7.4429e-04, -8.7249e-03, -5.3760e-02]
+
+        //                 },
+        //                 {
+        //                 "name": "leftEye",
+        //                 "position": [  3.0240e-02,  2.3092e-02,  2.2900e-02]
+        //                 },
+        //                 {
+        //                 "name": "rightEye",
+        //                 "position": [-3.0296e-02,  2.3675e-02,  2.1837e-02]
+        //                 }
+        //             ]
+        //             }
+        //         ]
+        //         }
+        //     ] 
+        // };
+
+        // this.bones = this.createBonesFromJson(skinData.bones);
+        this.bones = this.createBonesFromJson(this.bone_tree["bones"]);
+
+        const bonesPosReserve = [new Vector3(this.bones[0].position.x, this.bones[0].position.y, this.bones[0].position.z),
+        new Vector3(this.bones[1].position.x, this.bones[1].position.y, this.bones[1].position.z),
+        new Vector3(this.bones[2].position.x, this.bones[2].position.y, this.bones[2].position.z),
+        new Vector3(this.bones[3].position.x, this.bones[3].position.y, this.bones[3].position.z),
+        new Vector3(this.bones[4].position.x, this.bones[4].position.y, this.bones[4].position.z)
+        ];
+        this.bones[1].position.copy(new Vector3(bonesPosReserve[1].x - bonesPosReserve[0].x, bonesPosReserve[1].y - bonesPosReserve[0].y, bonesPosReserve[1].z - bonesPosReserve[0].z));
+        this.bones[2].position.copy(new Vector3(bonesPosReserve[2].x - bonesPosReserve[1].x, bonesPosReserve[2].y - bonesPosReserve[1].y, bonesPosReserve[2].z - bonesPosReserve[1].z));
+        this.bones[3].position.copy(new Vector3(bonesPosReserve[3].x - bonesPosReserve[1].x, bonesPosReserve[3].y - bonesPosReserve[1].y, bonesPosReserve[3].z - bonesPosReserve[1].z));
+        this.bones[4].position.copy(new Vector3(bonesPosReserve[4].x - bonesPosReserve[1].x, bonesPosReserve[4].y - bonesPosReserve[1].y, bonesPosReserve[4].z - bonesPosReserve[1].z));
+        
+        this.bones[0].updateMatrixWorld(true);
+        const boneInverses = [this.bones[0].matrixWorld.clone().invert(),
+                                this.bones[1].matrixWorld.clone().invert(),
+                                this.bones[2].matrixWorld.clone().invert(),
+                                this.bones[3].matrixWorld.clone().invert(),
+                                this.bones[4].matrixWorld.clone().invert()];
+
+        this.skeleton = new Skeleton(this.bones, boneInverses);
+    }
+
+    this.runMorphUpdate();
+    this.splatMesh.gaussianSplatCount = this.gaussianSplatCount;
+  }
+
+  updatedBoneMatrices(boneNum){
+    let updatedBoneMatrices = [];
+    for (let j = 0; j < boneNum; j++) { 
+        let boneMatrix;
+        boneMatrix =  this.skeleton.bones[j].matrixWorld.clone().multiply(this.skeleton.boneInverses[j].clone());
+
+        function addMatrixToArray(matrix, array) {
+            let elements = matrix.elements; 
+            for (let i = 0; i < elements.length; i++) {
+                array.push(elements[i]);
+            }
+        }
+        
+        addMatrixToArray(boneMatrix, updatedBoneMatrices);
+    }
+    let bonesMatrix = new Float32Array(updatedBoneMatrices);
+    return bonesMatrix;
+}
+  runMorphUpdate() {
+    this.gaussianSplatCount = this.avatarMesh.geometry.attributes.position.count;
+    var morphedMesh = new Float32Array(
+      this.avatarMesh.geometry.attributes.position.array
+    );
+    const numBones = 5;
+    this.splatMesh.bonesNum = numBones;
+    if (this.useFlame == false) 
+    {
+        this.skinModel.skeleton.update();
+        this.boneRoot.updateMatrixWorld(true);
+        if (this.splatMesh.geometry.getAttribute('splatIndex') && this.setSkinAttibutes === false) {
+
+          this.setSkinAttibutes = true;
+          const geometry = this.splatMesh.geometry;
+
+          const skinIndexSource = this.skinModel.geometry.attributes.skinIndex;
+          const skinWeightSource = this.skinModel.geometry.attributes.skinWeight;
+
+          const newSkinIndex = new InstancedBufferAttribute(
+              new skinIndexSource.array.constructor(skinIndexSource.array), 
+              4,
+              skinIndexSource.normalized,
+              1
+          );
+          
+          const newSkinWeight = new InstancedBufferAttribute(
+              new skinWeightSource.array.constructor(skinWeightSource.array), 
+              4,
+              skinWeightSource.normalized,
+              1
+          );
+          newSkinIndex.setUsage(DynamicDrawUsage);
+          newSkinWeight.setUsage(DynamicDrawUsage);
+          geometry.setAttribute('skinIndex', newSkinIndex);
+          geometry.setAttribute('skinWeight', newSkinWeight);
+      }
+    } else {
+        this.updateFlameBones();
+    }
+    
+    this.splatMesh.morphedMesh = morphedMesh;
+
+    let splatNum = this.splatMesh.morphedMesh.length / 3;
+    if (this.splatMesh.splatDataTextures['flameModel'] != undefined) {
+      this.splatMesh.updateTetureAfterBSAndSkeleton(0, splatNum - 1, this.useFlame);
+    }
+  }
+
+  updateFlameBones(){
+    this.splatMesh.bsWeight = this.flame_params['expr'][this.frame];
+
+    function setBoneRotationAndMatrix(bone, angles, isQuat = false) {
+        let quaternion;
+        if(isQuat == true) {
+            quaternion = new Quaternion(angles[0], angles[1], angles[2], angles[3]);
+        } else {
+            const value = new Vector3(angles[0], angles[1], angles[2]);
+            const angleInRadians = value.length();
+            const axis = value.normalize();
+            quaternion = new Quaternion().setFromAxisAngle(axis, angleInRadians);
+        }
+        bone.quaternion.copy(quaternion);
+        bone.updateMatrixWorld(true);
+    }
+
+    let angle = this.flame_params['rotation'][this.frame];
+
+    setBoneRotationAndMatrix(this.skeleton.bones[0], angle);
+
+    angle = this.flame_params['neck_pose'][this.frame];
+    setBoneRotationAndMatrix(this.skeleton.bones[1], angle);
+
+    angle = this.flame_params['jaw_pose'][this.frame];
+    setBoneRotationAndMatrix(this.skeleton.bones[2], angle);
+
+    angle = this.flame_params['eyes_pose'][this.frame];
+    setBoneRotationAndMatrix(this.skeleton.bones[3], angle);
+
+    setBoneRotationAndMatrix(this.skeleton.bones[4], [angle[3], angle[4], angle[5]]);
+
+    // update skeleton
+    this.skeleton.update();
+
+    const numBones = 5;
+    const bonesMatrix = this.updatedBoneMatrices(numBones);
+    this.splatMesh.bonesMatrix = bonesMatrix;
+    this.splatMesh.bonesNum = numBones;
+    this.splatMesh.bonesWeight = this.lbs_weight_80k;
+  }
+}