
Show HN: 3D first person game rendered in CSS/HTML - pantelisk
https://pantel.is/projects/css3d/
======
pantelisk
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/t...](https://pantelis.s3-us-
west-2.amazonaws.com/0/css3d/readme/triangles/css-render.png))

\-----

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!

~~~
raobit
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
maybe there is one more item you can pick up :)

~~~
geek_at
or burn

------
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 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/KeyboardEve...](https://developer.mozilla.org/en-
US/docs/Web/API/KeyboardEvent/code)

# 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_L...](https://en.wikipedia.org/wiki/Keyboard_layout#QWERTY-based_Latin-
script_keyboard_layouts)

~~~
rangewookie
Given that WASD is a standard in gaming I'm surprised by this approach. Do
many games / game engines use key position? Isn't it easier to just add key
remapping so outliers can configure freely?

~~~
ChickeNES
Yes, just allowing the keys to be remapped is simpler and would serve all
users with non-standard setups, not just the handful that use alternative
keyboard layouts.

~~~
rkagerer
I'm surprised most Dvorakers don't already tend to have a utility installed to
let them remap temporarily or for an application. This must be a common
occurrence?

------
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.

~~~
laksdjfkasljdf
Pretty 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.

------
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 I was 10-15. Wow nice job.

------
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?

~~~
pantelisk
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 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!

~~~
Jasper_
> 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 :)

------
eldilibra
Great 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...

------
51Cards
One 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
I 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.

------
tester756
Damn 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
it 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
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.

~~~
pmontra
I 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
You 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!

------
randtrain34
Has anyone tested with different browsers? Would love to see if there are
differences between rendering this in Chrome/FF/Safari, etc.

~~~
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 and quality looks great, especially for a tech demo.

~~~
pantelisk
Oooh, 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
Interesting observation. Would it be very complicated to add an option to
select img or div based rendering?

~~~
pantelisk
Here -
[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
That way the issue with seeing through the walls is solved, but the bone for
getting access to severs is not visible in inventory.

------
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.

------
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 option to turn it off). I quickly saw them before
playing, but forget what each does.

------
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 (such as the candle) I get a picture-in-picture icon.

Quiet enjoyed the game though.

~~~
zamadatix
It'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.

------
Kelamir
This 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.

~~~
frabbit
Works for me on Linux with Firefox 70.

------
exabrial
Reminds me of this: [http://cs-online.club](http://cs-online.club) Play
counterstrike 1.6 in your browser

------
terrycody
Man, 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?

------
tsarlatanos
Great work, very impressive and creative project.

------
smithmayowa
I bet JavaScript was thrown in the mix, can’t quite see how this was made
without it, I just might be wrong though.

~~~
pantelisk
Yup, vanilla JS. Only the rendering is html/css. State, navigation etc, is all
js.

~~~
dpcan
Well, not just Vanilla, looks like three.js is in there too. That's a pretty
extensive framework.

~~~
pantelisk
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)

~~~
butz
Couldn't figure out, how you did that in CSS. Now I know that a little bit of
cheating was involved ;)

~~~
pantelisk
hehehe, [https://pantelis.s3-us-
west-2.amazonaws.com/0/css3d/readme/b...](https://pantelis.s3-us-
west-2.amazonaws.com/0/css3d/readme/billboarding.png)

It's billboarding! (and the css lightsources are duplicated in the webgl
world, so that the worm is properly shaded)

------
kickling
Amazing. Worked well on mobile, except the text went out of the screen a few
time.

------
cwkoss
Very impressive, great work! Got to the current end, looking forward to more
:-D

------
msla
Good work, but I guess I'm too old-school: Mouse look and WASD give me fits.

------
nicetryguy
Got the torch in the hole!

Holding the mouse button to look around is awkward, but it was fun!

------
wazoox
Nice job, but a bit short, I started to be interested into the adventure :)

------
selfsimilar
I seem to have fallen through the floor. Refreshing doesn't fix.

~~~
selfsimilar
Disabling 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...

------
rado
Ultima Underworld vibe

~~~
coding123
Yes that's what immediately came to mind - 40 year old's represent!

------
zadkey
Kind of reminded me of Elder Scrolls 1 : Arena.

------
killa_kyle
nice! played until the ending so far.

------
zubairq
How do you get out of the dungeon?

~~~
cwkoss
Here 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

------
froh42
Looks quite buggy, depending how I move I can see through walls, get bad
textures etc.

~~~
pantelisk
Oh... 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
No, 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.

------
gspr
ITT: a super positive and open OP :-)

~~~
gspr
People seem to think I was being sarcastic. I was not.

------
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.

~~~
pantelisk
you 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

~~~
dleslie
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.

