`javascript
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';

const viewer = new GaussianSplats3D.Viewer({
'cameraUp': [0, -1, -0.6],
'initialCameraPosition': [-1, -4, 6],
'initialCameraLookAt': [0, 4, 0]
});
viewer.addSplatScene('', {
'splatAlphaRemovalThreshold': 5,
'showLoadingUI': true,
'position': [0, 1, 0],
'rotation': [0, 0, 0, 1],
'scale': [1.5, 1.5, 1.5]
})
.then(() => {
viewer.start();
});

`
Viewer parameters



| Parameter | Purpose
| --- | ---
| cameraUp | 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). Serves as the axis around which the camera will orbit, and is used to determine the scene's orientation relative to the camera.
| initialCameraPosition | The camera's initial position (only used when the viewer uses its own camera).
| initialCameraLookAt | The initial focal point of the camera and center of the camera's orbit (only used when the viewer uses its own camera).



Parameters for addSplatScene()



| Parameter | Purpose
| --- | ---
| splatAlphaRemovalThreshold | Tells addSplatScene() to ignore any splats with an alpha less than the specified value (valid range: 0 - 255). Defaults to 1.
| showLoadingUI | Displays a loading spinner and/or loading progress bar while the scene is loading. Defaults to true.
| position | Position of the scene, acts as an offset from its default position. Defaults to [0, 0, 0].
| rotation | Rotation of the scene represented as a quaternion, defaults to [0, 0, 0, 1] (identity quaternion).
| scale | Scene's scale, defaults to [1, 1, 1].
| streamView | Stream the scene's splat data and allow the scene to be rendered and viewed as the splats are loaded. Option is only valid for addSplatScene(), and not for addSplatScenes().

Viewer can also load multiple scenes simultaneously with the addSplatScenes() function:
`javascript
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';

viewer.addSplatScenes([{
'path': '',
'splatAlphaRemovalThreshold': 20
},
{
'path': '',
'rotation': [-0.14724434, -0.0761755, 0.1410657, 0.976020],
'scale': [1.5, 1.5, 1.5],
'position': [-3, -2, -3.2]
}
])
.then(() => {
viewer.start();
});
`

The addSplatScene() and addSplatScenes() methods will accept the original .ply files, standard .splat files, and my custom .ksplat files.

$3

const viewer = new GaussianSplats3D.Viewer({
'threeScene': threeScene,
});
viewer.addSplatScene('')
.then(() => {
viewer.start();
});
`

Currently this will only work for objects that write to the depth buffer (e.g. standard opaque objects). Supporting transparent objects will be more challenging :)



A "drop-in" mode for the viewer is also supported. The DropInViewer class encapsulates Viewer and can be added to a Three.js scene like any other renderable:
`javascript
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
import * as THREE from 'three';

const threeScene = new THREE.Scene();
const viewer = new GaussianSplats3D.DropInViewer({
'gpuAcceleratedSort': true
});
viewer.addSplatScenes([{
'path': ''
'splatAlphaRemovalThreshold': 5
},
{
'path': '',
'rotation': [0, -0.857, -0.514495, 6.123233995736766e-17],
'scale': [1.5, 1.5, 1.5],
'position': [0, -2, -1.2]
}
]);
threeScene.add(viewer);

`



$3

`javascript
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
import * as THREE from 'three';

const renderWidth = 800;
const renderHeight = 600;

const rootElement = document.createElement('div');
rootElement.style.width = renderWidth + 'px';
rootElement.style.height = renderHeight + 'px';
document.body.appendChild(rootElement);

const renderer = new THREE.WebGLRenderer({
antialias: false
});
renderer.setSize(renderWidth, renderHeight);
rootElement.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(65, renderWidth / renderHeight, 0.1, 500);
camera.position.copy(new THREE.Vector3().fromArray([-1, -4, 6]));
camera.up = new THREE.Vector3().fromArray([0, -1, -0.6]).normalize();
camera.lookAt(new THREE.Vector3().fromArray([0, 4, -0]));

