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