Drei MeshPortalMaterial with GlobalCanvas not displaying correctly

[CadotV]

When using components directly inside the GlobalCanvas (without useCanvas hook or scrollScene), the meshPortalMaterial only display after saving the file by adding / removing another mesh.

I tried enabling all layers for the main camera, and some few things with gl but without success.

Might be the default render loop from the GlobalRenderer, but i'm a noob with Three.

Here is a repo to see it in action by comment/uncomment the sphere mesh.

codesandbox

[ffdead]

Thanks for reporting!

Haven't tried this material but will look into it and report back ⏳

[ffdead]

Hi @CadotV - check this out:

https://codesandbox.io/p/devbox/r3f-scroll-rig-with-meshportalmaterial-bug-forked-mrzdll

It seems the createPortal() call inside RenderTexture runs first with the original default camera, before GlobalCanvas has updated the r3f state with the new camera from the scroll-rig.

The r3f state gets updated with the correct camera after the first render - but at that point the state enclave for createPortal does not update to reflect it.

The sandbox above uses a dirty workaround by forcing a re-mount with the updated camera to make the children visible:

<MeshPortalMaterial
            key={camera.fov} // force re-mount with proper camera
            blend={0.1}
            blur={0.1}
            transparent
            renderPriority={1001} // render after globalcanvas to enable blend
>

[ffdead]

@CodyJasonBennett or @drcmda do you know a better way to override the default camera before any createPortal runs?

Currently we call set in a useLayoutEffect:
https://github.com/14islands/r3f-scroll-rig/blob/master/src/components/PerspectiveCamera.tsx#L60

[Fabiantjoeaon]

@ffdead would the makeDefault camera prop do the trick?

[ffdead]

@ffdead would the makeDefault camera prop do the trick?

We already use that, we've copied the maDefault logic from the Drei cameras:

r3f-scroll-rig/src/components/PerspectiveCamera.tsx

Line 60 in 2efe59c

useLayoutEffect(() => {

But seems it runs too late somehow 🤔