The shadow grows, hinting at the fact that the element is elevated, and moves closer on the z-index. What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger as well?
The right and bottom animations show the blue button as getting closer, but the end result on the left doesn't reflect that at all.
EXACTLY! "Material design" is very much opposed to how "real-world material interfaces" would look like in anything above the basics. Think about fucking ripple & light efects, but on otherwise solid-looking and matte-looking surfaces!
I mostly label this whole "material design" crap as "flat & minimalistic (metro-like) design" + "minimal volumetric efdects backported from the abandoned skeumorphic design bandwagon" in order to give the user some "visual cues".
In truly like the style and cues of material design practically... but there is a subconscious "uncanny valley intuition" about it that triggers a primitive warning sign in my primitive bran or something... kind of like "fear/stress about something that is practically the right thing but it... deceives you in a way and maybe also in others". I find both flat/minimalistic and rich/skeomorphic interfaces more soothing / calming / trust inducing.
I think most banks and ecommerce and enterprise/infrastructure UI professionals also share this intuition with me: you see in most banking, AWS etc. UIs always "a touck of skomorphism" plus "a lack of unnatural/magical effects", and it makes you trust more the app, be more *relaxed and confident" and willing to open you soul & wallet to it...
Yes, that's kinda the point. Touch screens are not like any other "material" interface we know. Read through the Material Design intro sometime - it's an interesting read regardless of whether you agree with their thinking.
Funnily enough, the opposite is true for me. Banks and eCom sites that don't have polished modern flattish interfaces make me think the company is out of its depth and likely insecure
"Consistently applied metaphors" except for where they don't want to be consistent.
Copy/pasting from another comment of mine, quotes from the manifesto:
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
"It's grounded in reality... but not!"
> Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
"Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing."
> The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
"Except where we decide we don't want to be realistic."
It's grounded in reality, not bound by it. If you familiarize yourself with MD you'll realize the edge cases you tried to come up with have been covered and explained; it's not a contradiction.
Maybe the button is staying in the same place vertically, but you're pressing the entire background and all its other contents except the button away from you. :/
I guess that growing it would throw of the balance of the UI elements in the grid too much visually... /shrug
What I find much worse is that the pressed state has a bigger shadow, meaning it is further away from the plane it casts the shadow on. Isn't that the wrong way around, or is the labeling wrong here?
Yup, also traditional perspective is also incredibly non-linear so the distance from button -> back face is in the range where large perspective changes happen compared to where the virtual camera is.
Also depends on what their lighting model is and a whole host of other factors.
Now that you have mentioned it, the button seems to shrink when coming up. Stranger still is that nobody seems to find it strange that it comes up when pressed, sure there are such physical button but pressed should mean further down imo.
The button isn't a physical button though, so it doesn't have to behave like one. Sometimes you can make a better UI by ignoring reality - for example, in this case, bringing a button in to focus and apparently nearer to the user could make it much more obvious that it's the one you're about to press, rather than making it smaller and farther away.
Sure, but isn't one of the goals of modern design to emulate the physical world for a more tactile feel? Googles material design has a whole section on how cards should behave so as not to break the rules of the physical world.
It seems odd to strive for realism, but then break it somewhere because "it isn't a real button, so it doesnt have to feel like one"
I think that the blur effects are the worst part of the latest iOS iteration... why make the background for your content a muddy, distracting smudge of colors?
Erm... nice screenshots and all, but isn't this a trivial rehash of UI patterns that are plain obvious? I don't quite understand who the target audience of this sort of article is.
As my sibling has highlighted, there is a shadow on Windows 10 when one window hovers over another.
Weirdly, the popup menu on the desktop DOES have a shadow but the right-click menu on the start menu does not...
One disappointing part of Windows 10 is this lack of consistency. Icons are the worst - 25 years of icons all bundled together. Looks at the icons inside C:\Windows\explorer.exe or shell32.dll for a mishmash of graphical styles from yesteryear. This makes programs like MMC feel out-of-place on the modern system.
But if you want to blur a whole element (eg, your main page content while a modal is open) instead of just the part behind another one, that would be "filter: blur(<length>)" - and works in all modern browsers except IE (even my Android Firefox displays the demos on this page correctly):
...but only with a prefix, and only the most recent versions, and it doesn't have much market share. "Effectively nothing supports it", if you'd rather.
Yup. I noticed Apple has updated the top navbar on the new product pages where it is enabled. It falls back to unblurred-translucent container on other browsers.
"Doesn't have much market share" really depends I guess on your domain doesn't it? For example, if you're building something that's going to get a fair bit of mobile traffic iOS Safari would represent a fair chunk.
Besides, most applications of backdrop-filter would fit into 'progressive enhancement' and the rest of the browsers that don't support it would just fall back no a non-blurred transparent background which is fine most of the time.
Those UI animations are all fine and dandy until you log in via remote desktop or similar, over VPN on a not-so-fast network. Then you learn to hate it.
Is there an easy way to disable such animations in the browser, e.g. via Firefox extension?
I believe setting delay/duration to 0ms should still fire events for the animation/transition (unlike "animation/transition: none") which should avoid breaking anything that relies on those events.
You can also create the illusion of 3d from a moving display panel, and adjusting the image according to the position of the viewer. Can't find an example now.
the shadow elevation effect can also been seen as a flat surface lying on top of another flat surface with all dust surrounding it, or as a rectangular hole inside a surface with stains around it
That's more of a description than an explanation. If they're trying to establish metaphor to the real world then this obviously simply doesn't meet the bar.
Material design is built out of this "material" that mimics some real world things like shadows for user affordance, but is mostly magical. I'm pretty sure the only real world metaphor they're trying to use for the button is a floating panel of some magical material that floats closer to the screen when you tap it.
Edit: You edited your comment, but I'll leave the stuff below for posterity. As a response to your new edit: a selectively applied metaphor boils down to stylization. That's fine by me, I would just prefer that they admit that no design abstraction is airtight. What you call "magic" here can also be called "arbitrary stylization."
To be fair, putting something like this together is obscenely difficult and kudos to the Goog for sharing it with everyone. I just wish it were a little less word-of-god-y. The fact is that the material metaphor is not a "unifying theory of a rationalized space and a system of motion." It's inspiration, at best.
-----------
Response to your pre-edit:
Really?
> Material is the metaphor
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
"It's grounded in reality... but not!"
> Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
"Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing."
> The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
"Except where we decide we don't want to be realistic."
This is all fine. Stylistic choices do have a place in design, of course. I just really hate the language you see all over design systems that essentially resolves to "p and not p." "Physically accurate and totally physically inaccurate."
Not everything needs a manifesto to prove that it's not just arbitrary stylization, especially when the manifesto itself, in describing said design justifications, is leaky.
Sorry about that, I have a bad habit of publishing my fist draft. I agree with what you've written. Like you say I don't think they're trying to avoid arbitrary stylization or selective metaphors, rather providing some arbitrary styles and selective metaphors that make up a consistent design. It's fine if you don't like it, but I haven't seen anyone who likes it pretending it's anything more than that.
Biased by growing up with CUA GUI design principles, I can't help but to think that no amount of amazing code (html, css3, js jit) will give a significant advantage compared to that Win2K form screenshot.
I feel like the "magazine" trend gave way more expressiveness to talk to the user (finer more dynamic layouts) but not much more bandwidth the other way around.
Hardly "modern", but here's a description of the graphical design of The Sims pie menus [1] that I impemented in 1999 and wrote up in 2001:
The classic papers on transparent user interfaces include Toolglass and Magic Lenses: The See-Through Interface (1993) [2], and A Taxonomy of See-Through Tools (1994) [3].
The pie menus in The Sims [4] use a combination of desaturation, darkening, and alpha blending to feather the edges of the menu.
Why transparency and the other effects? I didn't want the pie menus to obscure too much of the scene behind them. You can see through the pie menu as the animation continues on in real time behind it. The head of the currently selected person is drawn in the center of the pie menu, and follows the cursor by looking at the currently selected item.
I found it necessary to somehow separate the head from the rest of the scene, otherwise it looked like a giant head was floating in a room of the house! Drawing a solid opaque menu background would obscure too much of the scene. But even a partially transparent menu background still did not visually separate the head from the background scene enough. It looked muddy and cluttered, instead of crisp and bright.
So instead of simply alpha blending, I actually made it desaturate the background (removes the color so it's gray scale), and darken it (like casting a colorless shadow).
I wanted the colorful head to look sharp and bright up against the dark gray background. So the effect looks at the Z buffer to clip out the head in the menu center, so it remains bright and colorful against the dark gray background. That gives it visual "pop" that separates the head from the background. The edges of the effect are feathered, so there's no sharp line dividing the inside and the outside of the menu (useless visual clutter).
The gray shadow just gradually tapers off with distance, suggesting that the pie menu active area extends to the edge of the screen, not confined to the borders of a circle. The labels are drawn with high contrast drop shadows around the pie menu, so they stand out and easy to read, partially overlapping the shadow so they're look like they're part of the menu.
There's special code to perform that particular combination of pixel filters in real time, to every frame just after the 3D rendering phase.
The pixelated censorship effect works the same way as the pie menu shadow, like a Photoshop filter run after the 3D rendering phase. There's a special suit type that's tagged as a "censorship" suit. It consists of bounding boxes attached to the varius bones of the skeleton that you can select to censor. So if you just want to censor the head, you attach the head censor suit to the head bone. The 3D character renderer transforms the 8 vertices but doesn't draw anything, and stashes the screen bounding box away for the pixelation filter to draw later. That's how it can censor just the crotch of naked men, but also the chests of naked girls gone wild.
Blurring is a memory bandwidth and therefore power intensive effect, so it's more costly in terms of battery live on mobile devices than other more local effects like darkening and desaturation. Of all the visual effects today's gui design fads could choose to fetishize, blurring is unfortunately power hungry.
If "Material Design" was intended to conserve battery life, it shouldn't have been so focused on looking blurry. ;) Of course you can draw simple soft shadows without actually blurring the content underneath, but Apple's blurry iOS gui and macOS desktop windows using NSVisualEffectView's "Vibrancy" and blurring effects require a lot of power.
"Apple believes that mobile devices should be seen as a window in to another world. They embrace infinite depth in their applications and use components such as their alert buttons and text messages with blurred background to create the feeling that the items are floating and exist in their own space. Another example of this would be the click wheel for their timer. See how the numbers recede in to the background? That would never happen in material design."
I don't remember the exact link, but I read an article from Apple describing the GPU accelerated blurring and "vibrancy" effects they rolled out in their desktop user interface, which cautioned about how expensive they were, because the more you blur, the wider the region of support of the convolution kernel, therefore the more memory accesses you have to perform per pixel. Even on the desktop, they warned that it had a considerable cost. So it's a pity that blurring has become so trendy on battery operated mobile devices.
Maybe it was this WWDC talk -- it contains lots of useful information about NSVisualEffectView performance:
"You want to use the active state explicitly, very sparingly.
It can affect performance and battery life, because if you have a lot of visual effect views around they're always active, but you probably want to use it in places where you know that view is always going to be active and maybe it's a panel that can't become key for whatever reason." [...]
"So you notice that blur we had and this may not surprise you but the blur effect isn't exactly free. It does cost something, and that something is graphics performance and battery usage. And sometimes, though, the cost is worth the results. So, something you should be aware of here is you're not trying to not use this effect. You want your app to look beautiful. You just need to pay attention to striking a balance between that appearance and the resource utilization." [...]
"Corbin mentioned that layers are often required, especially for in window blurs, and layer usage is increasing just in general." [...]
"If you add a lot of VisualEffectViews to your app and all of the sudden you notice that maybe your window resizing animations or your full screen transitions have become slow, you can set this [Accessibility Preference / Display Subsection / Reduce Transparency] to Yes, and this will avoid the cost we pay when doing that blur.
So if you notice when this is turned on your performance is fine, and when this is turned off your performance is kind of sluggish, it's probably you're using a VisualEffectView that's too large or too many VisualEffectViews, and that's a cue to dial down the transparency and blurring in the app." [...]
As long as we've got a lot of GPU cycles to burn, I'd love to see a live video user interface with beautiful simulated vidicon camera tube blooming and overdriving effects.
"An image orthicon camera can take television pictures by candlelight because of the more ordered light-sensitive area and the presence of an electron multiplier at the base of the tube, which operated as a high-efficiency amplifier. It also has a logarithmic light sensitivity curve similar to the human eye. However, it tends to flare in bright light, causing a dark halo to be seen around the object; this anomaly is referred to as "blooming" in the broadcast industry when image orthicon tubes were in operation. Image orthicons were used extensively in the early color television cameras, where the increased sensitivity of the tube was essential to overcome their very inefficient optical system of the other parts of the camera."
"Practical implementation: Current generation gaming systems are able to render 3D graphics using floating point frame buffers, in order to produce HDR images. To produce the bloom effect, the HDRR images in the frame buffer are convolved with a convolution kernel in a post-processing step, before converting to RGB space. The convolution step usually requires the use of a large gaussian kernel that is not practical for realtime graphics, causing programmers to use approximation methods.
Use in Games: Some of the earliest games to use the bloom effect include Outcast and Ico. Bloom was later popularized within the game development community in 2004, when an article on the technique was published by the authors of Tron 2.0. Bloom lighting has been used in many games, modifications and game engines such as Quake Live, Cube 2: Sauerbraten and the Spring game engine. The effect is popular in current generation games, and is used heavily in PC, Xbox 360 and PlayStation 3 games as well as Nintendo GameCube and Wii. Popular browser-based games such as the MMORPG RuneScape make use of the bloom effect as well."
"Afterimage is a computer graphics effect used by video games. The effect takes the bright parts of a rendered image of the scene, and then fades in a motion blur style fashion as the scene progresses. The result is that bright areas leave a fading trail when the camera is moving. Afterimage can be used to enhance blooming. In some games, the process is named light trail."
73 comments
[ 3.0 ms ] story [ 137 ms ] threadThe shadow grows, hinting at the fact that the element is elevated, and moves closer on the z-index. What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger as well?
The right and bottom animations show the blue button as getting closer, but the end result on the left doesn't reflect that at all.
Why is it coming closer in the pressed state? Aren't I pushing it down?
I mostly label this whole "material design" crap as "flat & minimalistic (metro-like) design" + "minimal volumetric efdects backported from the abandoned skeumorphic design bandwagon" in order to give the user some "visual cues".
In truly like the style and cues of material design practically... but there is a subconscious "uncanny valley intuition" about it that triggers a primitive warning sign in my primitive bran or something... kind of like "fear/stress about something that is practically the right thing but it... deceives you in a way and maybe also in others". I find both flat/minimalistic and rich/skeomorphic interfaces more soothing / calming / trust inducing.
I think most banks and ecommerce and enterprise/infrastructure UI professionals also share this intuition with me: you see in most banking, AWS etc. UIs always "a touck of skomorphism" plus "a lack of unnatural/magical effects", and it makes you trust more the app, be more *relaxed and confident" and willing to open you soul & wallet to it...
Funnily enough, the opposite is true for me. Banks and eCom sites that don't have polished modern flattish interfaces make me think the company is out of its depth and likely insecure
Copy/pasting from another comment of mine, quotes from the manifesto:
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
"It's grounded in reality... but not!"
> Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
"Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing."
> The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
"Except where we decide we don't want to be realistic."
Or am I not touching the button? That seems weird considering my finger is literally on the button.
What I find much worse is that the pressed state has a bigger shadow, meaning it is further away from the plane it casts the shadow on. Isn't that the wrong way around, or is the labeling wrong here?
They can decide that the button raises when you touch it, since you are not touching it anyway, just the surface in top of it.
So at least it is coherent with the material principles.
Depends. If they used parallel projection, then not. See [1]. This corresponds to an infinite focal length.
[1] https://en.wikipedia.org/wiki/Parallel_projection
Also depends on what their lighting model is and a whole host of other factors.
One disappointing part of Windows 10 is this lack of consistency. Icons are the worst - 25 years of icons all bundled together. Looks at the icons inside C:\Windows\explorer.exe or shell32.dll for a mishmash of graphical styles from yesteryear. This makes programs like MMC feel out-of-place on the modern system.
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-fi...
But if you want to blur a whole element (eg, your main page content while a modal is open) instead of just the part behind another one, that would be "filter: blur(<length>)" - and works in all modern browsers except IE (even my Android Firefox displays the demos on this page correctly):
https://developer.mozilla.org/en/docs/Web/CSS/filter#blur()_...
And IIRC there's some non-standard way to achieve the same effect in IE.
Hopefully other browsers will catch up soon.
Besides, most applications of backdrop-filter would fit into 'progressive enhancement' and the rest of the browsers that don't support it would just fall back no a non-blurred transparent background which is fine most of the time.
Basically just Safari and only with a prefix.
Is there an easy way to disable such animations in the browser, e.g. via Firefox extension?
I've seen a demo where the user tilts a tablet, and the image on the tablet is adjusted to create a 3d effect.
https://www.youtube.com/watch?v=Jd3-eiid-Uw
More great stuff: http://www.johnnylee.net
To be fair, putting something like this together is obscenely difficult and kudos to the Goog for sharing it with everyone. I just wish it were a little less word-of-god-y. The fact is that the material metaphor is not a "unifying theory of a rationalized space and a system of motion." It's inspiration, at best.
-----------
Response to your pre-edit:
Really?
> Material is the metaphor
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
"It's grounded in reality... but not!"
> Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
"Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing."
> The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
"Except where we decide we don't want to be realistic."
This is all fine. Stylistic choices do have a place in design, of course. I just really hate the language you see all over design systems that essentially resolves to "p and not p." "Physically accurate and totally physically inaccurate."
Not everything needs a manifesto to prove that it's not just arbitrary stylization, especially when the manifesto itself, in describing said design justifications, is leaky.
http://worrydream.com/MagicInk/
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
That heading is in summary, and it doesn't contradict the part I quoted.
I feel like the "magazine" trend gave way more expressiveness to talk to the user (finer more dynamic layouts) but not much more bandwidth the other way around.
The classic papers on transparent user interfaces include Toolglass and Magic Lenses: The See-Through Interface (1993) [2], and A Taxonomy of See-Through Tools (1994) [3]. The pie menus in The Sims [4] use a combination of desaturation, darkening, and alpha blending to feather the edges of the menu.
Why transparency and the other effects? I didn't want the pie menus to obscure too much of the scene behind them. You can see through the pie menu as the animation continues on in real time behind it. The head of the currently selected person is drawn in the center of the pie menu, and follows the cursor by looking at the currently selected item.
I found it necessary to somehow separate the head from the rest of the scene, otherwise it looked like a giant head was floating in a room of the house! Drawing a solid opaque menu background would obscure too much of the scene. But even a partially transparent menu background still did not visually separate the head from the background scene enough. It looked muddy and cluttered, instead of crisp and bright.
So instead of simply alpha blending, I actually made it desaturate the background (removes the color so it's gray scale), and darken it (like casting a colorless shadow).
I wanted the colorful head to look sharp and bright up against the dark gray background. So the effect looks at the Z buffer to clip out the head in the menu center, so it remains bright and colorful against the dark gray background. That gives it visual "pop" that separates the head from the background. The edges of the effect are feathered, so there's no sharp line dividing the inside and the outside of the menu (useless visual clutter).
The gray shadow just gradually tapers off with distance, suggesting that the pie menu active area extends to the edge of the screen, not confined to the borders of a circle. The labels are drawn with high contrast drop shadows around the pie menu, so they stand out and easy to read, partially overlapping the shadow so they're look like they're part of the menu.
There's special code to perform that particular combination of pixel filters in real time, to every frame just after the 3D rendering phase.
The pixelated censorship effect works the same way as the pie menu shadow, like a Photoshop filter run after the 3D rendering phase. There's a special suit type that's tagged as a "censorship" suit. It consists of bounding boxes attached to the varius bones of the skeleton that you can select to censor. So if you just want to censor the head, you attach the head censor suit to the head bone. The 3D character renderer transforms the 8 vertices but doesn't draw anything, and stashes the screen bounding box away for the pixelation filter to draw later. That's how it can censor just the crotch of naked men, but also the chests of naked girls gone wild.
[1] https://www.youtube.com/watch?v=-exdu4ETscs
[2] https://research.tableau.com/sites/default/files/1993-Toolgl...
[3] http://www.billbuxton.com/TGtaxonomy.html
[4] http://www.tsomania.net/assets/images/gameguides/sprinklers_...
If "Material Design" was intended to conserve battery life, it shouldn't have been so focused on looking blurry. ;) Of course you can draw simple soft shadows without actually blurring the content underneath, but Apple's blurry iOS gui and macOS desktop windows using NSVisualEffectView's "Vibrancy" and blurring effects require a lot of power.
3 Differences – Apple’s HIG vs Google’s Material Design Standards: http://nectardesign.com/3-differences-apples-hig-vs-googles-...
"Apple believes that mobile devices should be seen as a window in to another world. They embrace infinite depth in their applications and use components such as their alert buttons and text messages with blurred background to create the feeling that the items are floating and exist in their own space. Another example of this would be the click wheel for their timer. See how the numbers recede in to the background? That would never happen in material design."
I don't remember the exact link, but I read an article from Apple describing the GPU accelerated blurring and "vibrancy" effects they rolled out in their desktop user interface, which cautioned about how expensive they were, because the more you blur, the wider the region of support of the convolution kernel, therefore the more memory accesses you have to perform per pixel. Even on the desktop, they warned that it had a considerable cost. So it's a pity that blurring has become so trendy on battery operated mobile devices.
Maybe it was this WWDC talk -- it contains lots of useful information about NSVisualEffectView performance:
Adopting Advanced Features of the New UI of OS X Yosemite: http://asciiwwdc.com/2014/sessions/220
"You want to use the active state explicitly, very sparingly.
It can affect performance and battery life, because if you have a lot of visual effect views around they're always active, but you probably want to use it in places where you know that view is always going to be active and maybe it's a panel that can't become key for whatever reason." [...]
"So you notice that blur we had and this may not surprise you but the blur effect isn't exactly free. It does cost something, and that something is graphics performance and battery usage. And sometimes, though, the cost is worth the results. So, something you should be aware of here is you're not trying to not use this effect. You want your app to look beautiful. You just need to pay attention to striking a balance between that appearance and the resource utilization." [...]
"Corbin mentioned that layers are often required, especially for in window blurs, and layer usage is increasing just in general." [...]
"If you add a lot of VisualEffectViews to your app and all of the sudden you notice that maybe your window resizing animations or your full screen transitions have become slow, you can set this [Accessibility Preference / Display Subsection / Reduce Transparency] to Yes, and this will avoid the cost we pay when doing that blur.
So if you notice when this is turned on your performance is fine, and when this is turned off your performance is kind of sluggish, it's probably you're using a VisualEffectView that's too large or too many VisualEffectViews, and that's a cue to dial down the transparency and blurring in the app." [...]
"Something I want to point...
Overblooming picture effects from my Sony AVC-3250CE B&W camera: https://www.youtube.com/watch?v=aKnTNHyPNrs
More target overdrive visual effects from Concord NEI-17 vidicon camera: https://www.youtube.com/watch?v=Srga4173uaY
The Tubes - White Punks On Dope (1977 R0X M1X): https://www.youtube.com/watch?v=0rpXIuTcOiI
Vidicon Camera Tube: https://en.wikipedia.org/wiki/Video_camera_tube#Vidicon
"An image orthicon camera can take television pictures by candlelight because of the more ordered light-sensitive area and the presence of an electron multiplier at the base of the tube, which operated as a high-efficiency amplifier. It also has a logarithmic light sensitivity curve similar to the human eye. However, it tends to flare in bright light, causing a dark halo to be seen around the object; this anomaly is referred to as "blooming" in the broadcast industry when image orthicon tubes were in operation. Image orthicons were used extensively in the early color television cameras, where the increased sensitivity of the tube was essential to overcome their very inefficient optical system of the other parts of the camera."
Bloom Shader Effect: https://en.wikipedia.org/wiki/Bloom_(shader_effect)
"Practical implementation: Current generation gaming systems are able to render 3D graphics using floating point frame buffers, in order to produce HDR images. To produce the bloom effect, the HDRR images in the frame buffer are convolved with a convolution kernel in a post-processing step, before converting to RGB space. The convolution step usually requires the use of a large gaussian kernel that is not practical for realtime graphics, causing programmers to use approximation methods.
Use in Games: Some of the earliest games to use the bloom effect include Outcast and Ico. Bloom was later popularized within the game development community in 2004, when an article on the technique was published by the authors of Tron 2.0. Bloom lighting has been used in many games, modifications and game engines such as Quake Live, Cube 2: Sauerbraten and the Spring game engine. The effect is popular in current generation games, and is used heavily in PC, Xbox 360 and PlayStation 3 games as well as Nintendo GameCube and Wii. Popular browser-based games such as the MMORPG RuneScape make use of the bloom effect as well."
Afterimage Shader Effect: https://en.wikipedia.org/wiki/Afterimage_(shader_effect)
"Afterimage is a computer graphics effect used by video games. The effect takes the bright parts of a rendered image of the scene, and then fades in a motion blur style fashion as the scene progresses. The result is that bright areas leave a fading trail when the camera is moving. Afterimage can be used to enhance blooming. In some games, the process is named light trail."