drop in viewer

[lewibs]

are there any gotchas with using the drop in viewer? I am trying to use it instead of the main variant but it seems when I do the scene does not display the splat at all.

My code is somewhat like this. I have made an engine class for managing the scene. But I put all the main code together in a single function below.

const that = this;
        function animate() {
            requestAnimationFrame(animate);
            TWEEN.update();
            that.renderer.render(that.scene, that.camera);
        }

        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this.camera.position.set(20, 20, 20);
        this.camera.lookAt(0,0,0)

        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(window.innerWidth,window.innerHeight);

        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.listenToKeyEvents(window);
        this.controls.rotateSpeed = 0.5;
        this.controls.maxPolarAngle = Math.PI * .75;
        this.controls.minPolarAngle = 0.1;
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.05;
        this.controls.target.copy(new THREE.Vector3(0,0,0));
        this.controls.update()

        this.splatViewer = new GaussianSplats3D.DropInViewer({
            'gpuAcceleratedSort': true,
            // 'cameraUp': [0, 1, 0],
            // 'initialCameraPosition': [0.1, 0.1, 0.1],
            // 'initialCameraLookAt': [0, 0, 0],
            //"ignoreDevicePixelRatio": true, //speed
            //"dynamicScene": true, //speed
            //'useBuiltInControls': false,
            //'webXRMode': GaussianSplats3D.WebXRMode.None,
            "sharedMemoryForWorkers": false, //TODO get this to work without bugs when set to true
        });
        this.scene.add(this.splatViewer);

        this.renderer.domElement.style.position = 'fixed';
        this.renderer.domElement.style.top = '0';
        this.renderer.domElement.style.left = '0';
        this.renderer.domElement.style.width = '100%';
        this.renderer.domElement.style.height = '100%';
        this.rootElement.appendChild(this.renderer.domElement);

        let ambientLight = new THREE.AmbientLight( 0xffffff, 1 );
        this.scene.add(ambientLight);

        let hemisphereLight = new THREE.HemisphereLight(0xffffff, 3);
        this.scene.add(hemisphereLight);

        animate();
        
         splats.map((url)=>
            this.splatViewer.addSplatScene(url, {
                'splatAlphaRemovalThreshold': 5,
                'position': [0, 0, 0],
                'rotation': [0, 0, 1, 0],
                //'scale': [scale, scale, scale],
                "showLoadingUI": false,
                "onProgress": onProgress,
            })
        )

[mkkellogg]

Do you see any errors in the console? My guess is that you're getting an error telling you that you can't add a splat scene while another load is already in progress. The issue is this loop:

 splats.map((url)=>
    this.splatViewer.addSplatScene(url, {
        'splatAlphaRemovalThreshold': 5,
        'position': [0, 0, 0],
        'rotation': [0, 0, 1, 0],
        //'scale': [scale, scale, scale],
        "showLoadingUI": false,
        "onProgress": onProgress,
    })
)

That would fire off multiple simultaneous calls to addSplatScene(), which is not supported. If you want to load multiple scenes simultaneously you can use the addSplatScenes() function, otherwise you need to wait until one call to addSplatScene() has finished before issuing the next call.

[lewibs]

I fixed that. No errors and still nothing. Just a black screen with the objects I put inside it

[mkkellogg]

Other than that, I don't see anything wrong, it should work. For what it's worth I was able to take your above code and get it working by putting it inside a class (with minor tweaks):

const renderWidth = 800;
const renderHeight = 600;

class Engine {

  constructor() {

  const that = this;
  function animate() {
      requestAnimationFrame(animate);
      that.renderer.render(that.scene, that.camera);
  }

  this.scene = new THREE.Scene();
  this.camera = new THREE.PerspectiveCamera(75, renderWidth / renderHeight, 0.1, 1000);
  this.camera.position.set(20, 20, 20);
  this.camera.lookAt(0,0,0)

  this.renderer = new THREE.WebGLRenderer();
  this.renderer.setSize(window.innerWidth,window.innerHeight);

  this.controls = new GaussianSplats3D.OrbitControls(this.camera, this.renderer.domElement);
  this.controls.listenToKeyEvents(window);
  this.controls.rotateSpeed = 0.5;
  this.controls.maxPolarAngle = Math.PI * .75;
  this.controls.minPolarAngle = 0.1;
  this.controls.enableDamping = true;
  this.controls.dampingFactor = 0.05;
  this.controls.target.copy(new THREE.Vector3(0,0,0));
  this.controls.update()

  this.splatViewer = new GaussianSplats3D.DropInViewer({
      'gpuAcceleratedSort': true,
      // 'cameraUp': [0, 1, 0],
      // 'initialCameraPosition': [0.1, 0.1, 0.1],
      // 'initialCameraLookAt': [0, 0, 0],
      //"ignoreDevicePixelRatio": true, //speed
      //"dynamicScene": true, //speed
      //'useBuiltInControls': false,
      //'webXRMode': GaussianSplats3D.WebXRMode.None,
      "sharedMemoryForWorkers": false, //TODO get this to work without bugs when set to true
  });
  this.scene.add(this.splatViewer);

  const rootElement = document.createElement('div');
  rootElement.style.width = renderWidth + 'px';
  rootElement.style.height = renderHeight + 'px';
  rootElement.style.position = 'relative';
  rootElement.style.left = '50%';
  rootElement.style.top = '50%';
  rootElement.style.transform = 'translate(-50%, -50%)';
  document.body.appendChild(rootElement);

  this.renderer.domElement.style.position = 'fixed';
  this.renderer.domElement.style.top = '0';
  this.renderer.domElement.style.left = '0';
  this.renderer.domElement.style.width = '100%';
  this.renderer.domElement.style.height = '100%';
  rootElement.appendChild(this.renderer.domElement);

  let ambientLight = new THREE.AmbientLight( 0xffffff, 1 );
  this.scene.add(ambientLight);

  let hemisphereLight = new THREE.HemisphereLight(0xffffff, 3);
  this.scene.add(hemisphereLight);

  animate();
  
  this.splatViewer.addSplatScenes([
    {
      'path': 'assets/data/garden/garden_high.ksplat',
      'splatAlphaRemovalThreshold': 20,
    },
    {
      'path': 'assets/data/bonsai/bonsai_trimmed.ksplat',
      'rotation': [-0.14724434, -0.0761755, 0.1410657, 0.976020],
      'scale': [1.5, 1.5, 1.5],
      'position': [-3, -2, -3.2],
      'splatAlphaRemovalThreshold': 20,
    }
  ], true);
  }

}

new Engine();

[lewibs]

Even with your changes no luck. Not sure whats up with that. Ill keep looking into it I suppose. The only reason I want to do the drop in viewer is cause the splat is not a major part of what im doing. However, When im using the regular viewer, i must add a splat before I can see my scene. Is there a way to show the scene before adding the splat?

[mkkellogg]

Unfortunately the way it works right now is that the viewer won't start rendering anything until a splat scene has been loaded (that might change in a future update). Are you only using one single instance of THREE.WebGLRenderer for both the splat viewer and your other three.js objects?

[lewibs]

Yep just the one renderer

[mkkellogg]

Any updates with this issue? Are you still having trouble with the drop-in renderer?

[mkkellogg]

I'm going to close this one for now, let me know if you're still having trouble using the drop-in viewer and I can re-open it.