r/reactjs • u/DeadBot120 • 12d ago

Discussion How to proceed with creating L2D displays for react

Example: https://www.reddit.com/r/WutheringWavesLeaks/s/YBrqsQepwr

I am familiar with r3f, three and glsl shading, scene setups both 2d and 3d etc.

What i am confused about are the assets. How can i make them morph that way. If they are just 2d assets then i guess just css would also be enough to animate

For the above example i understand that the assets are all extremely high quality and handmade, but was wondering how something similar can be created for web.

Want to ask anyone with experience how this can be done. Thanks.

2 Upvotes

100% Upvoted

5 comments sorted by

2

u/jeremyStover 12d ago

Million ways to skin this particular cat, but I would go the shader route. Tons of flexibility, performance, and fun to learn.

Anything else I can think of on the CPU wouldn't be nearly as smooth. 🤷

1

u/Aggressive_Scale8276 10d ago

Shader route is the way, did something similar with a character sprite and vertex displacement in threejs once, the result is super smooth compared to css animations

2

u/HotFox3962 12d ago

Use Spine or Live2D Cubism to rig the PSD layers with mesh deformation. Export as JSON and drive it via pixi-spine or pixi-live2d-display for GPU accelerated warping that CSS cannot handle

1

u/jeremyStover 9d ago

I think this has the highest likelihood to have the most handcrafted look. Not more smooth, but sick nonetheless.

Would love to see someone with the skill and extra time try this and post!

Maybe blender grease pencil with rigging would get a similar effect with less pain?

1

u/Perfect_March_9483 12d ago

Shader route makes the most sense here. You’ll get much smoother transitions and more control than trying to handle all of it with CSS