White Hair Shop - pluck grey hairs one strand at a time, in 3D in the browser (Three.js, about 5,000 shader hairs per head)

[oreumgames]

Hey everyone,

This one is a bit of a strange one. It is a game about plucking grey hairs. In Korea a lot of us did this as kids for pocket money, a hundred won a hair off a parent's head, and I wanted to see if the feeling of a clean pull could carry a whole game. You run a little barbershop style plucking shop, the camera sits right on top of one customer's head, and you pull the white hairs out by the root without touching the black ones. 25 customers, each with a different hairstyle, and the last one is a grandma with a blonde perm, which is rough. PC and phone (portrait), English and Korean, nothing to install.

When a customer moves their head, you will catch yourself shouting HOLD STILL! without meaning to. You put your mouse cursor over a short sprout of white hair hidden in the black hair, you focus, and every time the customer moves their head it makes you mad, haha.

This game is a lot more fun on PC than on mobile, so please keep that in mind when you play.

Play (free, no sign-up): oreumgames.com/en/games/mini/whitehair/

Since this is a dev forum, the tech part. It is Three.js with no engine. Each head has around 5,000 hairs, and every hair is a 10 point ribbon that faces the screen, all in one ShaderMaterial with a highlight that runs along the strand. The scalp texture also gets a painted layer of flattened strands so the head does not look thin between the real ones. The hair you are holding is drawn on top with depth test off, its free end is a little verlet chain that swings, and the scalp under it tents up through a uniform in the vertex shader. Whether it comes out or snaps depends on how fast you pull and where you grabbed it. Pulling at roughly 120 to 240 px per second gives PERFECT, 420 to 600 gives NICE, and past about 840 it snaps. Grab too far from the root and it breaks before the root lets go, and the safe zone gets bigger with better tweezers. The comb lays every strand it catches along the comb direction and smooths out the jitter of your hand so the hair does not flip back and forth. A frame costs about 0.5 ms, the first grab on a new head was a 70 ms hitch until I prebuilt the screen space lookup, and swapping customers takes 0.44 s behind a white fade. All sounds, including the customer's ouch, are synthesized in code with Web Audio.

It was built in one day, October 22, mostly from playtest notes. The best one: real grey hairs come out when you hold them near the root and snap when you hold the tip. That became the main rule. The worst one was my own bug, where short stubs kept snapping forever because I measured the grip as a fraction of the hair's length, so on a 2.5 mm stub every grip was the tip.

Made by a very small indie team in Korea.

One thing I would really like to know: does the pull feel satisfying to you, or does it feel like you are fighting the hair?

Thanks for playing!