Compare commits

...

9 Commits

Author SHA1 Message Date
baee10cf16 downscaled main model 2025-08-03 19:58:52 +01:00
18827e39e5 why is motion blur still here fuck sake 2025-07-29 01:02:18 +01:00
66c513a769 docker fixes 2025-07-29 01:01:16 +01:00
891e398882 docker 2025-07-29 00:58:18 +01:00
daa92c4c41 post processing 2025-07-29 00:50:30 +01:00
8cab3ce92d postprocessing 2025-07-29 00:43:56 +01:00
1508b3cb29 added god rays 2025-07-29 00:15:57 +01:00
51427294da home button 2025-07-29 00:15:50 +01:00
6fc8157ab1 added home button 2025-07-29 00:15:40 +01:00
55 changed files with 93303 additions and 13 deletions

26
.dockerignore Normal file
View File

@@ -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

26
Dockerfile Normal file
View File

@@ -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"]

126
README.md
View File

@@ -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.

BIN
app/dist/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -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)}})();

1
app/dist/assets/index-BPBuaX9T.css vendored Normal file
View File

@@ -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}}

4221
app/dist/assets/index-kpuvI5CD.js vendored Normal file

File diff suppressed because one or more lines are too long

6
app/dist/index.html vendored
View File

@@ -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>

BIN
app/dist/models/main_model.glb vendored Normal file

Binary file not shown.

View File

@@ -12,6 +12,9 @@
<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>
<script type="module" src="/src/main.ts"></script>

22
app/node_modules/.package-lock.json generated vendored
View File

@@ -897,7 +897,6 @@
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"hasInstallScript": true,
"ideallyInert": true,
"license": "MIT",
"optional": true,
"os": [
@@ -981,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",
@@ -1037,6 +1045,18 @@
"integrity": "sha512-ybFIB0+x8mz0wnZgSGy2MO/WCO6xZhQSZnmfytSPyNpM0sBafGRVhdaj+erYh5U+RhQOAg/eXqw5uVDiM2BjhQ==",
"license": "MIT"
},
"node_modules/three-good-godrays": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/three-good-godrays/-/three-good-godrays-0.7.1.tgz",
"integrity": "sha512-VeaJlcWozjKPm2FgiHXPDTVmGxYr89arRYJlyLmJvLr+C+2OVm1RPsHcdXyRU4IPT33EQUfSuFBtL/z2lNqXAw==",
"engines": {
"node": ">= 0.13.2"
},
"peerDependencies": {
"postprocessing": "^6.33.4",
"three": ">= 0.125.0 <= 0.167.0"
}
},
"node_modules/tinyglobby": {
"version": "0.2.14",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",

View File

@@ -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
}
},

16007
app/node_modules/.vite/deps/postprocessing.js generated vendored Normal file

File diff suppressed because one or more lines are too long

7
app/node_modules/.vite/deps/postprocessing.js.map generated vendored Normal file

File diff suppressed because one or more lines are too long

22
app/node_modules/fsevents/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,22 @@
MIT License
-----------
Copyright (C) 2010-2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

89
app/node_modules/fsevents/README.md generated vendored Normal file
View File

