15
\$\begingroup\$

I am creating a nail salon 3D game where I need to implement nail filing mechanics. I have tried out approaches including mesh deformation but I'm concerned about performance as I am targeting mobile platforms.

How can I shape a nail efficiently for mobile devices?

Improve this question
\$\endgroup\$
21
\$\begingroup\$

Myself, I'd approach this by keeping the mesh fixed and unchanging, and using a texture to shave away the edge.

You can make a signed distance field of your nail shape, and use this in your shader to get a smooth, crisp edge on it, even if the texture you're working with is quite low-resolution.

Screenshots demonstrating making a nail SDF in Photoshop

I didn't have a nail mesh handy, so here I'm using this SDF texture on a stretched sphere to get roughly the curvature I wanted. Note how we can get an edge much smoother and more detailed than our underlying triangle mesh, even using just a 128x256 texture.

Screenshot of fingernail rendered on stretched sphere

When you start a fresh nail, you'll blit your source nail SDF texture into a RenderTexture, letting you modify it frame by frame.

By blitting tool shapes into your RenderTexture with "min" blending, you can shave away from the edge of the nail. For example, blending with a linear gradient will give you a straight-line cut-off, like you'd get from a flat nail file. You could also make textures with arched gradients to simulate nail clippers, etc.

Modifying a signed distance field with Min blending

This subtractive process is super cheap - similar in cost to drawing a particle - so you can stack up lots of small modifications frame by frame to shave and sculpt the nail in realtime.

Improve this answer
\$\endgroup\$
4
  • 1
    \$\begingroup\$ Firstly, Thank you for your so detailed answer. An amazing approach but I have few questions as I am thinking of using physical interaction-based griding so if we are not changing the mesh how are we planning on rubbing the filer on the exact edge points? \$\endgroup\$ – Syed Munim Raza Jul 1 '20 at 12:59
  • 4
    \$\begingroup\$ You can still use the collider of your choice for collision logic. You can keep a CPU-side bit array that tracks "present" / "absent". Hit your collider with a raycast or shape cast to find where the file touches its surface from the top, then compare that to the corresponding point in your array to check if the nail is still present there. If it is, you blit another brush into your RenderTexture to wear it away, and update your CPU-side array with the removed grid cells. There's a bit of artistry in keeping the CPU-side sim and the visual choreographed to look plausibly in-synch. \$\endgroup\$ – DMGregory♦ Jul 1 '20 at 13:21
  • 2
    \$\begingroup\$ If you have any trouble with the collision aspect, I'd recommend posting that as a separate question. \$\endgroup\$ – DMGregory♦ Jul 1 '20 at 22:16
  • \$\begingroup\$ Sure. Thank you I'll let you know if I got stuck in that. \$\endgroup\$ – Syed Munim Raza Jul 2 '20 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.