新しいレンダリングエンジンImpellerとは？

新しいレンダリングエンジンImpellerとは？特性と実装時の工夫を紹介 4/22

2 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential
/ not for distribution 利廣　悠司 2025年4月1日入社エネルギークラウド事業部 EVユニットチーム所属東京都在住（週一出社）経歴その他・大学3回生の時にプログラミングを始めて、ブロックチェーン会社で 1年ほどインターン・ドイツの42 Heilbronnで1年半CSを勉強　-> 英語と”Mit karte bitte”だけでドイツを生き抜く・2025年2月からEnechnageでモバイルエンジニアとして働き始める・1年半ドイツにいましたが、ドイツ語話せません・サウナ好きで、特に大うちわの激アツロウリューが好きです・ザックエフロンに憧れてジムに行ってます・ハンティングを体験したいなと漠然に思ってます・ロシア語の勉強を始めました　　トシヒロ　ユウジエンジニア confidential わたしをとりまくエネルギーその他：   電力：東京電力ガス：東京ガス EV車種：TESLA(将来)  

INDEX レンダリングエンジンとは？ SkiaからImpellerへの移行 Imepeller vs Skia Impellerの描画の仕組み Impellerを活かすための工夫 1 2
3 4 5

レンダリングエンジンとは？

/ not for distribution 　UIコードを実際のUIに変換レンダリングエンジン OpenGL(Unity) Metal(iOS)

/ not for distribution 　Flutterの従来のレンダリングエンジンSkia ・マルチプラットフォームに対応：OpenGL、Vulkan、Metalなど各種GPU API上で動作可能・豊富な描画方法：Vector、テキスト、画像など・フィルターとエフェクト：Blur、色変換、影など

SkiaからImpellerへの移行

/ not for distribution 　Skiaの抱える問題 Since we currently pay a price (jank) each time a new shader is used, and since some animations end up using a lot of new shaders, one option would be to use less specialized shaders. If we had a static set of shaders, we could asynchronously compile them on program startup, so that by the time the application runs an animation we can use this static set and not stutter while we prepare a new one… ・Skiaにおいて、新しいシェーダー利用時のカクつきが問題　->特にiOSでは、アプリを終了するたびにシェーダーキャッシュが削除される　->初めてアプリを起動した時と同じ待機時間が発生 ※シェーダーとは、頂点座標や色の計算をするための小さなプログラム

/ not for distribution 　Why？ランタイム（描画時）にシェーダーのコンパイルを行っているから！！ ->マルチプラットフォームに対応しているからしょうがない...

/ not for distribution 　Impellerの登場 Impeller：Skiaの弱点を補う+Flutterのためだけに最適化・ビルド時にシェーダーをコンパイル　->ランタイムですぐにシェーダーを使える・画像などの素材、図形や色の情報を含むバッファにタグ付け　->内部の動きをモニタリングしやすい・積極的な並列処理を活用　->単一フレームのワークロードをより高速化検証！

Skia vs Impeller

/ not for distribution Skia ・描画時に全てのシェーダーをコンパイル Impeller ・ビルド時にほとんどのシェーダーをコンパイル初期起動時の挙動参考：Nifty Engineering FlutterがSkiaをやめる！？ 7倍速い！

Impellerの描画の仕組み

/ not for distribution 参考：Introducing Impeller - Flutters new rendering engine(Youtube)) コマンドリストの生成 1. コードをもとに、描画指示を構造化した「Render Tree」を生成 2. Render Treeをもとに具体的なレイアウトと描画のためのコマンドに分解した、「Display List」を生成 3. Display Listを元に描画を開始(次スライド)

/ not for distribution 参考：Introducing Impeller - Flutters new rendering engine(Youtube)) 描画までの過程 1. 全ての頂点座標を取得 3. 三角形が被っているピクセルを取得 2. 三角形に分解 4. 色彩の計算

/ not for distribution 参考：Introducing Impeller - Flutters new rendering engine(Youtube)) ビルド時にコンパイルされたシェーダーを使用 1. 全ての頂点座標を取得 3. 三角形が被っているピクセルを取得 2. 三角形に分解 4. 色彩の計算既にコンパイルされたシェーダーを使用 ↓ 描画時にシェーダーをコンパイルする時間を省略できる！頂点シェーダー使用フラグメントシェーダー使用

Impellerを最大限活かすための工夫

/ not for distribution 　透明度のアニメーションには「AnimatdOpacity」よりも「FadeTransition」を使用する透明度（opacity）をアニメーションさせる場合、 Impeller環境下でより効率的な動作を実現 AnimatedOpacity FadeTransition + AnimatedBuilder + Opacity

/ not for distribution RepaintBoundaryで再描画範囲を制限・RepaintBoundaryで囲むことで、不必要に広範囲のウィジェットを再描画しない -> 子ウィジェットツリーを独立した描画ターゲットとしてキャッシュ ->バッテリー消費の抑制検証

/ not for distribution ・Impellerはビルド時にシェーダーをコンパイルする　->描画にかかる時間を大幅に削減できる！・Impellerを最大限活用するとき... 　・FadeTransition：フェードのアニメーションを利用　・RepaintBoundary：再描画する部分を限定まとめ

/ not for distribution ご静聴、ありがとうございました！

エネルギーの未来をつくる CHANGING ENERGY FOR A BETTER WORLD

新しいレンダリングエンジンImpellerとは？

新しいレンダリングエンジンImpellerとは？

Yuji Toshihiro

More Decks by Yuji Toshihiro

Featured

Transcript