[{"data":1,"prerenderedAt":534},["ShallowReactive",2],{"project-24305834":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":5,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":47,"post_text":48,"what":49,"said":83,"maker_in_thread":244,"shape":254,"grid":258,"attempts":497,"same_week":498,"maker_shows":38,"maker_hidden":527,"reader_version":528,"card":529},"24305834","pantel.is","3D first person game rendered in CSS\u002FHTML","title","Show HN: 3D first person game rendered in CSS\u002FHTML","https:\u002F\u002Fpantel.is\u002Fprojects\u002Fcss3d\u002F","pantelisk",1598627694,2020,285,92,146,3028,5,"legend","games","first-person dungeon game","web_app",[23,24,25,26,27],"css 3d","css rendering","browser game","html divs","first person game","debated",0.03,{"positive":31,"neutral":32,"mixed":33,"critical":34},17,9,10,18,54,{"design":37,"execution":39,"idea":42,"performance":44,"docs":46},{"positive":38,"critical":32},2,{"positive":40,"critical":41},3,6,{"positive":41,"critical":43},0,{"positive":45,"critical":40},1,{"positive":43,"critical":43},[17,40,40,17,45,43,40,43,43,43,45,45,17,43,40,40,45,40,45,45,40,40,17,45,45,40,17,40,43,17,40,17,40,40,17,17,45,40,45,40],null,{"problem":50,"audience":48,"pricing":48,"motivation":60,"time_to_build":48,"stack":64,"openness":81,"stage":82,"team_size":81},{"value":51,"source":52,"evidence":53},"Experiment showing what HTML\u002FCSS divs can do for rendering a full 3D scene","maker",[54,57],{"id":55,"by":10,"text":56},"24306637","Hello HackerNews! Super excited to read all your comments (last time I was here with audiomass.co). This is meant to be an experiment of rendering a full 3D scene in html\u002Fcss. Of…",{"id":58,"by":10,"text":59},"24306530","Performance for simple things is adequate, but relying on 2-point rectangles (origin(x,y), dimensions(width,height)) for geometry is extremely cumbersome. Also everything is hack…",{"value":61,"source":52,"evidence":62},"Explore what good old divs can do in a 3D context",[63],{"id":55,"by":10,"text":56},[65,69,75],{"value":66,"source":52,"evidence":67},"HTML\u002FCSS",[68],{"id":55,"by":10,"text":56},{"value":70,"source":52,"evidence":71},"Vanilla JavaScript",[72],{"id":73,"by":10,"text":74},"24306376","Yup, vanilla JS. Only the rendering is html\u002Fcss. State, navigation etc, is all js.",{"value":76,"source":52,"evidence":77},"three.js (used only for one scene at end of level two)",[78],{"id":79,"by":10,"text":80},"24306654","Nope, threejs is used for a very specific thing at the end of the second level. There is actually nothing 3D-related webgl in it (except for a surprise at the end)","unknown","launched",{"praise":84,"objections":120,"requests":173,"questions":206,"alternatives":225},[85,105],{"value":86,"source":87,"evidence":88},"Impressive technical experiment and atmosphere","commenter",[89,93,97,101],{"id":90,"by":91,"text":92},"24307551","coding123","Very awesome. In 1989 a game like that would have been an AAA title (well if given the resources to make it 40+ hours) And it brings back memories of so many games I played when…",{"id":94,"by":95,"text":96},"24306391","jonny_eh","Super impressive! I'd love to see a write up on how it was done. Do you think this is more performant that webgl?",{"id":98,"by":99,"text":100},"24307447","fxleach","Awesome! Played it on my desktop and didn't have any issues with it being too dark as others have suggested. Keep up the good work.",{"id":102,"by":103,"text":104},"24309007","tsarlatanos","Great work, very impressive and creative project.",{"value":106,"source":87,"evidence":107},"Nostalgia for 80s\u002F90s dungeon crawlers",[108,112,116],{"id":109,"by":110,"text":111},"24307160","rado","Ultima Underworld vibe",{"id":113,"by":114,"text":115},"24308627","zadkey","Kind of reminded me of Elder Scrolls 1 : Arena.",{"id":117,"by":118,"text":119},"24312068","killa_kyle","nice! played until the ending so far.",[121,132,147,162],{"value":122,"source":87,"evidence":123},"Scene is too dark",[124,128],{"id":125,"by":126,"text":127},"24306375","flockonus","Really interesting! But why is the scene so dark? Gave up sooner than I'd like because had to squint really hard on the phone screen.",{"id":129,"by":130,"text":131},"24306599","arxpoetica","I agree, it could be brighter. SUPER DARK.",{"value":133,"source":87,"evidence":134},"WASD and mouse-look controls are awkward and not remappable",[135,139,143],{"id":136,"by":137,"text":138},"24307857","s_gourichon","Thanks a lot for sharing! Very interesting experiment. That said, please please, no \"WASD\". This is very uncomfortable on non-QWERTY keyboard layouts. There are two solutions to…",{"id":140,"by":141,"text":142},"24307707","msla","Good work, but I guess I'm too old-school: Mouse look and WASD give me fits.",{"id":144,"by":145,"text":146},"24312110","nicetryguy","Got the torch in the hole! Holding the mouse button to look around is awkward, but it was fun!",{"value":148,"source":87,"evidence":149},"Text overflows the screen on mobile and small viewports",[150,154,158],{"id":151,"by":152,"text":153},"24308815","sydd","Awesome, I really like that it works on mobile, the controls are cool. Well almost the text flows out of the screen. I'm using Firefox mobile.",{"id":155,"by":156,"text":157},"24306748","dubcanada","Interesting, tried it on my 1980x1080 monitor and I had to scroll down to read the text. It doesn't seem to adapt very well to non-square browser sizes. Also when viewing videos…",{"id":159,"by":160,"text":161},"24307164","zamadatix","It's not a resolution\u002Faspect ratio issue it's a viewport vertical size issue. Anything with less than 768 absolute CSS pixels (not display pixels) will not fit the content. This…",{"value":163,"source":87,"evidence":164},"Rendering bugs on Firefox Linux, walls disappearing and seeing through walls",[165,169],{"id":166,"by":167,"text":168},"24307082","butz","First room has serious rendering issues on Firefox (Fedora Linux) with walls disappearing and some geometry becoming lines going to some point in infinity. Otherwise atmosphere…",{"id":170,"by":171,"text":172},"24306271","froh42","Looks quite buggy, depending how I move I can see through walls, get bad textures etc.",[174,185,195],{"value":175,"source":87,"evidence":176},"Allow remapping of keys",[177,181],{"id":178,"by":179,"text":180},"24308638","rangewookie","Given that WASD is a standard in gaming I'm surprised by this approach. Do many games \u002F game engines use key position? Isn't it easier to just add key remapping so outliers can…",{"id":182,"by":183,"text":184},"24309479","codetrotter","To be really pedantic, keycodes only help when the layout is being remapped in software by the operating system. There are dozens of us that use hardware Dvorak mapping. Dozens!…",{"value":186,"source":87,"evidence":187},"Make the text typing faster or skippable without halting gameplay",[188,192],{"id":189,"by":190,"text":191},"24307502","dleslie","The typing speed is driving me nuts. I'd enjoy it a whole lot more if the descriptive text simply appeared and didn't halt the gameplay.",{"id":193,"by":190,"text":194},"24308205","I played loads of old dungeon crawlers; I still have Dungeon Hack, Lands of Lore et al installed and in my regular play list. Still feels like your demo interrupts too often.",{"value":196,"source":87,"evidence":197},"Show key controls on screen",[198,202],{"id":199,"by":200,"text":201},"24307161","paul7986","Very cool and just a suggestion ... have the keys that move the character ..overlay the game window at the bottom right of it (make it transparent and or give the user to the…",{"id":203,"by":204,"text":205},"24307970","FullyFunctional","Funny. I had to look for WASD on my Dvorak keyboard, but that said, we are a minority. My bigger recommendation would just be to quickly mention which keys are relevant as I was…",[207,219],{"value":208,"source":87,"evidence":209},"How was it built and how does performance compare to WebGL",[210,211,215],{"id":94,"by":95,"text":96},{"id":212,"by":213,"text":214},"24306545","randtrain34","I think it's pretty hard to get more performant than webgl, especially as the number of vertices increases\u002Fgeometry complexity increases.",{"id":216,"by":217,"text":218},"24308220","pcwalton","It won't be faster than WebGL in most cases. Browser CSS rendering stacks have gotten pretty fast but are not really optimized for this. In practice WebGL gives you more chances…",{"value":220,"source":87,"evidence":221},"Does it work across different browsers",[222],{"id":223,"by":213,"text":224},"24306577","Has anyone tested with different browsers? Would love to see if there are differences between rendering this in Chrome\u002FFF\u002FSafari, etc.",[226,233,237],{"value":227,"source":87,"evidence":228},"Keith Clark's CSS FPS demo",[229],{"id":230,"by":231,"text":232},"24310057","s_severus","Very nice! Reminds me of the work of Keith Clark (https:\u002F\u002Fkeithclark.co.uk\u002Flabs\u002Fcss-fps\u002F) I also experimented with 3d rendering with just CSS a few years ago. The result came out…",{"value":234,"source":87,"evidence":235},"Michael Bromley's CSS space shooter",[236],{"id":230,"by":231,"text":232},{"value":238,"source":87,"evidence":239},"CS 1.6 in browser (cs-online.club)",[240],{"id":241,"by":242,"text":243},"24316090","exabrial","Reminds me of this: http:\u002F\u002Fcs-online.club Play counterstrike 1.6 in your browser",{"comments":245,"answered":40,"key":246},13,[247,248,251],{"id":55,"text":56},{"id":249,"text":250},"24309370","maybe there is one more item you can pick up :)",{"id":252,"text":253},"24307965","Woaah.. this never occurred to me. Thank you, for the suggestion. Didn't know about \"KeyboardEvent.code\". And of course.. arrowkeys, kinda ashamed I didn't think of that!",{"commenters":255,"max_depth":41,"maker_replies":245,"first_comment_mins":256,"lifespan_hours":257},67,33,48,[259,261,265,269,273,277,279,283,285,288,291,293,296,298,301,303,307,309,310,313,316,319,320,323,326,327,328,332,333,336,338,341,344,347,348,350,353,357,360,364,366,368,372,375,378,380,381,383,385,387,390,393,395,397,399,401,402,404,407,410,412,416,418,421,423,427,428,430,432,435,438,441,445,447,449,453,457,459,461,463,465,467,472,475,477,480,482,487,489,491,493,496],[55,43,43,260,10,45],"project\u002Fneutral\u002Fidea",[262,43,17,263,264,43],"24308408","project\u002Fpositive\u002Fnone","wiz21c",[266,43,40,267,268,43],"24308875","project\u002Fmixed\u002Fdesign","OzzyB",[270,43,43,271,272,43],"24308879","other\u002Fneutral\u002Fnone","adamredwoods",[274,43,40,275,276,43],"24309356","project\u002Fmixed\u002Fexecution","raobit",[249,43,43,278,10,45],"maker\u002Fneutral\u002Fnone",[280,43,43,281,282,43],"24309706","commenter\u002Fneutral\u002Fnone","geek_at",[230,43,17,284,231,43],"project\u002Fpositive\u002Fidea",[286,43,40,267,287,43],"24310770","pwfisher",[289,43,43,271,290,43],"24323437","s_fischer",[136,45,45,292,137,43],"project\u002Fcritical\u002Fdesign",[294,45,43,281,295,43],"24307905","wilsonrocks",[252,45,43,297,10,45],"maker\u002Fpositive\u002Fdesign",[299,45,43,281,300,43],"24309055","moron4hire",[203,45,40,302,204,43],"project\u002Fneutral\u002Fdesign",[304,45,43,305,306,43],"24309107","commenter\u002Fneutral\u002Fdocs","profinger",[308,45,43,281,204,43],"24311949",[178,45,43,281,179,43],[311,45,43,281,312,43],"24308865","ChickeNES",[314,45,43,281,315,43],"24319642","rkagerer",[317,45,43,281,318,43],"24308713","kleiba",[182,45,43,281,183,43],[321,45,43,281,322,43],"24312422","tomc1985",[324,45,43,281,325,43],"24312747","p1necone",[125,38,45,292,126,43],[129,38,45,292,130,43],[329,38,43,330,331,43],"24308699","commenter\u002Fneutral\u002Fdesign","laksdjfkasljdf",[90,40,17,284,91,43],[94,334,17,335,95,43],4,"project\u002Fpositive\u002Fperformance",[58,334,43,337,10,45],"project\u002Fneutral\u002Fperformance",[339,334,43,281,340,43],"24307191","cylon13",[342,334,43,281,343,43],"24307354","Jasper_",[345,334,43,281,346,43],"24307362","andrewmcwatters",[212,334,40,337,213,43],[216,334,45,349,217,43],"project\u002Fcritical\u002Fperformance",[351,17,17,284,352,43],"24307817","eldilibra",[354,41,45,355,356,43],"24307404","project\u002Fcritical\u002Fexecution","51Cards",[358,41,45,355,359,43],"24308202","fortyseven",[361,362,45,292,363,43],"24308666",7,"tester756",[365,362,43,302,10,45],"24309142",[151,367,40,267,152,43],8,[369,367,40,370,371,43],"24309267","project\u002Fmixed\u002Fidea","i-am-curious",[373,367,45,292,374,43],"24313850","pmontra",[376,367,43,377,10,45],"24314228","maker\u002Fneutral\u002Fdesign",[223,32,40,379,213,43],"project\u002Fneutral\u002Fexecution",[166,32,45,355,167,43],[382,32,43,379,10,45],"24307245",[384,32,40,379,167,43],"24308501",[386,32,43,379,10,45],"24308762",[388,32,40,275,389,43],"24309170","Kelamir",[391,32,17,392,167,43],"24309189","project\u002Fpositive\u002Fexecution",[98,33,17,394,99,43],"project\u002Fpositive\u002Fdesign",[199,396,40,302,200,43],11,[155,398,45,292,156,43],12,[400,398,45,292,315,43],"24307136",[159,398,40,302,160,43],[403,245,45,355,389,43],"24309260",[405,245,45,355,406,43],"24309763","f311a",[408,245,17,392,409,43],"24310390","frabbit",[241,411,43,271,242,43],14,[413,414,17,284,415,43],"24312506",15,"terrycody",[102,417,17,263,103,43],16,[419,31,40,379,420,43],"24306356","smithmayowa",[73,31,43,422,10,45],"maker\u002Fneutral\u002Fexecution",[424,31,43,425,426,43],"24306615","commenter\u002Fneutral\u002Fexecution","dpcan",[79,31,43,422,10,45],[429,31,17,392,167,43],"24307091",[431,31,43,422,10,45],"24307320",[433,31,43,425,434,43],"24309786","onion2k",[436,31,43,281,437,43],"24312112","mncharity",[439,34,40,267,440,43],"24307540","kickling",[442,443,17,263,444,43],"24309124",19,"cwkoss",[140,446,40,267,141,43],20,[144,448,40,267,145,43],21,[450,451,40,275,452,43],"24306760",22,"wazoox",[454,455,45,349,456,43],"24306415",23,"selfsimilar",[458,455,43,281,456,43],"24306480",[109,460,17,284,110,43],24,[462,460,43,281,91,43],"24307335",[113,464,17,284,114,43],25,[117,466,17,263,118,43],26,[468,469,40,470,471,43],"24309078",27,"project\u002Fneutral\u002Fnone","zubairq",[473,469,40,474,444,43],"24309162","project\u002Fneutral\u002Fdocs",[170,476,45,355,171,43],28,[478,476,43,479,10,45],"24306383","maker\u002Fneutral\u002Fperformance",[481,476,45,349,171,43],"24307361",[483,484,17,485,486,43],"24308211",29,"maker\u002Fpositive\u002Fnone","gspr",[488,484,43,281,486,43],"24309705",[189,490,45,292,190,43],30,[492,490,43,377,10,45],"24307538",[494,490,17,394,495,43],"24308111","ghostbrainalpha",[193,490,45,292,190,43],[],[499,504,509,514,518,523],{"id":500,"name":501,"points":502,"category":503},"24323589","WebRTC for the Curious",667,"learning_science",{"id":505,"name":506,"points":507,"category":508},"24304623","vscode-debug-visualizer",509,"dev_tools",{"id":510,"name":511,"points":512,"category":513},"24309237","Healthcare Is Dumb",441,"web_saas",{"id":515,"name":516,"points":517,"category":508},"24323378","Vimac",375,{"id":519,"name":520,"points":521,"category":522},"24294397","Muse",266,"productivity",{"id":524,"name":525,"points":526,"category":503},"24332303","ML From Scratch",259,false,"v2",{"id":530,"name":5,"line":6,"ai":527,"cat":19,"year":12,"points":13,"comments":14,"rec":28,"s":29,"top":17,"kw":531,"maker":10,"domain":5,"tier":18,"attempts":43,"strip":532,"url":9,"mix":533,"praise":86,"objection":122,"sub":20},24305834,[23,24,25,26,27],"5335103000115033131133511353053533551313",[31,32,33,34],1794036595324]