
CSS-Powered 3D Engine (2014) - Zagitta
https://keithclark.co.uk/labs/css-fps/
======
pavlov
Around 2012, there was a startup called Famo.us who raised $30 million for a
CSS-based 3D engine. Looks like they pivoted to some kind of brand CMS
eventually:

[https://techcrunch.com/2015/11/06/nopen-
source/](https://techcrunch.com/2015/11/06/nopen-source/)

The company claimed to have a secret sauce for accelerating HTML5 graphics,
which turned out to be the matrix3d() function for CSS transforms.

~~~
KaoruAoiShiho
They pivoted again to be a figma competitor. Yeah I think these days webgl is
the way to go...

~~~
paulddraper
Totally.

[https://threejs.org/](https://threejs.org/)

~~~
yeahitslikethat
Or babylon.js

------
jzl
There's also someone who does incredible artwork using only hand-written CSS:

[http://diana-adrianne.com/purecss-francine/](http://diana-
adrianne.com/purecss-francine/)

How it works:

[http://diana-adrianne.com/how/](http://diana-adrianne.com/how/)

~~~
arc_of_descent
This is nice. But she is still using images right? It's the same. Choose a
great texture, apply it to objects.

~~~
barbecue_sauce
No, all the stuff in these images are divs.

------
andai
Love this crazy project. In Firefox I get 1 fps and crazy graphics glitches,
and in Brave I slowly float into the sky. Runs fine in Chrome though.

~~~
Lukas_Skywalker
Funnily, this runs with 20-30 FPS on a (lower end) Windows Phone with Edge
mobile. Is Edge optimized for CSS performance?

~~~
pault
Edge has always been extremely fast and competitive with other browser
engines. It really shocked me when they deprecated it because in the last year
of developing an app that only targets chrome and edge, I've never once had a
bug that was edge-only. It seems that MS was never able to get out of the
shadow of IE.

~~~
StevePerkins
Casual users are now trained to use Chrome. Because they browse on mobile more
than on desktop, and Chrome is "The Internet" icon on their phones.

Techies and power users were never going to give Edge a second glance, because
they launched without plugin support (i.e. no way to block ads).

------
lexicality
This is from 2013: [https://keithclark.co.uk/articles/creating-3d-worlds-with-
ht...](https://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-
css/)

I remember seeing his old one in 2012 and spending an 8 hour plane ride with a
bottle of vodka and a laptop trying to recreate the windows maze screensaver
the same way. (Needless to say, the vodka was the only winner)

------
sigvef
Three.js has an (old) css renderer too
[https://threejs.org/examples/#css3d_molecules](https://threejs.org/examples/#css3d_molecules)

~~~
aw3c2
Same author :)

------
chowland
Neat! Also, is it me or are those flammable barrels from Half Life 2? :)

~~~
Insanity
I think they are :p

------
reificator
Looks good, I don't know if lighting is pre baked or what but I was surprised.
EDIT: Site does mention lightmaps.

Running on Chrome on Android on a Pixel XL I did encounter the following:

* Freelook camera allowed for too fast of movement, the engine struggled to keep up. Panning back to polys that were in view less than a second before reveals that they've been unloaded the instant I looked away. This allowed me to see through walls to polys that should have been fully occluded and would have been much safer to cull. What was rendered would only seem to update if I moved either stick, and so after I started to have issues I never managed to have a correctly rendered frame again. Loading missing polys would mean bringing more unloaded polys into view. Seems like one of those bugs where I would believe it took 5 seconds or 50 hours of work to resolve.

* I did start to notice the vertical seams on the barrels on my second time through, this time with the automatic camera mode. Once I noticed them, I wasn't able to stop, it was very distracting.

EDIT: I went back in to confirm, the mobile control version does not show
vertical barrel seams, while the auto camera version does. Different builds
for each perhaps?

------
ElCapitanMarkla
Check out Keith's project's page -
[https://keithclark.co.uk/](https://keithclark.co.uk/) \- and his lastest js1k
entry -
[https://keithclark.co.uk/articles/js1k-2019-flux/final/](https://keithclark.co.uk/articles/js1k-2019-flux/final/)

He's a clever guy

------
crimsonalucard
If css can do this maybe someone can program a better layout engine with it.

------
knolan
Crashed first time on mobile safari then ran fine when reloaded. Ran pretty
smoothly on my iPhone 7 too.

------
tmilard
I think Webgl, and other JavaScript API on top of Webgl are the way to go for
3D on the Web.Like banylonjs.

This is what I use to do this : [http://free-visit.net/index.php/fr/demos/les-
frigos-de-paris](http://free-visit.net/index.php/fr/demos/les-frigos-de-paris)

------
empath75
Crashes on mobile safari

~~~
corebit
Works on my iPad.

------
osrec
I feel high quality 3D is one of the final things that we need to master in
the browser. Once this is done, I can imagine PWAs get more widespread
adoption for gaming and AR etc.

Kudos to the good people working on it!

~~~
pavlov
WebGL has been working fine for years...?

~~~
osrec
Depends on your definition of fine. In certain cases it would crash browsers
on load, in other cases it would deliver a solid 60fps. I think 3d on the web
does need a bit more polish so that it's a good experience universally.

~~~
_bxg1
The Unity engine has been outputting WebGL builds for years, and having played
a bunch of them (and deployed a few myself), I've never once seen a problem
that didn't exist in other builds of the same game

------
dfilppi
The modern equivalent of ASCII art

------
sguwwochqbib
what about the reverse: how is styling done in game engines ?

------
tclover
doesn't work with firefox

~~~
welly
Yes it does.

[https://i.imgur.com/asXYCnZ.jpg](https://i.imgur.com/asXYCnZ.jpg)

