23 ms·

Mozilla Webrender: rendering any webpage at several hundred FPS

646 points by bpierre 11y ago

erickt 11y ago
Cool! I run this meetup. This video was taken at the Bay Area Rust meetup [1] last week. We also had two other speakers that also gave great talks: Sean Griffin, on Diesel, a safe and extensible ORM [2] Alan Jeffery, on Parsell, a streaming parser written for WebAssembly [3] [1]: http://www.meetup.com/Rust-Bay-Area/events/219697075/ http://www.meetup.com/Rust-Bay-Area/events/219697075/ [2]: http://diesel.rs http://diesel.rs [3]: https://github.com/asajeffrey/parsell https://github.com/asajeffrey/parsell
- MrBuddyCasino 11y ago
  Looks nice, we do similar videos of our meetups (example: https://www.youtube.com/watch?v=35UVffLINkc https://www.youtube.com/watch?v=35UVffLINkc). What gear do you use?
  - erickt 11y ago
    We have our meetups at Mozilla's San Francisco office, so we piggy back on their AV equipment. Unfortunately I don't know what that they use. However, there is an IRC channel irc://irc.mozilla.org/#airmozilla that I'm sure has some folks that could answer your questions.
- jhasse 11y ago
  Suggestion for the video: I would prefer it, if the presenters screen was fullscreen. I'm not interested in him talking or the background image. Besides that: Thanks for these meetups and the video footage of it :)
- vardump 11y ago
  So Parsell saves state between received chunks. Why can't it swap execution contexts, aka stacks? In other words, use coroutines and simply yield between chunks instead. Wouldn't that be more efficient and simpler? Is there some aspect in Rust that makes coroutines less desirable than (manually) saving and restoring state?
mnemonik 11y ago
I think these are the slides: http://pcwalton.github.io/slides/webrender-talk-022016/ http://pcwalton.github.io/slides/webrender-talk-022016/
dheera 11y ago
Is there reasonably-priced hardware that can do several hundreds of FPS? Preferably something with a built-in battery and Wi-Fi or bluetooth? I'd really love to build a volumetric 3D display by spinning the thing. I tried spinning my phone but the hardware screen refresh rate was way too low to do anything impressive even if processing power wasn't the bottleneck.
- corysama 11y ago
  There are a few gaming monitors that can do 200fps. Maybe even 240. I don't think any mobile devices go above 60. Maybe that'll change as mobile VR picks up.
  - mrob 11y ago
    I only such monitor I know of is the Acer Predator Z35, which is advertised as 144Hz but can usually be overclocked to 200Hz. The only "240Hz" LCDs currently available interpolate from lower input refresh rates. I'd love to see a true 240Hz monitor, or even higher.
    - 90minuteAPI 11y ago
      I believe this is a problem of the signaling as well. Even the new Thunderbolt 3's display mode is still stuck with DisplayPort 1.2 signaling.
paulrouget 11y ago
Video from the beginning: https://air.mozilla.org/bay-area-rust-meetup-february-2016/#@01m24s https://air.mozilla.org/bay-area-rust-meetup-february-2016/#... "We've removed painting from the bottleneck in Servo" More info about WebRender: https://github.com/servo/webrender/wiki https://github.com/servo/webrender/wiki If you want try it at home, you "just" need to build servo: http://github.com/servo/servo http://github.com/servo/servo (git clone, then ./mach build -r) and run servo with webrender: ./mach run -r -- -w http://wikipedia.org http://wikipedia.org (edit: removed the bit about chrome's gpu rasterization - see pcwalton's comment below)
- gregwtmtno 11y ago
  Re the building, if you're on mac with homebrew, it should be as easy as: brew install --HEAD servo/servo/servo and servo -w http://wikipedia.org http://wikipedia.org Keep in mind though, servo has a long way to go.
  - haddr 11y ago
    Is it a compiled bottle? I remember last time trying Rust I had to wait maybe half an ahour to compile everything. I think it was the time when servo was compiling their own version of Rust :)
    - Manishearth 11y ago
      Servo now downloads a Rust snapshot. But you still have to compile everything else needed to build Servo.
  - markus2012 11y ago
    What about for using it as a headless browser with javascript and Rust manipulation of the DOM? We have a http proxy that would like to analyze html responses and rewrite parts of the page. Is servo ready for that or should we use something like PhantomJS? Thanks!
    - 11y ago
the_mitsuhiko 11y ago
Why can mozilla not put these videos on youtube :-/ air is horrible. Can't watch without downloading.
- jhasse 11y ago
  YouTube has quite a few bugs in Firefox. I actually prefer air, what's wrong with it?
  - idbentley 11y ago
    YouTube works fine in Firefox. I use it all the time. It works well in mobile firefox as well.
    - jhasse 11y ago
      I was affected by this bug for example: https://news.ycombinator.com/item?id=10877810 https://news.ycombinator.com/item?id=10877810
      - cpeterso 11y ago
        That bug was YouTube's fault.
        jhasse 11y ago
        That's why I said that YouTube has quite a few bugs in Firefox ;)
    - ossreality 11y ago
      really, you use Firefox and you use YouTube a lot? are there more people like you???
  - coldtea 11y ago
    Outside of places like the us? Crappy streaming for starters.
deleted 11y ago
[deleted]
my5thaccount 11y ago
Will this work with d3, because d3 is pretty slow with a lot of elements and it would be quite nice if we could get gaming performance in the browser.
- snuxoll 11y ago
  I don't recall if d3 uses SVG or canvas off the top of my head, I haven't done much more than toy with it. If it uses SVG, then yes, this could speed up d3 greatly.
  - aurbano 11y ago
    It uses SVG, so it will speed it up a lot. Unfortunately for things like a force layout in a graph, the main bottleneck will be JavaScript calculating the positions.
    - pcwalton 11y ago
      WebRender doesn't accelerate SVG. It's certainly a potential future area to work on, though.
      - snuxoll 11y ago
        You're right, it doesn't at the moment. But the whole point behind WebRender is vector graphics are much better suited to GPU rendering - there's no reason SVG couldn't be targeted eventually. EDIT: Realizing you are Patrick himself, of course you know this...
