downscaled main model

.dockerignore

@@ -0,0 +1,26 @@
+# AAF Systems Homepage - Docker
+
+# Dockerfile
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Development files
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE files
+.vscode/
+.idea/
+
+# Build output (will be created inside container)
+dist/
+
+# Docker files
+*.tar
+aaf-systems-transfer-package/
+aaf-systems-transfer-package.tar.gz

Dockerfile

@@ -0,0 +1,26 @@
+# Use Node.js 18 alpine as base image for smaller size
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY app/package*.json ./
+
+# Install dependencies
+RUN npm install --legacy-peer-deps
+
+# Copy the rest of the application code
+COPY app/ .
+
+# Build the application
+RUN npm run build
+
+# Install a simple HTTP server to serve the built files
+RUN npm install -g serve
+
+# Expose port 8080
+EXPOSE 8080
+
+# Start the application on port 8080
+CMD ["serve", "-s", "dist", "-l", "8080"]

README.md

@@ -1,2 +1,126 @@
-# aaf-systems-homepage
+# AAF Systems Homepage
 
+A modern 3D homepage built with Three.js, TypeScript, and Vite.
+
+## Features
+
+- 3D graphics with Three.js
+- Physics simulation with Cannon.js
+- Post-processing effects
+- TypeScript for type safety
+- Hot reload development with Vite
+
+## Docker Setup
+
+### Prerequisites
+
+- Docker
+- Docker Compose (optional)
+
+### Running with Docker
+
+#### Option 1: Using Docker Compose (Recommended)
+
+```bash
+# Build and run the application
+docker-compose up --build
+
+# Run in detached mode
+docker-compose up -d --build
+
+# Stop the application
+docker-compose down
+```
+
+#### Option 2: Using Docker directly
+
+```bash
+# Build the Docker image
+docker build -t aaf-systems-homepage .
+
+# Run the container
+docker run -p 8080:8080 aaf-systems-homepage
+```
+
+The application will be available at `http://localhost:8080`
+
+## Local Development
+
+### Prerequisites
+
+- Node.js 18+
+- npm
+
+### Setup
+
+```bash
+cd app
+npm install
+npm run dev
+```
+
+The development server will start at `http://localhost:5173`
+
+### Build for Production
+
+```bash
+cd app
+npm run build
+npm run preview
+```
+
+## Project Structure
+
+- `app/` - Main application directory
+  - `src/` - TypeScript source code
+  - `public/` - Static assets
+  - `index.html` - Entry point
+- `Dockerfile` - Docker configuration
+- `docker-compose.yml` - Docker Compose configuration
+
+## Docker Packaging & Transfer
+
+### Package Image for Transfer
+
+To package the Docker image for transfer to another computer:
+
+```bash
+# Build and package the Docker image
+./package-docker.sh
+```
+
+This will create a `aaf-systems-homepage-docker.tar` file that you can transfer to another computer.
+
+### Transfer Methods
+
+**Option 1: USB/External Drive**
+```bash
+# Copy the .tar file to USB drive
+cp aaf-systems-homepage-docker.tar /path/to/usb/drive/
+```
+
+**Option 2: Network Transfer (SCP)**
+```bash
+# Transfer via SCP
+scp aaf-systems-homepage-docker.tar user@target-computer:/path/to/destination/
+```
+
+**Option 3: Cloud Storage**
+Upload `aaf-systems-homepage-docker.tar` to your preferred cloud storage service.
+
+### Load and Run on Target Computer
+
+On the target computer:
+
+1. Make sure Docker is installed and running
+2. Copy both files to the target computer:
+   - `aaf-systems-homepage-docker.tar` (the image package)
+   - `load-and-run-docker.sh` (the load script)
+3. Run the load script:
+
+```bash
+# Load and run the Docker image
+./load-and-run-docker.sh
+```
+
+The application will be available at `http://localhost:8080` on the target computer.

app/dist/assets/index-B5Qt9EMX.js

@@ -1 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();

app/dist/assets/index-BPBuaX9T.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#000;color:#fff}#app{width:100vw;height:100vh;position:relative}.logo{position:absolute;top:2rem;left:2rem;z-index:100;font-size:1.5rem;font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);letter-spacing:.5px;-webkit-user-select:none;user-select:none}#three-canvas{width:100%;height:100%;display:block;cursor:crosshair}.home-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:1rem;font-weight:1000;color:#fff;letter-spacing:1px;padding:1rem 2rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;outline:none}.home-button:hover{background:#ffffff26;border:1px solid rgba(255,255,255,.3);transform:translate(-50%,-50%) translateY(-1px);box-shadow:0 4px 20px #00000026}.home-button:active{transform:translate(-50%,-50%) translateY(0);background:#fff3}.home-button span{display:block;position:relative;color:#ffffff26;filter:blur(.3px);-webkit-filter:blur(.3px)}@media (max-width: 768px){.logo{top:1rem;left:1rem;font-size:1.25rem}.home-button{padding:1.5rem 3rem;font-size:1.5rem;letter-spacing:3px}}

