Show HN: Squishy 3D helpers powered by Three.js(prathje.github.io)
15 points by prathje 1 day ago | 10 comments
[–] marcduck 1 day ago
Looks nice! But I'm always concerned about the performance impact of threejs. Considering they're never really seen in 3d, couldn't this be a CSS perspective transform on a 2d graphic to make them look squishy?
[–] prathje 21 hours ago
That is a great idea! I initially built them for another project where CSS was not available but it could really push the performance. Right now, their image is cached already when they are not moving but with CSS maybe one could render initial components with threejs and then animate them further with CSS, right? Or would you build them with CSS from the very beginning?
[–] marcduck 16 hours ago
Maybe render them as an svg or a canvas element? I'm not too familiar with drawing stuff in 2d so I'm not sure, but the character creator could probably be converted to 2D somehow while still having the hairs and shading and stuff. 3D seems like overkill if they're always flat on the screen.
[–] prathje 12 hours ago
Three.js renders them onto canvas elements, actually, so perhaps there is an easy way to render them onto individual canvases and overlay them? It would be interesting to see how close one could get with 2D layers to the feel of the 3D version. I guess when they are that small, it would be very hard to notice, right?
[–] taikon 5 hours ago
Very cool!
[–] thenthenthen 1 day ago
On a phone they dont seem very plushy
[–] prathje 1 day ago
Yeah, the resolution might reduce the plush effect. Maybe try increasing the strand size or the fur length? Does that look better?
[–] thenthenthen 1 day ago
When zoomed in there is some weird moire/anti aliasing going on as well it seems
[–] prathje 20 hours ago
Yeah, this seems to happen when the fur matches the pixels... Do you have a good idea for how to approach this?
[–] aprilzz423 13 hours ago