Basic Usage stuck on Processing Splat

[tansh-kwa]

I'm trying to get the Basic Usage snippet to render a gaussian splat I've captured. I have verified that the online demo, as well as a local instance of the demo can both properly load and visualize the splat very quickly (under a few seconds till the splat is rendered). However, when I try to load the same file using the code included under Basic Usage the webpage keeps displaying the loading animation, reading 'Processing splats.'

I am using npx vite to build and serve my code & loading this package via npm. I've seen some references to this potentially being a CORS issue, however I'm not sure how I can verify that, I've tried changing the --cors flag with vite but it does not change anything.

Any help is much appreciated.

[mkkellogg]

Could you check the debug console to see if there are any errors or messages there that might clue us in to what is happening?

[tansh-kwa]

Sure thing, I had the console open while running the example and didn't see anything. I've attached an image of what I'm seeing, apologies I imagine it's not much information to go on.

Attached is also the code I'm using for the basic example:

[mkkellogg]

Since you're using Vite, I don't have a lot of good recommendations for you. Could you try modifying one of the demo pages that you know works by pasting the basic usage example into it and see if it still works after that? FWIW I just did that on my end and everything seems to work. If it's a Vite related issue, maybe this thread will help: #41

[tansh-kwa]

Ah! One of the suggestions in that thread managed to resolve the issue for me. For posterity, the remedy for this issue in my case was to use the vite-plugin-cross-origin-isolation plugin and then use the following in my vite.config.js:

import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    {
      name: "configure-response-headers",
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          next();
        });
      },
    },
  ],
});

Thanks for your help @mkkellogg, Looking forward to working with this viewer more.