Show HN: Squishy 3D helpers powered by Three.js(prathje.github.io)

17 pointsby prathje4 days ago5 comments

aprilzz4232 days ago
The texture is quite detailed! Impressive stuff
marcduck3 days 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?
- prathje3 days 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?
  - marcduck3 days 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.
    prathje2 days 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?
thenthenthen3 days ago
On a phone they dont seem very plushy
- prathje3 days ago
  Yeah, the resolution might reduce the plush effect. Maybe try increasing the strand size or the fur length? Does that look better?
  - thenthenthen3 days ago
    When zoomed in there is some weird moire/anti aliasing going on as well it seems
    prathje3 days ago
    Yeah, this seems to happen when the fur matches the pixels... Do you have a good idea for how to approach this?
taikon2 days ago
Very cool!
sara_kumodeck3 days ago
[flagged]