Bring 3D to Life in Flutter with flutter_scene and Flutter GPU
Article Summary
Amorn Apichattanakul built a 3D hotel tour in Flutter and discovered the hard truth: one demo ran at 120fps, the other barely hit 25fps. Here's what actually works for 3D in production apps.
A Google Developer Expert stress-tested Flutter's new 3D capabilities by building two demos—a realistic hotel room and a stylized island—measuring every graphics technique on an iPhone 17 Pro Max. The results reveal exactly where Flutter GPU and flutter_scene excel, and where they fall short compared to Unity.
Key Takeaways
- Rendering at 85% resolution saved 21-29% frame time with no visible difference
- Dynamic global illumination cost up to 55% performance—not worth it for apps
- Hidden 3D tabs cost zero: background scenes used only 0.4ms per frame
- Realism is expensive, style is cheap: stylized island hit 120fps vs hotel's 25fps
- Flutter Scene runs as a widget with hot reload, Unity needs platform views
3D in Flutter works beautifully for stylized experiences that prioritize mood over realism, but AAA-quality visuals still require Unity's mature tooling.
About This Article
Amorn Apichattanakul profiled the UI thread and found it was idle 87-89% of the time, waiting for the GPU to finish work. This hid the real issue. Metal's CreateCommandBuffer was stalling because the GPU couldn't keep up with earlier frames.
Amorn discovered that flutter_scene records and submits every render pass from the UI thread, so the GPU needed to work faster. He cut the render scale to 85%, turned off global illumination, and removed unnecessary scene renders.
Running at 85% resolution with dynamic GI disabled boosted the average frame rate by 1.41x, reaching 1.72x at peak across 12 camera positions. The hotel demo went from 10-25 fps up to 26 fps on iPhone 17 Pro Max. The quality drop was barely noticeable.