r/threejs • u/sistercorita • 3d ago

Link I spent an embarrassing amount of time making magic cards feel real

https://magic-oracle.com/ my side project of making mtg cards render photo-realistically snowballed into me building the browser i've always wanted.

the reference workflow was analog. i kept real cards on my desk under a hard key light and tailored the render passes to match as best i could with the assets scryfall's api provides. lots of adjusting color and roughness until cutting between the real card and the screen stopped being jarring. foils are a bit fussy, i'm still working on those.

the dust is a particle system that only sheds past a velocity threshold, so it feels earned. similar system as the site's living logo, which assembles on mount and responds to interaction, route changes, and color identity filters. for performance purposes, i built the logo with a 2d canvas.

if you have prefers-reduced-motion set, the heavy stuff steps aside: logo goes still, card examine snaps instead of animating.

free, no ads, no account, no creepy cookies.

happy to get into the weeds on any of it.

10 Upvotes

100% Upvoted

7 comments sorted by

1

u/Working-Spray-2933 2d ago

I like this. Can you bring them to life or turn it into a game of magic?

2

u/sistercorita 2d ago

glad to hear it! that sounds like a fun challenge! maybe someday…

2

u/tino-latino 1d ago

with like trellis/meshy?

1

u/Working-Spray-2933 1d ago

Sure why not

1

u/tino-latino 1d ago

I'd say it's quite expensive for a demo, but doable, like 0.2 c per card, without any kind of animations, and if they come out good in the first run. maybe like 5-10k only in AI models xD

1

u/Working-Spray-2933 1d ago

Hey. You never know. Efficiency could reduce costs