Capturing viewport 3D scene as texture for shader material

I want to recreate this mouse trail, fluid effects in https://lusion.co. The effects shows it mix/morph the 3d scene with this fluid color. My thought on this would be some how, I need to capture the 3D scene per frame, use it as texture in shader material, and then mix it with a fluid simulation color shader that react with my mouse.

So how can I capture the 3d scene as texture for shader material? Could it be done in R3F?

image

You could use RenderTargets to capture the scene in the way you describe - but that seems a bit unnecessary, you’d just be building post-processing pipeline from scratch.

All you need is post-processing, specifically the RenderPass and a custom post-processing pass to add the displacement (if you don’t feel strong reading source code, you can alternatively use pmndrs/postprocessing which is a bit better documented than vanilla three post-processing.)

2 Likes

Thanks! I have look into the post-processing a bit and want to port this effect from ogl. It use this FBO ping pong thing to write, read and swap sort of thing, to create the trail effect of the flow map. I wonder if I could do the same if I capture the frame with the inputBuffer value in the fragment shader?

Here is my codesandbox which I only manage to create the color, not the trail.