7 ms·

Show HN: Thermion, an open source 3D rendering toolkit for Flutter and/or Dart

52 points by nmfisher 2y ago

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 https://dartpad.thermion.dev - My personal website, where I added an interactive clone of myself https://nick-fisher.com https://nick-fisher.com - Prouder (a Flutter app from one of the Thermion contributors) https://apps.apple.com/us/app/prouder/id6498891289 https://apps.apple.com/us/app/prouder/id6498891289 https://play.google.com/store/apps/details?id=se.prouder.app https://play.google.com/store/apps/details?id=se.prouder.app https://prouder.se/ https://prouder.se/ Happy to share more details if anyone is interested! [0] https://polyvox.app https://polyvox.app [1] https://github.com/google/filament https://github.com/google/filament [2] https://pub.dev/packages/thermion_dart https://pub.dev/packages/thermion_dart [3] https://github.com/nmfisher/thermion https://github.com/nmfisher/thermion

zalnyx1984 2y ago
What version of flutter does it require?
- nmfisher 2y ago
  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.
localfirst 2y ago
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
- nmfisher 2y ago
  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 :)
  - m_kos 2y ago
    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?
    - nmfisher 2y ago
      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).
  - localfirst 2y ago
Hannnes 2y ago
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!
julienreszka 2y ago
I tried the playground it looked really slow/not performant. Is this only on my side?
- nmfisher 2y ago
  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 https://nick-fisher.com?
  - julienreszka 2y ago
    the link you sent seems faster I'm on chrome for mac os on macbook air m2
    - nmfisher 2y ago
      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!
satvikpendem 2y ago
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.
- Hannnes 2y ago
  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/l946ql0/ https://www.reddit.com/r/FlutterDev/comments/1digpot/comment...
  - satvikpendem 2y ago
    Oh nice, looks like Filament is much more advanced than what Flutter's 3D solution would be (and Flutter's solution not having web support is a no-go, I'd assume many people would want to build things like those in react-three-fiber [0] for example). [0] https://docs.pmnd.rs/react-three-fiber/getting-started/examples https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
- nmfisher 2y ago
  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.

52 points by nmfisher 2y ago

zalnyx1984 2y ago

What version of flutter does it require?

nmfisher 2y ago
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.

localfirst 2y ago

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

nmfisher 2y ago
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 :)
- m_kos 2y ago
  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?
  - nmfisher 2y ago
    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).
- localfirst 2y ago

Hannnes 2y ago

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!

julienreszka 2y ago

I tried the playground it looked really slow/not performant. Is this only on my side?

nmfisher 2y ago
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 https://nick-fisher.com?
- julienreszka 2y ago
  the link you sent seems faster I'm on chrome for mac os on macbook air m2
  - nmfisher 2y ago
    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!

satvikpendem 2y ago

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.

Hannnes 2y ago
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/l946ql0/ https://www.reddit.com/r/FlutterDev/comments/1digpot/comment...
- satvikpendem 2y ago
  Oh nice, looks like Filament is much more advanced than what Flutter's 3D solution would be (and Flutter's solution not having web support is a no-go, I'd assume many people would want to build things like those in react-three-fiber [0] for example). [0] https://docs.pmnd.rs/react-three-fiber/getting-started/examples https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
nmfisher 2y ago
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.