Apply Fluid Shader FX as reflective plane material
nhtoby311 opened this issue · 1 comments
nhtoby311 commented
I'm trying to apply useFluid and useBlending FX to a custom <MeshReflectorMaterial/> from drei, to create a reflective water with ripple as you move the mouse along the surface, and I encounter some issues with it:
- The mouse positions are set to viewport by default, while I want to map it to the plane UV coordinates. Is this possible?
- In
<MeshReflectorMaterial/>fragment shader, it output color asvec4 diffuseColor, so I can not "morph" the UV using the usual ways "texture2D(diffuseColor, uv)". I wonder if it is possible to morph the UV ofdiffuseColorin this case? - Render the whole scene into
createPortalto use it as texture of full-screen FX plane will disable the mouse movement of scene, leads to any prior mouse event in the scene will stop working.
I wonder if everything mention above is possible with this package? I have ported and created CustomMeshReflectorMaterial, linked it with useFluid and useBlending to apply the FX to the material in this codesandbox!
nhtoby311 commented
A couple things I have found in the meantime:
- In
fiber, you can get pointer position on the UV coordinates of the plane with<mesh onPointerMove={e=> //e.uv.x & e.uv.y}. Would be nice if there is an option to update theusePointerinsideuseFluidwith these value! - I found the part where distort is being handled in
<MeshReflectorMaterial/>fragment shader, all I have to do is mix the distortion ofu_fx, withdistortionMap. Just have to choose a channel for the distortion, like the original version, they use red channel.
float distortionFactor = 0.0;
#ifdef USE_DISTORTION
float distortionMap = texture2D(distortionMap, vUv).r * distortion;
float distortionFX = texture2D(u_fx, vUv).r;
distortionFactor = mix(distortionMap, distortionFX, 0.3);
#endif- Haven't found anything regards have mouse event enable in case whole scene it rendered as texture with
createPortal. Wonder if this even possible? 🤔
I try to create CustomUseFluid.tsx to test the mouse position myself, but the package did not export useMesh and some stuffs, so I can't do anything about it yet.
