Live data from Hacker News

The web at maximum FPS: How WebRender gets rid of jank

hacks.mozilla.org

11–20 of 212 posts

Re: The web at maximum FPS: How WebRender gets rid of jank

#12

>For a typical desktop PC, you want to have 100 draw calls or fewer per frame Don't PC games use thousands of draw calls per frame?

They do, but we're targeting Intel HD quality graphics, not gaming-oriented NVIDIA and AMD GPUs.

That said, even Intel GPUs can often deal with large numbers of draw calls just fine. It's mobile where they become a real issue.

Aggressive batching is still important to take maximum advantage of parallelism. If you're switching shaders for every rect you draw, then you frequently lose to the CPU.

Re: The web at maximum FPS: How WebRender gets rid of jank

#13
Now that this is closer to shipping, I'm curious what impact this would have on battery life. On the one hand, this is lighting up more silicon; on the other hand: a faster race to sleep, perhaps?

Have there been any measurements on what the end result is on a typical modern laptop?

Re: The web at maximum FPS: How WebRender gets rid of jank

#14

>For a typical desktop PC, you want to have 100 draw calls or fewer per frame Don't PC games use thousands of draw calls per frame?

They do, but we're targeting Intel HD quality graphics, not gaming-oriented NVIDIA and AMD GPUs. That said, even Intel GPUs can often deal with large numbers of draw calls just fine. It's mobile where they become a real issue. Aggressive batching is still important to take maximum advantage of parallelism. If you're switching shaders for every rect you draw, then you frequently lose to the CPU.

Speaking of batching, I look at this demo [1] on my mobile phone, and I can get ~3500 sprites without dropping below 60FPS.

A web page may not be able to reuse as much image data, I know. But smart game engines frequently look for ways to better batch sprites.

And technically speaking, if you're using a Z-buffer, you don't need to sort opaque layers at all. You can draw the layers in back and then draw more layers in front. Yes, you get overdraw in that case, but if you're using Z values for layering, you could potentially get better batches by drawing in arbitrary order (i.e., relying on Z-depth to enforce opaque object order), and in my experience larger batches gives you a bigger advantage than reducing overdraw.

[1] http://www.goodboydigital.com/pixijs/bunnymark/

Re: The web at maximum FPS: How WebRender gets rid of jank

#17

Won’t this cause a lot of work to be done for a blinking cursor? Curious about battery drain, I/O overhead, General CPU usage, etc.

With a compositor you're already drawing every pixel every frame on the GPU, whether it's just a cursor blinking or not. The WR approach basically only adds a negligible amount of vertex shading time.

Re: The web at maximum FPS: How WebRender gets rid of jank

#18
post #8
post #2

Good stuff. Speaking of rendering text glyphs on the GPU, there's a really clever trick(commonly called loop-blinn, from the two authors): https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.... You can pretty much just use the existing bezier control points from TTF as-is which is really nice.

If only it were as simple as just using Loop-Blinn. :) The technique described there will produce unacceptably bad antialiasing for body text. Loop-Blinn is fine if you want fast rendering with medium quality antialiasing, though. (Incidentally, it's better to just use supersampling or MLAA-style antialiasing with Loop-Blinn and not try to do the fancy shader-based AA described in that article.) Additionally, the ori…

I'm very excited about your work on Pathfinder! I think great possibilities will open up once there is a way to efficiently rasterize vectors on the GPU.

Do you think, once the implementation is more complete, that it would make it possible to render fullscreen scenes of vector graphics (say in SVG) with hundreds of moving and morphing shapes on a mid-range phone/tablet/pc?

I know it's very difficult to predict these things, but I thought you may have already seen enough performance characteristics to make an educated guess :)

Re: The web at maximum FPS: How WebRender gets rid of jank

#19
post #8
post #2

Good stuff. Speaking of rendering text glyphs on the GPU, there's a really clever trick(commonly called loop-blinn, from the two authors): https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.... You can pretty much just use the existing bezier control points from TTF as-is which is really nice.

If only it were as simple as just using Loop-Blinn. :) The technique described there will produce unacceptably bad antialiasing for body text. Loop-Blinn is fine if you want fast rendering with medium quality antialiasing, though. (Incidentally, it's better to just use supersampling or MLAA-style antialiasing with Loop-Blinn and not try to do the fancy shader-based AA described in that article.) Additionally, the ori…

I hadn't seen Pathfinder before; very cool! Especially if it's easily transferable to gpuweb, if and when that ships.

Reminds me of Mark Kilgard's old NV_path_rendering extension, which (as so often happened for interesting NV stuff) never made the jump to portability. One of its touted benefits as an in-driver implementation was the ability to share things like glyph caches between multiple apps with separate GL contexts, but with "apps" increasingly becoming "browser tabs", maybe a browser-managed cross-tab cache is almost as good.

BTW, is the WebGL demo available online anywhere, for people who don't want to install npm?

Re: The web at maximum FPS: How WebRender gets rid of jank

#20
post #2

Good stuff. Speaking of rendering text glyphs on the GPU, there's a really clever trick(commonly called loop-blinn, from the two authors): https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.... You can pretty much just use the existing bezier control points from TTF as-is which is really nice.

Do they generate those triangles for each instance of each glyph, or only once for each character in the font?
Post reply on HN