ccozan 11y ago
Interesting approach with designing a web engine like a game engine. If you think well, it is actually making sense, at least for the CSS part.
- azinman2 11y ago
  I'm guessing you're ESL and you meant: If you think hard it actually makes sense, at least for the CSS part. Otherwise it reads as if in your brain you're saying "well, it is actually making sense," but then you'd need a consequence for the if.
glossyscr 11y ago
This is great. Mozilla is focussing on its core competency. No mobile OS, no identity built in the browser, no distractions—no, it's just about the browser and how to make it better. What this guy showed is just impressive, well done and please more of such achievements.
- ultramancool 11y ago
  And as a bonus they're building all this in Rust, probably the first language to seriously compete with C++ (for the things C++ is good at, like web browsers and game engines, where complexity and speed rule out most other languages).
  - s986s 11y ago
    I think them building it in rust is a good thing. But rust is a mozilla project so its not as though theyre doing people favors. What it certainly does is showcase the strength of the language considering they have proven to be so badass
    - ultramancool 11y ago
      That's sort of what I meant to get at - building Rust is a huge service to other people, and an important one too. Servo is showing that they're really putting the effort into optimizing it and making things work as best as possible.
  - narag 11y ago
    Not sure if you have noticed but... you are agreeing to a comment that celebrates Mozilla focusing in, and only in, its core competency and adding that they used a new language they created :-)
    - DasIch 11y ago
      Browsers are already highly specialized and complex VMs. If you have the ability to build a browser and work on all parts of it, you have the ability to create new languages. So creating a new language is not at all that far away from their core competency. They are also working in a space where they have a strong need for a good systems language, so the motivation is there as well.
Sir_Cmpwn 11y ago
Does anyone know where the benchmark pages live? Can I run them on Servo myself?
- Manishearth 11y ago
  https://github.com/pcwalton/webrender-demos https://github.com/pcwalton/webrender-demos
  - pcwalton 11y ago
    I have a couple of bug fixes pending for these, though, so they may not work well right now. (In particular the border corner tessellation code is still disabled in master due to bugs, I think.) Apologies—the WebRender work has been moving fast and things are a bit disorganized.
  - xymostech 11y ago
    You can try them out in your own browser easily by visiting them from rawgit: https://cdn.rawgit.com/pcwalton/webrender-demos/master/moire.html https://cdn.rawgit.com/pcwalton/webrender-demos/master/moire...
CitizenKane 11y ago
Watched the video yesterday and it's incredibly impressive work. I was actually a bit surprised this hadn't been done more often and had assumed (incorrectly) that it had. Nonetheless, I imagine we're going to see more projects like this coming out. It's going to be great to see what people can do when they can effectively use CSS to push high framerates. It's awesome that we'll be able to easily achieve 60+ FPS animation in the browser with ease.
bobajeff 11y ago
It would be nice if there were an APK with a slim interface for Android. I'd like to try this out on my phone.
- Manishearth 11y ago
  http://servo-rust.s3.amazonaws.com/nightly/servo.apk http://servo-rust.s3.amazonaws.com/nightly/servo.apk exists, however webrender probably won't work on it since it needs a flag to be passed down, and I think webrender doesn't completely work on GLES yet (though it should in the future)
  - mbrubeck 11y ago
    You can now pass flags to Servo for Android just like on desktop: ./mach run --android -- -w https://news.ycombinator.com/ Last time I tried it, WebRender wouldn't render anything on my Android device, but that was a few weeks ago.
    - Manishearth 11y ago
      Yeah, but that won't work with the APK :)
rpedela 11y ago
Are there any plans to eventually merge this into Firefox?
- icebraining 11y ago
  There is a plan (called Oxidation) to merge components written in Rust into Firefox, but I doubt the rendering will be one of them, at least any time soon. https://wiki.mozilla.org/Oxidation https://wiki.mozilla.org/Oxidation
alexc05 11y ago
So - is this a NEW browser? He mentions that he won't run this on firefox. Is "Servo" their "next" browser? What does the mozilla ecosystem look like? Will this technology get folded in to firefox? This is really cool but there's a tonne of stuff here that I've never heard of. Can anyone explain it like I'm five? How does this fit into the big picture?
- icebraining 11y ago
  It's a research project to build a browser written in Rust. A few components will be merged into Firefox, but Servo itself probably won't be the "next" browser. https://servo.org/ https://servo.org/ https://en.wikipedia.org/wiki/Servo_%28layout_engine%29 https://en.wikipedia.org/wiki/Servo_%28layout_engine%29
- robin_reala 11y ago
  Mozilla have been developing a programming language called Rust for a while now. Two of the things it explicitly attempts to address are removing classes of potential memory bugs (like buffer overflows) and making it easier to write concurrent multicore programs. These two traits map nicely onto the browser landscape, as most devices have 2-8 cores now and memory bugs are a perennial problem. To capitalise on this, and to give Rust a ‘halo’ project that uncovers potential issues early, Mozilla kicked off a project called Servo to research the ways that Rust could be used to produce a browser rendering engine. This has let them explore technologies like multicore rendering of a single page without dealing with the practical considerations (tried to find a nice way of putting it ) that Gecko has scattered throughout its codebase. After Mozilla had made some progress Samsung became interested and started contributing a reasonable amount of code. I’m not sure if this is still happening, but you can see their interest given their prediliction for 8-core mobile CPUs. Mozilla currently have no plans to replace Gecko with Servo outright, but they are folding Servo components back into Gecko when they’re portable and have obvious benefits. Gecko’s build chain can now handle Rust and I believe the URL parser is a port of Servo code (though I’m not sure it has landed yet). I think I recall a Mozilla engineer saying that Servo had progressed beyond a research project now, and it is pretty good at rendering reasonably complex sites, but they’ve still got a long way to go before it could be a drop-in replacement for Gecko.
