How to Build a T-Shirt Mockup Web App with Realistic Wrinkles & Color Change?

JavaScript
1

Hey everyone,

I want to build a web app where I can upload my designs and place them on t-shirt mockups. The tricky part is making the designs wrap realistically to match the t-shirt fabric’s wrinkles and creases—like in those high-quality mockup generators.

I also want to change the t-shirt color.

Does anyone know what techniques or libraries can help with this? Any guidance on how to implement this in a web app would be really helpful!

1 Like
2

You can use a displacement map with SVG.

If the images are properly isolated, you can hue rotate them or add an overlay on top with the selected color.

I don’t have any implementation suggestions, that is beyond a simple forum post.

If this is for an existing CMS shop solution, there might be some plugins, but they would likely not be free.

2 Likes