FunTechInc/use-shader-fx

Apply Fluid Shader FX as reflective plane material

Closed this issue · 1 comments

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 as vec4 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 of diffuseColor 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!

image

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 the usePointer inside useFluid 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 of u_fx, with distortionMap. 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.