.webp)
There will be plenty of nice additions and improvements available in Qt 6.9, due to be released in about 2 months. One of them is the new RectangularShadow Qt Quick element in the Quick.Effects module.
In a nutshell, RectangularShadow contains API similar to CSS box-shadow, with color, offset, spread and blur values. But instead of using Gaussian blur like most CSS box-shadow implementations, it uses signed distance field (SDF) math for rendering the blurred rectangle. This combination offers high-performance (rectangle) shadows, with familiar API.
Here is a video of the NeumorphicPanel example application, showing the basic features and API.
The above neumorphic effect is made with 2 RectangularShadow elements. As a bonus, custom Quick Controls sliders and buttons are also using RectangularShadow.
Performance
Generally, shadows require a blur effect which is a costly operation whether done on CPU or GPU. For this reason, RectangularShadow is not a general shadow but is specifically made for (rounded) rectangle shapes. This restriction allows smooth shadows without a costly blurring operation.
To prove this, we implemented a simple testing application. Old ~$100 2nd generation Lenovo Tab M10 HD (Mediatek MT6762 + PowerVR GE8320) can render 30 dynamically changing shadows maintaining a solid 60fps. On the other hand, the more powerful Galaxy Tab S8 (Qualcomm SM8450 + Adreno 730) renders 80 shadows at full 120fps. Here's a video showing the example on both of those devices:
Note how the shadows radius, offset, blur amount and opacity all animate. Doing similar animations with web technologies or general blurring shadows would either be slow or consume plenty of memory if shadow textures were cached. With RectangularShadow, rendering can be done dynamically without caching.
Customization
As explained, the API is very similar to CSS box-shadow. One clear addition is the material property which allows providing custom ShaderEffect for the shadow. This allows a wide range of customization possibilities. The easiest way to create custom material is by using Qt Quick Effect Maker and including the new RectangularShadow node to provide the required API.
Here are 3 examples of RectangularShadows with custom materials. All of them were quickly composed using built-in Effect Maker nodes with minimal shader code modifications.
Summary
The new RectangularShadow is a very easy and performant way to add rounded rectangle shape shadow/glow elements into your Qt Quick UIs. So consider using it, especially with dynamic shadows when the performance is important.
Source codes of all the above examples are available in:
- https://code.qt.io/cgit/qt/qtdeclarative.git/tree/examples/quick/multieffect/neumorphicpanel
- https://git.qt.io/kagronho/rectangularshadowperf
- https://git.qt.io/kagronho/rectangularshadowcustom
