Changing dimensions of a extruded shape geometry without stretching in vertex shader

Questions
, , , ,
1

I’m creating shapes for a table configurator using the Shape and ExtrudeGeometry and I want to change the dimensions of my table shapes but with the current logic I recreate the geometry shape the whole time and I notice with the r3f-perf monitor it feels a bit laggy and I also want to be able to animate when changing the dimensions of my table.

So my idea was changing the vertex position inside of the vertex shader.
I use the normal directions I’ve calculated for each vertex point by using the previous and next point and multiply it with the offset amount to reposition the point. But for other shapes than a rectangle it stretches the shape. The first image is when I tried changing the dimensions using the vertex shader

Screenshot 2024-10-19 at 13.28.29
Screenshot 2024-10-19 at 13.28.291690×1068 116 KB

It should look like this, this is the logic where I recreate the geometry shape every time I change the value of the length.
Screenshot 2024-10-19 at 13.28.50
Screenshot 2024-10-19 at 13.28.501826×1652 82.3 KB

Does anybody maybe know how I could solve this problem?

Here is also a link to the configurator with the current logic which creates a new geometry shape every time: https://table-showcase.vercel.app/
And here is also a link to my github repo: GitHub - Cheung-KaWai/table-showcase

2

you can use some branching logic in the vertex shader… check if the coordinate.x < .0 and subtract, otherwise add…
same with the .y.

3

What do you exactly mean with the term “branching logic”? I did try in my logic like you said to check if the vertex position.x is < 0 to substract and otherwise add but then I get the results like in the first image where it does change to the right dimensions but it gets a stretched result and doesn’t keep my shape

4

Put it in a codepen and we can take a look.

2 Likes
5

It’s hard to put it in a codepen but I do have my github repo link I can share: GitHub - Cheung-KaWai/table-showcase. In my latest commit I have the code I used to change the dimensions of the tabletop in the vertex shader. As you can see in the link to the live website it will deform my shape by changing the dimensions.