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

#1

Post by ath92 » Thu, Mar 05, 2020, 8:45 PM UTC

Show HN: First person 3D environment using CSS 3D Transforms for rendering
affectionate-minsky-072f4c.netlify.com

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

#2

Post by gitgud » Thu, Mar 05, 2020, 11:18 PM UTC

Pretty cool, it seems to use the DOM directly instead of a 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!

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

#3

Post by iKlsR » Fri, Mar 06, 2020, 2:13 AM UTC

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

#4

Post by tetrisgm » Fri, Mar 06, 2020, 2:37 AM UTC

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

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

#5

Post by voldacar » Fri, Mar 06, 2020, 2:59 AM UTC

very cool.

you should write a quake clone like this

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

#6

Post by indrax » Fri, Mar 06, 2020, 3:36 AM UTC

tetrisgm wrote: post #4

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

It uses wasd to move, if that helps.

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

#7

Post by _bxg1 » Fri, Mar 06, 2020, 5:19 AM UTC

gitgud wrote: post #2

Pretty cool, it seems to use the DOM directly instead of a 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!

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

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

#8

Post by core-questions » Fri, Mar 06, 2020, 5:23 AM UTC

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

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

#9

Post by _bxg1 » Fri, Mar 06, 2020, 5:24 AM UTC

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

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

#10

Post by vlovich123 » Fri, Mar 06, 2020, 6:21 AM UTC

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