Improve example page UI and improve Readme.

.github/workflows/deploy-pages.yml

         cache: 'npm'
     - run: npm ci
     - run: mkdir _site
-    - run: mv -t _site docs dist examples README.md LICENSE
+    - run: mv -t _site docs dist examples README.md LICENSE index.html
     - name: Setup Pages
       uses: actions/configure-pages@v3
     - name: Upload artifact

.gitignore

 dist
 docs
+index.html
 examples/**/*.js
 examples/**/*.js.map
 

README.md

 [ThreePipe](https://threepipe.org/) —
 [Github](https://github.com/repalash/threepipe) —
 [Examples](https://threepipe.org/examples/) —
-[Docs](https://threepipe.org/docs/) —
+[API Reference](https://threepipe.org/docs/) —
 [WebGi](https://webgi.xyz/docs/)
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-g.svg)](https://opensource.org/licenses/MIT)
-[![Discord Server](https://img.shields.io/discord/956788102473584660?label=Discord&logo=discord)](https://discord.gg/apzU8rUWxY)
 [![NPM Package](https://img.shields.io/npm/v/threepipe.svg)](https://www.npmjs.com/package/threepipe)
+[![Discord Server](https://img.shields.io/discord/956788102473584660?label=Discord&logo=discord)](https://discord.gg/apzU8rUWxY)
 [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/repalash.svg?style=social&label=Follow%20%40repalash)](https://twitter.com/repalash)
-
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ThreePipe is a 3D framework built on top of [three.js](https://threejs.org/) in TypeScript with a focus on quality rendering, modularity and extensibility.
 
 - Automatic serialization of all viewer and plugin settings in GLB(with custom extensions) and JSON formats. 
 - Automatic disposal of all three.js resources with built-in reference management. 
 
-## Installation
+## Examples
+
+Code samples and demos covering various usecases and test are present in the [examples](./examples/) folder. 
+
+Try them: https://threepipe.org/examples/
+
+
+## Getting Started
+
+### Installation
 
 ```bash
 npm install threepipe
 ```
 
-## Getting Started
+### Loading a 3D Model
 
 First, create a canvas element in your HTML page:
 ```html
 
 That's it! You should now see a 3D model on your page.
 
-The viewer initializes with a Scene, Camera, Camera controls(orbit controls), several importers, exporters and a default rendering pipeline. Additional functionality can be added with plugins.
+The 3D model can be opened in the [editor](TODO) to view and edit the scene settings, objects, materials, lights, cameras, post-processing, etc. and exported as a GLB file. All settings are automatically serialized and saved in the GLB file, which can be loaded into the viewer. Any plugins used in the editor can be added to the viewer to add the same functionality. The plugin data is automatically loaded(if the plugin is added) when the model is added to the scene.
+
+The viewer initializes with a Scene, Camera, Camera controls(Orbit Controls), several importers, exporters and a default rendering pipeline. Additional functionality can be added with plugins.
 
 Check out the GLTF Load example to see it in action or to check the JS equivalent code: https://threepipe.org/examples/gltf-load/
 
 ## License
-The core framework([src](./src), [dist](./dist), [examples](./examples) folders) and any [plugins](./plugins) without a separate license are licensed under the [MIT license](./LICENSE).
-
-Some plugins(in the [plugins](./plugins) folder) might have different licenses. Check the individual plugin documentation and the source folder/files for more details.
+The core framework([src](https://github.com/repalash/threepipe/tree/master/src), [dist](https://github.com/repalash/threepipe/tree/master/dist), [examples](https://github.com/repalash/threepipe/tree/master/examples) folders) and any [plugins](https://github.com/repalash/threepipe/tree/master/plugins) without a separate license are under the [MIT license](https://github.com/repalash/threepipe/tree/master/LICENSE).
 
-
-## Examples
-
-Check out all the examples here: https://threepipe.org/examples/
+Some plugins(in the [plugins](https://github.com/repalash/threepipe/tree/master/plugins) folder) might have different licenses. Check the individual plugin documentation and the source folder/files for more details.
 
 ## Status 
 The project is in `alpha` stage and under active development. Many features will be added but the core API will not change significantly in future releases. 
 
-Check out [WebGi](https://webgi.xyz/) for a production ready solution for e-commerce and jewelry applications.
+Check out [WebGi](https://webgi.xyz/) for a advanced tailor-made solution for e-commerce, jewelry, automobile, apparel, furniture etc.
 
 ## Documentation
 
-Check the list of all functions, classes and types in the [API documentation](https://threepipe.org/docs/).
+Check the list of all functions, classes and types in the [API Reference Docs](https://threepipe.org/docs/).
 
 ## WebGi
-Check out WebGi - Premium Photo-realistic 3D rendering framework and tools for web applications and online commerce: [Homepage](https://webgi.xyz/) — [Docs](https://webgi.xyz/docs/)
+Check out WebGi - Premium Photo-realistic 3D rendering framework and tools for web applications and online commerce along with custom modules and rendering solutions for e-commerce, jewelry, automobile, apparel, furniture and other retail applications.
+
+[Homepage](https://webgi.xyz/) — [Docs](https://webgi.xyz/docs/)
 
 [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/repalash.svg?style=social&label=Follow%20%40pixotronics)](https://twitter.com/pixotronics)
 

examples/custom-pipeline/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
 </head>
 <body>

examples/custom-pipeline/script.ts

 import {_testFinish, DepthBufferPlugin, downloadBlob, HalfFloatType, ThreeViewer} from 'threepipe'
-import {createSimpleButtons} from '../js-utils/simple-bottom-buttons.js'
+import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,

examples/depth-buffer-plugin/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
 </head>
 <body>

examples/depth-buffer-plugin/script.ts

     RenderTargetPreviewPlugin,
     ThreeViewer,
 } from 'threepipe'
-import {createSimpleButtons} from '../js-utils/simple-bottom-buttons.js'
+import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 const viewer = new ThreeViewer({
     canvas: document.getElementById('mcanvas') as HTMLCanvasElement,

examples/drc-load/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
         import {_testFinish, ThreeViewer} from 'threepipe'
 

examples/fbx-load/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
         import {_testFinish, HemisphereLight, ThreeViewer} from 'threepipe'
 

examples/glb-export/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
 </head>
 <body>

examples/glb-export/script.ts

 import {_testFinish, downloadBlob, IMaterial, IObject3D, ThreeViewer} from 'threepipe'
-import {createSimpleButtons} from '../js-utils/simple-bottom-buttons.js'
+import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})
 

examples/gltf-load/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
 </head>
 <body>

examples/hdr-load/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
         import {_testFinish, ThreeViewer} from 'threepipe'
 

examples/index.html

 <head>
     <meta charset="UTF-8">
     <title>ThreePipe Examples</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+        }
+
+        .root-container {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            height: 100%;
+        }
+
+        .hamburger {
+            position: absolute;
+            background: transparent;
+            border: none;
+            top: 0.25rem;
+            right: 0.5rem;
+            font-size: 1.75rem;
+            padding: 0.5rem;
+            color: #bbb;
+        }
+
+        .hamburger:hover {
+            color: #fff;
+        }
+
+        .sidebar {
+            max-width: min(350px, 30%);
+            height: 100%;
+            background: #1a1a1c;
+            color: #bbb;
+            padding: 1rem 1rem;
+            box-sizing: border-box;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            position: relative;
+        }
+
+        .sidebar h1 {
+            color: #ddd;
+            font-size: 1.5rem;
+            margin: 0 3rem 1rem 0;
+            font-weight: normal;
+            padding: 0;
+        }
+
+        .sidebar h1 a {
+            color: #58a6ff;
+            text-decoration: none;
+        }
+
+        .sidebar h1 a:hover {
+            color: #eee;
+        }
+
+        .sidebar h2 {
+            font-size: 1.2rem;
+            margin: 0 0 0.5rem 0.25rem;
+            font-weight: normal;
+            padding: 0;
+        }
+
+        .sidebar ul {
+            font-size: 1rem;
+            list-style: none;
+            padding: 0 0 0 1rem;
+            margin: 0 0 1rem;
+            display: flex;
+            flex-direction: column;
+            font-weight: normal;
+            gap: 0.6rem;
+        }
+
+        .sidebar ul li a {
+            color: #58a6ff;
+            text-underline-offset: 0.25rem;
+            text-decoration: none;
+            transition: color 0.25s ease-in-out;
+        }
+
+        .sidebar ul li a:hover {
+            color: #eee;
+        }
+
+        .sidebar ul li a.selected {
+            color: #fff;
+            font-weight: bold;
+            text-decoration: underline;
+        }
+
+        .iframe-container {
+            flex: 1;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .iframe-container iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        .closed > ul {
+            display: none;
+        }
+
+        .closed > h1 {
+            display: none;
+        }
+
+        .closed > h2 {
+            display: none;
+        }
+
+        .closed.sidebar{
+            padding: 1.75rem;
+        }
+        .closed:before{
+            content: attr(data-selected-example);
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 3.3rem;
+            color: #58a6ff;
+            font-size: 1.25rem;
+            text-align: center;
+            vertical-align: middle;
+            line-height: 3.25rem;
+            writing-mode: vertical-lr;
+            text-orientation: upright;
+        }
+
+
+        @media only screen and (max-width: 768px) {
+            .root-container {
+                flex-direction: column;
+            }
+            .sidebar{
+                max-width: 100%;
+                height: auto;
+                max-height: 50%;
+                padding: 1rem;
+                position: relative;
+            }
+            .hamburger{
+                padding: 0.25rem;
+            }
+            .closed:before{
+                width: 100%;
+                height: 3rem;
+                writing-mode: unset;
+                text-orientation: unset;
+            }
+        }
+
+
+    </style>
+    <script>
+        window.addEventListener('DOMContentLoaded', () => {
+            const hamburger = document.querySelector('.hamburger');
+            const sidebar = document.querySelector('.sidebar');
+            hamburger.addEventListener('click', () => {
+                sidebar.classList.toggle('closed');
+            });
+
+            const iframe = document.querySelector('#example-iframe');
+            const links = document.querySelectorAll('li>a');
+            let selected = document.querySelector('a.selected');
+            links.forEach(link => {
+                link.onclick = (ev) => {
+                    selected.classList.remove('selected');
+                    ev.target.classList.add('selected');
+                    selected = ev.target;
+                    iframe.src = ev.target.href;
+                    ev.preventDefault()
+                    sidebar.dataset.selectedExample = ev.target.innerText;
+                }
+            });
+        });
+    </script>
 </head>
 <body>
-<div>
-    <h1>Examples</h1>
-    <ul>
-        <li><a href="./import-test">Import Test</a></li>
-        <li><a href="./sphere-rgbm-test">Sphere RGBM Test </a></li>
-        <li><a href="./sphere-half-float-test">Sphere Half Float Test </a></li>
-        <li><a href="./sphere-msaa-test">Sphere MSAA Test </a></li>
-        <li><a href="./z-prepass">Z-Prepass Test </a></li>
-        <li><a href="./fbx-load">FBX Load </a></li>
-        <li><a href="./hdr-load">HDR Load </a></li>
-        <li><a href="./obj-mtl-load">OBJ MTL Load </a></li>
-        <li><a href="./gltf-load">GLTF Load </a></li>
-        <li><a href="./drc-load">DRACO(DRC) Load </a></li>
-        <li><a href="./obj-to-glb">Convert OBJ to GLB </a></li>
-        <li><a href="./depth-buffer-plugin">Depth Buffer Plugin </a></li>
-        <li><a href="./custom-pipeline">Custom Pipeline specification </a></li>
-        <li><a href="./render-target-preview">Render Target Preview </a></li>
-        <li><a href="./glb-export">GLB Export </a></li>
-        <li><a href="./glb-export">GLB Export </a></li>
-        <li><a href="./pmat-material-export">PMAT Material export </a></li>
-    </ul>
+<div class="root-container">
+    <div class="sidebar" data-selected-example="GLTF Load">
+        <button class="hamburger"> &#9776;</button>
+        <h1><a href="https://github.com/repalash/threepipe">ThreePipe</a> Examples</h1>
+        <h2 class="category">Plugins</h2>
+        <ul>
+            <li><a href="./depth-buffer-plugin">Depth Buffer Plugin </a></li>
+            <li><a href="./render-target-preview">Render Target Preview </a></li>
+        </ul>
+        <h2 class="category">Import/Export</h2>
+        <ul>
+            <li><a href="./fbx-load">FBX Load </a></li>
+            <li><a href="./hdr-load">HDR Load </a></li>
+            <li><a href="./obj-mtl-load">OBJ MTL Load </a></li>
+            <li><a class="selected" href="./gltf-load">GLTF Load </a></li>
+            <li><a href="./drc-load">DRACO(DRC) Load </a></li>
+            <li><a href="./glb-export">GLB Export </a></li>
+            <li><a href="./pmat-material-export">PMAT Material export </a></li>
+        </ul>
+        <h2 class="category">Rendering</h2>
+        <ul>
+            <li><a href="./custom-pipeline">Custom Pipeline specification </a></li>
+        </ul>
+        <h2 class="category">Utils</h2>
+        <ul>
+            <li><a href="./obj-to-glb">Convert OBJ to GLB </a></li>
+        </ul>
+        <h2 class="category">Tests</h2>
+        <ul>
+            <li><a href="./import-test">Import Test</a></li>
+            <li><a href="./sphere-rgbm-test">Sphere RGBM Test </a></li>
+            <li><a href="./sphere-half-float-test">Sphere Half Float Test </a></li>
+            <li><a href="./sphere-msaa-test">Sphere MSAA Test </a></li>
+            <li><a href="./z-prepass">Z-Prepass Test </a></li>
+        </ul>
+    </div>
+    <div class="iframe-container">
+        <iframe id="example-iframe" src="./gltf-load" frameborder="0" allowfullscreen="allowfullscreen"
+                allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; clipboard-read *; clipboard-write *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; screen-wake-lock *; speaker *; sync-xhr *; usb *; web-share *; vibrate *; vr *">
+        </iframe>
+    </div>
 </div>
 </body>

examples/obj-mtl-load/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
         import {_testFinish, HemisphereLight, ThreeViewer} from 'threepipe'
 

examples/obj-to-glb/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
 </head>
 <body>

examples/obj-to-glb/script.ts

         autoScale: true,
     })
 
+    // todo wait for images to load
+
     // export to glb
     const blob = await viewer.exportScene()
     if (!blob || blob.ext !== 'glb') {

examples/pmat-material-export/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
 </head>
 <body>

examples/pmat-material-export/script.ts

 import {_testFinish, downloadBlob, IMaterial, IObject3D, Mesh, SphereGeometry, ThreeViewer} from 'threepipe'
-import {createSimpleButtons} from '../js-utils/simple-bottom-buttons.js'
+import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
 
 const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas') as HTMLCanvasElement, msaa: true})
 

examples/render-target-preview/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
 </head>
 <body>

examples/sphere-half-float-test/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
         import {_testFinish, Mesh, SphereGeometry, ThreeViewer, UnlitMaterial} from 'threepipe'
 

examples/sphere-msaa-test/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
         import {_testFinish, Mesh, SphereGeometry, ThreeViewer, UnlitMaterial} from 'threepipe'
 

examples/sphere-rgbm-test/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
         import {_testFinish, Mesh, SphereGeometry, ThreeViewer, UnlitMaterial} from 'threepipe'
 

examples/z-prepass/index.html

             overflow: hidden;
         }
     </style>
-    <script type="module" src="../js-utils/simple-code-preview.mjs"></script>
+    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script id="example-script" type="module">
         import {_testFinish, DepthBufferPlugin, ThreeViewer, UnsignedByteType} from 'threepipe'
 

package.json

     "dev-examples": "tsc --project examples/tsconfig.build.json -w",
     "serve-docs": "ws -d docs -p 8080",
     "serve": "ws -d . -p 8000",
-    "docs": "npx typedoc",
+    "docs": "npx typedoc && markdown-to-html",
     "prepare": "npm run build && npm run build-examples && npm run docs"
   },
   "clean-package": {
       "scripts",
       "devDependencies",
       "optionalDependencies",
-      "//"
+      "//",
+      "markdown-to-html"
     ],
     "replace": {
-      "main": "dist/index.min.js",
+      "main": "dist/index.js",
       "module": "dist/index.mjs",
       "browser": "dist/index.js",
       "types": "dist/index.d.ts"
     "typescript": "^5.0.4",
     "uiconfig.js": "^0.0.3",
     "typescript-plugin-css-modules": "^5.0.1",
-    "rollup-plugin-postcss": "^4.0.2"
+    "rollup-plugin-postcss": "^4.0.2",
+    "markdown-to-html-cli": "^3.7.0"
   },
   "dependencies": {
     "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.0004/package.tgz",
   },
   "browserslist": [
     "defaults"
-  ]
+  ],
+  "markdown-to-html": {
+    "document": {
+      "title": "Three Pipe",
+      "description": "A new way to work with three.js, 3D models and rendering on the web.",
+      "style": "body { padding: 4rem; } @media (max-width: 768px) { body { padding: 2.5rem 1rem; } }",
+      "meta": [
+        { "description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility" },
+        { "keywords": "3d,three.js,typescript,javascipt,browser,esm,rendering,viewer,webgl,webgi,canvas" }
+      ]
+    },
+    "favicon": "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌐</text></svg>",
+    "github-corners": "https://github.com/repalash/threepipe",
+    "reurls": {
+      "README.md": "index.html"
+    }
+  }
 }