Images not rendered in Camera about motion-canvas HOT 6 OPEN

It seems to be a problem with the cache calculations.
Until the fix is ready, you can set the position of the camera's scene to half the size of the view:

export default makeScene2D(function* (view) {
	const camera = createRef<Camera>();
	const browserRef = createRef<Img>();

	view.add(
		<Camera ref={camera}>
			<Img ref={browserRef} src={browser} height={400} width={1000} position={[0, 0]} shadowBlur={10} shadowColor="#0004" />
		</Camera>,
	);
	
	// Do this after creating the camera:
	camera().scene().position(view.size().div(2));

	yield* waitFor(10)
});

This should fix the issue for now.

from motion-canvas.

I faced this same issue when simply using a Rect node with shadow or opacity less than 1. The scene position trick is not enough when rotating the camera.

It can be easily reproduced by going to this example and adding a shadowBlur={1} or a opacity={0.9} to the Rect node. It will disappear.

from motion-canvas.

This seems to happen also with opacity animations, using the scene position fix by @aarthificial fixed the problem

from motion-canvas.

Inspired by the @aarthificial cache suggestion, I was able to fix it in my case by overriding the worldSpaceCacheBBox() method on the Node with some filter:

@computed()
protected override worldSpaceCacheBBox(): BBox {
    const viewBBox = BBox.fromSizeCentered(this.view().size()).expand(
        this.view().cachePadding(),
    );
    const canvasBBox = BBox.fromPoints(
-        ...viewBBox.transformCorners(this.view().localToWorld()),
+        ...viewBBox.transformCorners(this.localToWorld()),
    );

    const cacheBBox = BBox.fromPoints(
        ...this.cacheBBox().transformCorners(this.localToWorld()),
    ).pixelPerfect.expand(2);

    return canvasBBox.intersection(cacheBBox);
}

At least for me, it worked. I really don't know the side effects of this change in other scenarios.

from motion-canvas.

I would love to use the camera and am curious if this is fixed.

Have had several opacity issues and rendering issues inside the boxes

from motion-canvas.

@mpaxson still not fixed sadly
I took a stab at it and it seems like making it work properly will require some major changes to our rendering logic. Most of the code assumes that the view doesn't change and things are cached based on that assumption. Unfortunately, cameras challenge this. This may need to wait for version 4 to be released.

from motion-canvas.