docs: start on docusaurus

libs/documentations/docs/getting-started/installation.mdx

@@ -0,0 +1,68 @@
+---
+id: installation
+title: Installation
+sidebar_label: Installation
+---
+
+## Compatibility Table
+
+NGT makes use of different libraries in the THREE.js ecosystem. Check the version of all the libraries before installing is always a good thing to do.
+
+| NGT Version | Angular Version | THREE Version | RxJS Version |
+| ----------- | --------------- | ------------- | ------------ |
+| <= ^4.0.0   | ^13.0.0         | ~0.137        | ^7.0.0       |
+| >= ^5.0.0   | ^13.0.0         | ~0.139        | ^7.0.0       |
+
+:::tip
+
+NGT tries to stay on a version of THREE.js that has the corresponding type definitions. To figure out which is the latest version of THREE.js that NGT supports, look at the version of `@types/three`. We can _safely_ assume that patch versions are safe to update to.
+
+:::
+
+### 3rd Party libraries
+
+These libraries are installed as `dependencies` when we install a specific NGT library.
+
+| NGT Library                     | 3rd Party library           |
+| ------------------------------- | --------------------------- |
+| `@angular-three/soba`           | `three-stdlib`              |
+|                                 | `troika-three-text`         |
+| `@angular-three/cannon`         | `cannon-es`                 |
+|                                 | `cannon-es-debugger`        |
+|                                 | `@pmndrs/cannon-worker-api` |
+| `@angular-three/postprocessing` | `postprocessing`            |
+
+## Installation
+
+### Automatic
+
+For Angular CLI projects, run the following command:
+
+```shell
+ng add @angular-three/schematics
+```
+
+For [Nx Dev Tools](https://nx.dev) users, run the following commands:
+
+```shell
+npm install --save-dev @angular-three/schematics
+npx nx generate @angular-three/schematics:init
+```
+
+The generator (schematic) installs `three`, `@types/three`, and `@angular-three/core`. It also turns on `skipLibCheck: true` in the root `tsconfig.json`. This is required for other libraries' usage like: soba or postprocessing because their dependencies will fail strict type checking.
+
+### Manual
+
+NGT is a collection of packages that provide different Angular counterparts for different areas of THREE.js. To get started, we only need `@angular-three/core` and `three` (and its type definition `@types/three`)
+
+```shell
+npm install @angular-three/core three@~0.139
+npm install --save-dev @types/three@~0.139
+```
+
+### Ecosystem
+
+-   `@angular-three/core`: THREE.js core entities. Most of the exports from `THREE` namespace are provided by **core** package.
+-   `@angular-three/soba`: A set of helpers, utilities, and extra entities ported from [React Three Drei](https://github.com/pmndrs/drei).
+-   `@angular-three/postprocessing`: A set of post-processing effects with `EffectComposer` and other effects from [postprocessing](https://github.com/vanruesc/postprocessing).
+-   `@angular-three/cannon`: Physics support for NGT, ported from [React Three Cannon](https://github.com/pmndrs/use-cannon)

libs/documentations/docs/getting-started/migrate-to-v5.mdx

@@ -0,0 +1,198 @@
+---
+id: migrate-to-v5
+title: Migrate to v5
+sidebar_label: Migrate to v5
+---
+
+`@angular-three/core@5` contains many breaking changes. This guide is to list all the breaking changes, removals, and deprecations in no particular order. Please give it a thorough read.
+
+## API Removals
+
+### Controllers
+
+All `controllers` are removed as the core of Angular Three has been rewritten to use Abstractions with Dependency Injection instead. The Controller approach worked but the trade-off for DX was too big. (eg: auto importing modules is broken, hard to remember and extend etc...)
+
+### `exportAs`
+
+Previously, most objects in NGT were `Directive` and `exportAs` was used to expose the Directive instances. Now, most objects are `Component` instead as using `Directive` didn't provide any additional benefit and `exportAs` was unnecessary boilerplate.
+
+```diff
+- <ngt-mesh #mesh="ngtMesh"></ngt-mesh>
++ <ngt-mesh #mesh></ngt-mesh>
+```
+
+### Instance getters
+
+Previously, most NGT objects exposed a getter to get the instance for the corresponding type of object. For example:
+
+-   `NgtCommonMesh` exposes `get mesh()`
+-   `NgtCommonMaterial` exposes `get material()`
+-   `NgtCommonGeometry` exposes `get geometry()`
+
+Now, we can grab the `get instance()` from **ALL** NGT objects instead. However, `instance` returns a `Ref`. To get the underlying instance, use `instance.value`
+
+```html
+<ngt-plane-geometry #plane></ngt-plane-geometry>
+<ngt-mesh-standard-material #standard></ngt-mesh-standard-material>
+```
+
+```diff
+- <ngt-mesh [geometry]="plane.geometry" [material]="standard.material"></ngt-mesh>
++ <ngt-mesh [geometry]="plane.instance" [material]="standard.instance"></ngt-mesh>
++ <!-- or, both works the same -->
++ <ngt-mesh [geometry]="plane.instance.value" [material]="standard.instance.value"></ngt-mesh>
+```
+
+### `vr` Input
+
+Previously, `[vr]` Input on the `<ngt-canvas>` was used to let NGT knows that a scene should be using WebXR. Now, NGT should automatically switch to use WebXR if a VR session is requested.
+
+```diff
+- <ngt-canvas [vr]="true"></ngt-canvas>
++ <ngt-canvas></ngt-canvas>
+```
+
+### Stores
+
+`NgtCanvasStore`, `NgtAnimationFrameStore`, `NgtEventsStore` are removed in favor of a single `NgtStore` that tracks **ALL** states in the Canvas.
+
+#### `NgtAnimationFrameStore`
+
+Previously, `NgtAnimationFrameStore#register` (and `NgtAnimationFrameStore#unregister`) were used to register (and unregister) a callback to the animation loop. Now, `NgtStore#registerBeforeRender` (and `NgtStore#unregisterBeforeRender`) does that job.
+
+```diff
+- const uuid = this.animationFrameStore.register({/* ... */});
+- this.animationFrameStore.unregister(uuid);
++ const uuid = this.store.registerBeforeRender({/* ... */});
++ this.store.unregisterBeforeRender(uuid);
+```
+
+### `NgtPerformance`
+
+`NgtPerformance` is removed. Performance related states and methods are now belonged to `NgtStore`.
+
+```diff
+- this.performance.regress();
++ const performance = this.store.get(s => s.performance);
++ performance.regress();
+```
+
+### `NgtLoop`
+
+`NgtLoop` is removed. `invalidate()` call is now belonged to `NgtStore`
+
+```diff
+- this.loop.invalidate();
++ const invalidate = this.store.get(s => s.invalidate);
++ invalidate();
+```
+
+### `NgtDestroyed`
+
+`NgtDestroyed` is removed. All instances now expose `destroy$` stream that can be used to be notified of when the underlying instance is _destroyed_.
+
+```diff
+@Directive({
+-   providers: [NgtDestroyed]
+})
+export class SomeDirective {
+    constructor(
+        object: NgtObject,
+-       destroyed: NgtDestroyed
+    ) {
+        object.click.pipe(
+-           takeUntil(destroyed)
++           takeUntil(object.destroy$)
+        )
+    }
+}
+```
+
+### `NgtMathConstantPipe`
+
+`NgtMathConstantPipe` is removed. If you are using `mathConst:'PI'`, use `NgtPiPipe` instead.
+
+## API Deprecations
+
+### `NgtCoreModule`
+
+`NgtCoreModule` has been deprecated in favor of `NgtCanvasModule`. `NgtCoreModule` was confusing because it does not expose any other components/directives rather than `NgtCanvas`.
+
+```diff
+- imports: [NgtCoreModule]
++ imports: [NgtCanvasModule]
+```
+
+### `animateReady`
+
+`(animateReady)` has been deprecated in favor of `(beforeRender)`. This is a rename to be consistent with THREE.js term.
+
+```diff
+- <ngt-mesh (animateReady)="onAnimateReady($event)"></ngt-mesh>
++ <ngt-mesh (beforeRender)="onAnimateReady($event)"></ngt-mesh>
+```
+
+### `[parameters]` on Materials
+
+Previously, any material directive accepted a `[parameters]` Input to customize that material. Now, each material has their own set of Inputs that can be used instead.
+
+```diff
+- <ngt-mesh-standard-material [parameters]="{ color: 'blue' }"></ngt-mesh-standard-material>
++ <ngt-mesh-standard-material color="blue"></ngt-mesh-standard-material>
+```
+
+### `NgtColorPipe`
+
+`NgtColorPipe` has been deprecated. Use `NgtColorAttribute` with `attach` instead
+
+```diff
+- <ngt-canvas [scene]="{ background: 'blue' | color }"></ngt-canvas>
++ <ngt-canvas>
++     <ngt-color attach="background" color="blue"></ngt-color>
++ </ngt-canvas>
+```
+
+### `NgtFogPipe`
+
+`NgtFogPipe` has been deprecated. Use `NgtFogAttribute` with `attach` instead
+
+```diff
+- <ngt-canvas [scene]="{ fog: [] | fog }"></ngt-canvas>
++ <ngt-canvas>
++     <ngt-fog attach="fog" [fog]="[]"></ngt-fog>
++ </ngt-canvas>
+```
+
+### `NgtFogExp2Pipe`
+
+`NgtFogExp2Pipe` has been deprecated. Use `NgtFogExp2Attribute` with `attach` instead
+
+```diff
+- <ngt-canvas [scene]="{ fog: [] | fogExp2 }"></ngt-canvas>
++ <ngt-canvas>
++     <ngt-fog-exp2 attach="fog" [fogExp2]="[]"></ngt-fog>
++ </ngt-canvas>
+```
+
+### `NgtVector*Pipe`
+
+`NgtVector*Pipe` has been deprecated. Use `NgtVector*Attribute` with `attach` instead
+
+```diff
+- <ngt-directional-light [shadow]="{ mapSize: [2048, 2048] | vector2 }"></ngt-directional-light>
++ <ngt-directional-light>
++     <ngt-vector2 [attach]="['shadow', 'mapSize']" [vector2]="2048"></ngt-vector2>
++ </ngt-directional-light>
+```
+
+## API Breaking Changes
+
+### `appendTo`
+
+`[appendTo]` is an Input that is used to tell NGT where to append the Object3D. Previously, `[appendTo]` accepted either a `THREE.Object3D` instance or a `() => THREE.Object3D` factory. Now, `[appendTo]` accepts a `Ref<THREE.Object3D>` instead (read more about [TODO: Ref documentation](/))
+
+### `@angular-three/cannon` Worker API
+
+Previously, `@angular-three/cannon` shipped its own version of the Cannon API in a Web Worker. Now, `@angular-three/cannon` is using the framework-agnostic [@pmndrs/cannon-web-worker](https://github.com/pmndrs/use-cannon/tree/master/packages/cannon-worker-api).
+
+If you have already been using `@angular-three/cannon` with `tsconfig.worker.json`, please remove `tsconfig.worker.json` (if you don't need it anymore) and remove all references to `tsconfig.worker.json` in your project.