app/dist/index.html

@@ -8,11 +8,15 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <script type="module" crossorigin src="/assets/index-B5Qt9EMX.js"></script>
+    <script type="module" crossorigin src="/assets/index-kpuvI5CD.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BPBuaX9T.css">
   </head>
   <body>
     <div id="app">
       <div class="logo">AAF Systems</div>
+      <button id="home-button" class="home-button">
+        <span>Home</span>
+      </button>
       <canvas id="three-canvas"></canvas>
     </div>
   </body>

app/node_modules/.package-lock.json

@@ -980,6 +980,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postprocessing": {
+      "version": "6.37.6",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.37.6.tgz",
+      "integrity": "sha512-KrdKLf1257RkoIk3z3nhRS0aToKrX2xJgtR0lbnOQUjd+1I4GVNv1gQYsQlfRglvEXjpzrwqOA5fXfoDBimadg==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.179.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.46.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.1.tgz",

app/node_modules/.vite/deps/_metadata.json

@@ -1,25 +1,31 @@
 {
-  "hash": "4305885f",
+  "hash": "a88ce823",
   "configHash": "3b37792f",
-  "lockfileHash": "0d3c4966",
-  "browserHash": "b77d7025",
+  "lockfileHash": "5c312a08",
+  "browserHash": "152c0a59",
   "optimized": {
     "cannon-es": {
       "src": "../../cannon-es/dist/cannon-es.js",
       "file": "cannon-es.js",
-      "fileHash": "55d87002",
+      "fileHash": "8ff8e437",
       "needsInterop": false
     },
     "three": {
       "src": "../../three/build/three.module.js",
       "file": "three.js",
-      "fileHash": "c1c85acc",
+      "fileHash": "cb2e35a2",
       "needsInterop": false
     },
     "three/examples/jsm/loaders/GLTFLoader.js": {
       "src": "../../three/examples/jsm/loaders/GLTFLoader.js",
       "file": "three_examples_jsm_loaders_GLTFLoader__js.js",
-      "fileHash": "4e20fb05",
+      "fileHash": "c927b765",
+      "needsInterop": false
+    },
+    "postprocessing": {
+      "src": "../../postprocessing/build/index.js",
+      "file": "postprocessing.js",
+      "fileHash": "f93b9e9a",
       "needsInterop": false
     }
   },

app/node_modules/postprocessing/LICENSE.md

@@ -0,0 +1,19 @@
+Copyright © 2015 Raoul van Rüschen
+
+This software is provided 'as-is', without any express or implied warranty. In
+no event will the authors be held liable for any damages arising from the use of
+this software.
+
+Permission is granted to anyone to use this software for any purpose, including
+commercial applications, and to alter it and redistribute it freely, subject to
+the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not claim
+   that you wrote the original software. If you use this software in a product,
+   an acknowledgment in the product documentation would be appreciated but is
+   not required.
+
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+
+3. This notice may not be removed or altered from any source distribution.

app/node_modules/postprocessing/README.md

@@ -0,0 +1,122 @@
+# Post Processing
+
+[![CI](https://github.com/pmndrs/postprocessing/actions/workflows/ci.yml/badge.svg)](https://github.com/pmndrs/postprocessing/actions/workflows/ci.yml)
+[![Version](https://badgen.net/npm/v/postprocessing?color=green)](https://www.npmjs.com/package/postprocessing)
+
+A post processing library for [three.js](https://threejs.org/).
+
+*[Demo](https://pmndrs.github.io/postprocessing/public/demo) · [Sandbox](https://stackblitz.com/edit/postprocessing-v6) · [Documentation](https://pmndrs.github.io/postprocessing/public/docs) · [Wiki](https://github.com/pmndrs/postprocessing/wiki)*
+
+## Installation
+
+This library requires the peer dependency [three](https://github.com/mrdoob/three.js/).
+
+```sh
+npm install three postprocessing
+```
+
+## Usage
+
+Post processing introduces the concept of passes and effects to extend the common rendering workflow with fullscreen image manipulation tools. The following WebGL attributes should be used for an optimal post processing workflow:
+
+```js
+import { WebGLRenderer } from "three";
+
+const renderer = new WebGLRenderer({
+	powerPreference: "high-performance",
+	antialias: false,
+	stencil: false,
+	depth: false
+});
+```
+
+The [EffectComposer](https://pmndrs.github.io/postprocessing/public/docs/class/src/core/EffectComposer.js~EffectComposer.html) manages and runs passes. It is common practice to use a [RenderPass](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/RenderPass.js~RenderPass.html) as the first pass to automatically clear the buffers and render a scene for further processing. Fullscreen image effects are rendered via the [EffectPass](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/EffectPass.js~EffectPass.html). Please refer to the [usage example](https://github.com/mrdoob/three.js/blob/master/README.md) of three.js for more information on how to setup the renderer, scene and camera.
+
+```js
+import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";
+
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene, camera));
+composer.addPass(new EffectPass(camera, new BloomEffect()));
+
+requestAnimationFrame(function render() {
+
+	requestAnimationFrame(render);
+	composer.render();
+
+});
+```
+
+## Output Color Space
+
+New applications should follow a [linear workflow](https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html) for color management and postprocessing supports this automatically. Simply set `WebGLRenderer.outputColorSpace` to `SRGBColorSpace` and postprocessing will follow suit.
+
+Postprocessing uses `UnsignedByteType` sRGB frame buffers to store intermediate results. This is a trade-off between hardware support, efficiency and quality since linear results normally require at least 12 bits per color channel to prevent [color degradation and banding](https://blog.demofox.org/2018/03/10/dont-convert-srgb-u8-to-linear-u8/). With low precision sRGB buffers, colors will be clamped to `[0.0, 1.0]` and information loss will shift to the darker spectrum which leads to noticable banding in dark scenes. Linear, high precision `HalfFloatType` buffers don't have these issues and are the preferred option for HDR-like workflows on desktop devices. You can enable high precision frame buffers as follows:
+
+```ts
+import { HalfFloatType } from "three";
+
+const composer = new EffectComposer(renderer, {
+	frameBufferType: HalfFloatType
+});
+```
+
+## Tone Mapping
+
+Tone mapping is the process of converting HDR colors to LDR output colors. When using postprocessing, the `toneMapping` setting on the renderer should be set to `NoToneMapping` (default) and high precision frame buffers should be enabled. Otherwise, colors will be mapped to `[0.0, 1.0]` at the start of the pipeline. To enable tone mapping, use a `ToneMappingEffect` at the end of the pipeline.
+
+Note that tone mapping is not applied to the clear color when using only the renderer because clearing doesn't involve shaders. Postprocessing applies to the full input image which means that tone mapping will also be applied uniformly. Consequently, the results of tone mapping a clear color background with and without postprocessing will be different, with the postprocessing approach being correct.
+
+## Performance
+
+This library provides an [EffectPass](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/EffectPass.js~EffectPass.html) which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own [blend function](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction).
+
+All fullscreen render operations also use a [single triangle](https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/) that fills the screen. Compared to using a quad, this approach harmonizes with modern GPU rasterization patterns and eliminates unnecessary fragment calculations along the screen diagonal. This is especially beneficial for GPGPU passes and effects that use complex fragment shaders.
+
+[Performance Test](https://pmndrs.github.io/postprocessing/public/demo/#performance)
+
+## Included Effects
+
+_The total demo download size is about `60 MB`._
+
+ - [Antialiasing](https://pmndrs.github.io/postprocessing/public/demo/#antialiasing)
+ - [Bloom](https://pmndrs.github.io/postprocessing/public/demo/#bloom)
+ - [Blur](https://pmndrs.github.io/postprocessing/public/demo/#blur)
+ - [Color Depth](https://pmndrs.github.io/postprocessing/public/demo/#color-depth)
+ - [Color Grading](https://pmndrs.github.io/postprocessing/public/demo/#color-grading)
+   - Color Average
+   - Sepia
+   - Brightness & Contrast
+   - Hue & Saturation
+   - LUT
+ - [Depth of Field](https://pmndrs.github.io/postprocessing/public/demo/#depth-of-field)
+   - Vignette
+ - [Glitch](https://pmndrs.github.io/postprocessing/public/demo/#glitch)
+   - Chromatic Aberration
+   - Noise
+ - [God Rays](https://pmndrs.github.io/postprocessing/public/demo/#god-rays)
+ - [Pattern](https://pmndrs.github.io/postprocessing/public/demo/#pattern)
+   - Dot-Screen
+   - Grid
+   - Scanline
+ - [Pixelation](https://pmndrs.github.io/postprocessing/public/demo/#pixelation)
+ - [Outline](https://pmndrs.github.io/postprocessing/public/demo/#outline)
+ - [Shock Wave](https://pmndrs.github.io/postprocessing/public/demo/#shock-wave)
+   - Depth Picking
+ - [SSAO](https://pmndrs.github.io/postprocessing/public/demo/#ssao)
+ - [Texture](https://pmndrs.github.io/postprocessing/public/demo/#texture)
+ - [Tone Mapping](https://pmndrs.github.io/postprocessing/public/demo/#tone-mapping)
+
+## Custom Effects
+
+If you want to learn how to create custom effects or passes, please check the [Wiki](https://github.com/pmndrs/postprocessing/wiki).
+
+## Contributing
+
+Please refer to the [contribution guidelines](https://github.com/pmndrs/postprocessing/blob/main/.github/CONTRIBUTING.md) for details.
+
+## License
+
+This library is licensed under the [Zlib license](https://github.com/pmndrs/postprocessing/blob/main/LICENSE.md).
+
+The original code that this library is based on, was written by [mrdoob](https://mrdoob.com) and the [three.js contributors](https://github.com/mrdoob/three.js/graphs/contributors) and is licensed under the [MIT license](https://github.com/mrdoob/three.js/blob/master/LICENSE).

app/node_modules/postprocessing/package.json

@@ -0,0 +1,132 @@
+{
+	"name": "postprocessing",
+	"version": "6.37.6",
+	"description": "A post processing library for three.js.",
+	"homepage": "https://github.com/pmndrs/postprocessing",
+	"license": "Zlib",
+	"type": "module",
+	"sideEffects": false,
+	"main": "./build/index.cjs",
+	"module": "./build/index.js",
+	"types": "./build/types/index.d.cts",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./build/types/index.d.ts",
+				"default": "./build/index.js"
+			},
+			"require": {
+				"types": "./build/types/index.d.cts",
+				"default": "./build/index.cjs"
+			}
+		}
+	},
+	"keywords": [
+		"rendering",
+		"image",
+		"filter",
+		"effect",
+		"composer",
+		"pass",
+		"post",
+		"processing",
+		"gpgpu",
+		"rtt",
+		"rendertexture",
+		"rendertarget",
+		"three"
+	],
+	"author": {
+		"name": "Raoul van Rüschen",
+		"email": "vanruesc@outlook.de"
+	},
+	"repository": {
+		"url": "git+https://github.com/pmndrs/postprocessing.git"
+	},
+	"bugs": {
+		"url": "https://github.com/pmndrs/postprocessing/issues"
+	},
+	"files": [
+		"./build"
+	],
+	"ava": {
+		"failFast": true,
+		"files": [
+			"./test/**/*"
+		]
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"@parcel/watcher",
+			"core-js",
+			"esbuild",
+			"hugo-bin"
+		]
+	},
+	"scripts": {
+		"ava": "ava",
+		"build": "npm run clean && run-p build:css build:js:min build:dts",
+		"build:css": "sass --no-source-map -I manual/assets/css/src/values manual/assets/css/src:manual/assets/css/dist",
+		"build:js": "node esbuild",
+		"build:js:min": "node esbuild -m",
+		"build:dts": "cpy \"types/*\" build/types && cpy \"types/*\" build/types --rename=index.d.cts",
+		"clean": "del-cli build temp manual/resources \"manual/assets/**/dist\" public",
+		"copy": "cpy \"demo/static/**/*\" public/demo",
+		"deploy": "run-s copy postcss hugo gzip",
+		"doc": "esdoc",
+		"gzip": "gzipper c \"public\"",
+		"hugo": "hugo -s manual --minify",
+		"lint": "run-p lint:*",
+		"lint:css": "stylelint --fix manual/assets/css/src",
+		"lint:js": "eslint --fix src demo/src manual/assets/js/src",
+		"lint:dts": "tsc types/index.d.ts --noEmit",
+		"postcss": "postcss manual/assets/css/dist/index.css -o manual/assets/css/dist/index.css -c manual",
+		"prepublishOnly": "npm test",
+		"prewatch": "run-s clean copy build:css build:js",
+		"test": "run-s lint build ava doc",
+		"start": "hugo server -s manual -e development",
+		"watch": "run-p watch:* start",
+		"watch:css": "sass --no-source-map -I manual/assets/css/src/values manual/assets/css/src:manual/assets/css/dist -w",
+		"watch:js": "node esbuild -w"
+	},
+	"peerDependencies": {
+		"three": ">= 0.157.0 < 0.179.0"
+	},
+	"devDependencies": {
+		"@tweakpane/core": "2.x.x",
+		"@types/node": "24.x.x",
+		"@types/three": "0.x.x",
+		"@typescript-eslint/eslint-plugin": "8.x.x",
+		"@typescript-eslint/parser": "8.x.x",
+		"autoprefixer": "10.x.x",
+		"ava": "6.x.x",
+		"cpy-cli": "5.x.x",
+		"cssnano": "7.x.x",
+		"dat.gui": "0.x.x",
+		"del-cli": "6.x.x",
+		"esbuild": "0.25.x",
+		"esbuild-plugin-glsl": "1.x.x",
+		"esdoc": "1.x.x",
+		"esdoc-importpath-plugin": "1.x.x",
+		"esdoc-standard-plugin": "1.x.x",
+		"eslint": "9.x.x",
+		"eslint-config-aether": "2.x.x",
+		"gzipper": "8.x.x",
+		"hugo-bin": "0.x.x",
+		"npm-run-all": "4.x.x",
+		"postcss": "8.x.x",
+		"postcss-cli": "11.x.x",
+		"postcss-preset-env": "10.x.x",
+		"sass": "1.x.x",
+		"spatial-controls": "6.x.x",
+		"stylelint": "16.x.x",
+		"stylelint-config-standard-scss": "15.x.x",
+		"stylelint-order": "7.x.x",
+		"three": "0.x.x",
+		"three-demo": "5.x.x",
+		"tiny-glob": "0.x.x",
+		"tslib": "2.x.x",
+		"tweakpane": "4.x.x",
+		"typescript": "5.8.x"
+	}
+}

app/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@types/three": "^0.178.1",
         "cannon-es": "^0.20.0",
+        "postprocessing": "^6.37.6",
         "three": "^0.178.0",
         "three-good-godrays": "^0.7.1"
       },
@@ -950,6 +951,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postprocessing": {
+      "version": "6.37.6",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.37.6.tgz",
+      "integrity": "sha512-KrdKLf1257RkoIk3z3nhRS0aToKrX2xJgtR0lbnOQUjd+1I4GVNv1gQYsQlfRglvEXjpzrwqOA5fXfoDBimadg==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.179.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.46.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.1.tgz",

app/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@types/three": "^0.178.1",
     "cannon-es": "^0.20.0",
+    "postprocessing": "^6.37.6",
     "three": "^0.178.0",
     "three-good-godrays": "^0.7.1"
   }

app/src/main.ts

@@ -6,6 +6,7 @@ import { LightingManager } from './lighting'
 import { ModelLoader } from './model-loader'
 import { PhysicsManager } from './physics'
 import { EventManager } from './event-manager'
+import { PostProcessingManager } from './post-processing'
 
 class AAFHomepage {
   private scene: THREE.Scene
@@ -20,6 +21,8 @@ class AAFHomepage {
   private lastTime: number = 0
   private modelLoader: ModelLoader
   private eventManager: EventManager
+  private postProcessing!: PostProcessingManager
+  private usePostProcessing: boolean = true
 
   constructor() {
     this.scene = new THREE.Scene()
@@ -85,6 +88,21 @@ class AAFHomepage {
     // Setup lighting
     LightingManager.setupLighting(this.scene)
 
+    // Initialize post-processing
+    this.postProcessing = new PostProcessingManager(this.renderer, this.scene, this.camera)
+
+    // Setup window resize handler
+    window.addEventListener('resize', () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      
+      this.camera.aspect = width / height
+      this.camera.updateProjectionMatrix()
+      
+      this.renderer.setSize(width, height)
+      this.postProcessing.resize(width, height)
+    })
+
     // Load and create objects from the main model
     this.loadAndCreateObjects()
 
@@ -117,7 +135,14 @@ class AAFHomepage {
       clampedDeltaTime
     )
     
-    this.renderer.render(this.scene, this.camera)
+    // Use post-processing rendering
+    if (this.usePostProcessing) {
+      this.postProcessing.update(clampedDeltaTime)
+      this.postProcessing.render(clampedDeltaTime)
+    } else {
+      // Fallback to direct rendering
+      this.renderer.render(this.scene, this.camera)
+    }
   }
 }
 

app/src/motion-blur.ts

@@ -0,0 +1,121 @@
+import * as THREE from 'three'
+
+export class MotionBlurEffect {
+  private scene: THREE.Scene
+  private camera: THREE.PerspectiveCamera
+  private renderer: THREE.WebGLRenderer
+  private renderTarget1: THREE.WebGLRenderTarget
+  private renderTarget2: THREE.WebGLRenderTarget
+  private blurMaterial: THREE.ShaderMaterial
+  private quad: THREE.Mesh
+  private intensity: number = 0.5
+  private accumulation: number = 0.8
+
+  constructor(
+    scene: THREE.Scene,
+    camera: THREE.PerspectiveCamera,
+    renderer: THREE.WebGLRenderer
+  ) {
+    this.scene = scene
+    this.camera = camera
+    this.renderer = renderer
+
+    const size = renderer.getSize(new THREE.Vector2())
+    
+    // Create render targets for accumulation
+    this.renderTarget1 = new THREE.WebGLRenderTarget(size.x, size.y, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      format: THREE.RGBAFormat,
+      type: THREE.FloatType
+    })
+    
+    this.renderTarget2 = new THREE.WebGLRenderTarget(size.x, size.y, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      format: THREE.RGBAFormat,
+      type: THREE.FloatType
+    })
+
+    // Motion blur shader material
+    this.blurMaterial = new THREE.ShaderMaterial({
+      uniforms: {
+        tCurrent: { value: null },
+        tPrevious: { value: null },
+        intensity: { value: this.intensity },
+        accumulation: { value: this.accumulation }
+      },
+      vertexShader: `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragmentShader: `
+        uniform sampler2D tCurrent;
+        uniform sampler2D tPrevious;
+        uniform float intensity;
+        uniform float accumulation;
+        varying vec2 vUv;
+        
+        void main() {
+          vec4 current = texture2D(tCurrent, vUv);
+          vec4 previous = texture2D(tPrevious, vUv);
+          
+          // Blend current frame with accumulated previous frames
+          vec4 result = mix(current, previous, accumulation * intensity);
+          
+          gl_FragColor = result;
+        }
+      `
+    })
+
+    // Create fullscreen quad
+    const geometry = new THREE.PlaneGeometry(2, 2)
+    this.quad = new THREE.Mesh(geometry, this.blurMaterial)
+  }
+
+  public render(_deltaTime: number): THREE.WebGLRenderTarget {
+    // Render current frame to renderTarget1
+    this.renderer.setRenderTarget(this.renderTarget1)
+    this.renderer.render(this.scene, this.camera)
+
+    // Apply motion blur by blending with previous frame
+    this.blurMaterial.uniforms.tCurrent.value = this.renderTarget1.texture
+    this.blurMaterial.uniforms.tPrevious.value = this.renderTarget2.texture
+
+    // Render blurred result to renderTarget2
+    this.renderer.setRenderTarget(this.renderTarget2)
+    this.renderer.render(this.quad, new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1))
+
+    // Swap render targets for next frame
+    const temp = this.renderTarget1
+    this.renderTarget1 = this.renderTarget2
+    this.renderTarget2 = temp
+
+    return this.renderTarget1
+  }
+
+  public setIntensity(intensity: number): void {
+    this.intensity = intensity
+    this.blurMaterial.uniforms.intensity.value = intensity
+  }
+
+  public setAccumulation(accumulation: number): void {
+    this.accumulation = accumulation
+    this.blurMaterial.uniforms.accumulation.value = accumulation
+  }
+
+  public resize(width: number, height: number): void {
+    this.renderTarget1.setSize(width, height)
+    this.renderTarget2.setSize(width, height)
+  }
+
+  public dispose(): void {
+    this.renderTarget1.dispose()
+    this.renderTarget2.dispose()
+    this.blurMaterial.dispose()
+    this.quad.geometry.dispose()
+  }
+}

app/src/post-processing.ts

@@ -0,0 +1,122 @@
+import * as THREE from 'three'
+import {
+  EffectComposer,
+  EffectPass,
+  RenderPass,
+  BloomEffect,
+  SSAOEffect,
+  DepthOfFieldEffect,
+  NormalPass,
+  SMAAEffect
+} from 'postprocessing'
+
+export class PostProcessingManager {
+  private composer: EffectComposer
+  private bloomEffect: BloomEffect
+  private ssaoEffect: SSAOEffect
+  private depthOfFieldEffect: DepthOfFieldEffect
+  private normalPass: NormalPass
+
+  constructor(
+    renderer: THREE.WebGLRenderer,
+    scene: THREE.Scene,
+    camera: THREE.PerspectiveCamera
+  ) {
+    // Create effect composer
+    this.composer = new EffectComposer(renderer)
+
+    // Add render pass (renders the scene)
+    const renderPass = new RenderPass(scene, camera)
+    this.composer.addPass(renderPass)
+
+    // Create normal pass for SSAO
+    this.normalPass = new NormalPass(scene, camera)
+    this.composer.addPass(this.normalPass)
+
+    // Create bloom effect - enhanced for more dramatic glow
+    this.bloomEffect = new BloomEffect({
+      intensity: 1.2,
+      luminanceThreshold: 0.1,
+      luminanceSmoothing: 0.15,
+      radius: 0.9,
+      mipmapBlur: true
+    })
+
+    // Create SSAO effect - enhanced for better ambient occlusion
+    this.ssaoEffect = new SSAOEffect(camera, this.normalPass.texture, {
+      intensity: 0.8,
+      fade: 0.01,
+      radius: 0.15,
+      samples: 32,
+      rings: 4,
+      worldDistanceThreshold: 20,
+      worldDistanceFalloff: 5,
+      worldProximityThreshold: 0.0005,
+      worldProximityFalloff: 0.001,
+      luminanceInfluence: 0.7,
+      bias: 0.02
+    })
+
+    // Create depth of field effect - tighter focus for more dramatic effect
+    this.depthOfFieldEffect = new DepthOfFieldEffect(camera, {
+      focusDistance: 0.015,  // Closer focus point
+      focalLength: 0.12,     // Shorter focal length for stronger blur
+      bokehScale: 4.0,       // Larger bokeh for more pronounced blur
+      height: 480
+    })
+
+    // Create SMAA effect for better antialiasing
+    const smaaEffect = new SMAAEffect()
+
+    // Combine effects in a single pass for better performance
+    const effectPass = new EffectPass(
+      camera,
+      this.bloomEffect,
+      this.ssaoEffect,
+      this.depthOfFieldEffect,
+      smaaEffect
+    )
+
+    this.composer.addPass(effectPass)
+  }
+
+  public render(deltaTime?: number): void {
+    this.composer.render(deltaTime)
+  }
+
+  public resize(width: number, height: number): void {
+    this.composer.setSize(width, height)
+  }
+
+  // Control methods for real-time adjustments
+  public setBloomIntensity(intensity: number): void {
+    this.bloomEffect.intensity = intensity
+  }
+
+  public setSSAOIntensity(intensity: number): void {
+    this.ssaoEffect.intensity = intensity
+  }
+
+  public setDepthOfFieldFocus(focusDistance: number): void {
+    this.depthOfFieldEffect.circleOfConfusionMaterial.uniforms.focusDistance.value = focusDistance
+  }
+
+  // Get the composer for advanced usage
+  public getComposer(): EffectComposer {
+    return this.composer
+  }
+
+  // Update method for any per-frame updates
+  public update(_deltaTime: number): void {
+    // Add any custom update logic here if needed
+  }
+
+  // Dispose method for cleanup
+  public dispose(): void {
+    this.composer.dispose()
+    this.bloomEffect.dispose()
+    this.ssaoEffect.dispose()
+    this.depthOfFieldEffect.dispose()
+    this.normalPass.dispose()
+  }
+}

app/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: './',
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: undefined,
+      },
+    },
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 8080,
+  },
+  preview: {
+    host: '0.0.0.0',
+    port: 8080,
+  },
+})

create-transfer-package.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Create Transfer Package
+# This script creates a complete transfer package with the Docker image and scripts
+
+echo "📦 Creating Complete Transfer Package"
+echo "===================================="
+
+PACKAGE_DIR="aaf-systems-transfer-package"
+IMAGE_TAR="aaf-systems-homepage-docker.tar"
+
+# Check if Docker image tar exists
+if [ ! -f "$IMAGE_TAR" ]; then
+    echo "🔨 Docker image package not found. Building and packaging..."
+    ./package-docker.sh
+    
+    if [ ! -f "$IMAGE_TAR" ]; then
+        echo "❌ Failed to create Docker image package"
+        exit 1
+    fi
+fi
+
+# Create transfer package directory
+echo "📁 Creating transfer package directory..."
+rm -rf $PACKAGE_DIR
+mkdir -p $PACKAGE_DIR
+
+# Copy necessary files
+echo "📋 Copying files to package..."
+cp $IMAGE_TAR $PACKAGE_DIR/
+cp load-and-run-docker.sh $PACKAGE_DIR/
+cp stop-docker.sh $PACKAGE_DIR/
+
+# Create a README for the transfer package
+cat > $PACKAGE_DIR/README.txt << 'EOF'
+AAF Systems Homepage - Transfer Package
+======================================
+
+This package contains everything needed to run the AAF Systems Homepage on a target computer.
+
+Contents:
+- aaf-systems-homepage-docker.tar: The Docker image
+- load-and-run-docker.sh: Script to load and run the Docker image
+- stop-docker.sh: Script to stop the Docker container
+
+Instructions:
+1. Make sure Docker is installed and running on the target computer
+2. Copy this entire folder to the target computer
+3. Open terminal in this folder
+4. Run: chmod +x *.sh
+5. Run: ./load-and-run-docker.sh
+
+The application will be available at http://localhost:8080
+
+To stop the application: ./stop-docker.sh
+EOF
+
+# Create archive
+echo "🗜️  Creating compressed archive..."
+tar -czf aaf-systems-transfer-package.tar.gz $PACKAGE_DIR
+
+echo "✅ Transfer package created successfully!"
+echo ""
+echo "📦 Package Contents:"
+echo "==================="
+ls -la $PACKAGE_DIR/
+echo ""
+echo "📊 Archive Info:"
+echo "==============="
+ls -lh aaf-systems-transfer-package.tar.gz
+echo ""
+echo "🚚 Ready for Transfer:"
+echo "====================="
+echo "Transfer 'aaf-systems-transfer-package.tar.gz' to the target computer"
+echo "On target computer: tar -xzf aaf-systems-transfer-package.tar.gz"
+echo "Then follow instructions in the README.txt file"

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+
+services:
+  aaf-systems-homepage:
+    build: .
+    ports:
+      - "8080:8080"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped

load-and-run-docker.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Docker Load Script
+# This script loads and runs a packaged Docker image on the target computer
+
+echo "🚀 AAF Systems Homepage Docker Load & Run"
+echo "========================================="
+
+IMAGE_NAME="aaf-systems-homepage"
+PACKAGE_NAME="aaf-systems-homepage-docker.tar"
+CONTAINER_NAME="aaf-systems-homepage"
+
+# Check if Docker is running
+if ! sudo docker info > /dev/null 2>&1; then
+    echo "❌ Docker is not running. Please start Docker and try again."
+    exit 1
+fi
+
+# Check if package file exists
+if [ ! -f "$PACKAGE_NAME" ]; then
+    echo "❌ Package file '$PACKAGE_NAME' not found in current directory"
+    echo "Please make sure the .tar file is in the same directory as this script"
+    exit 1
+fi
+
+echo "📦 Loading Docker image from $PACKAGE_NAME..."
+sudo docker load -i $PACKAGE_NAME
+
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to load Docker image"
+    exit 1
+fi
+
+echo "🛑 Stopping any existing container..."
+sudo docker stop $CONTAINER_NAME 2>/dev/null || true
+sudo docker rm $CONTAINER_NAME 2>/dev/null || true
+
+echo "🚀 Starting container on port 8080..."
+sudo docker run -d -p 8080:8080 --name $CONTAINER_NAME $IMAGE_NAME
+
+if [ $? -eq 0 ]; then
+    echo "✅ Container started successfully!"
+    echo ""
+    echo "🌐 Application is running at: http://localhost:8080"
+    echo ""
+    echo "📋 Useful Commands:"
+    echo "=================="
+    echo "View logs:     sudo docker logs $CONTAINER_NAME"
+    echo "Stop container: sudo docker stop $CONTAINER_NAME"
+    echo "Remove container: sudo docker rm $CONTAINER_NAME"
+    echo "Check status:  sudo docker ps"
+else
+    echo "❌ Failed to start container"
+    exit 1
+fi

package-docker.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Docker Package Script
+# This script builds and packages the Docker image for transfer to another computer
+
+echo "📦 AAF Systems Homepage Docker Packaging"
+echo "========================================"
+
+IMAGE_NAME="aaf-systems-homepage"
+PACKAGE_NAME="aaf-systems-homepage-docker.tar"
+
+# Check if Docker is running
+if ! sudo docker info > /dev/null 2>&1; then
+    echo "❌ Docker is not running. Please start Docker and try again."
+    exit 1
+fi
+
+echo "🔨 Building Docker image..."
+sudo docker build -t $IMAGE_NAME .
+
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to build Docker image"
+    exit 1
+fi
+
+echo "📦 Packaging Docker image to $PACKAGE_NAME..."
+sudo docker save -o $PACKAGE_NAME $IMAGE_NAME
+
+if [ $? -eq 0 ]; then
+    echo "✅ Docker image packaged successfully!"
+    echo ""
+    echo "📋 Transfer Instructions:"
+    echo "========================"
+    echo "1. Copy '$PACKAGE_NAME' to the target computer"
+    echo "2. On the target computer, run:"
+    echo "   sudo docker load -i $PACKAGE_NAME"
+    echo "3. Run the container:"
+    echo "   sudo docker run -p 8080:8080 --name aaf-systems-homepage $IMAGE_NAME"
+    echo ""
+    echo "📊 Package Info:"
+    echo "==============="
+    ls -lh $PACKAGE_NAME
+else
+    echo "❌ Failed to package Docker image"
+    exit 1
+fi

run-docker.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Docker Runner Script
+
+echo "🚀 AAF Systems Homepage Docker Setup"
+echo "===================================="
+
+# Check if Docker is running
+if ! sudo docker info > /dev/null 2>&1; then
+    echo "❌ Docker is not running. Please start Docker Desktop and try again."
+    exit 1
+fi
+
+# Function to build and run with Docker Compose
+run_with_compose() {
+    echo "🔨 Building and running with Docker Compose..."
+    sudo docker-compose up --build
+}
+
+# Function to build and run with Docker directly
+run_with_docker() {
+    echo "🔨 Building Docker image..."
+    sudo docker build -t aaf-systems-homepage .
+    
+    echo "🚀 Running container on port 8080..."
+    sudo docker run -p 8080:8080 --name aaf-systems-homepage aaf-systems-homepage
+}
+
+# Check if docker-compose is available
+if command -v docker-compose &> /dev/null; then
+    echo "📋 Docker Compose detected. Using docker-compose.yml..."
+    run_with_compose
+else
+    echo "📋 Docker Compose not found. Using Docker directly..."
+    run_with_docker
+fi

stop-docker.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# AAF Systems Homepage - Docker Stop Script
+
+echo "🛑 Stopping AAF Systems Homepage Docker Container"
+echo "================================================"
+
+# Stop and remove the container
+echo "🔍 Stopping container..."
+sudo docker stop aaf-systems-homepage 2>/dev/null || echo "Container not running"
+
+echo "🗑️  Removing container..."
+sudo docker rm aaf-systems-homepage 2>/dev/null || echo "Container not found"
+
+# If using docker-compose, stop that too
+if command -v docker-compose &> /dev/null; then
+    echo "🔍 Stopping docker-compose services..."
+    sudo docker-compose down 2>/dev/null || echo "No docker-compose services running"
+fi
+
+echo "✅ Cleanup complete!"