6 ms·

Show HN: First person 3D environment using CSS 3D Transforms for rendering

94 points by ath92 7y ago

gitgud 7y ago
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!
- _bxg1 7y ago
  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
iKlsR 7y ago
Related https://keithclark.co.uk/labs/css-fps/ https://keithclark.co.uk/labs/css-fps/
leshokunin 7y ago
I can’t do anything on mobile. Using safari on iOS.
- indrax 7y ago
  It uses wasd to move, if that helps.
  - SuperPaintMan 7y ago
    Worked fine in Firefox Mobile on my BlackBerry Key2. That surprised me!
    - ath92 7y ago
      Cool to hear that it works on mobile for you, I'll try to add some controls for phones without keyboards as well.
      - dTal 7y ago
        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.
    - dTal 7y ago
      How did you look around? Do Blackberries have mice?
voldacar 7y ago
very cool. you should write a quake clone like this
core-questions 7y ago
Nice vaporwave aesthetic in there. Add a fountain with some particles!
- numlock86 7y ago
  Yes, and don't forget a rotating plane with an image on it, preferably showing off high-tech processing such as alpha-blending and soft specularity. It will look like the future, but from the past.
  - ath92 7y ago
    Great ideas, will see what I can do when I get back from work :)
_bxg1 7y ago
Fun fact, Three.js (the go-to high-level 3D library for JavaScript) actually has a CSS3DRenderer you can slot in for any arbitrary Three.js project: https://threejs.org/examples/#css3d_molecules https://threejs.org/examples/#css3d_molecules
- gfxgirl 7y ago
  Not for any arbitrary Three.js project. the css3drenderer is severely limited
vlovich123 7y ago
Very cool although noticing lots of tearing on Chrome w/ an nVidia GPU on Windows 10.
deleted 7y ago
[deleted]
mleonhard 7y ago
The video on the TV behind the door: https://www.youtube.com/watch?v=ICcFMBzOnYs https://www.youtube.com/watch?v=ICcFMBzOnYs
jmiskovic 7y ago
You triggered some strange bug in Firefox. I'm getting many notifications that this site captured mouse pointer long after I've closed it.
verytrivial 7y ago
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 https://youtu.be/z4FGzE4endQ (this seems to be a super-cut which will annoy the writers, bit still)
- ath92 7y ago
  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).
clarry 7y ago
Yay, view keeps drifting up & left when mouse is grabbed. Looks like Mozilla can't ever seem to get this ancient bug fixed :(
calcar 7y ago
quite heavy
rhacker 7y ago
I'm a bit confused... is this just for the awesome factor that you can do this with CSS?
- ath92 7y ago
  yes

94 points by ath92 7y ago

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!

_bxg1 7y ago
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

iKlsR 7y ago

Related https://keithclark.co.uk/labs/css-fps/ https://keithclark.co.uk/labs/css-fps/

leshokunin 7y ago

I can’t do anything on mobile. Using safari on iOS.

indrax 7y ago
It uses wasd to move, if that helps.
- SuperPaintMan 7y ago
  Worked fine in Firefox Mobile on my BlackBerry Key2. That surprised me!
  - ath92 7y ago
    Cool to hear that it works on mobile for you, I'll try to add some controls for phones without keyboards as well.
    - dTal 7y ago
      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.
  - dTal 7y ago
    How did you look around? Do Blackberries have mice?

voldacar 7y ago

very cool. you should write a quake clone like this

core-questions 7y ago

Nice vaporwave aesthetic in there. Add a fountain with some particles!

numlock86 7y ago
Yes, and don't forget a rotating plane with an image on it, preferably showing off high-tech processing such as alpha-blending and soft specularity. It will look like the future, but from the past.
- ath92 7y ago
  Great ideas, will see what I can do when I get back from work :)

_bxg1 7y ago

Fun fact, Three.js (the go-to high-level 3D library for JavaScript) actually has a CSS3DRenderer you can slot in for any arbitrary Three.js project: https://threejs.org/examples/#css3d_molecules https://threejs.org/examples/#css3d_molecules

gfxgirl 7y ago
Not for any arbitrary Three.js project. the css3drenderer is severely limited

vlovich123 7y ago

Very cool although noticing lots of tearing on Chrome w/ an nVidia GPU on Windows 10.

deleted 7y ago

[deleted]

mleonhard 7y ago

The video on the TV behind the door: https://www.youtube.com/watch?v=ICcFMBzOnYs https://www.youtube.com/watch?v=ICcFMBzOnYs

jmiskovic 7y ago

You triggered some strange bug in Firefox. I'm getting many notifications that this site captured mouse pointer long after I've closed it.

verytrivial 7y ago

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 https://youtu.be/z4FGzE4endQ (this seems to be a super-cut which will annoy the writers, bit still)

ath92 7y ago
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).

clarry 7y ago

Yay, view keeps drifting up & left when mouse is grabbed. Looks like Mozilla can't ever seem to get this ancient bug fixed :(

calcar 7y ago

quite heavy

rhacker 7y ago

I'm a bit confused... is this just for the awesome factor that you can do this with CSS?

ath92 7y ago
yes