renaming and docs
This commit is contained in:
18
docs/android.mdx
Normal file
18
docs/android.mdx
Normal file
@@ -0,0 +1,18 @@
|
||||
## Android
|
||||
|
||||
In release mode, you must add the following to your `app/build.gradle`:
|
||||
|
||||
```
|
||||
buildTypes {
|
||||
release {
|
||||
...
|
||||
shrinkResources false
|
||||
minifyEnabled false
|
||||
}
|
||||
}
|
||||
...
|
||||
dependencies {
|
||||
....
|
||||
implementation 'net.java.dev.jna:jna:5.10.0@aar'
|
||||
}
|
||||
```
|
||||
46
docs/filament.mdx
Normal file
46
docs/filament.mdx
Normal file
@@ -0,0 +1,46 @@
|
||||
## Filament
|
||||
|
||||
Thermion uses the [Filament](https://github.com/google/filament) PBR package for much of the heavy lifting - rendering, materials, glTF, and so on.
|
||||
|
||||
Thermion is currently based on the `1.51.2` release of Filament.
|
||||
|
||||
## Building your own materials
|
||||
|
||||
If you want to work with custom materials, you will need some (basic knowledge of the underlying Filament library)[https://google.github.io/filament/Materials.html#compilingmaterials].
|
||||
|
||||
Things to keep in mind:
|
||||
- You must compile materials with the correct version of Filament (see the table above). Keep in mind that versions may not be identical across platforms so you may need multiple uberz files for multiple platforms.
|
||||
|
||||
e.g. the lit_opaque.uberz file has been created from a Filament build:
|
||||
|
||||
```
|
||||
cd out/cmake-android-release-aarch64/libs/gltfio
|
||||
uberz -TSHADINGMODEL=lit -TBLENDING=opaque -o lit_opaque_43.uberz lit_opaque
|
||||
```
|
||||
(note that the number in the filename corresponds to the Material version, not the Filament version. Not every Filament version requires a new Material version).
|
||||
|
||||
## Footguns
|
||||
|
||||
### Stripping in release mode
|
||||
|
||||
If you build your app in release mode, you will need to ensure that "Dead Strip" is set to false.
|
||||
|
||||
This is because we only invoke the library at runtime via FFI, so at link time these symbols are otherwise treated as redundant.
|
||||
|
||||
### Animations when backgrounded
|
||||
|
||||
Don't call playAnimation when the app is in the background (i.e inactive/hidden). This will queue, but not start, an animation, and eventually this will overflow the command buffer when the app is foregrounded/resumed.
|
||||
|
||||
If you have some kind of looping animation in your app code, make sure it pauses while the app is backgrounded.
|
||||
|
||||
The results will depend on the actual device used to generate the golden, therefore if you are using a different device (which is likely), your results may not be the same. This is expected.
|
||||
|
||||
# Building Filament from source
|
||||
|
||||
Only the WebGL2/WASM build differs from the official Filament build.
|
||||
|
||||
- Note also need to specifically build imageio/png/tinyexr
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -4,41 +4,22 @@ Thermion is a framework for creating cross-platform 3D applications with Dart an
|
||||
|
||||
## Overview
|
||||
|
||||
### Packages
|
||||
Thermion packages are:
|
||||
- [thermion_dart], which contains all the code needed to create a viewer,
|
||||
- [thermion_flutter], which is a Flutter-only package that contains all the logic necessary to create/embed a rendering surface inside a Flutter app.
|
||||
### Package structure
|
||||
|
||||
By decoupling the Flutter-specific components from the Dart-only components, Thermion can be used for rendering in both Flutter and non-Flutter applications.
|
||||
Thermion is divided into two packages:
|
||||
- `thermion_flutter`, a Flutter package for creating/embedding a rendering surface inside a Flutter app.
|
||||
- `thermion_dart`, which contains all the code needed to create a viewer.
|
||||
|
||||
As far as the latter is concerned, Thermion ships with examples for Javascript/WASM/HTML, and for CLI/headless mode on MacOS.
|
||||
With this structure, the Flutter-specific components are not coupled to the Dart components, meaning Thermion can be used for rendering in both Flutter and non-Flutter applications.
|
||||
|
||||
### pubspec.yaml
|
||||
If you are creating a Flutter application, add [thermion_flutter] as a dependency to your `pubspec.yaml`.
|
||||
```$ cd /path/to/your/flutter/project$ flutter pub add thermion_flutter```
|
||||
For example, Thermion ships with examples for rendering with Dart only (no Flutter) with a CLI/headless application on MacOS, and with a Javascript/WASM/HTML applicaiton in browsers.
|
||||
|
||||
### ThermionFlutterPlugin
|
||||
Create an instance of `ThermionFlutterPlugin` in your app.
|
||||
```dart
|
||||
class _MyAppState extends State<MyApp> {
|
||||
late ThermionFlutterPlugin _thermionFlutterPlugin; late Future<ThermionViewer> _thermionViewer;
|
||||
void initState() { _thermionFlutterPlugin = ThermionFlutterPlugin(); _thermionViewer = _thermionFlutterPlugin.createViewer(); }}```
|
||||
`ThermionFlutterPlugin` is a singleton, and mostly just handles creating a 3D rendering surface that can be embedded in a Flutter widget hierarchy. [ThermionViewer] is the interface for actually interacting with the scene (loading assets, manipulating the camera, and so on). Call `createViewer` on `ThermionFlutterPlugin` to obtain a reference to `ThermionViewer` (which is also a singleton).
|
||||
Note: `ThermionFlutterPlugin` and `ThermionViewer` were designed as separate classes so we can use `ThermionViewer` in non-Flutter apps.
|
||||
### ThermionWidget
|
||||
On most platforms[0], [ThermionWidget] is the widget where your rendered content (i.e. your viewport) will appear. This can be any size; the 3D viewport will be scaled to fit the dimensions on this widget. On most platforms, a [ThermionWidget] can be positioned above or below any other widget in the hierarchy and the Z-order will be preserved.
|
||||
```class _MyAppState extends State<MyApp> {
|
||||
late ThermionFlutterPlugin _thermionFlutterPlugin; late Future<ThermionViewer> _thermionViewer;
|
||||
void initState() { _thermionFlutterPlugin = ThermionFlutterPlugin(); _thermionViewer = _thermionFlutterPlugin.createViewer(); } Widget build(BuildContext context) { return Stack(children:[ Positioned.fill( child:ThermionWidget( plugin:_thermionFlutterPlugin ) ) ]); }}```
|
||||
|
||||
[0] Currently, the rendering surface on Windows and Web will always appear at the bottom of the application. You still need a ThermionWidget, but this only keeps track of the dimensions of your viewport and punches a transparent hole in the hierarchy; the actual rendering surface is attached beneath the Flutter window.
|
||||
`ThermionWidget` will not display the rendering surface (even an empty one) until the call to `createViewer` has been completed.
|
||||
- by default a Container will be rendered with solid red. If you want to change this, pass a widget as the initial paramer to the ThermionWidget constructor.on the second frame, ThermionWidget will pass its dimensions/pixel ratio to the FilamentController
|
||||
|
||||
You can then call createViewer to create:the rendering surface (on most platforms, a backing texture that will be registered with Flutter for use in a Texture widget)a rendering threada ThermionViewerFFI and an AssetManager, which will allow you to load assets/cameras/lighting/etc via the FilamentControllerafter an indeterminate number of frames, FilamentController will notify ThermionWidget when a rendering surface is available the viewportThermionWidget will replace the default initial Widget with the viewport (which will initially be solid black or white, depending on your platform).IMPORTANT: there will be a delay between adding a ThermionWidget, calling createViewer and the actual rendering viewport becoming available. This is why we fill ThermionWidget with red - to make it abundantly clear that you need to handle this asynchronous delay appropriately. Once createViewer has completed, the viewport is available for rendering.
|
||||
Currently, the initial widget will also be displayed whenever the viewport is resized (including changing orientation on mobile and drag-to-resize on desktop). You probably want to change this from the default red.
|
||||
Congratulations! You now have a scene. It's completely empty, so you probably want to add something visible.
|
||||
`thermion_flutter` exports `thermion_dart`, so if you are working with a Flutter application, you will only need to import `thermion_fluttter`.
|
||||
|
||||
### ThermionViewer (`thermion_dart`)
|
||||
|
||||
// TODO
|
||||
|
||||
### Widget
|
||||
|
||||
// TODO
|
||||
|
||||
11
docs/windows.mdx
Normal file
11
docs/windows.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
## Windows
|
||||
|
||||
To support embedding GPU textures in Flutter (rather than copying to a CPU pixel buffer on every frame), we need to build a slightly customized version of Filament that uses GLES on Windows (rather than the default, which uses OpenGL).
|
||||
|
||||
Separately, we also force the Filament gltfio library to load assets via in-memory buffers, rather than the filesystem. This is simply a convenience so we don't have to use different logic for gltf resource loading across platforms.
|
||||
|
||||
```
|
||||
git checkout flutter-filament-windows
|
||||
mkdir out && cd out
|
||||
"C:\Program Files\Microsoft Visual Studio\2022\Community\Common7\IDE\CommonExtensions\Microsoft\CMake\CMake\bin\cmake.exe" --build . --target gltf_viewer --config Debug
|
||||
```
|
||||
@@ -1,4 +1,4 @@
|
||||
import 'package:thermion_dart/thermion_dart/entities/filament_entity.dart';
|
||||
|
||||
import 'package:thermion_dart/thermion_dart/thermion_viewer.dart';import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
import '../../utils/camera_orientation.dart';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import 'package:animation_tools_dart/animation_tools_dart.dart';
|
||||
import 'package:thermion_dart/thermion_dart/thermion_viewer.dart';
|
||||
import 'package:thermion_dart/thermion_dart/entities/filament_entity.dart';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:thermion_flutter/filament/widgets/debug/skeleton_menu_item_widget.dart';
|
||||
import 'dart:math';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import 'package:thermion_dart/thermion_dart/thermion_viewer.dart';
|
||||
import 'package:thermion_dart/thermion_dart/entities/filament_entity.dart';
|
||||
|
||||
import 'package:thermion_flutter/filament/widgets/debug/child_renderable_widget.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:thermion_flutter/filament/widgets/debug/skeleton_menu_item_widget.dart';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import 'package:thermion_dart/thermion_dart/entities/filament_entity.dart';
|
||||
|
||||
import 'package:thermion_dart/thermion_dart/thermion_viewer.dart';
|
||||
import 'package:thermion_dart/thermion_dart/utils/light_options.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
Reference in New Issue
Block a user