scene background overrides the createPortal() child mesh's material

[zeeshanali33096]

Hi,

I am trying to use createPortal() to render fixed mesh on the scene.

const HUD = () => {
  const virtualCam = React.useRef(null);
  const [virtualScene] = React.useState(() => new Scene());
  
  
  useFrame(() => {
      if (virtualCam.current) {
        gl.autoClear = false;
        gl.clearDepth();
        gl.render(virtualScene, virtualCam.current);
      }
    });
  
    return createPortal(
      <>
        <OCam ref={virtualCam} position={[0, 0, 100]} />
        <group position={[x, y, 0]}>
          <mesh>
            <boxBufferGeometry args={[50, 50, 50]} attach="geometry" />
            <meshBasicMaterial color={new Color(0xff0000)} attach="material" />
          </mesh>
        </group>
      </>,
      virtualScene
    );
}

Now if I have a <color/> attached to the background scene, the above HUD display is not rendered.
A work around,

useEffect(() => {
    if (scene.background) {
      //color to background hack
      bgBackupRef.current = scene.background;
      scene.background = null;
      virtualScene.background = bgBackupRef.current;
      console.log("exchanging colors");
    }

    return () => {
      //Reset on unmount
      if (bgBackupRef.current) {
        scene.background = bgBackupRef.current;
      }
    };
  }, []);

Basically the above code swaps the background of the actual scene and applies to the virtual scene. Doing so, the mesh is displayed.

The problem arises when there is a texture applied to the background of the actual scene. In that case, the mesh material is the same as the background.

Here is the sandbox

Is there something I am missing?

[drcmda]

i think this isnt a bug, its just render behaviour and edge-cases. portalling is useland as well, there's nothing that r3f could do for you imo.

[zeeshanali33096]

Any work arounds then? I really need the gizmo helpers.

Drei issue

[dangrabcad]

I don't think this is related to createPortal. I think the problem is that your useFrame callback is happening before the renderer renders the main scene. This means that your SideRender is being rendered correctly by its useFrame callback, but then R3F is rendering the main scene and overdrawing your SideRender with the background color.

You can fix this by passing the second argument to useFrame, that specifies the order the callbacks happen (higher numbers happen later). There's a complication though: having any useFrame with a positive order makes the default rendering not happen at all! So as well as adding the second argument, you need to add a second useFrame call somewhere else, like the documentation describes.