Compare commits
2 Commits
1508b3cb29
...
daa92c4c41
| Author | SHA1 | Date | |
|---|---|---|---|
| daa92c4c41 | |||
| 8cab3ce92d |
BIN
app/dist/.DS_Store
vendored
Normal file
BIN
app/dist/.DS_Store
vendored
Normal file
Binary file not shown.
1
app/dist/assets/index-B5Qt9EMX.js
vendored
1
app/dist/assets/index-B5Qt9EMX.js
vendored
@@ -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
1
app/dist/assets/index-BPBuaX9T.css
vendored
Normal 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
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
6
app/dist/index.html
vendored
@@ -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
BIN
app/dist/models/main_model.glb
vendored
Normal file
Binary file not shown.
9
app/node_modules/.package-lock.json
generated
vendored
9
app/node_modules/.package-lock.json
generated
vendored
@@ -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",
|
||||
|
||||
18
app/node_modules/.vite/deps/_metadata.json
generated
vendored
18
app/node_modules/.vite/deps/_metadata.json
generated
vendored
@@ -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
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
7
app/node_modules/.vite/deps/postprocessing.js.map
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
19
app/node_modules/postprocessing/LICENSE.md
generated
vendored
Normal file
19
app/node_modules/postprocessing/LICENSE.md
generated
vendored
Normal 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
122
app/node_modules/postprocessing/README.md
generated
vendored
Normal file
@@ -0,0 +1,122 @@
|
||||
# Post Processing
|
||||
|
||||
[](https://github.com/pmndrs/postprocessing/actions/workflows/ci.yml)
|
||||
[](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).
|
||||
16630
app/node_modules/postprocessing/build/index.cjs
generated
vendored
Normal file
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
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
16640
app/node_modules/postprocessing/build/postprocessing.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
879
app/node_modules/postprocessing/build/postprocessing.min.js
generated
vendored
Normal file
879
app/node_modules/postprocessing/build/postprocessing.min.js
generated
vendored
Normal file
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
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
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
132
app/node_modules/postprocessing/package.json
generated
vendored
Normal 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"
|
||||
}
|
||||
}
|
||||
10
app/package-lock.json
generated
10
app/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
121
app/src/motion-blur.ts
Normal file
121
app/src/motion-blur.ts
Normal 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
122
app/src/post-processing.ts
Normal 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()
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user