Live data from Hacker News

So you think you know box shadows?

dgerrells.com

71–80 of 130 posts

Re: So you think you know box shadows?

#71
post #23

> However, using a transparent color significantly slowed down the number that can be drawn too which doesn't make as much sense to me. I'd imagine that with hardware today transparency should be somewhat free. That's because transparency limits how you can batch draws on the GPU. With opaque draws, you can use the depth buffer and draw in any order you like e.g. maximizing batching. With transparency, you need to dr…

I think it's more complex than that. While web browsers do use GPU rendering, they're not game engines. They don't draw every single object on the screen every frame, that could easily cause lag on a large complex page.

Chromium in particular tries to minimize the total number of layers. It renders each layer into a pixel map, then for each frame it composites all of the visible layers into the final image.

That works really well in practice because you often have lots of layers that move around but don't actually change their pixels. So those don't need to be rendered (rasterized) every frame, just composited.

If you have a bunch of box shadows without transparency, Chromium will rasterize the whole thing once as a single layer.

If you have a bunch of box shadows with transparency, Chromium might create a separate layer for each one. That's probably suboptimal in this particular case, but imagine if your partially transparent box shadows had to also slide around the page independently.

Re: So you think you know box shadows?

#72
post #23

> However, using a transparent color significantly slowed down the number that can be drawn too which doesn't make as much sense to me. I'd imagine that with hardware today transparency should be somewhat free. That's because transparency limits how you can batch draws on the GPU. With opaque draws, you can use the depth buffer and draw in any order you like e.g. maximizing batching. With transparency, you need to dr…

I think it's more complex than that. While web browsers do use GPU rendering, they're not game engines. They don't draw every single object on the screen every frame, that could easily cause lag on a large complex page. Chromium in particular tries to minimize the total number of layers. It renders each layer into a pixel map, then for each frame it composites all of the visible layers into the final image. That work…

> They don't draw every single object on the screen every frame, that could easily cause lag on a large complex page.

Games draw every single object on the screen every frame. They don't lag, quite the opposite in fact!

Re: So you think you know box shadows?

#73

For the past 30 years I got good at programming but never really did graphics because I didn't like games. I now view it as a massive oversight and have been trying to catch up for over a year. So hard.

I did games first, then switched over to crud or simple oracle form programming. I tripled my original game programmer wage overnight.

Re: So you think you know box shadows?

#74

Earlier quoted context omitted.

I think it's more complex than that. While web browsers do use GPU rendering, they're not game engines. They don't draw every single object on the screen every frame, that could easily cause lag on a large complex page. Chromium in particular tries to minimize the total number of layers. It renders each layer into a pixel map, then for each frame it composites all of the visible layers into the final image. That work…

> They don't draw every single object on the screen every frame, that could easily cause lag on a large complex page. Games draw every single object on the screen every frame. They don't lag, quite the opposite in fact!

[dead]

Re: So you think you know box shadows?

#78
post #64
post #42

Earlier quoted context omitted.

Canvas throws away a lot though, especially w accessibility

now I'm imagining a screen reader reading off the coordinates of 1000 box shadows

You could probably get it to png encode a canvas and then read it in hex too.
Post reply on HN