drbawb 11y ago
I watched this the other day, and I've been mulling over the observation that onboard graphics are getting more and more die-space. On mobile, where discrete graphics are a rarity and power is a scarce resource, it makes sense to offload as much work onto the GPU as possible. Light it up, do the work as quickly as possible, then go back to sleep. However I started wondering about what can be done for high-end desktops. I just bought an i7-6700K, and of course it's paired with a very powerful discrete GPU. So as I understand it, effectively this means about 1/3 of that 6700K is just dark all the time. If there's any GPU work to be done it will all be offloaded to the PCIe bus, not the onboard graphics. How can we make use of that silicon in scenarios like that? Is there any advantages an onboard GPU has that can be leveraged over a discrete GPU? (Apart from power efficiency; which in my opinion is a non-issue when thinking about PCs with 800W+ power supplies.) --- P.S: Of course all this would be moot if I had just bought the 5820K. Live and learn.
- padenot 11y ago
  Texture upload to an onboard GPU are faster, iirc.
  - vardump 11y ago
    Especially when it's already in right format in the same address space. Then upload is not needed at all.
    - exDM69 11y ago
      Except that GPUs don't usually read from linear "raster order" images or are very slow doing so. So even in a shared memory CPU/GPU setup, there is a texture "upload" which organizes the pixel data to a GPU cache-friendly block format.
- pcwalton 11y ago
  > How can we make use of that silicon in scenarios like that? Well, in theory you could run them simultaneously. Use one of them for compute and one of them for display. Of course, this may well be quite a stretch in practice; GPU compute in any consumer software is completely nonexistent, to a first approximation. But it's worth thinking about, as there has been a steady stream of research coming out for years about various useful things that you can do with GPU compute.
marknadal 11y ago
Pretty epic stuff, great work. How would this address raytracing? Granted, you're not going to do raytracing in CSS. But as web pages evolve to web apps which evolve to web games, raytracing is going to be common in the future. He said it should (or at least not be slower) be able to handle WebGL as well (although I'm assuming that is a separate compositing layer that runs as normal?). So would there be no gains? From my understanding, raytracing is something that cannot be parallelized.
- judofyr 11y ago
  There's already a lot of knowledge and technology around using the GPU for high performance 3D rendering. Doing it in the browser (with WebGL) isn't that different. The breakthrough of WebRender is (mostly) to efficiently use the GPU for 2D path rendering.
  - pcwalton 11y ago
    It's actually not so much 2D path rendering as CSS. NVIDIA made the breakthrough in 2D path rendering with NV_path_rendering (which is a great paper, and I cite it in the talk). The way I see it, WebRender takes NVIDIA's work a step further by observing that you don't actually need 2D path rendering to render most CSS: you just need a good blitter, a good box clipper, and some specialized shaders.
    - exDM69 11y ago
      Speaking of your specialized shaders: how do you do the rounded rectangle corners? There was a quick mention about it in the talk but no details. Some alpha blending tricks or coverage sample masking (gl_SampleMask)? A link to the shader source would be great!
      - pcwalton 11y ago
        Dead simple: we use a shader to draw corners to an atlas and then alpha mask when we go to paint the page. Doing this allows us to avoid state changes when many border corners are involved.
SatoshiRoberts 11y ago
Wonder if this will help WebVR run smoother
daveloyall 11y ago
Auto-play video. Does a transcript (and perhaps slides) of this video exist? I avoid streaming on this particular connection.
fleetfox 11y ago
Can this be used to build a graphics tookit for UI? It sounds like something similar to QML is a great fit.
- mike_hearn 11y ago
  The concepts? Sure. It already has been, to some extent at least. For instance, the JavaFX UI toolkit is heavily multi-threaded and uses a dialect of CSS 2, it has support for blurs, box shadows etc. The app thread renders the scene graph to some sort of intermediate form (never looked at what, but I think it's similar to the WebRender form, i.e. a series of styled absolutely positioned boxes and text regions), then a render thread translates that into Direct3D or OpenGL calls. The render thread may itself use subthreads that handle rasterisation. You can read about it here: http://docs.oracle.com/javafx/2/architecture/jfxpub-architecture.htm http://docs.oracle.com/javafx/2/architecture/jfxpub-architec...
RyanRies 11y ago
Sorry I haven't gotten an opportunity to watch the video yet, so maybe the video addresses this, but if I may please ask... why would you want to render a webpage at several hundred FPS? Unless FPS is a multiple of your monitor's refresh rate, (i.e. vsync) it won't look good. You could use the extra time to do other background tasks instead of burning more CPU than you need to just to say you can do 1500 fps...
- steveklabnik 11y ago
  The video shows off several web pages with complex CSS animations that run at a reasonable FPS in Servo, but run at less than 1 FPS on current browsers. These pages were created specifically for this purpose, but that's the general thrust of it: it's not so much that you _want_ your pages rendering at hundreds of FPS, but that you can get more complex things done in a reasonable FPS. It also proves that Rust code can be _fast_, which is always something that is important for systems languages. I know much less about this aspect, but I also understand, vaguely, that there are battery savings here as well? When you can get things done quickly, you can idle the CPU again, saving power. I believe that's the thrust of it.
- Manishearth 11y ago
  If you can render at several hundreds of FPS, then you certainly can render at 60FPS or whatever you need. Rendering is not always silky smooth on websites using lots of CSS; this lets you render more complicated things with very little effort at 60FPS. Of course, you won't actually be rendering at 100FPS. (It also moves computation off the CPU, so the CPU can be used for better things)
- masklinn 11y ago
  > why would you want to render a webpage at several hundred FPS? You wouldn't (and the demo shows 60 fps), the point's rendering absolutely definitely most certainly isn't a bottleneck anymore, which gives more time for > other background tasks or other foreground tasks like the page itself (and the ability to increase its complexity since you don't need to budget for rendering anymore), or just letting the CPU go to sleep (could help whatever browser ends up with servo tech finally compete with Safari when it comes to energy consumption). It also gets you in a good place for VR (2 displays and 90Hz minimum IIRC from a Carmack note?) or for ever-larger displays (though that ties into the complexity thing, displays also get finer and denser on mobiles) > Unless FPS is a multiple of your monitor's refresh rate, (i.e. vsync) it won't look good. Well you could do that with several hundred FPS anyway, 300FPS is a multiple of 60Hz, so's 1540FPS for 140Hz.
