8 ms·
Show HN: A CSS 3D Engine (no WebGL)
- alinarashid1 4mo ago[flagged]
- cush 4mo agoI give it 15 minutes before someone on here ports Doom
- bryanrasmussen 4mo agohttps://github.com/NielsLeenheer/cssDOOM https://github.com/NielsLeenheer/cssDOOM
- Rohansi 4mo agoBut why not use WebGL? It's widely available, more efficient, and can render at a much higher quality. https://polycss.com/gallery/?model=2843066616 https://polycss.com/gallery/?model=2843066616 https://threejs.org/examples/#webgl_animation_multiple https://threejs.org/examples/#webgl_animation_multiple
- socalgal2 4mo agoSame thought. Even that simple Apple on the front pages runs < 60fps on my M1 Mac. Rendering 3D objects with CSS is like rendering Doom in Excel Cells. Yes, you can do it. No you should not do it except as a joke/curiosity.
- rofko 4mo agoHi there! This is not trying to be a three.js replacement, scenes with huge polygon counts naturally should render in canvas. For me, the interesting case is smaller low-poly or voxel scenes where loading a full 3D stack may be overkill, and where keeping the scene in DOM/CSS gives you easier integration with normal layout, styling, events, etc. Once you have the HTML, you don't even need to load the library to render a static model. Also, part of the experiment is testing the browser’s limits and getting a clearer sense of where this approach works, where it breaks down, and what the tradeoffs are. Cheers!
- woodrowbarlow 4mo agoha, so you could run this on the server and send down a page with no javascript at all? (with, i assume, a static camera only.) that's fun. i mean, you could also just render the model to an image at that point, but still, this is neat.
- apresmoi 4mo agoYes, you can render on server and if you include CSS transitions/animations, you get an animated 3d render without the need for JS ! We haven't built it yet, but its on the roadmap
- Rohansi 4mo agoI'm all for experimentation but getting rid of JS in this case almost certainly results in worse performance. You're trading a bit of load time for significantly slower runtime/rendering.
- capitainenemo 4mo agoHuh.... why would a CSS animation of a transform be slower than JS? This is strictly for the "CSS transform" case ofc - obviously pure webgl would be way faster. I'm having a hard time seeing it. My experiments with CSS animation have always performed much better in CSS than JS (again, excluding it being pure webgl/canvas JS). And ofc there's the nice bonus that it works if I haven't chosen to trust and whitelist their website for JS yet.
- apresmoi 4mo agoThat is a good observation, being able to do a 3D animation only with HTML+CSS means that it works on js blocked websites! Of course that the animations won't map to all the animations you can manage with js.
- Rohansi 4mo agoI meant slower vs. WebGL rendering, which requires JS. Each triangle is rendered as a DOM node. There can be thousands of triangles in a single model. The gallery has been updated with more models. Compare the same model in PolyCSS vs. Three.js: https://polycss.com/gallery/?model=205023689 https://polycss.com/gallery/?model=205023689 (13 fps) https://threejs.org/examples/#webgl_animation_skinning_morph https://threejs.org/examples/#webgl_animation_skinning_morph (60 fps)
- sgm1018 4mo agowow thats cool
- tomaytotomato 4mo agoAlways thought it would be cool to make an RTS or simple city builder game in the browser. Would you recommend this for hacking around or not?
- thih9 4mo agoIt’s a wide range from an RTS to a simple city builder. I’d say “no” for the former and “maybe” for the latter. Perhaps try it for a couple of hours and see whether you like it or not.
- blueboo 4mo agoI think the answer is no, as this is a creative repurposing of css3d as a basis for a general 3d engine. That lets you put web content everywhere, even on the triangles of your teapot. Cool, but extravagant Whereas THREE.js or webgl is purpose-built for realtime animated 3d scenes.
- apresmoi 4mo agoWhat about https://terra.layoutit.com https://terra.layoutit.com
- tajoma 4mo agoThis reminds me of the 3D maps in corru.observer, which also only used CSS transforms
- madrox 4mo agoOver a weekend about a decade ago, I toyed with making a Final Fantasy Tactics-like game in the browser using CSS for the renderer. I could not get it to work in the time I gave it. I realized too late I needed to make some abstractions and stop trying to manipulate CSS directly. Which is a long way of saying I appreciate how challenging this probably was to figure out. I love stuff like this.
- 1taimoorkhan0 4mo agoThe per-polygon DOM events are what make this more than a trick. Getting click handlers on individual faces in WebGL means raycasting. Here it's just onClick. For certain use cases that's the whole argument.
- luckykiddie 4mo agoIt's cool. The performance is good but why not use WebGL, any reason?
- Panzerschrek 4mo agoDoes it support per-pixel depth test? Or it just sorts polygons?
- tengbretson 4mo agoIs this inspired by the old famo.us work?