Trying to make it work on Expo/React Native

[Jacky56]

Hello all,

I'm trying to build a react native app using this 3dgs viewer but couldn't make it work on android (works on web). I suspect there's an issue with how GLView loads the viewer.

Error:

TypeError: Cannot read property 'add' of undefined

sample code:

import { GLView } from "expo-gl";
import { Renderer } from "expo-three";
import {GridHelper, PerspectiveCamera, Scene,} from "three";
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';

export default function App() {

  const onContextCreate = async (gl) => {
    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
    const renderer = new Renderer({ gl });
    renderer.setSize(width, height);

    const camera = new PerspectiveCamera(70, width / height, 0.01, 1000);

    const scene = new Scene();
    camera.lookAt(scene.position);
    scene.add(new GridHelper(5, 5));

    const viewer = await new GaussianSplats3D.Viewer({
      'renderer': renderer,
      'camera': camera,
      'threeScene': scene,
      'sharedMemoryForWorkers': false,
      'gpuAcceleratedSort': false,
    });
  
    viewer.addSplatScene('<a .splat file>')
    .then(() => {
        viewer.start();
    });

    // const render = () => {
    //   timeout = requestAnimationFrame(render);
    //   viewer.render();
    //   viewer.update();
    //   // renderer.render(scene, camera);
    //   gl.endFrameEXP();
    // };
    // render();
  };

  return (
    <GLView style={{ flex: 1 }} onContextCreate={onContextCreate}  />
  );
}

[Jacky56]

Update:

• It doesn't work on native platforms because of objects such as LoadingSpinner, trying to find div when it shouldn't exist on other platforms.

is there a way to only use the splat loader such as viewer.addSplatScene('<a .splat file>')?

[mkkellogg]

If you disable display of the loading spinner, does that fix the issue? You could try:

viewer.addSplatScene('<a .splat file>', { showLoadingUI: false });

[Jacky56]

Hi @mkkellogg thank you for your response, I have tried this too, it did work but antimatter15's implementation uses web workers which doesn't translate to native platforms (1 2), I've tried to edit the code to use worklets instead of workers but my javascript knowledge is quite poor.

The final work around was to wrap this in a WebView component which does works but I'm worried about the additional resources used, especially for weaker devices.

[seppestaes]

@Jacky56 : Is the performance OK in the WebView (iOS / Android) ? Br, Seppe

[mkkellogg]

Closing for now, please let me know if there are any other questions I can answer.

[IsmailOuazzani]

Hi @Jacky56 , I have been facing this issue myself and have not succeeded with the WebView. Would you mind sharing your code? Thank you so much.