Apply Fluid Shader FX as reflective plane material
Closed 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 ofdiffuseColor
in this case? - Render the whole scene into
createPortal
to 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 theusePointer
insideuseFluid
with 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.