#three js model freezes studio

1 messages · Page 1 of 1 (latest)

ocean spade
#

Hello Remotion team! Thanks for your work.

My setup:
I'm working with @remotion/three.
I'm loading a glft model using the code:
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
const gltf = useLoader(GLTFLoader, staticFile("/mockups/models/macbook/scene.gltf"));
then i display the model:

    <AbsoluteFill>
      <ThreeCanvas
      >
        <scene>
          <primitive
            object={gltf.scene}
          />
          <ambientLight/>
          <pointLight/>
          <directionalLight/>
        </scene>
      </ThreeCanvas>
    </AbsoluteFill>

Problem:
At the beginning of every loop, on the Remotion studio, I have small delay, because of loading the 3D scene.
with a console message THREE.WebGLRenderer: Context Lost.

The rendered result has problems too. At the moment when the the model's Sequence start, the whole video is glitched and gets low FPS for a few moments.

Question:
Is there a way to somehow render the 3d model just once after the player component is initiated, and then use it without re-rendering on each loop?

P.S.: thanks for your time 💜

#

Another possible solution is to pause playing/rendering until the moment the model is loaded.
Thus i will be able to load the model at the beginning and hide it.

mellow meteor
#

Yeah, that's the correct approach.
Please let me know your remotion version you're using.
From remotion 4.0.140 you can use premountFor. and that was really helpful for me for this kind of issue.

ocean spade
sleek drum
#

those are some good tips!

depending on the behavior you want, you could also implement a pause using useBufferState()

ocean spade
#

@sleek drum @mellow meteor hi guys. The problem with model flickering appears on the rendered video 🥲 (you can check the effect on the attached video, at 00:02 )

Have you seen such a problem?

I premounted my model:


      <Sequence
        premountFor={projectUSPDuration + projectTitleDuration}
        // premountFor={projectTitleDuration}
        from={projectUSPStart}
        durationInFrames={audiencesStart}
      >
        <AbsoluteFill style={{ zIndex: 50 }}>
          <LaptopMockup {...props}></LaptopMockup>
        </AbsoluteFill>
      </Sequence>
#

I also removed all lights, animations, texture operations. Here is the full code:

import React from "react";
import { AbsoluteFill, staticFile, useVideoConfig } from "remotion";
import { z } from "zod";
import { CompositionProps } from "./constants";
import { ThreeCanvas } from "@remotion/three";
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

type LaptopMockupProps = z.infer<typeof CompositionProps>;

export const LaptopMockup: React.FC<LaptopMockupProps> = ({ uspCreative }) => {
  const { durationInFrames } = useVideoConfig();

  const gltf = useLoader(
    GLTFLoader,
    staticFile("/mockups/models/macbook/scene.gltf")
  );

  const laptopPositionX = 0.3;
  const laptopPositionY = -0.7;
  const laptopPositionZ = -0.1;

  const laptopScaleX = 6;
  const laptopScaleY = 6;
  const laptopScaleZ = 6;

  const laptopRotationX = 0.0;
  const laptopRotationY = 0.652;
  const laptopRotationZ = 0.0;

  return (
    <AbsoluteFill style={{ zIndex: 11111 }}>
      <ThreeCanvas
        orthographic={false}
        width={1920}
        height={1080}
        camera={{
          fov: 50,
          position: [0.5, 0.11, 0.65],
          aspect: 1920 / 1080,
          far: 1000,
        }}
      >
        <primitive
          object={gltf.scene}
          position={[laptopPositionX, laptopPositionY, laptopPositionZ]}
          scale={[laptopScaleX, laptopScaleY, laptopScaleZ]}
          rotation={[laptopRotationX, laptopRotationY, laptopRotationZ]}
        />
      </ThreeCanvas>
    </AbsoluteFill>
  );
};

Can this be a hardware issue? Should I forget rendering on my mac and experiment with lambda directly? Thanks.
Remotion version: 4.0.146
Macbook Air M1.

#

I tried to use --concurrency=1
It also gives the flickering.

sleek drum
ocean spade
# sleek drum <@355744075363909633> it's indeed tricky to correctly await the gltf model to be...

Thanks. That seems to work in a simplified version of my code. So it must be the right way!

Unfortunately I started to get this error while rendering:

Symbolicating minified error message...
An error occurred while rendering frame 62:rc="/public/assets/sabrina-the-teenage-witch-cat.webm"" was called but not cleared after 28000ms. See https://remotion.dev/d
 Error  A delayRender() "Rendering <Video /> with src="/public/assets/sabrina-the-teenage-witch-cat.webm"" was called but not cleared after 28000ms. See https://remotion.dev/docs/timeout for help.

My video is 32 KB webm file.
And I do npm run render --concurrency=1 --timeout=939129831298 and timeoutInMilliseconds={9999909090} to make sure the timeout is huge. But the render still stops.

Any thoughts? Should I create a separate ticket here to make it easier for others to find?

ocean spade
#

I nailed it!

I updated Remotion and it suggested me to look carefully what I launch.

And I saw my mistake:
I added --concurrency=1 --timeout=1000000 --log=verbose to the npm run not to the actual command which is run and stated in the package.json file.

My render command now looks like this: npx remotion render --gl=angle --concurrency=1 --timeout=1000000

I'm not finally able to finish my template! Gonna share soon in the #inspiration 😇 IM SO HAPPY!!!

image.png
sleek drum
#

@ocean spade hell yeah, implementing this error message paid off 🤩 glad you got a working solution!

ocean spade
#

you should write a book "The art of console errors"