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/

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

Secret sauce was basically every element absolute positioned, with an event loop that was diffing a CSS transform tree each tick. Worked pretty well, but was basically a workaround for browser performance issues that ended up being fixed anyways. (Was hired by them to do their React component library long ago)

It’s an awfully big stretch to hype that up as some kind of direct GPU access, as in this quote from the TechCrunch article about the pivot:

“By bypassing the CSS and HTML renderers to talk directly to the graphics processing unit, Famo.us could supposedly make 3D physics and other visual wizardry common with native games run smoothly for apps in a mobile or web browser.”

Journalists always simplify things to the point they become meaningless.

But avoiding DOM layout and its performance issues was relatively innovative at the time. It wasn't unheard of, but no one had really turned it into a framework like they did.

You can't blame journalists when the CEO of the company was actively spouting this "interfaces directly with the GPU" bullshit to describe multiplying some matrices in JS.

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

Totally.

https://threejs.org/

Or babylon.js

While WebGL 2.0 is already quite cool, having the missing features of GL ES 3.x or eventually WebGPU would be quite nice.

I still see too many WebGL demos that struggle on devices where native GL ES doesn't have any issues.

This article is hilarious. Or depressing. Maybe both.

"During the company’s debut on stage at TechCrunch Disrupt SF 2012 Startup Battlefield competition, rather than giving a traditional pitch, Famo.us CEO Steve Newcomb spent his whole six minutes asking people to imagine what could be done if apps were 3D instead of 2D and demoing a floating periodic table. [...] just days earlier, the team made its first pivot away from what it called BenchRank, a ranking system for people, into an HTML5 development platform."

"When TechCrunch reporter Anthony Ha visited [their offices], [Famo.us's CEO] pointed to some desks that seemed adequate, but insisted they would be replaced soon because they weren’t the right kind of wood."

It is now 2019 and the front page of famous.co has a big video and a pre-order button. One begins to wonder if this is an actual company, or an excuse to get a lot of VC so its CEO and a few lucky employees can afford to have nice places to live in SF.

For some reason I remember famo.us as being some kind of mobile browser content render replacement (instead of using html+css), not a 3D engine.

Curious to know about the limitations.

The demos seem to run smoothly & are pretty impressive IMHO.

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

http://diana-adrianne.com/purecss-francine/

How it works:

http://diana-adrianne.com/how/

Meanwhile, I can't get a box to line up properly.

And there is this one who makes children's book using css3:

https://bubblin.io/cover/abcd-animal-book-by-judith-neumann#...

How: https://blog.codepen.io/2016/01/08/abcd-animal-book/

Just a warning to mobile users:

The upper link can absolutely grind Android Chrome to a halt.

Force closing the app doesn't fix it either, as chrome reopens the last tab you had open, so the only way out is to completely wipe the browser data which is a little annoying.

I tried it on Chrome, Lightning, Privacy Browser, Firefox, Fennec en Firefox Klar ('always in privacy mode'), it works fine on all of these. Tested on Android 8.1 on a Xiaomi Redmi Note 5.

I clicked expecting some cartoonish 2D illustrations, and then spent a few minutes clicking around the DOM in awe. o_O

TIL border-radius has a bit more to offer than I knew

Strangely enough the image looks far better - as in more or less like it should - in Firefox (67.0a1) while she looks like Freddy Krueger's offspring (wrong colours, translucent areas which should be opaque or the other way around, etc) in Chromium (72.0 build 3626), both on Debian (Sid). I say this is strange as the author explicitly mentions she only expects it to look as it should on Chrome.

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

No, all the stuff in these images are divs.

Nope -- this is the HTML equivalent of Japanese Excel art.

She is not, that's the whole point.

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.

In Firefox it's like a particularly unpleasant salvia trip.

Win10, FF 66, I get what seems close enough to 60fps, but some graphics glitches too, mostly the texture around the barrels which doesn't go all the way "around".

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

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.

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

The problem with Edge is that they wrapped the engine, which was great, inside a UWP app, which are known to be stupidly ugly and stupidly sluggish. That's what killed it. Had they chosen Win32, it wouldn't have died. But I guess we will never know.

Funnily, it's playable on safari/ipad mini 1st generation.

It is a bit choppy for me in FF 65, running on a 7 year old PC under windows 7, with a very old and low end GPU. Not sure why you see 1 fps.

The choppiness decreases tremendously if I wiggle the mouse around during the demo (clicked on the auto-running third link).

Shouldn't Firefox be prioritizing fixing those things instead of BS moonshot projects they do (not talking about Rust, but various non-browser pivots).

They might be "different teams" doing each, but they all have finite resources to pay them.

WebRender currently (as of the last 2 weeks) renders this correctly, but slowly. Now that correctness is in, they can start looking at speed. Associated bug is https://bugzilla.mozilla.org/show_bug.cgi?id=1525420 , but it’s not a blocker for launching WebRender in the first place.

And no, this sort of thing isn’t particularly high priority. If lots of websites used these technologies to this extent then it’d be higher up the priority list I’m sure.

That's the new Rust based render engine?

Sorry, yes, it’s the Rust GPU rendering (not layout) engine that’s being introduced into release Firefox at the moment. Lin Clark wrote a great article on it 18 months ago: https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-f... . It should eventually be considerably faster than it is at the moment, but obviously there’s been a bunch of performance work in the previous Firefox rendering engine so currently it’s a clean codebase that’s moderately faster.

Thanks!

That's nice -- does that replace all rendering parts with the new Rust (servo?) equivalents?

Or are some parts still in the C++ codebase? (rendering related, not the UI code/JS engine, etc).

The diagram on the link seems to imply this is the last part! Does that mean there's some drawing library (akin to Skia) written in Rust used by WebRender too?

There is one project I know of that is bringing webrender to desktop apps: https://news.ycombinator.com/item?id=18312983

I’m just an interested observer so handful of salt, but I believe WebRender replaces Moz2D and the old drawing libraries (which included Skia). Honestly, at this point I’m going to defer to pcwalton or whoever’s on HN that’s closer to the project than me.

Works perfectly on safari (webkit) browsers for me.

On Firefox mobile I had no problem

On iOS, all browsers (including firefox) use the OS’s Webview (webkit) as mandated by apple. So basically every browser are Safari reskins.

This is from 2013: https://keithclark.co.uk/articles/creating-3d-worlds-with-ht...

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)

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

Same author :)

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

I think they are :p

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?

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

He's a clever guy

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

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

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

Crashes on mobile safari

Works on my iPad.

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!

WebGL has been working fine for years...?

Not really.

Since the browsers black list GPUs and platforms where they have issues, as author you don't have any guarantee how the users will get to see your site.

Additional not all GL ES features are exposed to WebGL.

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.

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

"Mostly works, sometimes doesn't" is the perennial state of accelerated 3D on the desktop. WebGL just exposes it as-is to JavaScript apps.

I'm hoping WebAssembly will get us there.

The modern equivalent of ASCII art

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

doesn't work with firefox

Yes it does.

https://i.imgur.com/asXYCnZ.jpg