tkinom 11y ago
If this is built into webkit + phonegap/cordova, is that mean we can write mobile app with web/css faster than best optimized native one? What would be limitation for html/css mobile app at that time compare to best of native app?
- glibgil 11y ago
  webkit is something else. Servo will not be built into webkit. To the rest of your question, if Apple allowed alternate JS engines (they don't) then a web renderer like Servo would be very fast would be competitive with native applications.
  - steveklabnik 11y ago
    I believe that your parent was asking if WebRender could be used in WebKit, not Servo.
    - glibgil 11y ago
      The obvious answer is no. This is an video about heroics by the Mozilla team to make WebRender and Servo very fast. I bet $5 that the people trying to make webkit very fast are taking an entirely different approach. There are probably zero whole people in the world that want to work on porting the Mozilla approach to webkit
  - tkinom 11y ago
    I read somewhere react native/phone gap base type js app are allowed in app store already. Supposedly, the authors can dynamically update the GUI/js code base on the client without going through the app store update process too.
    - glibgil 11y ago
      Dude, all that stuff runs on webkit. This thread is about Servo. At present, something like Servo cannot be embedded in an iOS app. Yeah, yeah react native or anything else can use web views and downloaded javascript or whatever you want to call it. You can't have Servo and it's 100 FPS though which is what this discussion is about
mozumder 11y ago
How are fonts rendered on the GPU here? Do they have a new font rendering engine?
- pritambaral 11y ago
  "Glyphs—rasterized on CPU with Quartz or FreeType (for now)"[0] 0: http://pcwalton.github.io/slides/webrender-talk-022016/ http://pcwalton.github.io/slides/webrender-talk-022016/
  - mozumder 11y ago
    The computer industry really needs to figure out and standardize on a good GPU font render soon. It's really limiting the utilization of the system resources.
nimish 11y ago
Thoughts: Tessellation shaders could get around the vertex shader limitation on weird clips Would vulkan/dx12 reduce much given the AZDO style techniques used? Having the GPU do work queueing might be cool as well--have it deal with the AABB tree Very cool stuff
- pcwalton 11y ago
  > Tessellation shaders could get around the vertex shader limitation on weird clips Indeed! It's issue #61, filed in October 2015 :) https://github.com/servo/webrender/issues/61 https://github.com/servo/webrender/issues/61
sebringj 11y ago
I would think the Cordova camp is crying with happy tears.
jtchang 11y ago
This is super cool! I can imagine loading a web page in the next few years and hearing my GPU fan kicking into turbo and wondering what damn website is sucking up all my GPU cycles.
sgrove 11y ago
I'm curious how Webrender is able to render native controls (buttons, text inputs, etc.) via this method - I suppose they have access to APIs not exposed in e.g. WebGL that make this trivial?
- Manishearth 11y ago
  We currently don't use native controls. The form elements are CSS styled and look the same on all platforms. But it would probably be possible to get the toolkit to render the control to a texture or something and move on.
  - pcwalton 11y ago
    Not really, unfortunately. Native toolkits aren't designed for this. As an example, I looked into using HIToolbox (the API Apple uses) for this on the Mac, but it was so obviously unsupported and likely to break at any time that I quickly decided against it.
taveras 11y ago
wow, this is stellar!
sonnyp 11y ago
This is awesome and incredibly useful. Bravo Let's see if I can get even more excited, Would it be possible to render SVG in the same fashion ? I guess SVG can be considered a scene graph as well, maybe even more than CSS is.
drawkbox 11y ago
With webrenderer and asm.js/webgl, the last couple of years have been great for rendering in a browser and it has all been led by Mozilla. Keep it up.
SquidLord 11y ago
One of these days we will effectively figure out why serious organizations can't seem to do even basic audio leveling on prerecorded videos that they intend for public consumption. Seriously. It's 10 minutes of work, at the outside. Normalize the audio to an average of -3 dB so that people can actually understand what's being said without having to jack up their volumes beyond all reason, and then write it back down for the next thing that they have to listen to or get the ears blasted by the next notification sound that comes along. There's just no excuse for it.
- visarga 11y ago
  I've been searching for a music player app that does volume normalization for years, without luck. I would like to be able to listen to normalized classical music, for example, because the volume varies a lot in this kind of audio from quiet passages to loud ones. When listening in car or on the phone while outside it becomes hard to hear the quiet passages because of all the surrounding noise, so, normally, I'd raise the volume, but then comes the loud part and my ears bleed. Normalized audio also plays nice with listening to music on the feeble phone speakers. I kind of find it nostalgic to listen on such tiny speakers, like the transistor radios from a few decades ago. What I am talking about is raising the volume of the quiet parts, not making all the parts of the track louder. I would listen at normal volume but be able to hear at a sane volume throughout the track. I think this can be achieved offline with the compand effect on sox. Another listening experience improvement could be to compare the relative volume of noise outside (using the mic) with the volume of the music being played and slightly adjust the volume to keep it above the background noise. In conclusion, it is necessary to consider the fact that listening on the phone and car happens in noisy environments and quiet passages are almost drowned if the user doesn't compensate. Why force the user with mess with the volume every few minutes when it can be achieved automatically? Maybe a brave developer will champion this idea and release a music player or even better, an app to normalize over the whole OS so we could benefit from it while using other apps like YouTube.
  - agrover 11y ago
    this is usually not called normalization, it's more commonly called dynamic range compression, or just 'compression', fwiw.
yxlx 11y ago
How energy friendly is it, though? Will it drain a laptop quickly?
- kimundi 11y ago
  The multi threaded architecture of servo is actually more energy friendly than existing engines for the same workloads, since distributing the same amount of work over more cores means that each core has to do less, and can thus run at lower clock speeds and thus drains less current.
pette 11y ago
Wow! Something from Mozilla that is not an awkward GUI change, a stillborn mobile OS or otherwise useless.
awqrre 11y ago
Hopefully, in the final version, they will limit the max FPS if it increases battery life (because I can't tell the difference between 60 FPS and 300 FPS). But I did notice some jerking in his last demo so I do wonder if some garbage collection or something else limits FPS once in a while...
etherealG 11y ago
I tried this out, and the benchmark page performance is pretty bad on servo without the new painter. great with the new painter. Interestingly, the same benchmarks seem pretty fast on mac chrome for me, so I wonder if I'm missing something about how effective the new technique is?

646 points by bpierre 11y ago

Cool! I run this meetup. This video was taken at the Bay Area Rust meetup [1] last week. We also had two other speakers that also gave great talks: Sean Griffin, on Diesel, a safe and extensible ORM [2] Alan Jeffery, on Parsell, a streaming parser written for WebAssembly [3] [1]: http://www.meetup.com/Rust-Bay-Area/events/219697075/ http://www.meetup.com/Rust-Bay-Area/events/219697075/ [2]: http://diesel.rs http://diesel.rs [3]: https://github.com/asajeffrey/parsell https://github.com/asajeffrey/parsell

MrBuddyCasino 11y ago
Looks nice, we do similar videos of our meetups (example: https://www.youtube.com/watch?v=35UVffLINkc https://www.youtube.com/watch?v=35UVffLINkc). What gear do you use?
- erickt 11y ago
  We have our meetups at Mozilla's San Francisco office, so we piggy back on their AV equipment. Unfortunately I don't know what that they use. However, there is an IRC channel irc://irc.mozilla.org/#airmozilla that I'm sure has some folks that could answer your questions.
jhasse 11y ago
Suggestion for the video: I would prefer it, if the presenters screen was fullscreen. I'm not interested in him talking or the background image. Besides that: Thanks for these meetups and the video footage of it :)
vardump 11y ago
So Parsell saves state between received chunks. Why can't it swap execution contexts, aka stacks? In other words, use coroutines and simply yield between chunks instead. Wouldn't that be more efficient and simpler? Is there some aspect in Rust that makes coroutines less desirable than (manually) saving and restoring state?

mnemonik 11y ago

I think these are the slides: http://pcwalton.github.io/slides/webrender-talk-022016/ http://pcwalton.github.io/slides/webrender-talk-022016/

dheera 11y ago

Is there reasonably-priced hardware that can do several hundreds of FPS? Preferably something with a built-in battery and Wi-Fi or bluetooth? I'd really love to build a volumetric 3D display by spinning the thing. I tried spinning my phone but the hardware screen refresh rate was way too low to do anything impressive even if processing power wasn't the bottleneck.

corysama 11y ago
There are a few gaming monitors that can do 200fps. Maybe even 240. I don't think any mobile devices go above 60. Maybe that'll change as mobile VR picks up.
- mrob 11y ago
  I only such monitor I know of is the Acer Predator Z35, which is advertised as 144Hz but can usually be overclocked to 200Hz. The only "240Hz" LCDs currently available interpolate from lower input refresh rates. I'd love to see a true 240Hz monitor, or even higher.
  - 90minuteAPI 11y ago
    I believe this is a problem of the signaling as well. Even the new Thunderbolt 3's display mode is still stuck with DisplayPort 1.2 signaling.

paulrouget 11y ago

Video from the beginning: https://air.mozilla.org/bay-area-rust-meetup-february-2016/#@01m24s https://air.mozilla.org/bay-area-rust-meetup-february-2016/#... "We've removed painting from the bottleneck in Servo" More info about WebRender: https://github.com/servo/webrender/wiki https://github.com/servo/webrender/wiki If you want try it at home, you "just" need to build servo: http://github.com/servo/servo http://github.com/servo/servo (git clone, then ./mach build -r) and run servo with webrender: ./mach run -r -- -w http://wikipedia.org http://wikipedia.org (edit: removed the bit about chrome's gpu rasterization - see pcwalton's comment below)

gregwtmtno 11y ago
Re the building, if you're on mac with homebrew, it should be as easy as: brew install --HEAD servo/servo/servo and servo -w http://wikipedia.org http://wikipedia.org Keep in mind though, servo has a long way to go.
- haddr 11y ago
  Is it a compiled bottle? I remember last time trying Rust I had to wait maybe half an ahour to compile everything. I think it was the time when servo was compiling their own version of Rust :)
  - Manishearth 11y ago
    Servo now downloads a Rust snapshot. But you still have to compile everything else needed to build Servo.
- markus2012 11y ago
  What about for using it as a headless browser with javascript and Rust manipulation of the DOM? We have a http proxy that would like to analyze html responses and rewrite parts of the page. Is servo ready for that or should we use something like PhantomJS? Thanks!
  - 11y ago

the_mitsuhiko 11y ago

Why can mozilla not put these videos on youtube :-/ air is horrible. Can't watch without downloading.

jhasse 11y ago
YouTube has quite a few bugs in Firefox. I actually prefer air, what's wrong with it?
- idbentley 11y ago
  YouTube works fine in Firefox. I use it all the time. It works well in mobile firefox as well.
  - jhasse 11y ago
    I was affected by this bug for example: https://news.ycombinator.com/item?id=10877810 https://news.ycombinator.com/item?id=10877810
    - cpeterso 11y ago
      That bug was YouTube's fault.
      - jhasse 11y ago
        That's why I said that YouTube has quite a few bugs in Firefox ;)
  - ossreality 11y ago
    really, you use Firefox and you use YouTube a lot? are there more people like you???
- coldtea 11y ago
  Outside of places like the us? Crappy streaming for starters.

deleted 11y ago

[deleted]

my5thaccount 11y ago

Will this work with d3, because d3 is pretty slow with a lot of elements and it would be quite nice if we could get gaming performance in the browser.

snuxoll 11y ago
I don't recall if d3 uses SVG or canvas off the top of my head, I haven't done much more than toy with it. If it uses SVG, then yes, this could speed up d3 greatly.
- aurbano 11y ago
  It uses SVG, so it will speed it up a lot. Unfortunately for things like a force layout in a graph, the main bottleneck will be JavaScript calculating the positions.
  - pcwalton 11y ago
    WebRender doesn't accelerate SVG. It's certainly a potential future area to work on, though.
    - snuxoll 11y ago
      You're right, it doesn't at the moment. But the whole point behind WebRender is vector graphics are much better suited to GPU rendering - there's no reason SVG couldn't be targeted eventually. EDIT: Realizing you are Patrick himself, of course you know this...

ccozan 11y ago

Interesting approach with designing a web engine like a game engine. If you think well, it is actually making sense, at least for the CSS part.

azinman2 11y ago
I'm guessing you're ESL and you meant: If you think hard it actually makes sense, at least for the CSS part. Otherwise it reads as if in your brain you're saying "well, it is actually making sense," but then you'd need a consequence for the if.

glossyscr 11y ago

This is great. Mozilla is focussing on its core competency. No mobile OS, no identity built in the browser, no distractions—no, it's just about the browser and how to make it better. What this guy showed is just impressive, well done and please more of such achievements.

ultramancool 11y ago
And as a bonus they're building all this in Rust, probably the first language to seriously compete with C++ (for the things C++ is good at, like web browsers and game engines, where complexity and speed rule out most other languages).
- s986s 11y ago
  I think them building it in rust is a good thing. But rust is a mozilla project so its not as though theyre doing people favors. What it certainly does is showcase the strength of the language considering they have proven to be so badass
  - ultramancool 11y ago
    That's sort of what I meant to get at - building Rust is a huge service to other people, and an important one too. Servo is showing that they're really putting the effort into optimizing it and making things work as best as possible.
- narag 11y ago
  Not sure if you have noticed but... you are agreeing to a comment that celebrates Mozilla focusing in, and only in, its core competency and adding that they used a new language they created :-)
  - DasIch 11y ago
    Browsers are already highly specialized and complex VMs. If you have the ability to build a browser and work on all parts of it, you have the ability to create new languages. So creating a new language is not at all that far away from their core competency. They are also working in a space where they have a strong need for a good systems language, so the motivation is there as well.

Sir_Cmpwn 11y ago

Does anyone know where the benchmark pages live? Can I run them on Servo myself?

Manishearth 11y ago
https://github.com/pcwalton/webrender-demos https://github.com/pcwalton/webrender-demos
- pcwalton 11y ago
  I have a couple of bug fixes pending for these, though, so they may not work well right now. (In particular the border corner tessellation code is still disabled in master due to bugs, I think.) Apologies—the WebRender work has been moving fast and things are a bit disorganized.
- xymostech 11y ago
  You can try them out in your own browser easily by visiting them from rawgit: https://cdn.rawgit.com/pcwalton/webrender-demos/master/moire.html https://cdn.rawgit.com/pcwalton/webrender-demos/master/moire...

CitizenKane 11y ago

Watched the video yesterday and it's incredibly impressive work. I was actually a bit surprised this hadn't been done more often and had assumed (incorrectly) that it had. Nonetheless, I imagine we're going to see more projects like this coming out. It's going to be great to see what people can do when they can effectively use CSS to push high framerates. It's awesome that we'll be able to easily achieve 60+ FPS animation in the browser with ease.

bobajeff 11y ago

It would be nice if there were an APK with a slim interface for Android. I'd like to try this out on my phone.

Manishearth 11y ago
http://servo-rust.s3.amazonaws.com/nightly/servo.apk http://servo-rust.s3.amazonaws.com/nightly/servo.apk exists, however webrender probably won't work on it since it needs a flag to be passed down, and I think webrender doesn't completely work on GLES yet (though it should in the future)
- mbrubeck 11y ago
  You can now pass flags to Servo for Android just like on desktop: ./mach run --android -- -w https://news.ycombinator.com/ Last time I tried it, WebRender wouldn't render anything on my Android device, but that was a few weeks ago.
  - Manishearth 11y ago
    Yeah, but that won't work with the APK :)

rpedela 11y ago

Are there any plans to eventually merge this into Firefox?

icebraining 11y ago
There is a plan (called Oxidation) to merge components written in Rust into Firefox, but I doubt the rendering will be one of them, at least any time soon. https://wiki.mozilla.org/Oxidation https://wiki.mozilla.org/Oxidation

alexc05 11y ago

So - is this a NEW browser? He mentions that he won't run this on firefox. Is "Servo" their "next" browser? What does the mozilla ecosystem look like? Will this technology get folded in to firefox? This is really cool but there's a tonne of stuff here that I've never heard of. Can anyone explain it like I'm five? How does this fit into the big picture?

icebraining 11y ago
It's a research project to build a browser written in Rust. A few components will be merged into Firefox, but Servo itself probably won't be the "next" browser. https://servo.org/ https://servo.org/ https://en.wikipedia.org/wiki/Servo_%28layout_engine%29 https://en.wikipedia.org/wiki/Servo_%28layout_engine%29
robin_reala 11y ago
Mozilla have been developing a programming language called Rust for a while now. Two of the things it explicitly attempts to address are removing classes of potential memory bugs (like buffer overflows) and making it easier to write concurrent multicore programs. These two traits map nicely onto the browser landscape, as most devices have 2-8 cores now and memory bugs are a perennial problem. To capitalise on this, and to give Rust a ‘halo’ project that uncovers potential issues early, Mozilla kicked off a project called Servo to research the ways that Rust could be used to produce a browser rendering engine. This has let them explore technologies like multicore rendering of a single page without dealing with the practical considerations (tried to find a nice way of putting it ) that Gecko has scattered throughout its codebase. After Mozilla had made some progress Samsung became interested and started contributing a reasonable amount of code. I’m not sure if this is still happening, but you can see their interest given their prediliction for 8-core mobile CPUs. Mozilla currently have no plans to replace Gecko with Servo outright, but they are folding Servo components back into Gecko when they’re portable and have obvious benefits. Gecko’s build chain can now handle Rust and I believe the URL parser is a port of Servo code (though I’m not sure it has landed yet). I think I recall a Mozilla engineer saying that Servo had progressed beyond a research project now, and it is pretty good at rendering reasonably complex sites, but they’ve still got a long way to go before it could be a drop-in replacement for Gecko.

drbawb 11y ago

I watched this the other day, and I've been mulling over the observation that onboard graphics are getting more and more die-space. On mobile, where discrete graphics are a rarity and power is a scarce resource, it makes sense to offload as much work onto the GPU as possible. Light it up, do the work as quickly as possible, then go back to sleep. However I started wondering about what can be done for high-end desktops. I just bought an i7-6700K, and of course it's paired with a very powerful discrete GPU. So as I understand it, effectively this means about 1/3 of that 6700K is just dark all the time. If there's any GPU work to be done it will all be offloaded to the PCIe bus, not the onboard graphics. How can we make use of that silicon in scenarios like that? Is there any advantages an onboard GPU has that can be leveraged over a discrete GPU? (Apart from power efficiency; which in my opinion is a non-issue when thinking about PCs with 800W+ power supplies.) --- P.S: Of course all this would be moot if I had just bought the 5820K. Live and learn.

padenot 11y ago
Texture upload to an onboard GPU are faster, iirc.
- vardump 11y ago
  Especially when it's already in right format in the same address space. Then upload is not needed at all.
  - exDM69 11y ago
    Except that GPUs don't usually read from linear "raster order" images or are very slow doing so. So even in a shared memory CPU/GPU setup, there is a texture "upload" which organizes the pixel data to a GPU cache-friendly block format.
pcwalton 11y ago
> How can we make use of that silicon in scenarios like that? Well, in theory you could run them simultaneously. Use one of them for compute and one of them for display. Of course, this may well be quite a stretch in practice; GPU compute in any consumer software is completely nonexistent, to a first approximation. But it's worth thinking about, as there has been a steady stream of research coming out for years about various useful things that you can do with GPU compute.

marknadal 11y ago

Pretty epic stuff, great work. How would this address raytracing? Granted, you're not going to do raytracing in CSS. But as web pages evolve to web apps which evolve to web games, raytracing is going to be common in the future. He said it should (or at least not be slower) be able to handle WebGL as well (although I'm assuming that is a separate compositing layer that runs as normal?). So would there be no gains? From my understanding, raytracing is something that cannot be parallelized.

