Film strip carousel

I have built a 3D carousel using mehes with vertices bent in the vertex shader and it works as I want Start

I would like to bend the meshes like a film strip but I am lost, I tried ChatGPT but no luck any help is appreciated it

https://www.pngwing.com/en/free-png-ttolf

Thank you!

you might want to look into splines, i haven’t used ThreeJS SplineCurves yet but in Unreal that’s what i use in level design to bend meshes like a bridge or a pipe.

Thank you the thing is that I need this in the vertex shader so the math must be done in the vertex, I don’t think Spline would help in this case.

You can create a plane which width will the same as the number of widht segments. Then vertices x coordinates will an integers, and this values сould be used as indeces to set its realy x and z coordinates from the 2d-spline. If you want to do it in the vertex shader, you can attach a spline coordinates as a texture.

1 Like

Tried it with CatmullRomCurve3 and animated textures :thinking:

Video:

Demo: https://codepen.io/prisoner849/full/dPbERZx

6 Likes

Thank you man this is what I need, I manage to replicate this in the vertex shader since I need it in the vertex , it works perfect with one mesh but I can’t figure out the math for multiple meshes to stay connected

@Tibi
I see no difficulties to achieve the desired result, using vertex shader. @trueshko gave you a nice hint about to put spline data into DataTexture. :thinking:

Ok guys I almost did what I needed but I can’t figure out how to calculate the plane with in the fragment shader so that the meshes are arranged correctly with no gaps … thank you

So what I can’t figure out is how to perfetly align the mehes on the curve with no gaps and also to be able to add more and they shuld just continue on the right and left, I hope it makes sense.

1 Like

I give up I can’t figure out the math, any help is appreciated it.

Willing to pay for this just to get it done…

I’m trying now to do this by passing the position to the shader via a data texture. Like in this example.

If you can figure out the math so that we can add as many meshes as we want it is a done deal, that is what is missing.

Thank you for helping!

For now, I could put instanced planes along a spline, whose data was written to DataTexture :thinking:
If/when I have some more progress, I’ll make a post here.

1 Like

The issue is that I need fragment shader so that I can distort the uvs, this is why I need individual meshes, aybe I am seeing this wrong.

Please share the code if you can.

Thank you.

This is the best I could achieve.

Picture

Demo: https://codepen.io/prisoner849/full/ogvrJxv

Not sure, if it helps, but I leave it here :sweat_smile:

6 Likes

Holy crap :slight_smile:

Thank you sooo much, I will start digging into this but it looks like what I need.

If you have time can you address the number of mehes basically if I add for example 20 meshes they should remain at the same size visually now the entire curve scales, this is what I could not solve, and put me on hold.

THANK YOU!!!

I am looking into this and is great ut why is it not smooth on scroll no matter how I adjust the smoothness is jaggery?

Added these lines:

splineData.magFilter = THREE.LinearFilter;
splineData.minFilter = THREE.LinearFilter;

This seams to fix it, thank you :slight_smile: Is not perfect but I gess this is how threejs randers this stuff

You are always free to find a better way :slight_smile: :handshake:

2 Likes

I know man, don’t get me wrong is great.

Thank you again.