Blank Frames in animation export

[forrestbaer]

Hey there,

I'm actually working through your frontend masters course and noticing something when I'm exporting frames for an animation every now and then a render will happen that looks like it was rendered super close-up or renders empty, so I the animation isn't seamless. It's almost like something hasn't finished rendering or the camera is not ready/in the right place for that frame.

Have you run into this at all?

return {
    // Handle resize events here
    resize({ pixelRatio, viewportWidth, viewportHeight }) {
      renderer.setPixelRatio(pixelRatio);
      renderer.setSize(viewportWidth, viewportHeight, false);
      const aspect = viewportWidth / viewportHeight;

      // Ortho zoom
      const zoom = 2;

      // Bounds
      camera.left = -zoom * aspect;
      camera.right = zoom * aspect;
      camera.top = zoom;
      camera.bottom = -zoom;

      // Near/Far
      camera.near = -100;
      camera.far = 100;

      // Set position & look at world center
      camera.position.set(zoom, zoom, zoom);
      camera.lookAt(new THREE.Vector3());

      // Update the camera
      camera.updateProjectionMatrix();
    },
    // Update & render your scene here
    render({ playhead }) {
      const t = Math.sin(playhead * Math.PI); 
      scene.rotation.y = eases.expoInOut(t);
      renderer.render(scene, camera);
    },
    // Dispose of events & renderer for cleaner hot-reloading
    unload() {
      renderer.dispose();
    }
  };

[forrestbaer]

That often comes with this error, which might not be related but I'm not sure: (Unchecked runtime.lastError: The message port closed before a response was received.)

[mattdesl]

Hmm, I haven't seen this but it could be related to that error. I would try a couple things:

• Quit the canvas-sketch server (Ctrl + C in terminal) and re-start it. Does the error occur on the next time you save an animation, or is it only after saving the same sketch a few times with the server running?
• Which way of exporting are you using? If you're using the default settings (i.e. ends up being a bunch of numbered PNGs in a folder), you can try the --stream, and vice versa.
• Which browser are you using? You might want to try another to see if the error persists.

Also what OS and Node/npm version are you running? That info might help me debug this a bit better.

[forrestbaer]

My apologies I should have tried a few more things before asking, it seems like restarting the server helped that time, but didn't the first time I had tried it.. I'm using Chrome, latest macOS w/ npm 6.14..

I'll keep an eye on it, if it happens again perhaps I'll be able to get useful information.

Anyway, good to go, thanks!