const viewer = new GaussianSplats3D.Viewer({
'selfDrivenMode': false,
'renderer': renderer,
'camera': camera,
'useBuiltInControls': false,
'ignoreDevicePixelRatio': false,
'gpuAcceleratedSort': true,
'halfPrecisionCovariancesOnGPU': true,
'sharedMemoryForWorkers': true,
'integerBasedSort': true,
'dynamicScene': false,
'webXRMode': GaussianSplats3D.WebXRMode.None,
'renderMode': GaussianSplats3D.RenderMode.OnChange,
'sceneRevealMode': GaussianSplats3D.SceneRevealMode.Instant,
antialiased: false,
focalAdjustment: 1.0
});
viewer.addSplatScene('')
.then(() => {
requestAnimationFrame(update);
});
`
Since selfDrivenMode is false, it is up to the developer to call the update() and render() methods on the Viewer class:
`javascript
function update() {
requestAnimationFrame(update);
viewer.update();
viewer.render();
}
`
Advanced Viewer parameters


| Parameter | Purpose
| --- | ---
| selfDrivenMode | If false, tells the viewer that you will manually call its update() and render() methods. Defaults to true.
| useBuiltInControls | Tells the viewer to use its own camera controls. Defaults to true.
| renderer | Pass an instance of a Three.js Renderer to the viewer, otherwise it will create its own. Defaults to undefined.
| camera | Pass an instance of a Three.js Camera to the viewer, otherwise it will create its own. Defaults to undefined.
| ignoreDevicePixelRatio | 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. Defaults to false.
| gpuAcceleratedSort | Tells the viewer to use a partially GPU-accelerated approach to sorting splats. Currently this means pre-computation of splat distances from the camera is performed on the GPU. It is recommended that this only be set to true when sharedMemoryForWorkers is also true. Defaults to false on mobile devices, true otherwise.
| halfPrecisionCovariancesOnGPU | Tells the viewer to use 16-bit floating point values when storing splat covariance data in textures, instead of 32-bit. Defaults to false.
| sharedMemoryForWorkers | Tells the viewer to use shared memory via a SharedArrayBuffer to transfer data to and from the sorting web worker. If set to false, it is recommended that gpuAcceleratedSort be set to false as well. Defaults to true.
| integerBasedSort | Tells the sorting web worker to use the integer versions of relevant data to compute the distance of splats from the camera. Since integer arithmetic is faster than floating point, this reduces sort time. However it can result in integer overflows in larger scenes so it should only be used for small scenes. Defaults to true.
| dynamicScene | Tells the viewer to not make any optimizations that depend on the scene being static. Additionally all splat data retrieved from the viewer's splat mesh will not have their respective scene transform applied to them by default.
| webXRMode | Tells the viewer whether or not to enable built-in Web VR or Web AR. Valid values are defined in the WebXRMode enum: None, VR, and AR. Defaults to None.
| renderMode | Controls when the viewer renders the scene. Valid values are defined in the RenderMode enum: Always, OnChange, and Never. Defaults to Always.
| sceneRevealMode | Controls the fade-in effect used when the scene is loaded. Valid values are defined in the SceneRevealMode enum: Default, Gradual, and Instant. Default results in a nice, slow fade-in effect for progressively loaded scenes, and a fast fade-in for non progressively loaded scenes. Gradual will force a slow fade-in for all scenes. Instant will force all loaded scene data to be immediately visible.
| antialiased | When true, will perform additional steps during rendering to address artifacts caused by the rendering of gaussians at substantially different resolutions 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
| focalAdjustment | Hacky, non-scientific parameter for tweaking focal length related calculations. For scenes with very small gaussians & small details, increasing this value can help improve visual quality. Default value is 1.0.



$3

`javascript
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';

const compressionLevel = 1;
const splatAlphaRemovalThreshold = 5; // out of 255
GaussianSplats3D.PlyLoader.loadFromURL('', compressionLevel, splatAlphaRemovalThreshold)
.then((splatBuffer) => {
GaussianSplats3D.KSplatLoader.downloadFile(splatBuffer, 'converted_file.ksplat');
});
`
Both of the above methods will prompt your browser to automatically start downloading the converted .ksplat file.

The third option is to use the included nodejs script:

`
node util/create-ksplat.js [path to .PLY or .SPLAT] [output file] [compression level = 0] [alpha removal threshold = 1]
`

Currently supported values for compressionLevel are 0 or 1. 0 means no compression, 1 means compression of scale, rotation, and position values from 32-bit to 16-bit.

$3

`
"DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': SharedArrayBuffer transfer requires self.crossOriginIsolated."
`

For the local demo I created a simple HTTP server (util/server.js) that sets those headers:

`
response.setHeader("Cross-Origin-Opener-Policy", "same-origin");
response.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
`

#### CORS with Apache

For Apache, you can edit the .htaccess file to allow CORS by adding the lines:

`
Header add Cross-Origin-Opener-Policy "same-origin"
Header add Cross-Origin-Embedder-Policy "require-corp"
`

Additionally you may need to require a secure connection to your server by redirecting all access via http:// to https://. In Apache this can be done by updating the .htaccess file with the following lines:

`
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
`

#### CORS with Vite

For Vite, one popular option is to install the vite-plugin-cross-origin-isolation plugin via npm and then add the following to your vite.config.js file.

`javascript
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();
});
},
},
],
});
``
There are other ways to configure Vite to handle this referenced in issue #41.