How to reference the default webgl renderer and other useThree() aspects outside the Canvas?

[BryanChrisBrown]

https://codesandbox.io/s/r3f-basic-demo-3pbpo?file=/src/index.js
I'm attempting to use a function to capture my threejs scene as a screenshot, I've gotten this functionality mostly working however, I'd like to have the button as a regular dom element, but so far have only been able to use it as an element inside the canvas, due to useThree() only working with the context of the canvas.

(note that the screenshot does not function in codesandbox, it does work properly via a localhost)

Is there a way I can link a 'regular' html button to the function I'm calling in my ScreenshotButton component?

This is more of a react question than a react-three-fiber question, but I haven't been able to figure out the best way to handle this.

Also, a side question related to this:

When I take the screenshot, the output image has different colors than my main image on my webpage, you can see in the attached images that the trees are significantly darker in the output image. It seems to me like the fog isn't being taken into consideration, but I'm not sure what is causing this as I'm directly capturing the div itself.

Canvas in web browser

Exported Image

[drcmda]

The renderer is created not in sync with the dom, you can of course use onCreated on the canvas, fetch gl there and set state it on the parent.

[drcmda]

As for the colors, the canvas is probably srgb and the dom some other color space, or the other way round. It doesn't look like fog to me. Not sure how you can adapt another color space for screen captures

[BryanChrisBrown]

I'm not sure the srgb is the issue here, I've layered both images in photoshop using the difference filter, and most of the model appears to have the same color values, save for the trees and sky

[BryanChrisBrown]

Turns out this is due to an Effects component (post processing) I have not applying to the wegbl render created by the screenshot function. I'll post an example on how I resolved it in a bit, I also resolved the html button with onCreate in the canvas, thanks for the pointer on that!

[viglucci]

@BryanChrisBrown do you happen to have a sandbox or example of how you accomplished the screenshot button in the parent with a native DOM element? Thanks.

[BryanChrisBrown]

@viglucci ill edit the sandbox linked above today or tomorrow for you

[szemyd]

I tried BryanChrisBrown solution, but it only draws sprite that the function is in:

export const ExportWrapper = (props: any) => {
const {
    gl,                           // WebGL renderer
    scene,                        // Default scene
    camera,                       // Default camera
} = useThree();

function renderToJPG() {
    gl.domElement.getContext('webgl', { preserveDrawingBuffer: true });
    gl.render(scene, camera);


    gl.domElement.toBlob(
        function (blob) {
            var a = document.createElement('a');
            var url = URL.createObjectURL(blob);
            a.href = url;
            a.download = 'canvas.jpg';
            a.click();
            console.log('function is actually being used');
        },
        'image/jpg',
        1.0
    )

    gl.domElement.getContext('webgl', { preserveDrawingBuffer: false });
}

return (
    <sprite {...props} scale={[100, 100, 100]} onClick={renderToJPG}>
        <spriteMaterial
            attach="material"
            color={'lightblue'}
            depthWrite={false}
            depthTest={false}
            fog={false}
        />
    </sprite>
)}

I am calling it from a parent component that is in under

    return (
    <scene ref={sceneRef} >
        <MainCamera position={[500, 800, 1300]} ref={cam} args={[width / -200, width / 200, height / 200, height / -200, -100, 10000]} />

        {/*                    Other objects in scene here                 */}

        <ExportWrapper gl={gl} scene={scene} camera={camera}/>

    </scene>)

I don't quiet understand this behaviour. I tried passing the gl, scene, camera as props from the parent, but it didn't help. It works when I initially toggle preserveDrawingBuffer on the Canvas component (but it gives 'smudged' effect).

(I was using react-three-gui, but there the passed in gl, scene, camera doesn't get updated either in the useControl callback)

How can I get the entire scene's screenshot while having preserveDrawingBuffer switched back to false?

[BryanChrisBrown]

UseThree only works if it’s used in the context of the canvas itself, at a glance that looks like what your problem is.

[szemyd]

Thanks for the reply! Unfortunately, I tried moving it to context of the canvas, but it was still giving me blank screens.

My current solution (there is a button that switches exportIt to true):

  const cam = useRef();
  const sceneRef = useRef();
 
  const [exportIt, setExportIt] = useState(false);

 function renderToJPG() {
    if (exportIt) {
        gl.domElement.getContext('webgl', { preserveDrawingBuffer: true });
        gl.render(sceneRef.current, cam.current);

        gl.domElement.toBlob(
            function (blob) {
                var a = document.createElement('a');
                var url = URL.createObjectURL(blob);
                a.href = url;
                a.download = 'canvas.jpg';
                a.click();
            },
            'image/jpg',
            1.0
        )

        gl.domElement.getContext('webgl', { preserveDrawingBuffer: false });
        setExportIt(false);
    }
}

useFrame(({ gl, scene, camera }) => renderToJPG(), 10)
return(
<scene ref={sceneRef} >
        <MainCamera ref={cam} />
</scene>
 )

This works, but it feels like I'm doing it in a convoluted way :/