judofyr 11y ago
There's already a lot of knowledge and technology around using the GPU for high performance 3D rendering. Doing it in the browser (with WebGL) isn't that different. The breakthrough of WebRender is (mostly) to efficiently use the GPU for 2D path rendering.
- pcwalton 11y ago
  It's actually not so much 2D path rendering as CSS. NVIDIA made the breakthrough in 2D path rendering with NV_path_rendering (which is a great paper, and I cite it in the talk). The way I see it, WebRender takes NVIDIA's work a step further by observing that you don't actually need 2D path rendering to render most CSS: you just need a good blitter, a good box clipper, and some specialized shaders.
  - exDM69 11y ago
    Speaking of your specialized shaders: how do you do the rounded rectangle corners? There was a quick mention about it in the talk but no details. Some alpha blending tricks or coverage sample masking (gl_SampleMask)? A link to the shader source would be great!
    - pcwalton 11y ago
      Dead simple: we use a shader to draw corners to an atlas and then alpha mask when we go to paint the page. Doing this allows us to avoid state changes when many border corners are involved.

SatoshiRoberts 11y ago

Wonder if this will help WebVR run smoother

daveloyall 11y ago

Auto-play video. Does a transcript (and perhaps slides) of this video exist? I avoid streaming on this particular connection.

