Luma is slowing my website drastically

[Limonka11]

Hello, I am trying to play around with the new luma library. However, when I try to load a model the fps drops a lot and the website pretty much becomes unusable. I have the following code:

import { Object3DNode, extend } from '@react-three/fiber';
import { LumaSplatsThree } from "@lumaai/luma-web";

// Make LumaSplatsThree available to R3F
extend( { LumaSplats: LumaSplatsThree } );

declare module '@react-three/fiber' {
  interface ThreeElements {
    lumaSplats: Object3DNode<LumaSplatsThree, typeof LumaSplatsThree>
  }
}

import { LumaSplatsSemantics } from "@lumaai/luma-web";
import React from 'react';
import './LumaSplatsReact';

export const LumaModel = () => {
	return <>
		<lumaSplats
			semanticsMask={LumaSplatsSemantics.ALL}
            // onBeforeRender={}
            enableThreeShaderIntegration= {false}
			source='https://lumalabs.ai/capture/ca9ea966-ca24-4ec1-ab0f-af665cb546ff'
			position={[1, 0, 0]}
			scale={2}
			rotation={[0, 0, 0]}
		/>
	</>;
}

import React, { useRef, useState } from 'react';
import {OrbitControls, PerspectiveCamera} from '@react-three/drei';
import { Camera, Scene, WebGLRenderer } from "three";
import { OrbitControls as OrbitControlsStdLib } from 'three-stdlib';

export type DemoProps = {
	renderer: WebGLRenderer,
	scene: Scene,
	camera: Camera,
	controls: OrbitControlsStdLib,
}

export const ModelViewer = (props: {
	modelReactFn: React.FC<{}> | null,
}) => {
	let controlsRef = useRef<OrbitControlsStdLib | null>(null);

	return <>
		<PerspectiveCamera />
		<OrbitControls
			ref={controlsRef}
			autoRotate={false}
			autoRotateSpeed={0.5}
			enableDamping={false}
            keys={{
                LEFT: 'ArrowLeft', //left arrow
                UP: 'ArrowUp', // up arrow
                RIGHT: 'ArrowRight', // right arrow
                BOTTOM: 'ArrowDown' // down arrow
            }}
			makeDefault
		/>
		{props.modelReactFn && <props.modelReactFn/>}
	</>
}

And I am trying to load the model onto a canvas like this:

                                    <Canvas shadows={false} 
                                        camera={{
                                            position: [-6, 7, 7],
                                        }}>
                                            <ModelViewer
                                                key={0}
                                                modelReactFn={LumaModel}
                                            />
                                    </Canvas>

Can you point me into exactly why my website is slowing so much? Because from your demo I can see that it is indeed possible to load the model and still have a good website performance.

Thanks in advance!

[haxiomic]

Hi @Limonka11, biggest cause of performance issues is using antialias: true – splats use a lot of geometry and canvas antialias uses MSAA.

You can do

<Canvas
	gl={{
		antialias: false,
	}}
...

To disable (by setting the WebGL context arguments)

[Limonka11]

Hi @haxiomic, I have tried this and indeed the model is moving is a much better frame rate, however, the next.js pages that actually contain the canvas and the model are extremely slow. Do you have any idea why?

[haxiomic]

Unclear, you could try limiting the canvas resolution by adding dpr={1} on the <Canvas>

Failing that, try performance profiling to see if anything stands out

Are you using firefox? Firefox has a very odd performance bug with splats, to fix we have to add a random html element with backdrop-filter: blur! https://bugzilla.mozilla.org/show_bug.cgi?id=1867791