3 ms·

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 sc

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/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 ago
I'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 ago
I'll be 'at' cascadiajs. I really look forward to this.
raobit 6y ago
Great 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
  maybe there is one more item you can pick up :)
  - geek_at 6y ago
    or burn
s_severus 6y ago
Very nice! Reminds me of the work of Keith Clark (https://keithclark.co.uk/labs/css-fps/ https://keithclark.co.uk/labs/css-fps/) I also experimented with 3d rendering with just CSS a few years ago. The result came out pretty nice (desktop only I'm afraid): https://www.michaelbromley.co.uk/experiments/css-space-shooter/ https://www.michaelbromley.co.uk/experiments/css-space-shoot...
pwfisher 6y ago
This is super cool! Love it. Love that the layout is responsive and has mobile, tablet and desktop versions in good web UI style. (FYI, if you close the sidebar and resize to desktop, it's missing.)
s_fischer 6y ago
I just looked up the topics for cascadiajs and it looks awesome! I was disappointed to find out that all the tickets are sold out even though it's a virtual conference. I know you are just a speaker, but do you have any insight into why there's a hard cap on attendees? Is it simply to avoid potential infrastructure problems that could occur from delivering live video content to an unforseen number of attendees?

wiz21c 6y ago

I'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 ago

I'll be 'at' cascadiajs. I really look forward to this.

raobit 6y ago

Great 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
maybe there is one more item you can pick up :)
- geek_at 6y ago
  or burn

s_severus 6y ago

Very nice! Reminds me of the work of Keith Clark (https://keithclark.co.uk/labs/css-fps/ https://keithclark.co.uk/labs/css-fps/) I also experimented with 3d rendering with just CSS a few years ago. The result came out pretty nice (desktop only I'm afraid): https://www.michaelbromley.co.uk/experiments/css-space-shooter/ https://www.michaelbromley.co.uk/experiments/css-space-shoot...

pwfisher 6y ago

This is super cool! Love it. Love that the layout is responsive and has mobile, tablet and desktop versions in good web UI style. (FYI, if you close the sidebar and resize to desktop, it's missing.)

s_fischer 6y ago

I just looked up the topics for cascadiajs and it looks awesome! I was disappointed to find out that all the tickets are sold out even though it's a virtual conference. I know you are just a speaker, but do you have any insight into why there's a hard cap on attendees? Is it simply to avoid potential infrastructure problems that could occur from delivering live video content to an unforseen number of attendees?