本稿は「RectangularShadow: Fast rectangle shadows in Qt 6.9」の抄訳です。
約2か月後にリリース予定のQt 6.9では、多くの素晴らしい追加機能や改善が利用可能になります。そのうちの1つが、Quick.Effectsモジュールに追加された新しいQt Quick要素であるRectangularShadowです。
簡単に言えば、RectangularShadowには、色、オフセット、拡散、ぼかしなどの値を持つCSS box-shadowに類似したAPIが含まれています。しかし、ほとんどのCSS box-shadowの実装で使用されているガウスぼかし(Gaussian Blur)ではなく、このAPIでは、ぼかした四角形のレンダリングに符号付き距離場（signed distance field, SDF）を使用しています。この組み合わせにより、使い慣れたAPIで高性能な（四角形の）影を実現できます。
以下のビデオでは、Qt Quickのサンプル・アプリ NeumorphicPanelを例に、基本機能を紹介しています。
上記のneumorphic効果は、2つのRectangularShadow要素で作成されています。ついでに、カスタムしたQt Quick ControlのスライダーとボタンにもRectangularShadowを使用しています。
パフォーマンス
一般的に、影にはぼかし効果が必要ですが、CPUまたはGPUで処理を行う場合、これはコストのかかる処理となります。このため、RectangularShadowは一般的な影ではなく、特に（丸みを帯びた）長方形の形状用に作られています。この制限により、コストのかかるぼかし処理を行わずに滑らかな影を実現できます。
CPUやGPUに負荷をかけずにぼかし処理ができることを証明するために、簡単なテスト用アプリケーションを実装しました。これを旧式の100ドル程度の第2世代Lenovo Tab M10 HD（Mediatek MT6762 + PowerVR GE8320）で実行したところ、60fpsを維持しながら、30個の動的に変化する影をレンダリングすることができました。一方、より高性能なGalaxy Tab S8（Qualcomm SM8450 + Adreno 730）では、80の影を120fpsのフルスピードでレンダリングできます。両方のデバイスの例を示すビデオがこちらです：
影の半径、オフセット、ぼかし量、不透明度がすべてアニメーション化される様子に注目してください。ウェブ技術や一般的なぼかし影を使って同様のアニメーションを行うと、処理が遅くなったり、影のテクスチャがキャッシュされている場合はメモリを大量に消費したりします。RectangularShadow を使用すれば、レンダリングをキャッシュせずに動的に行うことができます。
カスタマイズ
説明したように、APIはCSS box-shadowと非常に似ています。明確な追加機能として、影にカスタムシェーダー効果を適用できるmaterialプロパティがあります。これにより、幅広いカスタマイズが可能になります。カスタム素材を最も簡単に作成するには、Qt Quick Effect Makerを使用し、必要なAPIを提供する新しいRectangularShadowノードを使用します。
以下は、カスタム素材を使用したRectangularShadowsの3つの例です。すべて、シェーダーコードの変更を最小限に抑え、Effect Maker付属のノードを使用して素早く作成しました。
まとめ
新しいRectangularShadowは、Qt QuickのUIに丸みを帯びた長方形の影/グロー効果を追加する非常に簡単で効率的な方法です。特にパフォーマンスが重要な動的な影の場合には、ぜひご検討ください。
上記のすべてのサンプルのソースコードは、こちらでご覧いただけます：
- 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
