doc update

docs/examples.mdx

@@ -0,0 +1,8 @@
+# Examples
+Thermion is a package for creating 3D applications with Dart and/or Flutter.
+
+## Polyvox 
+
+iOS app
+
+## Nick Fisher (Personal Website)

docs/index.mdx

@@ -1,11 +1,17 @@
-# Thermion
+![Thermion Logo](logo.png)
-Thermion is a package for creating 3D applications with Dart and/or Flutter.
+
+Thermion is a framework for creating cross-platform 3D applications with Dart and/or Flutter.
 
 ## Overview
 
 ### Packages 
-The two most relevant 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. 
+Thermion  packages are:
-By decoupling the Flutter-specific components from the Dart-only components, Thermion can be used for rendering in both Flutter and non-Flutter applications. As far as the latter is concerned, Thermion ships with examples for  Javascript/WASM/HTML, and for CLI/headless mode on MacOS. 
+- [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. 
+
+By decoupling the Flutter-specific components from the Dart-only components, Thermion can be used for rendering in both Flutter and non-Flutter applications. 
+
+As far as the latter is concerned, Thermion ships with examples for  Javascript/WASM/HTML, and for CLI/headless mode on MacOS. 
 
 ### pubspec.yaml
 If you are creating a Flutter application, add [thermion_flutter] as a dependency to your `pubspec.yaml`.
@@ -27,9 +33,9 @@ On most platforms[0], [ThermionWidget] is the widget where your rendered content
 
 [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 FilamentWidget constructor.on the second frame, FilamentWidget will pass its dimensions/pixel ratio to the FilamentController
+- 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 FilamentViewer and an AssetManager, which will allow you to load assets/cameras/lighting/etc via the FilamentControllerafter an indeterminate number of frames, FilamentController will notify FilamentWidget when a rendering surface is available the viewportFilamentWidget 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 FilamentWidget, calling createViewer and the actual rendering viewport becoming available. This is why we fill FilamentWidget 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.
+ 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.
 

docs/quickstart.mdx

@@ -0,0 +1,145 @@
+## Quickstart (Flutter)
+
+> You can find the entire project below in the [examples/flutter/quickstart](examples/flutter/quickstart) folder of the repository.
+
+1. Switch to Flutter master channel
+
+```bash
+$ flutter channel master
+```
+
+2. Add [thermion_flutter] as a dependency to your `pubspec.yaml`.
+
+```bash
+$ cd /path/to/your/flutter/project$ flutter pub add thermion_flutter```
+```
+
+3. If running on MacOS, change the minimum deployment targetr to OSX 13
+
+In `Podfile`
+```
+platform :osx, '13.0'
+```
+
+Then open XCode:
+```
+open macos/Runner.xcworkspace
+```
+
+and change the minimum deployment target to 13.0
+
+2. Add a folder containing your assets (glTF model + skybox ktx) to your `pubspec.yaml` asset list
+
+```yaml
+...
+flutter
+  uses-material-design: true
+  assets:
+    - assets/
+```
+
+2. Create an instance of `ThermionFlutterPlugin` in your app.
+
+```dart
+import 'package:thermion_flutter/thermion_flutter.dart';
+...
+
+class _MyAppState extends State<MyApp> {
+  late ThermionFlutterPlugin _thermionFlutterPlugin;  
+  late Future<ThermionViewer> _thermionViewer;
+  void initState() {    
+    _thermionFlutterPlugin = ThermionFlutterPlugin();    
+    _thermionViewer = _thermionFlutterPlugin.createViewer();  
+  }
+}```
+
+3. Add a `ThermionWidget` to your widget hierarchy 
+
+```dart
+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
+                ) 
+            )
+        ]);  
+}}```
+
+4. Add a button to load the model when pressed
+
+```dart
+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
+                ) 
+            ), 
+            Center(child:ElevatedButton(child:Text("Load"), onPressed:() { 
+                // TODO
+            }))
+        ]);  
+}}```
+
+5. Load a skybox and the glb asset
+```
+  Center(child:ElevatedButton(child:Text("Load"), onPressed:() { 
+               var viewer = await _thermionViewer;
+               await viewer.loadSkybox("assets/default_env_skybox.ktx");
+               await viewer.loadGlb("assets/cube.glb");
+    }))
+```            
+
+(Note - "skybox" refers to the background (cube) image rendered behind all other elements in the scene).
+
+Anything added to the scene is referred to as an "entity". 
+
+Entities are always added to the scene at position (0,0,0).
+
+The default scene camera is located at (0,0,0) (and is looking at -Z, or "into" the screen), so by adding a cube at (0,0,0), the camera will now be inside the cube. 
+
+We need to move the camera outside the cube so it's visible. 
+
+6. Change the camera orientation
+```dart
+   var viewer = await _thermionViewer;
+    await viewer.loadSkybox("assets/default_env_skybox.ktx");
+    await viewer.loadGlb("assets/cube.glb");
+
+    await viewer.setCameraPosition(0, 1, 10);
+    await viewer.setCameraRotation(v.Quaternion.axisAngle(
+                        v.Vector3(1, 0, 0), -30 / 180 * pi) *
+                    v.Quaternion.axisAngle(v.Vector3(0, 1, 0), 15 / 180 * pi));
+```
+
+The cube still won't be visible until we add a light to the scene and tell Thermion to start rendering.
+
+7. Add a light and turn rendering on
+```dart 
+    ...
+    await viewer.addLight(
+                    LightType.SUN, 7500, 50000, 0, 0, 0, 1, -1, -1);
+    await viewer.setRendering(true);
+    ...
+````
+
+Your first Thermion project is complete!