So you think you know box shadows?
dgerrells.com
dgerrells.com
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 draw things in the right order for blending to work (painters order).
It isn't like the Ps2 era when geometry time was a real concern on render times. Even a modern low end GPU could process a few hundred million polygons a second without sweating it, now getting the result son screen is a very different issue.
The Xbox was released 1 year later, for context.
Sony also demo'd the GSCube once, it had 16 Graphics Synthesizers, achieving a fill rate of 37.7 GB/s (no textures, half that with 1... I think). Eventually they ditched the idea in favour of Nvidia's solution.
If you're doing non-overlapping stuff, you'd actually expect (almost) no slowdown from transparency, since you'd have to touch every pixel once anyway, and the only thing that changed is the shader formula.
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 relating to transparent objects behind other transparent objects
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 assume you render to another buffer first and then composite to the framebuffer? If you render from back to front you don't need alpha in your framebuffer and can assume each rendered pixel is opaque, not needing that composite.
There's also order independent transparency stuff though which IIRC does need another buffer, which requires a composite but then saves you having to sort the objects.
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.
Games draw every single object on the screen every frame. They don't lag, quite the opposite in fact!
Not sure where that went in the end.
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.
I never knew this and honestly I’m a bit baffled - 2D seems simpler on its face, is it just that GPUs have been made with gaming in mind (typically) and most “hardcore gamers” are playing 3D games?
Games 20 years ago had sole access to machines that were much less powerful than even partial access to today's machines.
And eg Nintendo Switch games (or games on the Steam deck, or just mobile phone games) still deal with power limitations; people are very aware when their games burn through their batteries.
A non-transparent draw over another draw allows in best case to cull all overlapping drawing operations, in worst case means you only have to use as much bandwidth as the individual draws.
With transparency, especially if you can't somehow combine the operations together (from my understanding, very hard problem), it means you also need to read back the entire region you're overlapping with transparency - so every transparent draw involves at least twice the final framebuffer size bitmap going-over memory bus.
Now consider that many mobile devices had not enough memory bandwidth to do a full redraw (i.e. blit the full framebuffer image twice) of the screen in time to maintain 60fps and it becomes a considerable problem.
> 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/
Switched to Chrome - suddenly everything is butter smooth.
Congrats on an article very well done!
It's almost like this post has many layers to it, and that it's not really about box shadows.
Which isn't to demerit the hackish creativity of taking one thing and running with it! But if you wanted to do a ball painting effect like that outside this "what if" context, it would be technically irresponsible to do it with box-shadows.
AVS and Milkdrop could probably run on a toaster today, I'd guess even WebGL would be enough on a smartphone, laptop or similar device with some kind of GPU.
Meanwhile, YTM costs 13€ a month, doesn't have an equalizer, no cross-device sync despite cloud everything... no nothing. Not even gapless album playback.
Once upon a time, I signed up to Spotify in order to have a good conscience, because I grew old and didn't want to keep collecting audio files...
Then Spotify became worse and worse.
For now YTM seems like a better deal, but I still can't even find a free solution to migrate my playlists.
Basically, everything went to shit. The only advantage is not having to illegaly download new music after browsing Discogs.
The disadvantage is, apart from the odd good recommendation, my interest in discovering new music has vanished.
Even new music found on Discogs.
But why bother saving songs to playlists when it's all transient anyway?
That was my main last straw with Spotify — too many good music disappearing from playlists, and steadily worsening recommendations. With rabbit-holes of totally trash AI-generated "music" in between, that didn't stop unless actively skipping.
And YTMs not gonna end any better, I feel.
Just a reminder that all music is transient. And maybe to seek regaining enthusiasm by playing music myself, or going out.
Streaming really has killed "listening to music" and being excited about it for me, and I don't feel it's purely because of old age.
Going to revive my Mp3 collection soon from a backup and download my ~25 records worth listening since 2012 then from Bandcamp instead.
I have the UX of the player though... the android TV experience is even worse, it's nearly impossible to use effectively now.
I miss DJs, at least I miss good DJs... there are a few stations locally that I like what the DJs will mix and play, but there's sooo many commercials now. I'd happily pay $10/month for an ad-free DJ run experience. I mean, why the likes of XM, etc don't just have 50-100 DJs actually curate the music for the live experience.
Live sets generally are an antidote to this kind of music fatigue for me.
Of course there are other remedies, e.g. timeless albums and live music, I also a deep love for Bach's keyboard music, and some of that proved to me how much context matters for enjoyment.
And ditto about Youtube, it's not a bad offer in itself but the music app really sucks, many parts of Google TV are mediocre, too. In the latter case, I appreciate their effort in that case though (gtv in general), and the p/v I get from that 40€ hdmi+usb stick is not too bad either since i use a cheap chromecast.
That's a thing I still like Google for, at least in my case Chromecast makes it possible to reuse a cheap ~10y old LED tv for purely internet tv, with a functional remote, etc.
It's not new, but Google's TV sticks are pretty decent imo
Any references to learn more about these hacks?
A modern 3D accelerated article (using SDF as another commenter suspected) https://mortoray.com/quickly-drawing-a-rounded-rectangle-wit...
Have to add work by Evan Wallace here too as he is a legend.
https://madebyevan.com/shaders/fast-rounded-rectangle-shadow... https://madebyevan.com/webgl-path-tracing/
So hard.
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.)
Gramsci's pessimism of the intellect, optimism of the will can be a tough motivator but I'm trying.
Not mocking, it's a tough ambition at times.
Just recently one of our security experts dropped dead over the weekend. When everyone heard about it they were sad for about 5 minutes, then 5 minutes later everyone was talking about their kids, parents, family, vacations or what they're going to have for lunch.
I don't mean that to be condescending, your life is important to you. Build your future, technology will take care of itself.
Why would I know it? It's CSS!
For me it's not that it's freezing, it's that the page scroll stops responding.
I can get the tab back by cutting the URL, closing the tab, opening a new tab, pasting the URL, then scrolling to where I want to keep reading from.
It seems to render everything fine if you don't mind scroll stopping (ahem).