8 ms·
CSS-Powered 3D Engine (2014)
- andai 8y agoLove 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.
- coldtea 8y agoShouldn'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.
- robin_reala 8y agoWebRender 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 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.
- coldtea 8y agoThat's the new Rust based render engine?
- robin_reala 8y agoSorry, 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-fps-how-webrender-gets-rid-of-jank/ 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.
- coldtea 8y agoThanks! 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?
- robin_reala 8y agoI’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.
- styfle 8y agoThere is one project I know of that is bringing webrender to desktop apps: https://news.ycombinator.com/item?id=18312983 https://news.ycombinator.com/item?id=18312983
- twic 8y agoIn Firefox it's like a particularly unpleasant salvia trip.
- AndrewKemendo 8y agoWorks perfectly on safari (webkit) browsers for me.
- Lukas_Skywalker 8y agoFunnily, this runs with 20-30 FPS on a (lower end) Windows Phone with Edge mobile. Is Edge optimized for CSS performance?
- galfarragem 8y agoFunnily, it's playable on safari/ipad mini 1st generation.
- pault 8y agoEdge 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 8y agoCasual 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).
- qpery 8y agoThe 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.
- lettergram 8y agoOn Firefox mobile I had no problem
- srgpqt 8y agoOn iOS, all browsers (including firefox) use the OS’s Webview (webkit) as mandated by apple. So basically every browser are Safari reskins.
- theon144 8y agoWin10, 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".
- tasty_freeze 8y agoIt 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.
- rzzzt 8y agoThe choppiness decreases tremendously if I wiggle the mouse around during the demo (clicked on the auto-running third link).
- empath75 8y agoCrashes on mobile safari
- corebit 8y agoWorks on my iPad.
- knolan 8y agoCrashed first time on mobile safari then ran fine when reloaded. Ran pretty smoothly on my iPhone 7 too.
- pavlov 8y agoAround 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 8y agoThey pivoted again to be a figma competitor. Yeah I think these days webgl is the way to go...
- paulddraper 8y agoTotally. https://threejs.org/ https://threejs.org/
- yeahitslikethat 8y agoOr babylon.js
- pjmlp 8y agoWhile 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.
- flanbiscuit 8y agoFor 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.
- max_ 8y agoCurious to know about the limitations. The demos seem to run smoothly & are pretty impressive IMHO.
- 8y ago
- sigvef 8y agoThree.js has an (old) css renderer too https://threejs.org/examples/#css3d_molecules https://threejs.org/examples/#css3d_molecules
- aw3c2 8y agoSame author :)
- osrec 8y agoI 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 8y agoWebGL has been working fine for years...?
- osrec 8y agoDepends 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.
- pavlov 8y ago"Mostly works, sometimes doesn't" is the perennial state of accelerated 3D on the desktop. WebGL just exposes it as-is to JavaScript apps.
- _bxg1 8y agoThe 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
- pjmlp 8y agoNot 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.
- calibas 8y agoI'm hoping WebAssembly will get us there.
- chowland 8y agoNeat! Also, is it me or are those flammable barrels from Half Life 2? :)
- Insanity 8y agoI think they are :p
- jzl 8y agoThere'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/
- marvindanig 8y agoAnd there is this one who makes children's book using css3: https://bubblin.io/cover/abcd-animal-book-by-judith-neumann#frontmatter https://bubblin.io/cover/abcd-animal-book-by-judith-neumann#... How: https://blog.codepen.io/2016/01/08/abcd-animal-book/ https://blog.codepen.io/2016/01/08/abcd-animal-book/
- pault 8y agoI clicked expecting some cartoonish 2D illustrations, and then spent a few minutes clicking around the DOM in awe. o_O
- jjordan 8y agoMeanwhile, I can't get a box to line up properly.
- cazum 8y agoJust 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.
- Yetanfou 8y agoI 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.
- btbuildem 8y agoTIL border-radius has a bit more to offer than I knew
- sguwwochqbib 8y agowhat about the reverse: how is styling done in game engines ?
- spork12 8y agoI don't think I would call this a 3D "engine". Looking at the source it's just a bunch of static images with css animations. It's pretty though :)
- lexicality 8y agoThis is from 2013: https://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/ 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)
- reificator 8y agoLooks 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?
- tclover 8y agodoesn't work with firefox
- welly 8y agoYes it does. https://i.imgur.com/asXYCnZ.jpg https://i.imgur.com/asXYCnZ.jpg
- crimsonalucard 8y agoIf css can do this maybe someone can program a better layout engine with it.
- dfilppi 8y agoThe modern equivalent of ASCII art
- tmilard 8y agoI 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
- ElCapitanMarkla 8y agoCheck 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