I've been working on a project called RareDropCards, where users can upload a photo to create a Pokémon-style 3D trading card that can be rotated and shared. The technology stack I'm using includes Next.js 16 and react-three-fiber, with a 900x1260 canvas2D texture applied to a MeshPhysicalMaterial.
Currently, I'm facing two main issues:
1. The foil or holo effect works well on desktop but appears washed out on mobile devices. Does anyone know some tricks to improve reflectivity that perform well on mobile GPUs?
2. I'm interested in baking a normal map for the gradient instead of faking it in the canvas. Is there a way to achieve this without significantly increasing texture size?
Additionally, I'm open to any general feedback regarding performance or user experience. Feel free to check out RareDropCards and let me know what you think!
5 Answers
This project is really cool! I tested it with a photo of my cat and it turned out surprisingly well. For the mobile GPU issue, you might want to reduce the metalness value while increasing roughness a bit. That adjustment helps washout without dramatically dropping FPS. As for the normal map, generating a lower resolution version could allow the GPU to interpolate it, which might not even be noticeable from a card-viewing distance. Good luck!
I checked out your editor, and I think it looks amazing! Just a thought: while I'm not deeply into trading cards, I noticed the aspect ratio seems a bit off, being short compared to the width. Maybe adding a setting to adjust the aspect ratio could improve customization for users trying to match existing TCG formats.
If you're looking for shader inspiration, check out Shadertoy! It might give you some creative ideas for your implementation.
Be sure to keep the material count low and monitor your texture filtering and mipmaps. Things can get tricky with react-three-fiber if there are multiple layers on your card.
Have you thought about incorporating device rotation using DeviceOrientation? It could provide a neat touch, enhancing the 3D feel of the cards on mobile.
Great tips! I’ll definitely give those settings a try. And yes, creating a cute trading card with my cat was a blast!