Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flowmap resizing #119

Open
Ahlecss opened this issue Apr 7, 2024 · 2 comments
Open

Flowmap resizing #119

Ahlecss opened this issue Apr 7, 2024 · 2 comments

Comments

@Ahlecss
Copy link

Ahlecss commented Apr 7, 2024

In order to do a Flowmap on a simple images, I started to use this example :

https://codesandbox.io/s/react-curtains-flowmap-0hn2t

My images takes a third of my viewport, so I need to resize them. Apparently, so as the flowmap, which resize automatically.

I was close to my goal since I figured how to handle the current position of the effect (by changing the mouseToPlaneCoords plane, and adding my current scroll), but in terms of Flowmap resize, nothing works properly. Do you have an idea why, and how could this possibly be fixed ?

I assume it's because Flowmap is contained in our PingPong/Flowmap plane.

Have a nice day !

@martinlaxenaire
Copy link
Owner

Hi @Ahlecss,

The flowmap effect is designed to be used as a full screen/viewport effect. If you want to apply it on smaller planes, then you'd have to use an additional ShaderPass instead. See this example: https://www.curtainsjs.com/examples/gsap-click-to-fullscreen-gallery/index.html

Cheers,

@Ahlecss
Copy link
Author

Ahlecss commented Apr 10, 2024

Thanks a lot !

A took a couple our to figure out how ShaderPass and FXAAPass should work,

Some advices to those who wish to make it on React-curtains instead of Curtainsjs (since I don't saw precise examples of it) :

In your template you should have (in this order) :

<PingPongPlane vertexShader={FlowmapVertex} fragmentShader={FlowmapFragment}>
      <ShaderPass vertexShader={DisplacementVertex} fragmentShader={DisplacementFragment}>
             <FXAAPass />
              <Plane vertexShader={PlaneVertex} fragmentShader={PlaneFragment}>
                        <img src="yourImage" />
              </Plane>
       </ShaderPass/>
<PingPongPlane/>

Your ping pong plane will be your Render Target, your ShaderPass should have a "onReady" function attached, where it would have flowmap.getTexture(). And your plane would be a classic shader just to display a texture2D.

Thanks mate, have a nice day !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants