lumalabs/luma-web-examples

Luma is slowing my website drastically

Limonka11 opened this issue · 3 comments

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!

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)

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?

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