Show HN: Thermion, an open source 3D rendering toolkit for Flutter and/or Dart (thermion.dev)

52 points by nmfisher ↗ HN
I'd like to share Thermion, an open source 3D rendering toolkit I made for Flutter and/or Dart.

This came about when I needed a 3D renderer for a Flutter app[0] I was building. At the time, the only off-the-shelf option was to embed Unity, which wasn't ideal for a few reasons - unstable build process, compositing and transparency issues, and licensing uncertainty, just to name a few. In any event, frankensteining Unity (C#) together with Flutter (Dart) didn't seem like a great solution.

After browsing for alternative renderers, I discovered Filament[1], an open-source, cross-platform Physically Based Rendering engine from Google. I initially only wrote some simple bindings to embed Filament inside a Flutter Android/iOS app, but have since added more functionality, and have expanded this to cover Windows, MacOS and Web (there was Linux support at one point, too, but I haven't been keeping up with it I'm afraid).

Last week I published the first Thermion release to pub.dev[2], and with that milestone it seemed a good time to share with HN. This is also a call for contributors if anyone wants to help[3].

Some examples:

- A live DartPad playground so you can try the Dart-only (i.e. non-Flutter version) of Thermion in browser (Chrome only for now). https://dartpad.thermion.dev

- My personal website, where I added an interactive clone of myself https://nick-fisher.com

- Prouder (a Flutter app from one of the Thermion contributors) https://apps.apple.com/us/app/prouder/id6498891289 https://play.google.com/store/apps/details?id=se.prouder.app https://prouder.se/

Happy to share more details if anyone is interested!

[0] https://polyvox.app

[1] https://github.com/google/filament

[2] https://pub.dev/packages/thermion_dart

[3] https://github.com/nmfisher/thermion

25 comments

[ 2.0 ms ] story [ 68.0 ms ] thread
What version of flutter does it require?
To build out of the box, the latest Flutter master (3.23.0-13.0).

It actually worked fine with early versions (>= 3.16), but I've recently switched to Dart's native-assets system for building/linking the C++ libraries, which isn't yet considered stable. However, it's working fine on the latest master and it makes managing the build system (and publishing the pub.dev) so much easier, which is why I made the move.

spent some time with flutter/dart and boy oh boy was it tough

you have to spend a lot of time deciding which state management to use theres a lot of packages you have to choose from and it was exhausting

this looks like it could produce smooth 3d experience but i ended up using babylon.js with electron

threejs/babylon are awesome projects! For me, the main drawback is that they are JS/web frameworks, whereas Thermion (and Flutter/Dart more generally) gives you a cross-platform rendering + UI framework out of the box (and statically-typed, if that's important to you).

I've heard that react-three-fiber lets you build ThreeJS into React Native apps, though? So that may be changing. I'll need to check it out first-hand and see if that's the case.

I think we'll just have to agree to disagree on Flutter, I'm a big fan :)

im not so sure that performance hinderance is noticeable since RAM prices have been in free fall

sure I appreciate native compilation, flutter does achieve that tough problem quite well but coming from JS world, its like, man do i have to redo the gymnastics all over again?

so going in my attitude wasn't great I admit but so far babylonjs/electron/REI seems to provide good enough 3D performance even though on older computers it stutters

i think one promising vector is if you can turn JS devs like me into generating flutter projects. that would dramatically lower the barrier.

AFAIR, there are also some 3D graphics libraries for Kotlin Multiplatform.

I have the hardest time figuring out whether I should use Kotlin, Dart/Flutter, or React for building an iOS and Android app. I don't care about the GUI part, but I want easy access to all APIs (like Health Kit, Health Connect, sensors) and relatively stress-free development. When I was learning Flutter a few years ago, it was very frustrating because its documentation and username were scant and scarce. Is it better nowadays?