fleetfox 11y ago

Can this be used to build a graphics tookit for UI? It sounds like something similar to QML is a great fit.

mike_hearn 11y ago
The concepts? Sure. It already has been, to some extent at least. For instance, the JavaFX UI toolkit is heavily multi-threaded and uses a dialect of CSS 2, it has support for blurs, box shadows etc. The app thread renders the scene graph to some sort of intermediate form (never looked at what, but I think it's similar to the WebRender form, i.e. a series of styled absolutely positioned boxes and text regions), then a render thread translates that into Direct3D or OpenGL calls. The render thread may itself use subthreads that handle rasterisation. You can read about it here: http://docs.oracle.com/javafx/2/architecture/jfxpub-architecture.htm http://docs.oracle.com/javafx/2/architecture/jfxpub-architec...

RyanRies 11y ago

Sorry I haven't gotten an opportunity to watch the video yet, so maybe the video addresses this, but if I may please ask... why would you want to render a webpage at several hundred FPS? Unless FPS is a multiple of your monitor's refresh rate, (i.e. vsync) it won't look good. You could use the extra time to do other background tasks instead of burning more CPU than you need to just to say you can do 1500 fps...

steveklabnik 11y ago
The video shows off several web pages with complex CSS animations that run at a reasonable FPS in Servo, but run at less than 1 FPS on current browsers. These pages were created specifically for this purpose, but that's the general thrust of it: it's not so much that you _want_ your pages rendering at hundreds of FPS, but that you can get more complex things done in a reasonable FPS. It also proves that Rust code can be _fast_, which is always something that is important for systems languages. I know much less about this aspect, but I also understand, vaguely, that there are battery savings here as well? When you can get things done quickly, you can idle the CPU again, saving power. I believe that's the thrust of it.
Manishearth 11y ago
If you can render at several hundreds of FPS, then you certainly can render at 60FPS or whatever you need. Rendering is not always silky smooth on websites using lots of CSS; this lets you render more complicated things with very little effort at 60FPS. Of course, you won't actually be rendering at 100FPS. (It also moves computation off the CPU, so the CPU can be used for better things)
masklinn 11y ago
> why would you want to render a webpage at several hundred FPS? You wouldn't (and the demo shows 60 fps), the point's rendering absolutely definitely most certainly isn't a bottleneck anymore, which gives more time for > other background tasks or other foreground tasks like the page itself (and the ability to increase its complexity since you don't need to budget for rendering anymore), or just letting the CPU go to sleep (could help whatever browser ends up with servo tech finally compete with Safari when it comes to energy consumption). It also gets you in a good place for VR (2 displays and 90Hz minimum IIRC from a Carmack note?) or for ever-larger displays (though that ties into the complexity thing, displays also get finer and denser on mobiles) > Unless FPS is a multiple of your monitor's refresh rate, (i.e. vsync) it won't look good. Well you could do that with several hundred FPS anyway, 300FPS is a multiple of 60Hz, so's 1540FPS for 140Hz.

