Show HN: Squishy 3D helpers powered by Three.js

(prathje.github.io)

15 points | by prathje a day ago ago

10 comments

  • aprilzz423 an hour ago ago

    The texture is quite detailed! Impressive stuff

  • marcduck a day ago 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 9 hours ago 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 4 hours ago 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 36 minutes ago 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?

  • thenthenthen a day ago ago

    On a phone they dont seem very plushy

    • prathje a day ago ago

      Yeah, the resolution might reduce the plush effect. Maybe try increasing the strand size or the fur length? Does that look better?

      • thenthenthen a day ago ago

        When zoomed in there is some weird moire/anti aliasing going on as well it seems

        • prathje 9 hours ago ago

          Yeah, this seems to happen when the fur matches the pixels... Do you have a good idea for how to approach this?

  • sara_kumodeck 16 hours ago ago

    [flagged]