[{"data":1,"prerenderedAt":271},["ShallowReactive",2],{"project-48356946":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":43,"post_text":45,"what":46,"said":60,"maker_in_thread":164,"shape":167,"grid":172,"attempts":233,"same_week":234,"maker_shows":32,"maker_hidden":263,"reader_version":264,"card":265},"48356946","PolyCSS","A CSS 3D Engine (no WebGL)","title","Show HN: A CSS 3D Engine (no WebGL)","https:\u002F\u002Fgithub.com\u002FLayoutitStudio\u002Fpolycss","github.com","rofko",1780322284,2026,80,27,845,4366,20,"notable","languages","3d rendering engine","library",[24,25,26,27],"css 3d","css transform","3d engine","dom rendering","debated",0.143,{"positive":31,"neutral":32,"mixed":33,"critical":32},5,6,1,18,{"execution":36,"performance":38,"idea":40,"design":42},{"positive":33,"critical":37},0,{"positive":37,"critical":39},4,{"positive":41,"critical":41},2,{"positive":33,"critical":37},[31,33,33,37,31,44,33,37,33,44,33,37,31,44,37,44,44,33,37,31,37,37,37,44,44,37,31],3,null,{"problem":47,"audience":45,"pricing":45,"motivation":54,"time_to_build":45,"stack":58,"openness":59,"stage":59,"team_size":59},{"value":48,"source":49,"evidence":50},"Rendering small low-poly or voxel 3D scenes inside normal HTML\u002FCSS layout without a full 3D stack","maker",[51],{"id":52,"by":11,"text":53},"48358936","Hi 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…",{"value":55,"source":49,"evidence":56},"Experiment with the browser's limits and the tradeoffs of keeping 3D scenes in the DOM",[57],{"id":52,"by":11,"text":53},[],"unknown",{"praise":61,"objections":85,"requests":107,"questions":119,"alternatives":139},[62,70],{"value":63,"source":64,"evidence":65},"Per-face DOM events make click handling simple compared to WebGL raycasting","commenter",[66],{"id":67,"by":68,"text":69},"48362949","1taimoorkhan0","The 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…",{"value":71,"source":64,"evidence":72},"Interesting experiment that is fun to see",[73,77,81],{"id":74,"by":75,"text":76},"48358323","cush","I give it 15 minutes before someone on here ports Doom",{"id":78,"by":79,"text":80},"48359087","sgm1018","wow thats cool",{"id":82,"by":83,"text":84},"48361978","madrox","Over 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…",[86,97],{"value":87,"source":64,"evidence":88},"Much slower than WebGL; each triangle is a DOM node and performance drops on complex models",[89,93],{"id":90,"by":91,"text":92},"48358859","socalgal2","Same thought. Even that simple Apple on the front pages runs \u003C 60fps on my M1 Mac. Rendering 3D objects with CSS is like rendering Doom in Excel Cells. Yes, you can do it. No you…",{"id":94,"by":95,"text":96},"48361693","Rohansi","I 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…",{"value":98,"source":64,"evidence":99},"WebGL is more efficient and higher quality, so the approach seems unnecessary",[100,103],{"id":101,"by":95,"text":102},"48358492","But why not use WebGL? It's widely available, more efficient, and can render at a much higher quality. https:\u002F\u002Fpolycss.com\u002Fgallery\u002F?model=2843066616…",{"id":104,"by":105,"text":106},"48365534","luckykiddie","It's cool. The performance is good but why not use WebGL, any reason?",[108],{"value":109,"source":64,"evidence":110},"Pure CSS rotation mode that works without JavaScript",[111,115],{"id":112,"by":113,"text":114},"48362491","capitainenemo","Oh. Sure, that is pretty obvious. A triangle in webgl is so much more lightweight than building it out of DOM elements but this was more about \"if one is going to use this CSS…",{"id":116,"by":117,"text":118},"48360198","apresmoi","Yes, you can render on server and if you include CSS transitions\u002Fanimations, you get an animated 3d render without the need for JS ! We haven't built it yet, but its on the roadmap",[120,125,132],{"value":121,"source":64,"evidence":122},"Why not use WebGL instead?",[123,124],{"id":101,"by":95,"text":102},{"id":104,"by":105,"text":106},{"value":126,"source":64,"evidence":127},"Does it support per-pixel depth testing or only polygon sorting?",[128],{"id":129,"by":130,"text":131},"48366602","Panzerschrek","Does it support per-pixel depth test? Or it just sorts polygons?",{"value":133,"source":64,"evidence":134},"Is it suitable for building an RTS or city builder game?",[135],{"id":136,"by":137,"text":138},"48359354","tomaytotomato","Always 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?",[140,145,152,158],{"value":141,"source":64,"evidence":142},"Three.js \u002F WebGL",[143,144],{"id":101,"by":95,"text":102},{"id":94,"by":95,"text":96},{"value":146,"source":64,"evidence":147},"cssDOOM",[148],{"id":149,"by":150,"text":151},"48358544","bryanrasmussen","https:\u002F\u002Fgithub.com\u002FNielsLeenheer\u002FcssDOOM",{"value":153,"source":64,"evidence":154},"CSS Minecraft",[155],{"id":156,"by":113,"text":157},"48361137","Then there's \"minecraft in CSS\" which uses invisible form elements for camera rotation and works with no JS at all. https:\u002F\u002Fbenjaminaster.com\u002Fcss-minecraft\u002F It's been on HN…",{"value":159,"source":64,"evidence":160},"Atlas (atlas.layoutit.com)",[161],{"id":162,"by":117,"text":163},"48361127","What about https:\u002F\u002Fatlas.layoutit.com",{"comments":33,"answered":33,"key":165},[166],{"id":52,"text":53},{"commenters":168,"max_depth":169,"maker_replies":33,"first_comment_mins":170,"lifespan_hours":171},19,10,101,28,[173,175,177,178,180,184,185,187,190,191,193,196,199,201,205,207,208,211,214,215,217,218,219,222,224,226,230],[82,37,31,174,83,37],"project\u002Fpositive\u002Fexecution",[101,33,33,176,95,37],"project\u002Fcritical\u002Fperformance",[90,33,33,176,91,37],[52,33,37,179,11,33],"maker\u002Fneutral\u002Fidea",[181,33,31,182,183,37],"48359660","project\u002Fpositive\u002Fidea","woodrowbarlow",[116,33,44,179,117,37],[186,33,33,176,95,37],"48360452",[188,33,37,189,113,37],"48361160","commenter\u002Fneutral\u002Fperformance",[94,33,33,176,95,37],[112,33,44,192,113,37],"project\u002Fneutral\u002Fidea",[194,33,33,195,95,37],"48362907","project\u002Fcritical\u002Fidea",[197,33,37,198,113,37],"48373843","commenter\u002Fneutral\u002Fidea",[200,33,31,182,117,37],"48361817",[202,33,44,203,204,37],"48360260","project\u002Fneutral\u002Fexecution","semolino",[156,33,37,206,113,37],"other\u002Fneutral\u002Fnone",[136,41,44,192,137,37],[209,41,44,192,210,37],"48359679","thih9",[212,41,33,195,213,37],"48359926","blueboo",[162,41,37,206,117,37],[67,44,31,216,68,37],"project\u002Fpositive\u002Fdesign",[74,39,37,206,75,37],[149,39,37,206,150,37],[220,31,37,206,221,37],"48360489","tajoma",[104,32,44,223,105,37],"project\u002Fmixed\u002Fperformance",[129,225,44,203,130,37],7,[227,228,37,206,229,37],"48370466",8,"tengbretson",[78,231,31,232,79,37],9,"project\u002Fpositive\u002Fnone",[],[235,240,244,248,253,258],{"id":236,"name":237,"points":238,"category":239},"48304260","Hallucinate",442,"games",{"id":241,"name":242,"points":243,"category":239},"48308376","Continue? Y\u002FN",386,{"id":245,"name":246,"points":247,"category":239},"48367723","Eyeball",295,{"id":249,"name":250,"points":251,"category":252},"48374552","Edsger",264,"dev_tools",{"id":254,"name":255,"points":256,"category":257},"48344327","Test-Drive-3-Maps",215,"learning_science",{"id":259,"name":260,"points":261,"category":262},"48328184","Tiny-vLLM",205,"ai",false,"v2",{"id":266,"name":5,"line":6,"ai":263,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":267,"top":18,"kw":268,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":269,"url":9,"mix":270,"praise":63,"objection":87,"sub":21},48356946,0.14,[24,25,26,27],"511053101310530331050003305",[31,32,33,32],1794036701916]