You can definitely develop more complicated shapes, but it starts to move away from what you might call and elegant solution.
Jim Savage made this Warhol Soup Can model that you can roll and turn.
From memory it has 24 facets on the wrapping face. It’s pretty ingenious, but probably getting to the stage where you’d use WebGL instead.
I built this 3d folding milk carton recently (click the ‘construct’ box).
It’s not a polished, finished demo, but I wanted to see how easy it was to animate folding surfaces - perhaps for applications like origami demos, or paper planes.
At this stage, it feels like the CSS rendering engine struggles with complicated surface angles and depth. I calculated where surfaces should meet, but still had edges poking through opposing faces.
But it’s very good with rectangles and boxes, and that makes up a LOT of what you might want to render - Video games, product boxes, DVD cases, software packaging, etc.
You can also integrate the model with a photo background to create a ‘studio shoot’ look.
That’s the sort of thing I was thinking of. Great work.
I was thinking when I was looking at those, the css for more complex geom would take some coding, but it is something that could be done by script if someone were to write one.
Interesting, because in my “real” job I do 3D using mainly 3dsmax. But working in video, I usually render my animation frames for that purpose, I’ve not really looked into exporting models for web viewing.
Performance – as in rendering speed/processor loads – aren’t really a big issue. I’m using a 2011 macbook pro and I’ve never noticed the fan going crazy, and I’ve sometimes had 5-6 tabs running animating models at once.
I’ve found there are some CSS transforms that always smash you - for instance, animating scale and opacity at the same time always makes my laptop sound like a taxi-ing jumbo. But static transforms don’t tax the browser much, and even animations are fairly lightweight because we’re not changing lots of different properties.
The main issue with complicated models is the lack of sophistication in the rendering engine. I used pythagoras’s theorem with the milk carton to calculate the correct triangles edge lengths and angles, but you still get visual glitches on screen. You end up building little pixel hacks into it to try to cover the glitches, and things get progressively uglier.
But there is more than one way of tackling a problem, and there’s a good chance that there is a better way of approaching the milk carton construction than the way I did it.
I’ve had this idea for starting with a flat rectangle, and folding it into a simple airplane using CSS. So anyone looking for a nice challenge?
That is some impressive css. I’m curious as to what you have tested for to see where the caveats exist. Such as increasing the speed of the rotation or rendering more than one?