`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
| --- | ---
| format | Force the loader to assume the specified file format when loading a splat scene. This is useful when loading from a URL where there is no file extension. Valid values are defined in the SceneFormat enum: Ply, Splat, and KSplat.
| 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].
| progressiveLoad | Progressively load 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,
enableSIMDInSort: true,
'sharedMemoryForWorkers': true,
'integerBasedSort': true,
'halfPrecisionCovariancesOnGPU': true,
'dynamicScene': false,
'webXRMode': GaussianSplats3D.WebXRMode.None,
'renderMode': GaussianSplats3D.RenderMode.OnChange,
'sceneRevealMode': GaussianSplats3D.SceneRevealMode.Instant,
'antialiased': false,
'focalAdjustment': 1.0,
'logLevel': GaussianSplats3D.LogLevel.None,
'sphericalHarmonicsDegree': 0,
enableOptionalEffects: false,
inMemoryCompressionLevel: 2
freeIntermediateSplatData: false
});
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.
| 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.
| useBuiltInControls | Tells the viewer to use its own camera controls. Defaults to true.
| 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.
| enableSIMDInSort | Enable the usage of SIMD WebAssembly instructions for the splat sort. Default is true.
| 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.
| splatSortDistanceMapPrecision | Specify the precision for the distance map used in the splat sort algorithm. Defaults to 16 (16-bit). A lower precision is faster, but may result in visual artifacts in larger or denser scenes.
| 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.
| 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.
| webXRSessionInit | Tells the viewer to build a WebXR session with some options. Defaults with {}. For more details : https://developer.mozilla.org/en-US/docs/Web/API/XRSystem/requestSession#options
| 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
| kernel2DSize | A constant added to the size of the 2D screen-space gaussian kernel used in rendering splats. Default value is 0.3.
| 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.
| logLevel | Verbosity of the console logging. Defaults to GaussianSplats3D.LogLevel.None.
| sphericalHarmonicsDegree | Degree of spherical harmonics to utilize in rendering splats (assuming the data is present in the splat scene). Valid values are 0, 1, or 2. Default value is 0.
| enableOptionalEffects | 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.
| optimizeSplatData | After loading is complete, reorder splat data in memory to optimize cache utilization as well as apply in-memory compression to reduce memory usage. Default is true. This option is automatically disabled if the scene is progressively loaded.
| inMemoryCompressionLevel | Level to compress scenes when loading them for direct rendering (not exporting to .ksplat). Valid values are the same as .ksplat compression levels (0, 1, or 2). Default is 0 (uncompressed). If a scene is loaded progressively, or optimizeSplatData is set to false, inMemoryCompressionLevel will be 0.
| freeIntermediateSplatData | When true, the intermediate splat data that is the result of decompressing splat bufffer(s) and used to populate 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). Defaults to false.
| splatRenderMode | Determine which splat rendering mode to enable. Valid values are defined in the SplatRenderMode enum: ThreeD and TwoD. ThreeD is the original/traditional mode and TwoD is the new mode described here: https://surfsplatting.github.io/
| sceneFadeInRateMultiplier | Customize the speed at which the scene is revealed. Default is 1.0.



$3

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

const compressionLevel = 1;
const splatAlphaRemovalThreshold = 5; // out of 255
const sphericalHarmonicsDegree = 1;
GaussianSplats3D.PlyLoader.loadFromURL('',
onProgress,
progressiveLoad,
onProgressiveLoadSectionProgress,
minimumAlpha,
compressionLevel,
optimizeSplatData,
sphericalHarmonicsDegree,
headers)
.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] [scene center = "0,0,0"] [block size = 5.0] [bucket size = 256] [spherical harmonics level = 0]
`

For the nodejs script, it may be necessary to increase the heap size for larger scenes. Use the parameter --max-old-space-size=[heap size in MB] to do so:

`
node util/create-ksplat.js --max-old-space-size=8192 [... remaining arguments]
`

Currently supported values for compressionLevel are 0, 1, or 2. 0 means no compression and 1 means compression of scale, rotation, position, and spherical harmonics coefficient values from 32-bit to 16-bit. 2 is similar to 1 except spherical harmonics coefficients are compressed to 8-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.