I’m currently trying to apply a texture to a 2:1 Plane Geometry and want to round its corners. Moreover, my goal is to transform this geometry to a 1:1 aspect ratio while reducing the rounded corners to 0 (i.e., turning them into sharp corners).
My initial thought was to create a geometry with rounded corners and then change the geometry as needed. However, I thought this could potentially be computationally expensive. So, I’m leaning towards using ShaderMaterial and solving this issue using the vertex and fragment shaders.
However, my experience with creating shaders is limited. I need help in figuring out the best way to calculate for the rounded corners, and how to manipulate the radius of the rounded corners when transforming it to a 1:1 aspect ratio.
I would also appreciate it if you could point me towards a more efficient method if there’s one available other than the one I’m thinking of.
when you say transform from 2:1 to 1:1, would this be gradual or instant? It might be possible to pre-compute the in between geometries and flip between them.
If there’s only one of these happening at a time, I doubt its too compute intensive.
Here’s a function for a rounded rectangle shape that can be passed into ShapeGeometry. I guess you call this with a smaller radius until zero during transition. Again, caching the shapes or geometry during the transition is an option.
export function roundedRect(x: number, y: number, width: number, height: number, radius: number): Shape {
const shape = new Shape();
shape.moveTo(x, y + radius);
shape.lineTo(x, y + height - radius);
shape.quadraticCurveTo(x, y + height, x + radius, y + height);
shape.lineTo(x + width - radius, y + height);
shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
shape.lineTo(x + width, y + radius);
shape.quadraticCurveTo(x + width, y, x + width - radius, y);
shape.lineTo(x + radius, y);
shape.quadraticCurveTo(x, y, x, y + radius);
shape.closePath();
return shape;
}