THIS IS ABSOLUTELY EPIC, AND MY FAVORITE KIND OF WEB TECH DEEP DIVE! <3 <3 <3
So you think you know box shadows?
81–90 of 130 posts
Re: So you think you know box shadows?
#82A great, possibly the greatest article I read this year ended with "your welcome" instead of "you're". Fix asap! Or maybe I didn't get the joke, that's a possibility
nothing to see here...
Re: So you think you know box shadows?
#83Earlier 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!
In fact that exact line of thinking was behind an effort to rewrite Firefox's rendering to be more like a game engine, a few years ago.
Not sure where that went in the end.
Re: So you think you know box shadows?
#84For 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.
Well, games are seen as fun, so they can attract programmers even with low salaries.
Basically the same reason pet veterinaries and teachers and nurses and musicians and artists still attract plenty of candidates despite a comparatively low pay.
(Playing games is more fun than working with CRUD apps. But writing games and writing CRUD apps seem about equal in their probability distributions of fun.)
Re: So you think you know box shadows?
#85Earlier 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!
I think the above was a simplification. GUI rendering is a good example of jack of all trades, master of none. It doesn't use tight render loops like game engines but it much more flexible in terms of UI possibilities.
There is also the issue that GPU's are oddly terrible at generating 2D elements of which a desktop has thousands of them. There are things like Glyph caching but they can only go so far.
Having the CPU doing the majority of the work with a few rasterization tasks to the GPU makes sense.
Re: So you think you know box shadows?
#86Earlier quoted context omitted.
> 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!
In fact that exact line of thinking was behind an effort to rewrite Firefox's rendering to be more like a game engine, a few years ago. Not sure where that went in the end.
That sounds like something from the shuttered Servo team. At least they rose like a phoenix - https://servo.org/
Re: So you think you know box shadows?
#87Amazing. Is it possible to tell how much lag these would cause if used on a production website?
A lot. Please don't do this in production.
Re: So you think you know box shadows?
#88Seriously fun exploration. > Layering. That is an important word. Layering is also the key to the (silly but also sometimes good-looking) effects from my text shadow project from 14yrs ago: https://paulirish.github.io/mothereffingtextshadow/
<3
Was confused because everything moved in 2 seconds per frame on M2 Firefox.
Switched to Chrome - suddenly everything is butter smooth.
Congrats on an article very well done!
Re: So you think you know box shadows?
#89Earlier quoted context omitted.
Reverse-painter's-order beats painter's-order since it lets you skip fully-occluded objects: Start with a buffer that's fully transparent (α=0.0) for each face from front to back: for each pixel of the face: draw the pixel, blending 1.0-buffer.α of the new pixel into whatever's already in the buffer (if buffer.α == 1.0 you can just skip it entirely, just like for depth buffering) go back and double check your math re…
The game engines I've dealt with separate opaque and transparent geometry. It is generally good to render opaque geometry back to front to reduce overdraw, but not going so far as sorting the objects. We would do stuff like render the hands first in an FPS or render the skybox last in most games. Now for the transparent layer: First occlusion is handled by the z-buffer as usual. If you render from front to back I ass…
I could be wrong, but I remember folks that worked on Dreamcast games that loved how you could just throw the geometry at it in any old fashion you liked and the GPU would just sort it all out as needed. Transparencies and all.
Re: So you think you know box shadows?
#90Earlier 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!
Games are expected to have sole access to your machine, so if they use all the CPU/GPU resources, nobody cares. If my web browser was burning up my battery re-rendering the page 90 times a second, I'd be livid.