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