@@ -0,0 +1,89 @@
# fsevents
Native access to MacOS FSEvents in [Node.js](https://nodejs.org/)
The FSEvents API in MacOS allows applications to register for notifications of
changes to a given directory tree. It is a very fast and lightweight alternative
to kqueue.
This is a low-level library. For a cross-platform file watching module that
uses fsevents, check out [Chokidar](https://github.com/paulmillr/chokidar).
## Usage
```sh
npm install fsevents
```
Supports only **Node.js v8.16 and higher**.
```js
const fsevents = require('fsevents');
// To start observation
const stop = fsevents.watch(__dirname, (path, flags, id) => {
const info = fsevents.getInfo(path, flags);
});
// To end observation
stop();
```
> **Important note:** The API behaviour is slightly different from typical JS APIs. The `stop` function **must** be
> retrieved and stored somewhere, even if you don't plan to stop the watcher. If you forget it, the garbage collector
> will eventually kick in, the watcher will be unregistered, and your callbacks won't be called anymore.
The callback passed as the second parameter to `.watch` get's called whenever the operating system detects a
a change in the file system. It takes three arguments:
###### `fsevents.watch(dirname: string, (path: string, flags: number, id: string) => void): () => Promise<undefined>`
* `path: string` - the item in the filesystem that have been changed
* `flags: number` - a numeric value describing what the change was
* `id: string` - an unique-id identifying this specific event
Returns closer callback which when called returns a Promise resolving when the watcher process has been shut down.
###### `fsevents.getInfo(path: string, flags: number, id: string): FsEventInfo`
The `getInfo` function takes the `path`, `flags` and `id` arguments and converts those parameters into a structure
that is easier to digest to determine what the change was.
The `FsEventsInfo` has the following shape:
```js
/**
* @typedef {'created'|'modified'|'deleted'|'moved'|'root-changed'|'cloned'|'unknown'} FsEventsEvent
* @typedef {'file'|'directory'|'symlink'} FsEventsType
*/
{
"event": "created", // {FsEventsEvent}
"path": "file.txt",
"type": "file", // {FsEventsType}
"changes": {
"inode": true, // Had iNode Meta-Information changed
"finder": false, // Had Finder Meta-Data changed
"access": false, // Had access permissions changed
"xattrs": false // Had xAttributes changed
},
"flags": 0x100000000
}
```
## Changelog
- v2.3 supports Apple Silicon ARM CPUs
- v2 supports node 8.16+ and reduces package size massively
- v1.2.8 supports node 6+
- v1.2.7 supports node 4+
## Troubleshooting
- I'm getting `EBADPLATFORM` `Unsupported platform for fsevents` error.
- It's fine, nothing is broken. fsevents is macos-only. Other platforms are skipped. If you want to hide this warning, report a bug to NPM bugtracker asking them to hide ebadplatform warnings by default.
## License
The MIT License Copyright (C) 2010-2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller — see LICENSE file.
Visit our [GitHub page](https://github.com/fsevents/fsevents) and [NPM Page](https://npmjs.org/package/fsevents)

46
app/node_modules/fsevents/fsevents.d.ts generated vendored Normal file
View File

@@ -0,0 +1,46 @@
declare type Event = "created" | "cloned" | "modified" | "deleted" | "moved" | "root-changed" | "unknown";
declare type Type = "file" | "directory" | "symlink";
declare type FileChanges = {
inode: boolean;
finder: boolean;
access: boolean;
xattrs: boolean;
};
declare type Info = {
event: Event;
path: string;
type: Type;
changes: FileChanges;
flags: number;
};
declare type WatchHandler = (path: string, flags: number, id: string) => void;
export declare function watch(path: string, handler: WatchHandler): () => Promise<void>;
export declare function watch(path: string, since: number, handler: WatchHandler): () => Promise<void>;
export declare function getInfo(path: string, flags: number): Info;
export declare const constants: {
None: 0x00000000;
MustScanSubDirs: 0x00000001;
UserDropped: 0x00000002;
KernelDropped: 0x00000004;
EventIdsWrapped: 0x00000008;
HistoryDone: 0x00000010;
RootChanged: 0x00000020;
Mount: 0x00000040;
Unmount: 0x00000080;
ItemCreated: 0x00000100;
ItemRemoved: 0x00000200;
ItemInodeMetaMod: 0x00000400;
ItemRenamed: 0x00000800;
ItemModified: 0x00001000;
ItemFinderInfoMod: 0x00002000;
ItemChangeOwner: 0x00004000;
ItemXattrMod: 0x00008000;
ItemIsFile: 0x00010000;
ItemIsDir: 0x00020000;
ItemIsSymlink: 0x00040000;
ItemIsHardlink: 0x00100000;
ItemIsLastHardlink: 0x00200000;
OwnEvent: 0x00080000;
ItemCloned: 0x00400000;
};
export {};

83
app/node_modules/fsevents/fsevents.js generated vendored Normal file
View File

@@ -0,0 +1,83 @@
/*
** © 2020 by Philipp Dunkel, Ben Noordhuis, Elan Shankar, Paul Miller
** Licensed under MIT License.
*/
/* jshint node:true */
"use strict";
if (process.platform !== "darwin") {
throw new Error(`Module 'fsevents' is not compatible with platform '${process.platform}'`);
}
const Native = require("./fsevents.node");
const events = Native.constants;
function watch(path, since, handler) {
if (typeof path !== "string") {
throw new TypeError(`fsevents argument 1 must be a string and not a ${typeof path}`);
}
if ("function" === typeof since && "undefined" === typeof handler) {
handler = since;
since = Native.flags.SinceNow;
}
if (typeof since !== "number") {
throw new TypeError(`fsevents argument 2 must be a number and not a ${typeof since}`);
}
if (typeof handler !== "function") {
throw new TypeError(`fsevents argument 3 must be a function and not a ${typeof handler}`);
}
let instance = Native.start(Native.global, path, since, handler);
if (!instance) throw new Error(`could not watch: ${path}`);
return () => {
const result = instance ? Promise.resolve(instance).then(Native.stop) : Promise.resolve(undefined);
instance = undefined;
return result;
};
}
function getInfo(path, flags) {
return {
path,
flags,
event: getEventType(flags),
type: getFileType(flags),
changes: getFileChanges(flags),
};
}
function getFileType(flags) {
if (events.ItemIsFile & flags) return "file";
if (events.ItemIsDir & flags) return "directory";
if (events.MustScanSubDirs & flags) return "directory";
if (events.ItemIsSymlink & flags) return "symlink";
}
function anyIsTrue(obj) {
for (let key in obj) {
if (obj[key]) return true;
}
return false;
}
function getEventType(flags) {
if (events.ItemRemoved & flags) return "deleted";
if (events.ItemRenamed & flags) return "moved";
if (events.ItemCreated & flags) return "created";
if (events.ItemModified & flags) return "modified";
if (events.RootChanged & flags) return "root-changed";
if (events.ItemCloned & flags) return "cloned";
if (anyIsTrue(flags)) return "modified";
return "unknown";
}
function getFileChanges(flags) {
return {
inode: !!(events.ItemInodeMetaMod & flags),
finder: !!(events.ItemFinderInfoMod & flags),
access: !!(events.ItemChangeOwner & flags),
xattrs: !!(events.ItemXattrMod & flags),
};
}
exports.watch = watch;
exports.getInfo = getInfo;
exports.constants = events;

BIN
app/node_modules/fsevents/fsevents.node generated vendored Executable file

Binary file not shown.

62
app/node_modules/fsevents/package.json generated vendored Normal file
View File

@@ -0,0 +1,62 @@
{
"name": "fsevents",
"version": "2.3.3",
"description": "Native Access to MacOS FSEvents",
"main": "fsevents.js",
"types": "fsevents.d.ts",
"os": [
"darwin"
],
"files": [
"fsevents.d.ts",
"fsevents.js",
"fsevents.node"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
},
"scripts": {
"clean": "node-gyp clean && rm -f fsevents.node",
"build": "node-gyp clean && rm -f fsevents.node && node-gyp rebuild && node-gyp clean",
"test": "/bin/bash ./test.sh 2>/dev/null",
"prepublishOnly": "npm run build"
},
"repository": {
"type": "git",
"url": "https://github.com/fsevents/fsevents.git"
},
"keywords": [
"fsevents",
"mac"
],
"contributors": [
{
"name": "Philipp Dunkel",
"email": "pip@pipobscure.com"
},
{
"name": "Ben Noordhuis",
"email": "info@bnoordhuis.nl"
},
{
"name": "Elan Shankar",
"email": "elan.shanker@gmail.com"
},
{
"name": "Miroslav Bajtoš",
"email": "mbajtoss@gmail.com"
},
{
"name": "Paul Miller",
"url": "https://paulmillr.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/fsevents/fsevents/issues"
},
"homepage": "https://github.com/fsevents/fsevents",
"devDependencies": {
"node-gyp": "^9.4.0"
}
}

19
app/node_modules/postprocessing/LICENSE.md generated vendored Normal file
View File

@@ -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.

122
app/node_modules/postprocessing/README.md generated vendored Normal file
View File

@@ -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)&ensp;&middot;&ensp;[Sandbox](https://stackblitz.com/edit/postprocessing-v6)&ensp;&middot;&ensp;[Documentation](https://pmndrs.github.io/postprocessing/public/docs)&ensp;&middot;&ensp;[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).

16630
app/node_modules/postprocessing/build/index.cjs generated vendored Normal file

File diff suppressed because one or more lines are too long

16713
app/node_modules/postprocessing/build/index.js generated vendored Normal file

File diff suppressed because one or more lines are too long

16640
app/node_modules/postprocessing/build/postprocessing.js generated vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

9335
app/node_modules/postprocessing/build/types/index.d.cts generated vendored Normal file

File diff suppressed because it is too large Load Diff

9335
app/node_modules/postprocessing/build/types/index.d.ts generated vendored Normal file

File diff suppressed because it is too large Load Diff

132
app/node_modules/postprocessing/package.json generated vendored Normal file
View File

@@ -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"
}
}

22
app/node_modules/three-good-godrays/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,22 @@
Copyright © 2022 Casey Primozic
Adapted from original code (https://github.com/N8python/goodGodRays)
by https://github.com/n8python
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.

113
app/node_modules/three-good-godrays/README.md generated vendored Normal file
View File

@@ -0,0 +1,113 @@
# `three-good-godrays`
[![CI](https://github.com/ameobea/three-good-godrays/actions/workflows/cd.yml/badge.svg)](https://github.com/ameobea/three-good-godrays/actions/workflows/ci.yml)
[![Version](https://badgen.net/npm/v/three-good-godrays?color=green)](https://www.npmjs.com/package/three-good-godrays)
Good godrays effect for three.js using the [pmndrs `postprocessing` library](https://github.com/pmndrs/postprocessing)
Adapted from [original implementation](https://github.com/n8python/goodGodRays) by [@n8python](https://github.com/n8python)
**Demo**: <https://three-good-godrays.ameo.design>
![A screenshot showing the three-good-godrays effect in action within the sponza demo scene. A white sphere in the middle of a terrace with pillars has white godrays emanating from it along with prominent shadows.](https://ameo.link/u/al8.jpg)
## Install
`npm install three-good-godrays`
Or import from unpkg as a module:
```ts
import { GodraysPass } from 'https://unpkg.com/three-good-godrays@0.7.1/build/three-good-godrays.esm.js';
```
## Supported Three.JS Version
This library was tested to work with Three.JS versions `>= 0.125.0 <= 0.167.0`. Although it might work with versions outside that range, support is not guaranteed.
## Usage
```ts
import { EffectComposer, RenderPass } from 'postprocessing';
import * as THREE from 'three';
import { GodraysPass } from 'three-good-godrays';
const { scene, camera, renderer } = initYourScene();
// shadowmaps are needed for this effect
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.autoUpdate = true;
// Make sure to set applicable objects in your scene to cast + receive shadows
// so that this effect will work
scene.traverse(obj => {
if (obj instanceof THREE.Mesh) {
obj.castShadow = true;
obj.receiveShadow = true;
}
});
// godrays can be cast from either `PointLight`s or `DirectionalLight`s
const lightPos = new THREE.Vector3(0, 20, 0);
const pointLight = new THREE.PointLight(0xffffff, 1, 10000);
pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 1024;
pointLight.shadow.mapSize.height = 1024;
pointLight.shadow.autoUpdate = true;
pointLight.shadow.camera.near = 0.1;
pointLight.shadow.camera.far = 1000;
pointLight.shadow.camera.updateProjectionMatrix();
pointLight.position.copy(lightPos);
scene.add(pointLight);
// set up rendering pipeline and add godrays pass at the end
const composer = new EffectComposer(renderer, { frameBufferType: THREE.HalfFloatType });
const renderPass = new RenderPass(scene, camera);
renderPass.renderToScreen = false;
composer.addPass(renderPass);
// Default values are shown. You can supply a sparse object or `undefined`.
const params = {
density: 1 / 128,
maxDensity: 0.5,
edgeStrength: 2,
edgeRadius: 2,
distanceAttenuation: 2,
color: new THREE.Color(0xffffff),
raymarchSteps: 60,
blur: true,
gammaCorrection: true,
};
const godraysPass = new GodraysPass(pointLight, camera, params);
// If this is the last pass in your pipeline, set `renderToScreen` to `true`
godraysPass.renderToScreen = true;
composer.addPass(godraysPass);
function animate() {
requestAnimationFrame(animate);
composer.render();
}
requestAnimationFrame(animate);
```
### Gamma Correction
Gamma correction is enabled by this effect by default, matching expectations of sRGB buffers from `postprocessing`. However, you can disable this by setting `gammaCorrection: false` in the configuration object for the pass.
This may be necessary if you use other effect passes after `GodraysPass` that perform their own output encoding. If you see artifacts similar to these:
![Screenshot of artifacts caused by double encoding in a Three.Js pmndrs postprocessing pipeline. There is a grainy pattern of colorful pixels appearing over an otherwise blank black background.](https://i.ameo.link/bto.png)
Try setting `gammaCorrection: false` on the `GodraysPass` or setting `encodeOutput = false` on any `EffectPass` that is added after the `GodraysPass`.
## Develop + Run Demos Locally
- Clone repo
- `npm install`
- `npm run prepublishOnly` to run initial builds
- `npm install -g serve`
- Run `node esbuild.mjs` whenever files are chnaged to re-build
- Run `serve public/demo -p 5001` and visit http://localhost:5001 in your browser

View File

@@ -0,0 +1,16 @@
import { type Disposable, Pass, type Resizable } from 'postprocessing';
import * as THREE from 'three';
import type { GodraysBlurParams } from './index';
export declare const GODRAYS_BLUR_RESOLUTION_SCALE = 1;
declare class BilateralFilterMaterial extends THREE.ShaderMaterial {
constructor(input: THREE.Texture);
}
export declare class BilateralFilterPass extends Pass implements Resizable, Disposable {
material: BilateralFilterMaterial;
constructor(input: THREE.Texture);
setSize(width: number, height: number): void;
render(renderer: THREE.WebGLRenderer, _inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget, _deltaTime?: number | undefined, _stencilTest?: boolean | undefined): void;
updateUniforms(params: GodraysBlurParams): void;
dispose(): void;
}
export {};

View File

@@ -0,0 +1,28 @@
import { Pass, type Resizable } from 'postprocessing';
import * as THREE from 'three';
import type { PerspectiveCamera } from 'three';
import type { GodraysPassParams } from './index';
interface GodraysCompositorMaterialProps {
godrays: THREE.Texture;
edgeStrength: number;
edgeRadius: number;
color: THREE.Color;
camera: THREE.PerspectiveCamera;
gammaCorrection: boolean;
}
export declare class GodraysCompositorMaterial extends THREE.ShaderMaterial implements Resizable {
constructor({ godrays, edgeStrength, edgeRadius, color, camera, gammaCorrection, }: GodraysCompositorMaterialProps);
updateUniforms(edgeStrength: number, edgeRadius: number, color: THREE.Color, gammaCorrection: boolean, near: number, far: number): void;
setSize(width: number, height: number): void;
}
export declare class GodraysCompositorPass extends Pass {
sceneCamera: PerspectiveCamera;
private depthCopyRenderTexture;
private depthTextureCopyPass;
constructor(props: GodraysCompositorMaterialProps);
updateUniforms(params: GodraysPassParams): void;
render(renderer: THREE.WebGLRenderer, inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget | null, _deltaTime?: number | undefined, _stencilTest?: boolean | undefined): void;
setDepthTexture(depthTexture: THREE.Texture, depthPacking?: THREE.DepthPackingStrategies | undefined): void;
setSize(width: number, height: number): void;
}
export {};

View File

@@ -0,0 +1,21 @@
import { Pass, type Resizable } from 'postprocessing';
import * as THREE from 'three';
import type { GodraysPassParams } from './index';
export declare const GODRAYS_RESOLUTION_SCALE: number;
export interface GodraysIllumPassProps {
light: THREE.PointLight | THREE.DirectionalLight;
camera: THREE.PerspectiveCamera;
}
export declare class GodraysIllumPass extends Pass implements Resizable {
private material;
private shadowMapSet;
private props;
private lastParams;
private lightWorldPos;
constructor(props: GodraysIllumPassProps, params: GodraysPassParams);
setSize(width: number, height: number): void;
render(renderer: THREE.WebGLRenderer, _inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget, _deltaTime?: number | undefined, _stencilTest?: boolean | undefined): void;
setDepthTexture(depthTexture: THREE.Texture, depthPacking?: THREE.DepthPackingStrategies | undefined): void;
private updateLightParams;
updateUniforms({ light, camera }: GodraysIllumPassProps, params: GodraysPassParams): void;
}

View File

@@ -0,0 +1,117 @@
import { type Disposable, KernelSize, Pass } from 'postprocessing';
import * as THREE from 'three';
export interface GodraysBlurParams {
/**
* The sigma factor used by the bilateral filter for the blur. Higher values result in more blur, but
* can cause artifacts.
*
* Default: 0.1
*/
variance: number;
/**
* The kernel size for the bilateral filter. Higher values blur more neighboring pixels and can smooth over higher amounts of noise,
* but require exponentially more texture samples and thus can be slower.
*
* Default: `KernelSize.SMALL`
*/
kernelSize: KernelSize;
}
export interface GodraysPassParams {
/**
* The rate of accumulation for the godrays. Higher values roughly equate to more humid air/denser fog.
*
* Default: 1 / 128
*/
density: number;
/**
* The maximum density of the godrays. Limits the maximum brightness of the godrays.
*
* Default: 0.5
*/
maxDensity: number;
/**
* Default: 2
*/
edgeStrength: number;
/**
* Edge radius used for depth-aware upsampling of the godrays. Higher values can yield better edge quality at the cost of performance, as
* each level higher of this requires two additional texture samples.
*
* Default: 2
*/
edgeRadius: number;
/**
* Higher values decrease the accumulation of godrays the further away they are from the light source.
*
* Default: 2
*/
distanceAttenuation: number;
/**
* The color of the godrays.
*
* Default: `new THREE.Color(0xffffff)`
*/
color: THREE.Color;
/**
* The number of raymarching steps to take per pixel. Higher values increase the quality of the godrays at the cost of performance.
*
* Default: 60
*/
raymarchSteps: number;
/**
* Whether or not to apply a bilateral blur to the godrays. This can be used to reduce artifacts that can occur when using a low number of raymarching steps.
*
* It costs a bit of extra performance, but can allow for a lower number of raymarching steps to be used with similar quality.
*
* Default: false
*/
blur: boolean | Partial<GodraysBlurParams>;
gammaCorrection: boolean;
}
export declare class GodraysPass extends Pass implements Disposable {
private props;
private depthTexture;
private depthPacking;
private lastParams;
private godraysRenderTarget;
private illumPass;
private enableBlurPass;
private blurPass;
private blurRenderTarget;
private compositorPass;
/**
* Constructs a new GodraysPass. Casts godrays from a point light source. Add to your scene's composer like this:
*
* ```ts
* import { EffectComposer, RenderPass } from 'postprocessing';
* import { GodraysPass } from 'three-good-godrays';
*
* const composer = new EffectComposer(renderer, { frameBufferType: THREE.HalfFloatType });
* const renderPass = new RenderPass(scene, camera);
* renderPass.renderToScreen = false;
* composer.addPass(renderPass);
*
* const godraysPass = new GodraysPass(pointLight, camera);
* godraysPass.renderToScreen = true;
* composer.addPass(godraysPass);
*
* function animate() {
* composer.render(scene, camera);
* }
* ```
*
* @param light The light source to use for the godrays.
* @param camera The camera used to render the scene.
* @param partialParams The parameters to use for the godrays effect. Will use default values for any parameters not specified.
*/
constructor(light: THREE.PointLight | THREE.DirectionalLight, camera: THREE.PerspectiveCamera, partialParams?: Partial<GodraysPassParams>);
/**
* Updates the parameters used for the godrays effect. Will use default values for any parameters not specified.
*/
setParams(partialParams: Partial<GodraysPassParams>): void;
private maybeInitBlur;
render(renderer: THREE.WebGLRenderer, inputBuffer: THREE.WebGLRenderTarget, outputBuffer: THREE.WebGLRenderTarget, _deltaTime?: number | undefined, _stencilTest?: boolean | undefined): void;
setDepthTexture(depthTexture: THREE.Texture, depthPacking?: THREE.DepthPackingStrategies | undefined): void;
setSize(width: number, height: number): void;
dispose(): void;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

76
app/node_modules/three-good-godrays/package.json generated vendored Normal file
View File

@@ -0,0 +1,76 @@
{
"name": "three-good-godrays",
"version": "0.7.1",
"description": "Screen-space raymarched godrays for three.js using the pmndrs postprocessing library",
"main": "build/three-good-godrays.js",
"module": "build/three-good-godrays.esm.js",
"exports": {
".": {
"import": "./build/three-good-godrays.esm.js",
"require": "./build/three-good-godrays.js"
},
"./module": "./build/three-good-godrays.mjs"
},
"types": "build/three-good-godrays.d.ts",
"sideEffects": false,
"keywords": [
"three",
"threejs",
"godrays",
"postprocessing",
"raymarching"
],
"contributors": [
{
"name": "n8programs",
"url": "https://github.com/n8python"
},
{
"name": "Casey Primozic",
"url": "https://github.com/ameobea"
}
],
"repository": {
"type": "git",
"url": "https://github.com/ameobea/three-good-godrays.git"
},
"bugs": {
"url": "https://github.com/ameobea/three-good-godrays/issues"
},
"files": [
"build",
"types"
],
"engines": {
"node": ">= 0.13.2"
},
"scripts": {
"clean": "mkdir -p build && rimraf build types",
"copy-files": "cp -r demo/static/* public/demo",
"build:js": "node esbuild.mjs",
"build:js:min": "node esbuild.mjs -m",
"build:types": "tsc --declaration --emitDeclarationOnly && rm build/bluenoise.d.ts && mv build/index.d.ts build/three-good-godrays.d.ts",
"prepublishOnly": "run-s clean build:types build:js:min copy-files",
"prettier": "prettier --write \"src/**/*.{ts,js,tsx}\" && prettier --write \"demo/**/*.{ts,js,tsx}\""
},
"peerDependencies": {
"postprocessing": "^6.33.4",
"three": ">= 0.125.0 <= 0.167.0"
},
"devDependencies": {
"@ianvs/prettier-plugin-sort-imports": "^4.1.1",
"@types/dat.gui": "^0.7.12",
"@types/three": "^0.167.0",
"dat.gui": "^0.7.9",
"esbuild": "^0.19.11",
"esbuild-plugin-glsl": "1.x.x",
"eslint": "8.x.x",
"npm-run-all": "^4.1.5",
"postprocessing": "^6.34.1",
"prettier": "^3.2.4",
"rimraf": "^5.0.5",
"three": "^0.167.0",
"three-demo": "^5.1.3",
"typescript": "^5.3.3"
}
}

25
app/package-lock.json generated
View File

@@ -10,7 +10,9 @@
"dependencies": {
"@types/three": "^0.178.1",
"cannon-es": "^0.20.0",
"three": "^0.178.0"
"postprocessing": "^6.37.6",
"three": "^0.178.0",
"three-good-godrays": "^0.7.1"
},
"devDependencies": {
"typescript": "~5.8.3",
@@ -949,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",
@@ -1005,6 +1016,18 @@
"integrity": "sha512-ybFIB0+x8mz0wnZgSGy2MO/WCO6xZhQSZnmfytSPyNpM0sBafGRVhdaj+erYh5U+RhQOAg/eXqw5uVDiM2BjhQ==",
"license": "MIT"
},
"node_modules/three-good-godrays": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/three-good-godrays/-/three-good-godrays-0.7.1.tgz",
"integrity": "sha512-VeaJlcWozjKPm2FgiHXPDTVmGxYr89arRYJlyLmJvLr+C+2OVm1RPsHcdXyRU4IPT33EQUfSuFBtL/z2lNqXAw==",
"engines": {
"node": ">= 0.13.2"
},
"peerDependencies": {
"postprocessing": "^6.33.4",
"three": ">= 0.125.0 <= 0.167.0"
}
},
"node_modules/tinyglobby": {
"version": "0.2.14",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",

View File

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

Binary file not shown.

Binary file not shown.

View File

@@ -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()
@@ -52,10 +55,22 @@ class AAFHomepage {
this.renderer
)
// Setup home button functionality
this.setupHomeButton()
// Initialize the scene
this.init()
}
private setupHomeButton(): void {
const homeButton = document.getElementById('home-button')
if (homeButton) {
homeButton.addEventListener('click', () => {
window.location.href = 'https://home.aaf.systems/'
})
}
}
private init(): void {
// Setup renderer
this.renderer.setSize(window.innerWidth, window.innerHeight)
@@ -73,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()
@@ -105,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)
}
}
}

121
app/src/motion-blur.ts Normal file
View File

@@ -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()
}
}

122
app/src/post-processing.ts Normal file
View File

@@ -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()
}
}

View File

@@ -38,10 +38,71 @@ html, body {
cursor: crosshair;
}
.home-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
/* Frosted glass effect */
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
/* Typography */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
font-size: 1rem;
font-weight: 1000;
color: rgb(255, 255, 255);
letter-spacing: 1px;
/* Layout */
padding: 1rem 2rem;
cursor: pointer;
user-select: none;
/* Transitions */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Remove default button styles */
border: none;
outline: none;
}
.home-button:hover {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) translateY(-1px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.home-button:active {
transform: translate(-50%, -50%) translateY(0);
background: rgba(255, 255, 255, 0.2);
}
.home-button span {
display: block;
position: relative;
color: rgba(255, 255, 255, 0.15);
filter: blur(0.3px);
-webkit-filter: blur(0.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;
/* Keep centered positioning on mobile */
}
}

23
app/vite.config.ts Normal file
View File

@@ -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,
},
})

View File

@@ -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"

10
docker-compose.yml Normal file
View File

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

55
load-and-run-docker.sh Executable file
View File

@@ -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

46
package-docker.sh Executable file
View File

@@ -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

36
run-docker.sh Executable file
View File

@@ -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

21
stop-docker.sh Executable file
View File

@@ -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!"