15 ms·
Show HN: 3D first person game rendered in CSS/HTML
- froh42 6y agoLooks quite buggy, depending how I move I can see through walls, get bad textures etc.
- pantelisk 6y agoOh... if you are referring to the second level (sewers) that's actually on purpose, i have set max draw distance (geometry culling) to improve performance on mobile. It is configurable.
- froh42 6y agoNo, just in the first level. I'm running on Firefox on Linux. By coincidence I read up on WebRender on Firefox today and decided to force it turned on - suddenly the game looks nice (only glitch when looking down below the candle one of the wall segments still vanishes). But it runs a lot better with WebRender (which uses the Graphics card to composite) than without on my machine.
- smithmayowa 6y agoI bet JavaScript was thrown in the mix, can’t quite see how this was made without it, I just might be wrong though.
- pantelisk 6y agoYup, vanilla JS. Only the rendering is html/css. State, navigation etc, is all js.
- dpcan 6y agoWell, not just Vanilla, looks like three.js is in there too. That's a pretty extensive framework.
- pantelisk 6y agoNope, 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)
- butz 6y agoCouldn't figure out, how you did that in CSS. Now I know that a little bit of cheating was involved ;)
- pantelisk 6y agohehehe, https://pantelis.s3-us-west-2.amazonaws.com/0/css3d/readme/billboarding.png https://pantelis.s3-us-west-2.amazonaws.com/0/css3d/readme/b... It's billboarding! (and the css lightsources are duplicated in the webgl world, so that the worm is properly shaded)
- onion2k 6y agoI don't think it's there any more, but many versions ago three.js included a CSS renderer. It was very useful for making things line up on 3d elements of webpages.
- mncharity 6y agoMoved to examples? [1] https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer https://threejs.org/docs/#examples/en/renderers/CSS3DRendere... [2] https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer https://threejs.org/docs/#examples/en/renderers/CSS2DRendere... [3] https://threejs.org/docs/#examples/en/renderers/SVGRenderer https://threejs.org/docs/#examples/en/renderers/SVGRenderer
- flockonus 6y agoReally 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.
- arxpoetica 6y agoI agree, it could be brighter. SUPER DARK.
- laksdjfkasljdf 6y agoPretty sure that is on purpose for the theme of the game. I would probably give up if the game had OSHA approved flood lightning in a medieval dungeon prison cell.
- jonny_eh 6y agoSuper impressive! I'd love to see a write up on how it was done. Do you think this is more performant that webgl?
- pantelisk 6y agoPerformance 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 piled on top of hack (for example there is no concept of a camera, the whole world moves around you instead to simulate the camera effect!). So... webgl is still the way! This is meant to be an experiment to show what css/html is capable of!
- cylon13 6y agoTo be fair, hack on top of hack sounds exactly like regular graphics programming!
- Jasper_ 6y ago> for example there is no concept of a camera, the whole world moves around you instead to simulate the camera effect Wait until you learn what a camera is :)
- andrewmcwatters 6y ago> for example there is no concept of a camera, the whole world moves around you instead to simulate the camera effect In reality, this is how the concept of the transform stack works in most game engines, too.
- randtrain34 6y agoI think it's pretty hard to get more performant than webgl, especially as the number of vertices increases/geometry complexity increases.
- pcwalton 6y agoIt 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 for optimization, because CSS rendering has to handle lots of edge cases that games don't. For example, a CSS renderer must split self-intersecting partially-transparent 3D polygons on CPU to render correctly, whereas a game engine just tells the artists "don't do that".
- selfsimilar 6y agoI seem to have fallen through the floor. Refreshing doesn't fix.
- selfsimilar 6y agoDisabling Vimium plugin seems to have fixed it, but it was weird in that I had already told the plugin to ignore all keys for the domain. Only fully disabling the plugin worked. And it's weird that it caused me to fall through the floor...
- randtrain34 6y agoHas anyone tested with different browsers? Would love to see if there are differences between rendering this in Chrome/FF/Safari, etc.
- butz 6y agoFirst 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 and quality looks great, especially for a tech demo.
- pantelisk 6y agoOooh, I think I know why. First room uses img tags for the walls. Image tags (and canvas tags) do not play well in 3D contexts. For example they ignore depth sorting and rely on z-index. So you cannot properly depth sort them. Now you might wonder why I picked img tags for lvl1, and then divs for lvl2. Profiling showed reduced mem usage for img tags and I thought I 'd take advantage of that optimization. (premature optimization and all that I guess!)
- butz 6y agoInteresting observation. Would it be very complicated to add an option to select img or div based rendering?
- pantelisk 6y agoHere - https://pantel.is/projects/css3d/indexdiv.html https://pantel.is/projects/css3d/indexdiv.html (no option, but I force set the first level to use div tags instead of img. Curious if this fixes the FF linux issue!)
- Kelamir 6y agoThat way the issue with seeing through the walls is solved, but the bone for getting access to severs is not visible in inventory.
- pantelisk 6y agoHello 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/css. Of course there is a ton of (vanilla) JS to handle pretty much everything - but the main point is to explore what good ol' divs can do in a 3D context. It might seem a bit off, because I am not a good artist/world builder, but it contains various features such as lights and shadows calculation (rendered on divs though background images + blend modes -- try clicking on the candle). Billboarding and sprite effects, geometry culling etc, as well as scalene triangle computation (which allows us to convert actual 3d models to html elements - https://pantelis.s3-us-west-2.amazonaws.com/0/css3d/readme/triangles/css-render.png https://pantelis.s3-us-west-2.amazonaws.com/0/css3d/readme/t...) ----- If this interests you, I am giving a presentation on how it is built and lessons learnt this coming Wednesday (2nd of September) at CascadiaJS 2020 ( https://2020.cascadiajs.com/ https://2020.cascadiajs.com/ ), among a line up of awesome speakers!
- wiz21c 6y agoI've played it to the end, good times !
- OzzyB 6y ago- Brightness check [y] - Audio on/off switch [y] - Mouse axis inversion switch [x] My brain hursts using the mouse to look around that way, I'm too old to learn new tricks! Great game and proof of concept w/ CSS/HTML, you get 10/10 xD
- adamredwoods 6y agoI'll be 'at' cascadiajs. I really look forward to this.
- raobit 6y agoGreat game sir!! However i am not able to complete the first level itself I ate the food but still not able to lift the sewer in dark as it shows i am weak
- pantelisk 6y ago
- dubcanada 6y agoInteresting, 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 (such as the candle) I get a picture-in-picture icon. Quiet enjoyed the game though.
- rkagerer 6y agoThe text overflows off the right edge of my screen on my mobile too.
- zamadatix 6y agoIt's not a resolution/aspect 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 includes 1080p at 150% DPI/zoom.
- wazoox 6y agoNice job, but a bit short, I started to be interested into the adventure :)
- cyrusvaleriy 6y agoImpressive
- rado 6y agoUltima Underworld vibe
- coding123 6y agoYes that's what immediately came to mind - 40 year old's represent!
- paul7986 6y agoVery 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 option to turn it off). I quickly saw them before playing, but forget what each does.
- 51Cards 6y agoOne possible bug... playing in Firefox and I went F11 / full screen. Reached the end of the game I was locked out of all F keys in Firefox and thus couldn't restore my screen. Ended up having to kill the Firefox task. Possibly something in how you're capturing keystrokes? Not sure. Overall great job! Agree with the comments about it being a little dark.. am on a laptop in daylight and it was hard to see with everyting maxed. Looking forward to more.
- fortyseven 6y agoI was having trouble with keys mid-game, full-screened, and I couldn't exit either. But I was able to hit CTRL-W to close the tab, then I could F11 back to sanity.
- fxleach 6y agoAwesome! 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.
- dleslie 6y agoThe 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.
- pantelisk 6y agoyou can click on the textbox, and it will immediately fill the whole sentence and move on to the next one! Might be frustrating to click so much, but I wanted to recreate old timey videogame pacing
- ghostbrainalpha 6y agoI loved that we could experience it in fast mode, or get that vintage experience as well.
- dleslie 6y agoI 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.
- kickling 6y agoAmazing. Worked well on mobile, except the text went out of the screen a few time.
- coding123 6y agoVery 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 I was 10-15. Wow nice job.
- msla 6y agoGood work, but I guess I'm too old-school: Mouse look and WASD give me fits.
- eldilibra 6y agoGreat demo! This was super inspiring. I haven't touched game dev stuff in a couple of years (after a bit of a Unity rabbit hole before that). Just might have to get back into tinkering after playing through this...
- s_gourichon 6y agoThanks 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 this. # Best solution Game programmer always mean "the group of physically-positioned keys that happen to be labelled WASD on the programmer's keyboard", not "whatever keys that are actually labelled WASD on the player's keyboard". So, wherever possible, use an API that refers to key position, not key symbol. This is possible in most programming environments, e.g. in Javascript using https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEve... # Alternative solution Alternatively, use keys that are stable across most common Latin keyboards layout, which means no AMQWYZ. ESDF is fine, as are RDFG, TFGH, or the traditional IJKL (see https://en.wikipedia.org/wiki/Arrow_keys https://en.wikipedia.org/wiki/Arrow_keys for more). If you want to be kind to Dvorak, Bepo, Colemak and other users, prefer the first solution! https://en.wikipedia.org/wiki/Keyboard_layout#QWERTY-based_Latin-script_keyboard_layouts https://en.wikipedia.org/wiki/Keyboard_layout#QWERTY-based_L...
- wilsonrocks 6y agoI did not know about key codes and physical position! Thank you!
- pantelisk 6y agoWoaah.. 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!
- moron4hire 6y ago`KeyboardEvent.code` used to be the only way we had to read key events in JS. They `key` field didn't come out until about 5 years ago.
- FullyFunctional 6y agoFunny. 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 left wondering if I was missing something.
- gspr 6y agoITT: a super positive and open OP :-)
- gspr 6y agoPeople seem to think I was being sarcastic. I was not.
- zadkey 6y agoKind of reminded me of Elder Scrolls 1 : Arena.
- tester756 6y agoDamn I didn't manage to hack it and make that game box on the full screen I think it'd be way better user experience if this window wasn't that small is the size performance related?
- pantelisk 6y agoit should be possible - you can check how it is rendered on mobile portrait and landscape modes (which is basically fullscreen). However, more intricate sizing might be hard to achieve since I 'm using pixel values so some things will probably look terrible in higher res. (this isn't the same as upscaling res let's say in canvas or webgl - it would be more like viewing an old website in a newer bigger monitor! But in theory it can be improved :) )
- sydd 6y agoAwesome, 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.
- i-am-curious 6y agoAgreeed. I finished the game on mobile ;) Though the story could use some work !
- pmontra 6y agoI can look around on mobile but I didn't figure out how to move. I tried tapping and double tapping everything but nothing happened. Only some "object is out of reach".
- pantelisk 6y agoYou can move by swiping your finger within the purple-like circle at the right part of the screen. That circle simulates a joystick for character movement. And you can look around by swiping anywhere else on the screen!
- tsarlatanos 6y agoGreat work, very impressive and creative project.
- zubairq 6y agoHow do you get out of the dungeon?
- cwkoss 6y agoHere is a rot13 'walkthrough" of what I did to get to the the 'credits' message (decode per-line if you don't want to reveal subsequent steps) rkgvathvfu pnaqyr rng sbbq trg obar hfr obar ba frjre tengr tb vagb frjre Cneg 2 fgnl fgvyy gjvpr ng yrrpu teno gbepu ba tebhaq hfr gbepu gb trg guvatl sebz fxryyrgba hfr gbepu ba qbbe
- cwkoss 6y agoVery impressive, great work! Got to the current end, looking forward to more :-D
- Kelamir 6y agoThis is cool! Thank you for making this. The game gets stuck on Firefox, Linux, at the scene "Suddenly, a devilish creature appears...". Nothing appears, and I can no longer look around, just walk.
- killa_kyle 6y agonice! played until the ending so far.
- nicetryguy 6y agoGot the torch in the hole! Holding the mouse button to look around is awkward, but it was fun!
- terrycody 6y agoMan, this is really promising and bring back the 80s memories, btw, do you think this will be the future of browser game? How about webGL? Or web assembly?
- exabrial 6y agoReminds me of this: http://cs-online.club http://cs-online.club Play counterstrike 1.6 in your browser