跪拜 Guibai
← All articles
Frontend · Android · Flutter

Flutter's 3D Rendering Landscape Splits Into Two Camps: Widget-First vs. Game-First

By 恋猫de小郭 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Flutter developers can now add interactive 3D models, product configurators, or lightweight spatial experiences directly inside their apps without bridging to a separate engine like Unity. The widget-first approach of `glint` means 3D content behaves like any other Flutter state, keeping the development model familiar.

Summary

Flutter's 3D capabilities are maturing beyond experimental demos into two practical, community-driven engines. `kiddo4/glint` is a lightweight, widget-first engine that manages 3D scenes as Flutter state, letting developers swap materials with `setState` and anchor widgets to model surfaces. It provides backend-agnostic contracts for physics, animation, particles, and audio, with optional native backends for Box3D physics and SoLoud audio.

`bdero/flutter_scene` takes the opposite approach: a heavier engine aimed at game development that can render Flutter widgets inside a 3D scene. Both engines share the same `flutter_gpu` foundation, uploading vertex, index, and texture data as GPU-resident resources once, then minimizing per-frame overhead to uniform updates and draw calls. A separate project, `redstone_dart`, even reimplements Minecraft modding in Dart with hot reload.

With Impeller now complete on Windows desktop, `flutter_gpu` has full platform coverage. The ecosystem is ready for apps that mix 2D UI with interactive 3D models, product configurators, and lightweight spatial experiences without leaving the Flutter widget tree.

Takeaways
`kiddo4/glint` manages 3D scenes as ordinary Flutter state, using `setState` to swap materials and anchoring widgets to model surfaces.
`bdero/flutter_scene` can embed Flutter widgets directly inside a 3D game scene, reversing the typical widget-contains-3D relationship.
Both engines upload vertex, index, and texture data once as GPU-resident resources, then minimize per-frame work to uniform updates and draw calls.
Directional light shadows in `glint` write depth into the red color channel to avoid a native crash when two render passes share one command buffer in Flutter GPU.
Physics, animation, particle, and audio systems are defined as pure Dart contracts, with native backends compiled via Dart 3.x native assets at build time.
Shaders can be supplied as pre-compiled `.shaderbundle` files or authored as JSON Shader Graphs and compiled offline into Impeller shader packages.
`redstone_dart` reimplements Minecraft modding entirely in Dart with hot reload support.
Impeller's completion on Windows desktop means `flutter_gpu` now supports all platforms for 3D rendering.
Conclusions

Flutter's 3D ecosystem is bifurcating along a clear line: lightweight widget-first engines for app developers who want 3D as just another UI element, versus heavier engines for game developers who want Flutter UI inside their 3D world.

The community is building what the Flutter team hasn't promoted — `flutter_gpu` has no official marketing push, yet multiple production-capable engines have emerged from it.

Writing depth into a color channel to work around a Flutter GPU crash is the kind of pragmatic hack that signals a maturing ecosystem willing to ship despite platform limitations.

The Dart-native-assets compilation pipeline for C++ extensions means these engines can ship performant native physics and audio without requiring developers to set up separate native build toolchains.

Concepts & terms
flutter_gpu
Flutter's low-level GPU API that provides direct access to the Impeller rendering engine, enabling custom 3D rendering within the same memory space as Flutter's 2D widget tree.
Impeller
Flutter's next-generation rendering engine that replaces Skia on most platforms, providing predictable performance through pre-compiled shaders and now supporting Windows desktop for full platform coverage.
glTF/GLB
Standard 3D model file formats. glTF (GL Transmission Format) is an open standard for efficient 3D asset delivery; GLB is its binary container version.
Möller–Trumbore algorithm
A fast ray-triangle intersection algorithm used here for click-picking 3D objects and determining occlusion for labels positioned in 3D space.
PBR (Physically Based Rendering)
A shading model that simulates how light physically interacts with surfaces, using material properties like roughness and metalness to produce realistic results under image-based lighting.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