Apply deformation shaders to Drei <Image /> component

[MrUltimate]

Hello! I'm trying to use this code sandbox by @drcmda as a base for my project slider: https://codesandbox.io/s/horizontal-tiles-l4klb

However, I'm trying to figure out the best way possible to apply deformations to these images. Is it possible to apply deformation shaders to Drei's <Image /> component? I do see a basic fragment shader being applied when I log ref.current.material. My goal is to be able to achieve something like: aristidebenoist.com/

Here's a messy code sandbox I'm working with: https://codesandbox.io/s/thirsty-dubinsky-tsggx?file=/src/components/App.jsx

I've tried combining this with this old code sandbox I've found by @gsimone : https://codesandbox.io/s/r3f-slider-n9y4n but unfortunately that seems to be over complicating it and I haven't found a way to apply scroll delta to the shader without my browser crashing.

[drcmda]

could you explain what you mean with deformation? i see no deformation on aristidebenoist.com, it's just a rotation around the x axis. the last box you linked doesn't run for me. generally shaders aren't modular. but you can copy the image component into your project and extend it.

[MrUltimate]

I basically want to be able to apply shader effects to the planes generated by the image component. Essentially use the image component's image "cover" ability and then modify the geometry of the plane. I see your point about no deformations on Aristide's portfolio. For some reason it feels a lot more fluid than the example code sandbox version.

[netgfx]

did you find a solution about this?

[gsimone]

best bet is taking the code we use for Image and just changing the shader manually to add whatever you need :)

[TurbatBay]

Did found solution ? i'm trying to do same with shader material with texture on it like this website

• This the original website : https://blobmixer.14islands.com/

• This is my clone : https://blobmixer-r3f.vercel.app/
  as you can see my text is bugged while scrolling