tkinom 11y ago

If this is built into webkit + phonegap/cordova, is that mean we can write mobile app with web/css faster than best optimized native one? What would be limitation for html/css mobile app at that time compare to best of native app?

glibgil 11y ago
webkit is something else. Servo will not be built into webkit. To the rest of your question, if Apple allowed alternate JS engines (they don't) then a web renderer like Servo would be very fast would be competitive with native applications.
- steveklabnik 11y ago
  I believe that your parent was asking if WebRender could be used in WebKit, not Servo.
  - glibgil 11y ago
    The obvious answer is no. This is an video about heroics by the Mozilla team to make WebRender and Servo very fast. I bet $5 that the people trying to make webkit very fast are taking an entirely different approach. There are probably zero whole people in the world that want to work on porting the Mozilla approach to webkit
- tkinom 11y ago
  I read somewhere react native/phone gap base type js app are allowed in app store already. Supposedly, the authors can dynamically update the GUI/js code base on the client without going through the app store update process too.
  - glibgil 11y ago
    Dude, all that stuff runs on webkit. This thread is about Servo. At present, something like Servo cannot be embedded in an iOS app. Yeah, yeah react native or anything else can use web views and downloaded javascript or whatever you want to call it. You can't have Servo and it's 100 FPS though which is what this discussion is about

mozumder 11y ago

How are fonts rendered on the GPU here? Do they have a new font rendering engine?

pritambaral 11y ago
"Glyphs—rasterized on CPU with Quartz or FreeType (for now)"[0] 0: http://pcwalton.github.io/slides/webrender-talk-022016/ http://pcwalton.github.io/slides/webrender-talk-022016/
- mozumder 11y ago
  The computer industry really needs to figure out and standardize on a good GPU font render soon. It's really limiting the utilization of the system resources.

nimish 11y ago

Thoughts: Tessellation shaders could get around the vertex shader limitation on weird clips Would vulkan/dx12 reduce much given the AZDO style techniques used? Having the GPU do work queueing might be cool as well--have it deal with the AABB tree Very cool stuff

pcwalton 11y ago
> Tessellation shaders could get around the vertex shader limitation on weird clips Indeed! It's issue #61, filed in October 2015 :) https://github.com/servo/webrender/issues/61 https://github.com/servo/webrender/issues/61

sebringj 11y ago

I would think the Cordova camp is crying with happy tears.

jtchang 11y ago

This is super cool! I can imagine loading a web page in the next few years and hearing my GPU fan kicking into turbo and wondering what damn website is sucking up all my GPU cycles.

sgrove 11y ago

I'm curious how Webrender is able to render native controls (buttons, text inputs, etc.) via this method - I suppose they have access to APIs not exposed in e.g. WebGL that make this trivial?

Manishearth 11y ago
We currently don't use native controls. The form elements are CSS styled and look the same on all platforms. But it would probably be possible to get the toolkit to render the control to a texture or something and move on.
- pcwalton 11y ago
  Not really, unfortunately. Native toolkits aren't designed for this. As an example, I looked into using HIToolbox (the API Apple uses) for this on the Mac, but it was so obviously unsupported and likely to break at any time that I quickly decided against it.

taveras 11y ago

wow, this is stellar!

sonnyp 11y ago

This is awesome and incredibly useful. Bravo Let's see if I can get even more excited, Would it be possible to render SVG in the same fashion ? I guess SVG can be considered a scene graph as well, maybe even more than CSS is.

drawkbox 11y ago

With webrenderer and asm.js/webgl, the last couple of years have been great for rendering in a browser and it has all been led by Mozilla. Keep it up.

SquidLord 11y ago

One of these days we will effectively figure out why serious organizations can't seem to do even basic audio leveling on prerecorded videos that they intend for public consumption. Seriously. It's 10 minutes of work, at the outside. Normalize the audio to an average of -3 dB so that people can actually understand what's being said without having to jack up their volumes beyond all reason, and then write it back down for the next thing that they have to listen to or get the ears blasted by the next notification sound that comes along. There's just no excuse for it.

visarga 11y ago
I've been searching for a music player app that does volume normalization for years, without luck. I would like to be able to listen to normalized classical music, for example, because the volume varies a lot in this kind of audio from quiet passages to loud ones. When listening in car or on the phone while outside it becomes hard to hear the quiet passages because of all the surrounding noise, so, normally, I'd raise the volume, but then comes the loud part and my ears bleed. Normalized audio also plays nice with listening to music on the feeble phone speakers. I kind of find it nostalgic to listen on such tiny speakers, like the transistor radios from a few decades ago. What I am talking about is raising the volume of the quiet parts, not making all the parts of the track louder. I would listen at normal volume but be able to hear at a sane volume throughout the track. I think this can be achieved offline with the compand effect on sox. Another listening experience improvement could be to compare the relative volume of noise outside (using the mic) with the volume of the music being played and slightly adjust the volume to keep it above the background noise. In conclusion, it is necessary to consider the fact that listening on the phone and car happens in noisy environments and quiet passages are almost drowned if the user doesn't compensate. Why force the user with mess with the volume every few minutes when it can be achieved automatically? Maybe a brave developer will champion this idea and release a music player or even better, an app to normalize over the whole OS so we could benefit from it while using other apps like YouTube.
- agrover 11y ago
  this is usually not called normalization, it's more commonly called dynamic range compression, or just 'compression', fwiw.

yxlx 11y ago

How energy friendly is it, though? Will it drain a laptop quickly?

kimundi 11y ago
The multi threaded architecture of servo is actually more energy friendly than existing engines for the same workloads, since distributing the same amount of work over more cores means that each core has to do less, and can thus run at lower clock speeds and thus drains less current.

pette 11y ago

Wow! Something from Mozilla that is not an awkward GUI change, a stillborn mobile OS or otherwise useless.

awqrre 11y ago

Hopefully, in the final version, they will limit the max FPS if it increases battery life (because I can't tell the difference between 60 FPS and 300 FPS). But I did notice some jerking in his last demo so I do wonder if some garbage collection or something else limits FPS once in a while...

etherealG 11y ago

I tried this out, and the benchmark page performance is pretty bad on servo without the new painter. great with the new painter. Interestingly, the same benchmarks seem pretty fast on mac chrome for me, so I wonder if I'm missing something about how effective the new technique is?