Overdraw
The same screen pixel getting shaded over and over by stacked layers. Transparency's hidden tax on framerate.
See it
What it is
Opaque geometry writes to the depth buffer, so a nearer surface can reject a farther one before its fragment shader ever runs. Transparent geometry cannot: everything behind it still has to be shaded and blended in. Stack ten smoke sprites over the same pixel and that pixel runs the fragment shader ten times. That repetition is overdraw, and it is billed per pixel, which is why the same scene is fine at 720p and dies on a retina phone.
It shows up wherever layers pile up: particle systems, foliage cards, glass, fog planes, soft shadows, big fullscreen post-processing chains. The tell is a framerate that collapses only when the camera gets close to the transparent thing, since the layers now cover more screen.
Fixes, in order of payoff: shrink the on-screen area of transparent layers, cut particle counts and total screen coverage together (fewer but bigger sprites is not automatically a win, since a larger sprite covers more pixels; only upsize if the measured covered area actually falls), trim the empty margins off alpha quads so you are not blending invisible pixels, and use alpha-test cutout instead of blending for foliage so depth rejection works again. Then drop the device pixel ratio cap. Overdraw is a fill-rate problem, so resolution is always the biggest single lever.
Ask AI for it
Diagnose and reduce overdraw in this WebGL scene. Add a debug view that renders every fragment with additive blending at low alpha so hot (heavily overdrawn) pixels glow. Then: cap devicePixelRatio at 2, cut particle count and total screen-space coverage (only enlarge sprites if the measured covered area falls), tighten alpha quads to the visible area, switch foliage from alpha blending to alpha-test cutout so it writes depth, and render opaque geometry front-to-back before transparents. Report the framerate before and after.