funtechinc / use-shader-fx Goto Github PK

How can I make the FX shader overlay the current scene? Following the basic example in the docs, it hides everything behind the shader, while I want it to be like a transparent overlay effect, that show color on mouse movement.

• 粒子感がでるやつ

https://x.com/codepen/status/1720898482326671814?s=46&t=D2ms1XxCwu9_cXuoDX-Xtw

• 旗がなびくみたいなやつ

Following this setup to assign custom pointer values to FX hooks (Ex: useFluid) results in a wrong UV projection, as while pointer value goes from 0 -> 1, the effects display from 0.5 -> 1 on the UV instead.

useFrame((props) => {
    const pointerValues = updatePointer(refPointer.current);
    
    //This however returns the correct values of pointerValues
    console.log('pointerValues', pointerValues);
    
     //Therefore, I suspects the issue lie inside the updateFluid
    const fluid = updateFluid(props, { pointerValues: pointerValues });
    const fx = updateBlending(props, {
	    map: fluid,
	    alphaMap: false,
    });
    materialRef.current!.material.uniforms.u_fx.value = fx;
});

If I use my custom code for useFluid that I created in this PR #65, it works well like below:

• 水面シミュレーション

@takuma-hmng8 test

• 外側に行くに従ってrgbが強くなるサークル
• マウスに追従、慣性
• サークルの中にテクスチャーをマッピングできるように

ref=>https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance

• noise マッピングするnoiseテクスチャー
• switch 0~1
• [texture,texture] スイッチする テクスチャー
• dir トランジションする方向

• テクスチャーを受けとって、さらにテクスチャーを返す。
• 全体的にピクセルグリッド表現になって、色がある部分がピクセライズされる。みたいな

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!