Show HN: First person 3D environment using CSS 3D Transforms for rendering(affectionate-minsky-072f4c.netlify.com)
affectionate-minsky-072f4c.netlify.com
Show HN: First person 3D environment using CSS 3D Transforms for rendering
https://affectionate-minsky-072f4c.netlify.com
25 comments
You triggered some strange bug in Firefox. I'm getting many notifications that this site captured mouse pointer long after I've closed it.
Nice vaporwave aesthetic in there. Add a fountain with some particles!
So close! Enticing checkerboard pattern and some unshaded wood texturing then a hard crash for Firefox Android 68.5.0. Evokes the early 90s which reminds me that anyone who hasn't seen the "Community" episode with the VR parody must watch it immediately: https://youtu.be/z4FGzE4endQ (this seems to be a super-cut which will annoy the writers, bit still)
Interesting that it crashes, this uses nothing but normal html & css for the actual rendering. I have noticed that on machines with slower graphics hardware, there are a lot of glitches (I think it has to do with low VRAM, but not entirely sure).
The video on the TV behind the door: https://www.youtube.com/watch?v=ICcFMBzOnYs
I can’t do anything on mobile. Using safari on iOS.
It uses wasd to move, if that helps.
Worked fine in Firefox Mobile on my BlackBerry Key2. That surprised me!
How did you look around? Do Blackberries have mice?
Cool to hear that it works on mobile for you, I'll try to add some controls for phones without keyboards as well.
In my case the issue is not lack of keyboard but lack of mouse; I can translate around fine, but there's no way to look around.
My setup (Android smartphone with a physical keyboard) is probably very rare, however.
My setup (Android smartphone with a physical keyboard) is probably very rare, however.
[deleted]
Very cool although noticing lots of tearing on Chrome w/ an nVidia GPU on Windows 10.
very cool.
you should write a quake clone like this
you should write a quake clone like this
quite heavy
Yay, view keeps drifting up & left when mouse is grabbed. Looks like Mozilla can't ever seem to get this ancient bug fixed :(
Pretty cool, it seems to use the DOM directly instead of a <canvas> element, amazing it can perform as well as it does with constant css and element manipulation (notoriously slow)
I like that there's collision detection too!
I like that there's collision detection too!
Element manipulation is normally slow because of layout computations, but explicit transforms remove the element from the layout flow (it doesn't affect nor get affected by the sizing and content of other elements), cutting nearly all of that cost. Also, in most browsers explicit transforms get computed on the GPU.
So for this type of case there isn't nearly as much going on between the DOM and the raw graphics code as you might think
So for this type of case there isn't nearly as much going on between the DOM and the raw graphics code as you might think