If your main goal is easy access to platform APIs, then I would probably stick with the native language/UI toolkits. Flutter is a UI framework; if you don’t care about making cross-platform UIs then there’s no real reason to use it. If you’re mostly working with platform APIs, you’ll probably be using the native languages (Kotlin/Swift) anyway (unless someone’s already written a Flutter plugin, which often isn't the case).
I’m still helping out on Stackoverflow, the Flutter issues over though are serious. I feel bad since the issues are mostly stable on either platforms.
I don't want to be turn this into a "Flutter vs other UI frameworks" thread, but I'm curious - what type of problems are you seeing?

To me, state management is a non-issue - there's a built-in option (StatefulWidget/setState), various third party (Riverpod/Provider/etc), and enough basic SDK components (ValueNotifier/StreamBuilder/etc) to roll your own (which is my preference).

It's hard to narrow it down, it's from compilation to pushing the Flutter to its limits. It's overwhelming, I think Flutter might have the highest number of questions on SO. I'm not sure if Google is moving fast enough with Flutter.

https://stackoverflow.com/questions/tagged/flutter?tab=Newes...

Last I checked, the Flutter GitHub repo had more than 12k issues open, so I definitely agree that there's a lot of questions/issues.

But I take that as an indicator of popularity, not a serious problem with the project. If there were truly fundamental issues, there wouldn't be as many issues raised because noone would be using it :)

I agree with the GH issues. Seems like every popular project gets hugged to death with them. You can either be closing them at light's speed like `kovidgoyal` or you can just roll with it like Flutter, VS Code, or Typescript.
Hi! The (front end) developer of prouder here.

I was really glad that I found this toolkit just before we released our app. We were previously relying on Google's other 3D viewer (because of course they have two), model-viewer, embedded in a web view.

Thermion has solved a lot of the problems we had with the old web view solution, (performance issues, load times, transparency, etc.) so I'm happy to contribute back to the project in any way I can!

I tried the playground it looked really slow/not performant. Is this only on my side?
Which browser? The DartPad is a little bit different from a normal WASM/Dart installation, and on certain browsers (Firefox in particular) it involves a CPU buffer copy which will be slow.

Do you see the same at https://nick-fisher.com?

the link you sent seems faster

I'm on chrome for mac os on macbook air m2

If the second link is rendering at 60fps then it’s probably an issue with the DartPad version, which doesn’t surprise me, that was hacked together pretty quickly. I’m planning to do a much more robust version when I get a chance. Thanks for the feedback!
Curious how this relates to Flutter's own 3D support they showed off in Impeller. Does this use a web view at all or does it natively embed into Flutter? I saw there were ports of three.js to Dart but that's basically embedding everything in a web view.
This is natively embedded, so no web view.

The author shared his answer to this on Reddit a while back [1]. Basically, the primary reason this exists is because the first party solution isn't available yet (without compiling the engine yourself). And Thermion doesn't rely on Flutter at all.

[1] https://www.reddit.com/r/FlutterDev/comments/1digpot/comment...

I'm also looking forward to trying flutter_gpu when it's released (or at least closer to stable)! That's probably going to be the default choice for most people working with 3D/Flutter.

I'd say there are two main differences:

1) Unlike flutter_gpu, Thermion isn't tied to Impeller. For example, last I checked, Impeller won't be supported on web, so you probably won't be building "native Flutter 3D apps" on web any time soon either (except for embedded webview, which is very limited). Likewise, Thermion doesn't require Flutter and can be used anywhere you can get a hardware accelerated surface, window or render target. That opens up a lot of opportunities if you're just interested in writing a 3D app in Dart, with no need for UI (or at least, with no need for Flutter's UI).

2) Filament is a mature PBR engine (and from the outside at least, it certainly seems to have more resources allocated to it than flutter_gpu). I wouldn't expect Impeller 3D to have feature parity for a long long time, if at all. Things like the Filament material system (shader language & compilation pipeline), driver support, etc are very comprehensive. One example - a webgpu backend for Filament is planned, which I suspect will arrive long before Impeller on webgpu.

Interesting, thanks for the context. How "native" is it in Flutter, ie can I have 3D models directly inside a Flutter app? A good example could be something like the Wonderous app [0] where instead of SVGs of the monuments, it could be 3D models instead. Is it fairly easy to embed inside Flutter and still have the core app functionality work (ie, responsive to touches, accessibility, etc)?

[0] https://github.com/gskinnerTeam/flutter-wonderous-app

On Android, iOS and MacOS, the 3D viewport is just a widget just like any other in the Flutter hierarchy (so has access to gestures/filtering/etc).

Doing that on Windows is more difficult (as there’s no D3D backend for Filament), so it’s actually an HWND that sits behind the Flutter app. On web, it’s similar (HTML5 canvas), but this can actually be imported into the Flutter app as a widget, I haven’t wired that up yet (there are performance implications on certain browsers too).

I would be surprised, if Impeller isn't eventually ported to the web, as it's much smaller (100KB per architecture) than Skia/CanvasKit (1.5 MB). But like you said, this won't happen any time soon.

Note that size comparison is not completely fair as even with Impeller, Skia (as HarfBuzz is embedded into it) is still used for text layout and shaping.

> Updating the web engine to interface directly with Impeller is a non-goal at this time. It is a significant undertaking (compared to a flag to swap dispatchers that already exists) and also bypasses display list optimizations.

> For this added implementation complexity, Web support has not been a priority at this time for the small team working on Impeller.

> We are aware that these priorities might change in the future. There have been sanity checks to ensure that the Impeller API can be ported to WASM and also that Impeller shaders can be compiled to WGSL for eventual WebGPU support.

https://github.com/flutter/engine/blob/main/impeller/docs/fa...

Yes, you're probably right.

I believe (?) the intention is also to publish Impeller as a standalone rendering engine (i.e. independent of Flutter). Will be interesting to see if there's a use case there too.