├── .github ├── CODEOWNERS ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug.report.yml │ ├── config.yml │ ├── feature-request-🪐.md │ └── 🐛-bug-report.md └── workflows │ ├── lint-pr.yml │ ├── lint.yml │ └── pkg.pr.new.yml ├── .gitignore ├── .release-it.json ├── .vscode └── extensions.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── docs ├── .vitepress │ ├── config.ts │ └── theme │ │ ├── TresLayout.vue │ │ ├── assets │ │ ├── feather.glb │ │ ├── second-row.svg │ │ ├── third-row.svg │ │ └── triangle.svg │ │ ├── components │ │ ├── BlenderCube.vue │ │ ├── DocsDemo.vue │ │ ├── DocsDemoGUI.vue │ │ ├── Ducky.vue │ │ ├── LoveVueThreeJS.vue │ │ ├── pmdrs │ │ │ ├── ASCIIDemo.vue │ │ │ ├── BarrelBlurDemo.vue │ │ │ ├── BloomDemo.vue │ │ │ ├── BrightnessContrastDemo.vue │ │ │ ├── ChromaticAberrationDemo.vue │ │ │ ├── ColorAverageDemo.vue │ │ │ ├── ColorDepthDemo.vue │ │ │ ├── DepthOfFieldDemo.vue │ │ │ ├── DotScreenDemo.vue │ │ │ ├── FXAADemo.vue │ │ │ ├── FishEyeDemo.vue │ │ │ ├── GlitchDemo.vue │ │ │ ├── GodRaysDemo.vue │ │ │ ├── GridDemo.vue │ │ │ ├── HueSaturationDemo.vue │ │ │ ├── KuwaharaDemo.vue │ │ │ ├── LensDistortionDemo.vue │ │ │ ├── LinocutDemo.vue │ │ │ ├── NoiseDemo.vue │ │ │ ├── OutlineDemo.vue │ │ │ ├── PixelationDemo.vue │ │ │ ├── SMAADemo.vue │ │ │ ├── ScanlineDemo.vue │ │ │ ├── SepiaDemo.vue │ │ │ ├── ShockWaveDemo.vue │ │ │ ├── TextureDemo.vue │ │ │ ├── TiltShiftDemo.vue │ │ │ ├── ToneMappingDemo.vue │ │ │ └── VignetteDemo.vue │ │ └── three │ │ │ ├── GlitchThreeDemo.vue │ │ │ ├── HalftoneThreeDemo.vue │ │ │ ├── PixelationThreeDemo.vue │ │ │ ├── SMAAThreeDemo.vue │ │ │ └── UnrealBloomThreeDemo.vue │ │ ├── composables │ │ └── useRouteDisposal.ts │ │ ├── index.ts │ │ └── style.css ├── components.d.ts ├── guide │ ├── advanced │ │ └── you-might-not-need-post-processing.md │ ├── index.md │ ├── pmndrs │ │ ├── ascii.md │ │ ├── barrel-blur.md │ │ ├── bloom.md │ │ ├── brightness-contrast.md │ │ ├── chromatic-aberration.md │ │ ├── color-average.md │ │ ├── color-depth.md │ │ ├── depth-of-field.md │ │ ├── dot-screen.md │ │ ├── fish-eye.md │ │ ├── fxaa.md │ │ ├── glitch.md │ │ ├── god-rays.md │ │ ├── grid.md │ │ ├── hue-saturation.md │ │ ├── kuwahara.md │ │ ├── lens-distortion.md │ │ ├── linocut.md │ │ ├── noise.md │ │ ├── outline.md │ │ ├── pixelation.md │ │ ├── scanline.md │ │ ├── sepia.md │ │ ├── shock-wave.md │ │ ├── smaa.md │ │ ├── texture.md │ │ ├── tilt-shift.md │ │ ├── tone-mapping.md │ │ └── vignette.md │ └── three │ │ ├── glitch.md │ │ ├── halftone.md │ │ ├── output.md │ │ ├── pixelation.md │ │ ├── smaa.md │ │ └── unreal-bloom.md ├── index.md ├── package.json ├── public │ ├── banner.png │ ├── favicon.svg │ ├── feather.glb │ ├── lens-distortion │ │ ├── room-map.png │ │ └── room-normal.png │ ├── logo.svg │ ├── og-banner.png │ └── tres-post-processing-banner.png ├── tsconfig.json └── vite.config.ts ├── eslint.config.js ├── netlify.toml ├── package.json ├── playground ├── .eslintrc-auto-import.json ├── .eslintrc.json ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── auto-imports.d.ts ├── components.d.ts ├── index.html ├── package.json ├── public │ ├── favicon.svg │ ├── logo.svg │ ├── nuxt-stones │ │ └── package.json │ └── vite.svg ├── src │ ├── App.vue │ ├── assets │ │ └── vue.svg │ ├── components │ │ ├── BasicScene.vue │ │ ├── BlenderCube.vue │ │ ├── Ducky.vue │ │ ├── EffectListItem.vue │ │ ├── GraphPane.vue │ │ ├── OutlineDemo.vue │ │ └── TheExperience.vue │ ├── composables │ │ └── state.ts │ ├── main.ts │ ├── pages │ │ ├── index.vue │ │ ├── postprocessing │ │ │ ├── ascii.vue │ │ │ ├── barrel-blur.vue │ │ │ ├── bloom.vue │ │ │ ├── brightness-contrast.vue │ │ │ ├── chromatic-aberration.vue │ │ │ ├── color-average.vue │ │ │ ├── color-depth.vue │ │ │ ├── depth-of-field.vue │ │ │ ├── dot-screen.vue │ │ │ ├── fish-eye.vue │ │ │ ├── fxaa.vue │ │ │ ├── glitch.vue │ │ │ ├── god-rays.vue │ │ │ ├── grid.vue │ │ │ ├── hue-saturation.vue │ │ │ ├── kuwahara.vue │ │ │ ├── lens-distortion.vue │ │ │ ├── linocut.vue │ │ │ ├── noise.vue │ │ │ ├── on-demand.vue │ │ │ ├── outline.vue │ │ │ ├── pixelation.vue │ │ │ ├── scanline.vue │ │ │ ├── sepia.vue │ │ │ ├── shock-wave.vue │ │ │ ├── smaa.vue │ │ │ ├── texture.vue │ │ │ ├── tilt-shift.vue │ │ │ ├── tone-mapping.vue │ │ │ └── vignette.vue │ │ └── three │ │ │ ├── glitch.vue │ │ │ ├── halftone.vue │ │ │ ├── pixelation.vue │ │ │ ├── smaa.vue │ │ │ └── unreal-bloom.vue │ ├── router.ts │ ├── style.css │ ├── util │ │ └── string.ts │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── public ├── blender-cube.glb ├── repo-banner.png └── vite.svg ├── renovate.json ├── src ├── assets │ └── vue.svg ├── core │ ├── pmndrs │ │ ├── ASCIIPmndrs.vue │ │ ├── BarrelBlurPmndrs.vue │ │ ├── BloomPmndrs.vue │ │ ├── BrightnessContrastPmndrs.vue │ │ ├── ChromaticAberrationPmndrs.vue │ │ ├── ColorAveragePmndrs.vue │ │ ├── ColorDepthPmndrs.vue │ │ ├── DepthOfFieldPmndrs.vue │ │ ├── DepthPickingPassPmndrs.vue │ │ ├── DotScreenPmndrs.vue │ │ ├── EffectComposerPmndrs.vue │ │ ├── FXAAPmndrs.vue │ │ ├── FishEyePmndrs.vue │ │ ├── GlitchPmndrs.vue │ │ ├── GodRaysPmndrs.vue │ │ ├── GridPmndrs.vue │ │ ├── HueSaturationPmndrs.vue │ │ ├── KuwaharaPmndrs.vue │ │ ├── LensDistortionPmndrs.vue │ │ ├── LinocutPmndrs.vue │ │ ├── NoisePmndrs.vue │ │ ├── OutlinePmndrs.vue │ │ ├── PixelationPmndrs.vue │ │ ├── SMAAPmndrs.vue │ │ ├── ScanlinePmndrs.vue │ │ ├── SepiaPmndrs.vue │ │ ├── ShockWavePmndrs.vue │ │ ├── TexturePmndrs.vue │ │ ├── TiltShiftPmndrs.vue │ │ ├── ToneMappingPmndrs.vue │ │ ├── VignettePmndrs.vue │ │ ├── composables │ │ │ └── useEffectPmndrs.ts │ │ ├── custom │ │ │ ├── barrel-blur │ │ │ │ └── index.ts │ │ │ ├── fish-eye │ │ │ │ └── index.ts │ │ │ ├── kuwahara │ │ │ │ └── index.ts │ │ │ └── linocut │ │ │ │ └── index.ts │ │ └── index.ts │ └── three │ │ ├── EffectComposer.vue │ │ ├── Glitch.vue │ │ ├── Halftone.vue │ │ ├── Output.vue │ │ ├── Pixelation.vue │ │ ├── SMAA.vue │ │ ├── UnrealBloom.vue │ │ ├── composables │ │ └── useEffect.ts │ │ └── index.ts ├── index.ts ├── util │ ├── object.ts │ └── prop.ts └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @alvarosabu -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [alvarosabu] 2 | ko_fi: alvarosaburido 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.report.yml: -------------------------------------------------------------------------------- 1 | name: "\U0001F41E Bug report" 2 | description: Report an issue with TresJS ▲ ■ ● or any of it's packages 3 | labels: [pending triage] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thanks for taking the time to fill out this bug report! 9 | - type: textarea 10 | id: bug-description 11 | attributes: 12 | label: Describe the bug 13 | description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks! 14 | placeholder: I am doing ... What I expect is ... What actually happening is ... 15 | validations: 16 | required: true -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request-🪐.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Feature request \U0001FA90" 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of the problem. Please make the reason and use-cases as detailed as possible. If you intend to submit a PR for this issue, tell us in the description. Thanks! 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Suggested solution** 17 | In module [xy] we could provide following implementation.... 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/🐛-bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F41B Bug report" 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: pending-triage 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks! 12 | 13 | I am doing ... What I expect is ... What actually happening is 14 | 15 | **Reproduction** 16 | Please provide a link using this template on [Stackblitz](https://stackblitz.com/edit/tresjs-basic?file=README.md) 17 | 18 | **Steps** 19 | Steps to reproduce the behavior: 20 | 1. Go to '...' 21 | 2. Click on '....' 22 | 3. Scroll down to '....' 23 | 4. See error 24 | 25 | **Expected behavior** 26 | A clear and concise description of what you expected to happen. 27 | 28 | **Screenshots** 29 | If applicable, add screenshots to help explain your problem. 30 | 31 | **System Info** 32 | Output of `npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers` 33 | 34 | 35 | **Additional context** 36 | Add any other context about the problem here. 37 | -------------------------------------------------------------------------------- /.github/workflows/lint-pr.yml: -------------------------------------------------------------------------------- 1 | name: 'Lint PR' 2 | 3 | on: 4 | pull_request_target: 5 | types: 6 | - opened 7 | - edited 8 | - synchronize 9 | 10 | jobs: 11 | main: 12 | name: Validate PR title 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: amannn/action-semantic-pull-request@v5 16 | env: 17 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 18 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Run linters 2 | on: [push] 3 | 4 | env: 5 | PNPM_CACHE_FOLDER: .pnpm-store 6 | HUSKY: 0 # Bypass husky commit hook for CI 7 | 8 | jobs: 9 | lint: 10 | name: Lint 11 | runs-on: ubuntu-24.04 12 | strategy: 13 | matrix: 14 | node-version: [20] 15 | steps: 16 | - name: Checkout 17 | uses: actions/checkout@v4 18 | - name: Setup Pnpm 19 | uses: pnpm/action-setup@v4 20 | - name: Use Node.js ${{ matrix.node-version }} 21 | uses: actions/setup-node@v4 22 | with: 23 | node-version: ${{ matrix.node-version }} 24 | cache: 'pnpm' 25 | - name: Install dependencies 26 | run: pnpm install 27 | - name: Run Lint 28 | run: pnpm run lint 29 | -------------------------------------------------------------------------------- /.github/workflows/pkg.pr.new.yml: -------------------------------------------------------------------------------- 1 | name: Publish Any Commit 2 | on: 3 | push: 4 | branches: 5 | - '**' 6 | tags: 7 | - '!**' 8 | 9 | env: 10 | PNPM_CACHE_FOLDER: .pnpm-store 11 | 12 | permissions: {} 13 | 14 | concurrency: 15 | group: ${{ github.workflow }}-${{ github.event.number }} 16 | cancel-in-progress: true 17 | 18 | jobs: 19 | build: 20 | runs-on: ubuntu-latest 21 | strategy: 22 | matrix: 23 | node-version: [20] 24 | steps: 25 | - name: Checkout code 26 | uses: actions/checkout@v4 27 | 28 | - run: npm i -g --force corepack && corepack enable 29 | - uses: actions/setup-node@v4 30 | with: 31 | node-version: ${{ matrix.node-version }} 32 | cache: pnpm 33 | - name: Install dependencies 34 | run: pnpm install 35 | - name: Build 36 | run: pnpm build 37 | - run: pnpx pkg-pr-new publish --compact --pnpm 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | docs/.vitepress/dist/ 26 | docs/.vitepress/cache/ 27 | stats.html -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "git": { 3 | "commitMessage": "chore: release v${version}" 4 | }, 5 | "github": { 6 | "release": true, 7 | "releaseName": "v${version}" 8 | }, 9 | "plugins": { 10 | "@release-it/conventional-changelog": { 11 | "preset": "conventionalcommits", 12 | "infile": "CHANGELOG.md" 13 | } 14 | }, 15 | "hooks": { 16 | "after:bump": "pnpm run build", 17 | "after:git:release": "echo After git push, before github release", 18 | "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}." 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022-present, (alvarosabu) Alvaro Saburido and Tres contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![repository-banner.png](/public/repo-banner.png) 2 | 3 |

4 | npm package 5 | npm downloads 6 | discord chat 7 |

8 |
9 | 10 | # Post-Processing 11 | 12 | > Collection of useful helpers and fully functional, ready-made post-processing effects for Tres 13 | 14 | - 💡 Build your effects with Vue components only. 15 | - ⚡️ Powered by Vite 16 | - 🦾 Fully Typed 17 | 18 | ## Installation 19 | 20 | ```bash 21 | pnpm i @tresjs/post-processing 22 | ``` 23 | 24 | ## Docs 25 | 26 | Checkout the [docs](https://post-processing.tresjs.org/) 27 | 28 | ## Demos 29 | 30 | - [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs) 31 | 32 | ## Contributing 33 | 34 | We are open to contributions, please read the [contributing guide](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md) to get started. 35 | 36 | ### Build 37 | 38 | To build the package run: 39 | 40 | ```bash 41 | pnpm run build 42 | ``` 43 | 44 | ### Playground 45 | 46 | To run the playground run, its a great way to test the components and helpers locally: 47 | 48 | First install dependencies 49 | 50 | ``` 51 | pnpm i 52 | ``` 53 | 54 | And then to run the development server on http://localhost:5173 55 | 56 | ```bash 57 | pnpm run playground 58 | ``` 59 | 60 | ### Docs 61 | 62 | To run de docs in dev mode 63 | 64 | ```bash 65 | pnpm run docs:dev 66 | ``` 67 | 68 | To build them 69 | 70 | ```bash 71 | pnpm run docs:build 72 | ``` 73 | 74 | ## License 75 | 76 | [MIT](/LICENSE) 77 | 78 | ## Sponsors 79 | 80 | Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️ 81 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/TresLayout.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 15 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/assets/feather.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/docs/.vitepress/theme/assets/feather.glb -------------------------------------------------------------------------------- /docs/.vitepress/theme/assets/triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/BlenderCube.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/DocsDemo.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 15 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/DocsDemoGUI.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/Ducky.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/LoveVueThreeJS.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 63 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 68 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/BloomDemo.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 57 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/BrightnessContrastDemo.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 64 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 70 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/DotScreenDemo.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 68 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/GlitchDemo.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 53 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/GridDemo.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 64 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/HueSaturationDemo.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 63 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/LensDistortionDemo.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 74 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/LinocutDemo.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 77 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/NoiseDemo.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 39 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/OutlineDemo.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 76 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/PixelationDemo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 55 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/ScanlineDemo.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 74 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/SepiaDemo.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 67 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/ToneMappingDemo.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 78 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 39 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/three/GlitchThreeDemo.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 53 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/three/HalftoneThreeDemo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 55 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/three/PixelationThreeDemo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 55 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/three/SMAAThreeDemo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 54 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/three/UnrealBloomThreeDemo.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 53 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/composables/useRouteDisposal.ts: -------------------------------------------------------------------------------- 1 | import type { EffectComposerPmdrs } from '@tresjs/post-processing' 2 | import { useRouter } from 'vitepress' 3 | import { ref, watch } from 'vue' 4 | 5 | export function useRouteDisposal() { 6 | const router = useRouter() 7 | 8 | const effectComposer = ref | null>(null) 9 | 10 | watch(() => router.route.data.relativePath, () => { 11 | effectComposer.value?.composer.dispose() 12 | }) 13 | 14 | return { 15 | effectComposer, 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | // https://vitepress.dev/guide/custom-theme 2 | import Theme from 'vitepress/theme' 3 | import TresLayout from './TresLayout.vue' 4 | import './style.css' 5 | 6 | import 'uno.css' 7 | 8 | export default { 9 | ...Theme, 10 | Layout: TresLayout, 11 | } 12 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --vp-home-hero-name-color: #ff7bac; 3 | --vp-c-brand: #ff7bac; 4 | --vp-c-brand-light: #f79abd; 5 | } 6 | 7 | /** 8 | * Component: Button 9 | * -------------------------------------------------------------------------- */ 10 | 11 | :root { 12 | --vp-button-brand-border: var(--vp-c-brand-light); 13 | --vp-button-brand-text: var(--vp-c-text-dark-1); 14 | --vp-button-brand-bg: var(--vp-c-brand); 15 | --vp-button-brand-border: var(--vp-c-brand); 16 | --vp-button-brand-hover-border: var(--vp-c-brand-light); 17 | --vp-button-brand-hover-text: var(--vp-c-text-dark-1); 18 | --vp-button-brand-hover-bg: var(--vp-c-brand-light); 19 | --vp-button-brand-active-border: var(--vp-c-brand-light); 20 | --vp-button-brand-active-text: var(--vp-c-text-dark-1); 21 | --vp-button-brand-active-bg: var(--vp-button-brand-bg); 22 | 23 | --vp-button-alt-border: var(--vp-c-gray-light-3); 24 | --vp-button-alt-text: var(--vp-c-text-light-1); 25 | --vp-button-alt-bg: var(--vp-c-gray-light-5); 26 | --vp-button-alt-hover-border: var(--vp-c-gray-light-3); 27 | --vp-button-alt-hover-text: var(--vp-c-text-light-1); 28 | --vp-button-alt-hover-bg: var(--vp-c-gray-light-4); 29 | --vp-button-alt-active-border: var(--vp-c-gray-light-3); 30 | --vp-button-alt-active-text: var(--vp-c-text-light-1); 31 | --vp-button-alt-active-bg: var(--vp-c-gray-light-3); 32 | 33 | --vp-button-sponsor-border: var(--vp-c-gray-light-3); 34 | --vp-button-sponsor-text: var(--vp-c-text-light-2); 35 | --vp-button-sponsor-bg: transparent; 36 | --vp-button-sponsor-hover-border: var(--vp-c-sponsor); 37 | --vp-button-sponsor-hover-text: var(--vp-c-sponsor); 38 | --vp-button-sponsor-hover-bg: transparent; 39 | --vp-button-sponsor-active-border: var(--vp-c-sponsor); 40 | --vp-button-sponsor-active-text: var(--vp-c-sponsor); 41 | --vp-button-sponsor-active-bg: transparent; 42 | } 43 | 44 | .VPSidebar .link.active span { 45 | font-weight: bold; 46 | } 47 | 48 | .vp-doc a { 49 | text-decoration: dashed; 50 | font-weight: bold; 51 | } 52 | 53 | .VPButton.medium.brand { 54 | color: var(--vp-button-alt-text); 55 | } 56 | 57 | .VPNavBarTitle a { 58 | font-size: 12px !important; 59 | } 60 | 61 | .VPNavBarTitle .logo { 62 | height: 16px !important; 63 | } 64 | 65 | img { 66 | border-radius: 8px; 67 | } 68 | -------------------------------------------------------------------------------- /docs/guide/advanced/you-might-not-need-post-processing.md: -------------------------------------------------------------------------------- 1 | # You might not need this module 2 | 3 | Please note that you can use [Tres.js's attach feature](https://docs.tresjs.org/advanced/attach.html#arrays) instead of this module. It enables you to utilize any effect provided by Three.js, even if there is no corresponding component in post-processing. 4 | 5 | We recommend using post-processing because the props of the effects are reactive. The attach feature does not offer prop reactivity. However, if you do not require that advantage, is is a valid option to achieve equal results. 6 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/brightness-contrast.md: -------------------------------------------------------------------------------- 1 | # Brightness & Contrast 2 | 3 | 4 | 5 | 6 | 7 |
8 | Demo code 9 | 10 | <<< @/.vitepress/theme/components/pmdrs/BrightnessContrastDemo.vue{0} 11 |
12 | 13 | The `BrightnessContrast` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BrightnessContrastEffect.js~BrightnessContrastEffect.html) package. 14 | It adjusts the brightness and contrast of your scene. 15 | 16 | ## Usage 17 | 18 | The `` component is easy to use and provides customizable options to suit different visual styles. 19 | 20 | ```vue{2,8-12,21-25} 21 | 34 | 35 | 48 | ``` 49 | 50 | ## Props 51 | 52 | | Prop | Description | Default | 53 | | ------------- | ------------------------------------------------------------- | --------------------------- | 54 | | blendFunction | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options. | `BlendFunction.SRC` | 55 | | brightness | The brightness factor, where 0 means no change.
Range: `[-1.0, 1.0]` | `0` | 56 | | contrast | The contrast factor, where 0 means no change.
Range: `[-1.0, 1.0]` | `0` | 57 | 58 | ## Further Reading 59 | For more details, see the [BrightnessContrastEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BrightnessContrastEffect.js~BrightnessContrastEffect.html) 60 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/color-average.md: -------------------------------------------------------------------------------- 1 | # Color Average 2 | 3 | 4 | 5 | 6 | 7 |
8 | Demo code 9 | 10 | <<< @/.vitepress/theme/components/pmdrs/ColorAverageDemo.vue{0} 11 |
12 | 13 | The `ColorAverage` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.html) package. It averages the colors of the scene, creating a unique visual effect. This effect can be used to achieve a variety of artistic styles. 14 | 15 | ## Usage 16 | 17 | The `` component is easy to use and provides customizable options to suit different visual styles. 18 | 19 | ```vue{4,11-13,22-26} 20 | 34 | 35 | 48 | ``` 49 | 50 | ## Props 51 | 52 | | Prop | Description | Default | 53 | | ----------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------- | 54 | | blendFunction | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options. | `BlendFunction.NORMAL` | 55 | | opacity | Sets the opacity of the color average effect. | `1` | 56 | 57 | ## Further Reading 58 | For more details, see the [ColorAverageEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.html) 59 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/color-depth.md: -------------------------------------------------------------------------------- 1 | # Color Depth 2 | 3 | 4 | 5 | 6 | 7 |
8 | Demo code 9 | 10 | <<< @/.vitepress/theme/components/pmdrs/ColorDepthDemo.vue{0} 11 |
12 | 13 | The `ColorDepthEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorDepthEffect.js~ColorDepthEffect.html) package. 14 | It renders a ColorDepth that can be scaled or adjusted to achieve a variety of visual effects. 15 | 16 | ## Usage 17 | 18 | The `` component is easy to use and provides customizable options to suit different visual styles. 19 | 20 | ```vue{2,8-12,21-25} 21 | 34 | 35 | 48 | ``` 49 | 50 | ## Props 51 | 52 | | Prop | Description | Default | 53 | | ------------- | ------------------------------------------------------------------- | --------------------------- | 54 | | blendFunction | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options. | `BlendFunction.NORMAL` | 55 | | bits | The color bit depth. The color bit depth represents the virtual color bits. Each channel uses a quarter of the total, except alpha. | `16` | 56 | | opacity | The opacity of the effect. | `1` | 57 | 58 | ## Further Reading 59 | For more details, see the [ColorDepthEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorDepthEffect.js~ColorDepthEffect.html) 60 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/dot-screen.md: -------------------------------------------------------------------------------- 1 | # Dot Screen 2 | 3 | 4 | 5 | 6 | 7 |
8 | Demo code 9 | 10 | <<< @/.vitepress/theme/components/pmdrs/DotScreenDemo.vue{0} 11 |
12 | 13 | The `DotScreen` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DotScreenEffect.js~DotScreenEffect.html) package. It allows you to create a dot screen effect, providing flexibility for artistic effects. 14 | 15 | ## Usage 16 | 17 | The `` component is straightforward to use and provides customizable options to fine-tune the dot screen effect. 18 | 19 | ```vue{3,11-14,23-27} 20 | 35 | 36 | 49 | ``` 50 | 51 | ## Props 52 | 53 | | Prop | Description | Default | 54 | | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | 55 | | **angle** | The angle of the dot pattern *(in radians)*. | `1.57` | 56 | | **scale** | The scale of the dot pattern. | `1.0` | 57 | | **blendFunction** | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options. | `BlendFunction.NORMAL` | 58 | 59 | ## Further Reading 60 | 61 | For more details, see the [DotScreenEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DotScreenEffect.js~DotScreenEffect.html). 62 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/grid.md: -------------------------------------------------------------------------------- 1 | # Grid 2 | 3 | 4 | 5 | 6 | 7 |
8 | Demo code 9 | 10 | <<< @/.vitepress/theme/components/pmdrs/GridDemo.vue{0} 11 |
12 | 13 | The `GridEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GridEffect.js~GridEffect.html) package. 14 | It renders a grid that can be scaled or adjusted to achieve a variety of visual effects. 15 | 16 | ## Usage 17 | 18 | The `` component is easy to use and provides customizable options to suit different visual styles. 19 | 20 | ```vue{2,8-12,21-25} 21 | 34 | 35 | 48 | ``` 49 | 50 | ## Props 51 | 52 | | Prop | Description | Default | 53 | | ------------- | ------------------------------------------------------------------- | --------------------------- | 54 | | blendFunction | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options. | `BlendFunction.OVERLAY` | 55 | | scale | The grid scale, which can be used to adjust the spacing effect. | `1.0` | 56 | | lineWidth | The width of the lines in the grid pattern. | `1.0` | 57 | 58 | ## Further Reading 59 | For more details, see the [GridEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GridEffect.js~GridEffect.html) 60 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/noise.md: -------------------------------------------------------------------------------- 1 | # Noise 2 | 3 | 4 | 5 | 6 | 7 | Noise is an effect that adds Gaussian noise to the scene. This can be used to simulate a variety of effects, such as static on a TV or film grain. 8 | 9 | ## Usage 10 | 11 | ```vue{2,12-19} 12 | 16 | 17 | 33 | ``` 34 | 35 | ## Props 36 | 37 | | Prop | Description | Default | 38 | | -------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | 39 | | `blendFunction` | The blend function of this effect. | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) | 40 | | `premultiply` | Indicates whether noise will be multiplied with the input colors prior to blending | `false` | 41 | 42 | ## Further Reading 43 | For more details, see the [NoiseEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/NoiseEffect.js~NoiseEffect.html) 44 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/pixelation.md: -------------------------------------------------------------------------------- 1 | # Pixelation 2 | 3 | 4 | 5 | 6 | 7 | Pixelation is an effect that pixelates the scene. 8 | 9 | ## Usage 10 | 11 | ```vue{2,11-15} 12 | 15 | 16 | 29 | ``` 30 | 31 | ## Props 32 | 33 | | Prop | Description | Default | 34 | | ----------- | ------------------------------ | ------- | 35 | | granularity | The granularity of the pixels. | 30 | 36 | 37 | ## Further Reading 38 | For more details, see the [PixelationEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/PixelationEffect.js~PixelationEffect.html) 39 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/sepia.md: -------------------------------------------------------------------------------- 1 | # Sepia 2 | 3 | 4 | 5 | 6 | 7 |
8 | Demo code 9 | 10 | <<< @/.vitepress/theme/components/pmdrs/SepiaDemo.vue{0} 11 |
12 | 13 | The `Sepia` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html) package. It applies a sepia tone to the scene, giving it a warm, antique appearance. This effect can enhance the visual appeal of your scene by adding a vintage or stylized touch. 14 | 15 | ## Usage 16 | 17 | The `` component is easy to use and provides customizable options to suit different visual styles. 18 | 19 | ```vue{3,17-21} 20 | 29 | 30 | 43 | ``` 44 | 45 | ## Props 46 | 47 | | Prop | Description | Default | 48 | | ----------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------- | 49 | | blendFunction | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options. | `BlendFunction.NORMAL` | 50 | | intensity | The intensity of the sepia effect. | `1.0` | 51 | 52 | ## Further Reading 53 | For more details, see the [SepiaEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html) 54 | -------------------------------------------------------------------------------- /docs/guide/pmndrs/vignette.md: -------------------------------------------------------------------------------- 1 | # Vignette 2 | 3 | 4 | 5 | 6 | 7 | Vignette is an effect that darkens the edges of the scene to make the center pop. 8 | 9 | ## Usage 10 | 11 | ```vue{2,11-18} 12 | 15 | 16 | 32 | ``` 33 | 34 | ## Props 35 | 36 | | Prop | Description | Default | 37 | | ------------- | ------------------------------------------------------------ | -------------------------- | 38 | | technique | Whether the noise should be multiplied with the input color. | VignetteTechnique.DEFAULT | 39 | | blendFunction | The blend function to use. | BlendFunction.NORMAL | 40 | | offset | The offset value. | 0.5 | 41 | | darkness | The darkness value. | 0.5 | 42 | 43 | ## Further Reading 44 | For more details, see the [VignetteEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/VignetteEffect.js~VignetteEffect.html) 45 | -------------------------------------------------------------------------------- /docs/guide/three/glitch.md: -------------------------------------------------------------------------------- 1 | # Glitch 2 | 3 | 4 | 5 | 6 | 7 | Glitch is an effect that simulates digital glitches, which are random or intentional errors that occur in digital media. The effect can be used to create a distorted or disrupted appearance, with elements of the scene appearing to shift or flicker in a chaotic manner. 8 | 9 | The native `` component allows you to add this effect to your 3D scenes, and provides several parameters that can be tweaked to achieve the desired glitchy look, such as delay, duration, strength, mode, and more. The end result can be a unique and striking visual style that adds an extra layer of interest to your 3D scenes. 10 | 11 | ::: warning 12 | This effect may potentially cause epileptic seizures in people with photosensitive epilepsy. Viewer discretion is advised. 13 | ::: 14 | 15 | ## Usage 16 | 17 | ```vue 18 | 21 | 22 | 27 | ``` 28 | 29 | ## Props 30 | 31 | | Prop | Description | Default | 32 | |----------|-----------------------------------------------------------------------------------------|---------| 33 | | `dtSize` | The size of the generated noise map. Will be ignored if a perturbation map is provided. | `64` | 34 | | `goWild` | If true, the glitch effect will be more wild 🤪 | `false` 35 | 36 | ## Further Reading 37 | 38 | see [Three.js example](https://threejs.org/examples/?q=glit#webgl_postprocessing_glitch) 39 | -------------------------------------------------------------------------------- /docs/guide/three/halftone.md: -------------------------------------------------------------------------------- 1 | # Halftone 2 | 3 | 4 | 5 | 6 | 7 | Halftone is an effect that simulates the halftone printing technique, which uses dots of varying sizes and spacing to create the illusion of continuous tone images. This effect can be used to give your 3D scenes a unique, comic book-like appearance. 8 | 9 | ## Usage 10 | 11 | ```vue 12 | 15 | 16 | 21 | ``` 22 | ## Props 23 | 24 | ## Props 25 | 26 | | Prop | Description | Default | 27 | |---------------|---------------------------------------------------------------------------------------------------|---------| 28 | | `shape` | The shape of the halftone dots. Can be `1` (Dot), `2` (Ellipse), `3` (Line), or `4` (Square). | `1` | 29 | | `radius` | The radius of the halftone dots. | `4` | 30 | | `rotateR` | The rotation of the red channel. | `0` | 31 | | `rotateG` | The rotation of the green channel. | `0` | 32 | | `rotateB` | The rotation of the blue channel. | `0` | 33 | | `scatter` | The scatter of the halftone dots. | `0` | 34 | | `blending` | The blending mode of the halftone effect. | `1` | 35 | | `greyscale` | If true, the halftone effect will be in greyscale. | `false` | 36 | | `blendingMode`| The blending mode used for the halftone effect. | `1` | 37 | 38 | ## Further Reading 39 | 40 | see [Three.js example](https://threejs.org/examples/?q=halftone#webgl_postprocessing_rgb_halftone) 41 | -------------------------------------------------------------------------------- /docs/guide/three/output.md: -------------------------------------------------------------------------------- 1 | # Output 2 | 3 | The `` is usually the last pass in the chain and performs sRGB color space conversion and tone mapping. 4 | 5 | ## Further Reading 6 | 7 | see [Three.js docs](https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing) 8 | -------------------------------------------------------------------------------- /docs/guide/three/pixelation.md: -------------------------------------------------------------------------------- 1 | # Pixelation 2 | 3 | 4 | 5 | 6 | 7 | Pixelation is an effect that pixelates the scene. 8 | 9 | ## Usage 10 | 11 | ```vue 12 | 15 | 16 | 21 | ``` 22 | 23 | ## Props 24 | 25 | | Prop | Description | Default | 26 | |---------------------|-----------------------------------------------------------------------------|---------| 27 | | `pixelSize` | The size of the pixels. Larger values result in a more pixelated appearance. | `30` | 28 | | `depthEdgeStrength` | The strength of the depth edges. | `1.0` | 29 | | `normalEdgeStrength`| The strength of the normal edges. | `0.5` | 30 | 31 | ## Further Reading 32 | 33 | see [Three.js example](https://threejs.org/examples/?q=pixe#webgl_postprocessing_pixel) 34 | -------------------------------------------------------------------------------- /docs/guide/three/smaa.md: -------------------------------------------------------------------------------- 1 | # SMAA 2 | 3 | 4 | 5 | 6 | 7 | SMAA (Subpixel Morphological Antialiasing) is an antialiasing technique that aims to reduce the visual defects that occur when high-frequency detail is displayed on a lower-resolution screen. This effect can be used to smooth out jagged edges in your 3D scenes. 8 | 9 | ## Usage 10 | 11 | ```vue 12 | 15 | 16 | 22 | ``` 23 | 24 | ## Props 25 | 26 | | Prop | Description | Default | 27 | |---------|---------------------------------------------------------------------------------------------------|---------------------------------| 28 | | `width` | The width of the render target. If not provided, it defaults to the width of the renderer. | | 29 | | `height`| The height of the render target. If not provided, it defaults to the height of the renderer. | | 30 | 31 | ## Further Reading 32 | 33 | see [Three.js example](https://threejs.org/examples/?q=smaa#webgl_postprocessing_smaa) 34 | -------------------------------------------------------------------------------- /docs/guide/three/unreal-bloom.md: -------------------------------------------------------------------------------- 1 | # Unreal Bloom 2 | 3 | 4 | 5 | 6 | 7 | Unreal Bloom is an effect that simulates the bloom effect seen in many modern video games. It creates a glow around bright areas of the scene, giving it a more vibrant and dynamic look. 8 | 9 | ## Usage 10 | 11 | ```vue 12 | 15 | 16 | 21 | ``` 22 | 23 | ## Props 24 | 25 | | Prop | Description | Default | 26 | |------------|---------------------------------------------------------------------------------------------------|---------| 27 | | `radius` | The radius of the bloom effect. | `0` | 28 | | `strength` | The strength of the bloom effect. | `1` | 29 | | `threshold`| The threshold luminance for the bloom effect. | `0` | 30 | 31 | ## Further Reading 32 | 33 | see [Three.js example](https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom) 34 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # https://vitepress.dev/reference/default-theme-home-page 3 | layout: home 4 | 5 | hero: 6 | name: 'Post-processing' 7 | text: 'Effect composer library for TresJS' 8 | tagline: Enhance the rendering flow with passes and effects. 9 | actions: 10 | - theme: brand 11 | text: Get Started 12 | link: /guide/ 13 | - theme: alt 14 | text: Why Tres? 15 | link: https://tresjs.org/guide/#motivation 16 | 17 | features: 18 | - icon: 🧙🏼‍♂️ 19 | title: Declarative & Simple 20 | details: Add post-processing passes and effects with Vue components. 21 | - icon: 🚀 22 | title: Performant 23 | details: Uses `pmndrs/postprocessing` pkg under the hood for maximum performance. 24 | - icon: 😍 25 | title: Visually awesome 26 | details: Let's face it, it looks super cool. 27 | --- 28 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "type": "module", 4 | "version": "0.0.0", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vitepress dev", 8 | "build": "vitepress build", 9 | "preview": "vitepress preview" 10 | }, 11 | "dependencies": { 12 | "@tresjs/cientos": "^4.1.0", 13 | "@tresjs/core": "^4.3.2", 14 | "@tresjs/post-processing": "workspace:^", 15 | "gsap": "^3.12.7" 16 | }, 17 | "devDependencies": { 18 | "unocss": "^65.4.3", 19 | "unplugin-vue-components": "^28.0.0", 20 | "vite-svg-loader": "^5.1.0", 21 | "vitepress": "1.6.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/public/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/docs/public/banner.png -------------------------------------------------------------------------------- /docs/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/public/feather.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/docs/public/feather.glb -------------------------------------------------------------------------------- /docs/public/lens-distortion/room-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/docs/public/lens-distortion/room-map.png -------------------------------------------------------------------------------- /docs/public/lens-distortion/room-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/docs/public/lens-distortion/room-normal.png -------------------------------------------------------------------------------- /docs/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/public/og-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/docs/public/og-banner.png -------------------------------------------------------------------------------- /docs/public/tres-post-processing-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/docs/public/tres-post-processing-banner.png -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "jsx": "preserve", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "esnext", 7 | "moduleResolution": "bundler", 8 | "paths": { 9 | "@tresjs/post-processing": ["../../src"] 10 | }, 11 | "resolveJsonModule": true, 12 | "types": ["vite/client"], 13 | "strict": true, 14 | "noUnusedLocals": true, 15 | "esModuleInterop": true, 16 | "forceConsistentCasingInFileNames": true, 17 | "skipLibCheck": true 18 | }, 19 | "exclude": ["dist", "node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /docs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import Unocss from 'unocss/vite' 2 | import Components from 'unplugin-vue-components/vite' 3 | import { defineConfig } from 'vite' 4 | import svgLoader from 'vite-svg-loader' 5 | 6 | export default defineConfig({ 7 | plugins: [ 8 | svgLoader(), 9 | Unocss(), 10 | Components({ 11 | // allow auto load markdown components under `.vitepress/theme/components` 12 | dirs: ['.vitepress/theme/components'], 13 | extensions: ['vue', 'md'], 14 | // allow auto import and register components used in markdown 15 | include: [/\.vue$/, /\.vue\?vue/, /\.md$/], 16 | dts: 'components.d.ts', 17 | }), 18 | ], 19 | }) 20 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import { tresLintConfig } from '@tresjs/eslint-config' 2 | 3 | export default tresLintConfig({ 4 | ignores: ['dist', 'node_modules', 'public', '.github', 'docs/blog'], 5 | }, { 6 | rules: { 7 | 'style/max-statements-per-line': 'off', 8 | 'jsdoc/check-alignment': 'off', 9 | 'vue/valid-template-root': 'off', 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "docs/.vitepress/dist" 3 | command = "pnpm run build && pnpm docs:build" 4 | 5 | [build.environment] 6 | NODE_VERSION = "18" 7 | -------------------------------------------------------------------------------- /playground/.eslintrc-auto-import.json: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "Component": true, 4 | "ComponentPublicInstance": true, 5 | "ComputedRef": true, 6 | "EffectScope": true, 7 | "InjectionKey": true, 8 | "PropType": true, 9 | "Ref": true, 10 | "VNode": true, 11 | "computed": true, 12 | "createApp": true, 13 | "customRef": true, 14 | "defineAsyncComponent": true, 15 | "defineComponent": true, 16 | "effectScope": true, 17 | "getCurrentInstance": true, 18 | "getCurrentScope": true, 19 | "h": true, 20 | "inject": true, 21 | "isProxy": true, 22 | "isReactive": true, 23 | "isReadonly": true, 24 | "isRef": true, 25 | "markRaw": true, 26 | "nextTick": true, 27 | "onActivated": true, 28 | "onBeforeMount": true, 29 | "onBeforeUnmount": true, 30 | "onBeforeUpdate": true, 31 | "onDeactivated": true, 32 | "onErrorCaptured": true, 33 | "onMounted": true, 34 | "onRenderTracked": true, 35 | "onRenderTriggered": true, 36 | "onScopeDispose": true, 37 | "onServerPrefetch": true, 38 | "onUnmounted": true, 39 | "onUpdated": true, 40 | "provide": true, 41 | "reactive": true, 42 | "readonly": true, 43 | "ref": true, 44 | "resolveComponent": true, 45 | "shallowReactive": true, 46 | "shallowReadonly": true, 47 | "shallowRef": true, 48 | "toRaw": true, 49 | "toRef": true, 50 | "toRefs": true, 51 | "triggerRef": true, 52 | "unref": true, 53 | "useAttrs": true, 54 | "useCssModule": true, 55 | "useCssVars": true, 56 | "useSlots": true, 57 | "watch": true, 58 | "watchEffect": true, 59 | "watchPostEffect": true, 60 | "watchSyncEffect": true, 61 | "toValue": true, 62 | "WritableComputedRef": true, 63 | "ExtractDefaultPropTypes": true, 64 | "ExtractPropTypes": true, 65 | "ExtractPublicPropTypes": true, 66 | "onWatcherCleanup": true, 67 | "useId": true, 68 | "useModel": true, 69 | "useTemplateRef": true, 70 | "DirectiveBinding": true, 71 | "MaybeRef": true, 72 | "MaybeRefOrGetter": true 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /playground/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tresjs/eslint-config-vue", 3 | "rules": { 4 | "no-console": "off" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /playground/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /playground/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /playground/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "playground", 3 | "type": "module", 4 | "version": "0.0.0", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vite --host", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@tresjs/cientos": "^4.1.0", 13 | "@tresjs/core": "4.3.2", 14 | "@tresjs/post-processing": "workspace:*", 15 | "vue-router": "^4.5.0" 16 | }, 17 | "devDependencies": { 18 | "@types/three": "^0.172.0", 19 | "unplugin-auto-import": "^19.0.0", 20 | "unplugin-vue-components": "^28.0.0", 21 | "vite-plugin-qrcode": "^0.2.4" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /playground/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /playground/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /playground/public/nuxt-stones/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "type": "module", 4 | "version": "0.0.0", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vitepress dev", 8 | "build": "vitepress build", 9 | "preview": "vitepress preview" 10 | }, 11 | "dependencies": { 12 | "@tresjs/cientos": "^3.0.1", 13 | "@tresjs/core": "^3.2.2", 14 | "@tresjs/post-processing": "workspace:^", 15 | "gsap": "^3.11.5" 16 | }, 17 | "devDependencies": { 18 | "unocss": "^0.52.3", 19 | "unplugin-vue-components": "^0.24.1", 20 | "vite-svg-loader": "^4.0.0", 21 | "vitepress": "1.0.0-beta.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /playground/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playground/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /playground/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playground/src/components/BasicScene.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 41 | -------------------------------------------------------------------------------- /playground/src/components/BlenderCube.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /playground/src/components/Ducky.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /playground/src/components/EffectListItem.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /playground/src/components/OutlineDemo.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 73 | -------------------------------------------------------------------------------- /playground/src/components/TheExperience.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 39 | -------------------------------------------------------------------------------- /playground/src/composables/state.ts: -------------------------------------------------------------------------------- 1 | import { reactive, toRefs } from 'vue' 2 | 3 | const state = reactive({ 4 | renderingTimes: 0, 5 | }) 6 | export function useState() { 7 | return { 8 | ...toRefs(state), 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /playground/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import { router } from './router' 4 | import './style.css' 5 | import 'uno.css' 6 | 7 | const app = createApp(App) 8 | 9 | app.use(router) 10 | 11 | app.mount('#app') 12 | 13 | const orginalWarn = console.warn 14 | console.warn = (...args: any[]) => { 15 | if (!args[0].includes('Component is missing template or render function')) { 16 | orginalWarn.apply(console, args) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /playground/src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 71 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/brightness-contrast.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 66 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/chromatic-aberration.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 71 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/color-average.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 69 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/color-depth.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 66 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/dot-screen.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 60 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/grid.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 66 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/hue-saturation.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 60 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/kuwahara.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 62 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/lens-distortion.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 58 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/linocut.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 78 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/noise.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 50 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/on-demand.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 58 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/pixelation.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 51 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/scanline.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 65 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/sepia.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 65 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/tone-mapping.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 81 | -------------------------------------------------------------------------------- /playground/src/pages/postprocessing/vignette.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 57 | -------------------------------------------------------------------------------- /playground/src/pages/three/glitch.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | -------------------------------------------------------------------------------- /playground/src/pages/three/halftone.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | -------------------------------------------------------------------------------- /playground/src/pages/three/pixelation.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 13 | -------------------------------------------------------------------------------- /playground/src/pages/three/smaa.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | -------------------------------------------------------------------------------- /playground/src/pages/three/unreal-bloom.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | -------------------------------------------------------------------------------- /playground/src/router.ts: -------------------------------------------------------------------------------- 1 | import type { RouteRecordRaw } from 'vue-router' 2 | import { createRouter, createWebHistory } from 'vue-router' 3 | import { kebabCase } from './util/string' 4 | 5 | const makeRoute = (name: string, icon: string, isThreeEffect: boolean = true): RouteRecordRaw => { 6 | const nameInKebab = kebabCase(name) 7 | const folder = isThreeEffect ? 'three' : 'postprocessing' 8 | 9 | return { 10 | path: `/${folder}/${nameInKebab}`, 11 | name: `${folder}-${nameInKebab}`, 12 | meta: { 13 | icon, 14 | name, 15 | }, 16 | component: () => import(`./pages/${folder}/${nameInKebab}.vue`), 17 | } 18 | } 19 | 20 | const home: RouteRecordRaw = { 21 | path: '/', 22 | name: 'Home', 23 | component: () => import('./pages/index.vue'), 24 | } 25 | 26 | export const threeRoutes = [ 27 | makeRoute('Pixelation', '👾'), 28 | makeRoute('Glitch', '📺'), 29 | makeRoute('SMAA', '📐'), 30 | makeRoute('Halftone', '🎨'), 31 | makeRoute('Unreal Bloom', '🌼'), 32 | ] 33 | 34 | export const postProcessingRoutes = [ 35 | makeRoute('Outline', '🔲', false), 36 | makeRoute('Tone Mapping', '🎨', false), 37 | makeRoute('Glitch', '📺', false), 38 | makeRoute('Depth of Field', '📷', false), 39 | makeRoute('Hue & Saturation', '🎛️', false), 40 | makeRoute('Kuwahara', '🖼️', false), 41 | makeRoute('Tilt Shift', '🔍', false), 42 | makeRoute('Dot Screen', '🔘', false), 43 | makeRoute('Pixelation', '👾', false), 44 | makeRoute('Bloom', '🌼', false), 45 | makeRoute('Noise', '📟', false), 46 | makeRoute('Chromatic Aberration', '🌈', false), 47 | makeRoute('Linocut', '🪵', false), 48 | makeRoute('Color Average', '🎞️', false), 49 | makeRoute('Lens Distortion', '🌐', false), 50 | makeRoute('Sepia', '🌅', false), 51 | makeRoute('God Rays', '🌞', false), 52 | makeRoute('Scanline', '📽️', false), 53 | makeRoute('Color Depth', '🔳', false), 54 | makeRoute('Grid', '#️⃣', false), 55 | makeRoute('Texture', '🧩', false), 56 | makeRoute('ASCII', '🔡', false), 57 | makeRoute('SMAA', '📐', false), 58 | makeRoute('FXAA', '📐', false), 59 | makeRoute('Shock Wave', '🌊', false), 60 | makeRoute('Brightness Contrast', '🔆', false), 61 | makeRoute('Vignette', '🕶️', false), 62 | makeRoute('Barrel blur', '🌀', false), 63 | makeRoute('Fish Eye', '👁️', false), 64 | makeRoute('On-demand', '🔄', false), 65 | ] 66 | 67 | export const router = createRouter({ 68 | history: createWebHistory(), 69 | routes: [ 70 | home, 71 | ...threeRoutes, 72 | ...postProcessingRoutes, 73 | ], 74 | }) 75 | -------------------------------------------------------------------------------- /playground/src/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | height: 100%; 6 | width: 100%; 7 | } 8 | #app { 9 | height: 100%; 10 | width: 100%; 11 | } 12 | -------------------------------------------------------------------------------- /playground/src/util/string.ts: -------------------------------------------------------------------------------- 1 | export const kebabCase = (str: string) => { 2 | const re = /(\d+|([A-Z][a-z]+)|[a-z]+|([A-Z]+)(?![a-z]))/g 3 | 4 | return (String(str ?? '').match(re) || []).map(x => x.toLowerCase()).join('-') 5 | } 6 | -------------------------------------------------------------------------------- /playground/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "jsx": "preserve", 5 | "lib": ["ESNext", "DOM"], 6 | "useDefineForClassFields": true, 7 | "baseUrl": ".", 8 | "module": "ESNext", 9 | "moduleResolution": "bundler", 10 | "paths": { 11 | "@tresjs/post-processing": ["../dist/"] 12 | }, 13 | "resolveJsonModule": true, 14 | "strict": true, 15 | "noEmit": true, 16 | "esModuleInterop": true, 17 | "isolatedModules": true, 18 | "skipLibCheck": true 19 | }, 20 | "references": [{ "path": "./tsconfig.node.json" }], 21 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 22 | } 23 | -------------------------------------------------------------------------------- /playground/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /playground/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { templateCompilerOptions } from '@tresjs/core' 2 | import vue from '@vitejs/plugin-vue' 3 | import { resolve } from 'pathe' 4 | import UnoCSS from 'unocss/vite' 5 | import AutoImport from 'unplugin-auto-import/vite' 6 | import Components from 'unplugin-vue-components/vite' 7 | import { defineConfig } from 'vite' 8 | import { qrcode } from 'vite-plugin-qrcode' 9 | 10 | // https://vitejs.dev/config/ 11 | export default defineConfig({ 12 | plugins: [ 13 | vue({ 14 | script: { 15 | propsDestructure: true, 16 | }, 17 | ...templateCompilerOptions, 18 | }), 19 | AutoImport({ 20 | dts: true, 21 | eslintrc: { 22 | enabled: true, // <-- this 23 | }, 24 | imports: ['vue'], 25 | }), 26 | Components({ 27 | /* options */ 28 | }), 29 | UnoCSS({ 30 | /* options */ 31 | }), 32 | qrcode(), 33 | ], 34 | resolve: { 35 | alias: { 36 | '@tresjs/post-processing': resolve(__dirname, '../src/index.ts'), 37 | }, 38 | dedupe: ['three', '@tresjs/core'], 39 | }, 40 | }) 41 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - docs 3 | - playground 4 | - playground-nuxt 5 | -------------------------------------------------------------------------------- /public/blender-cube.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/public/blender-cube.glb -------------------------------------------------------------------------------- /public/repo-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tresjs/post-processing/7289c152b81ea9e386f7d4621e55fc61292b505f/public/repo-banner.png -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ], 6 | "packageRules": [ 7 | { 8 | "matchUpdateTypes": ["minor", "patch"], 9 | "matchCurrentVersion": "!/^0/", 10 | "automerge": true 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/core/pmndrs/BarrelBlurPmndrs.vue: -------------------------------------------------------------------------------- 1 | 51 | -------------------------------------------------------------------------------- /src/core/pmndrs/BloomPmndrs.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 86 | -------------------------------------------------------------------------------- /src/core/pmndrs/BrightnessContrastPmndrs.vue: -------------------------------------------------------------------------------- 1 | 40 | -------------------------------------------------------------------------------- /src/core/pmndrs/ChromaticAberrationPmndrs.vue: -------------------------------------------------------------------------------- 1 | 62 | -------------------------------------------------------------------------------- /src/core/pmndrs/ColorAveragePmndrs.vue: -------------------------------------------------------------------------------- 1 | 49 | -------------------------------------------------------------------------------- /src/core/pmndrs/ColorDepthPmndrs.vue: -------------------------------------------------------------------------------- 1 | 69 | -------------------------------------------------------------------------------- /src/core/pmndrs/DepthOfFieldPmndrs.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 68 | -------------------------------------------------------------------------------- /src/core/pmndrs/DepthPickingPassPmndrs.vue: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /src/core/pmndrs/DotScreenPmndrs.vue: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /src/core/pmndrs/FXAAPmndrs.vue: -------------------------------------------------------------------------------- 1 | 70 | -------------------------------------------------------------------------------- /src/core/pmndrs/FishEyePmndrs.vue: -------------------------------------------------------------------------------- 1 | 67 | -------------------------------------------------------------------------------- /src/core/pmndrs/GridPmndrs.vue: -------------------------------------------------------------------------------- 1 | 40 | -------------------------------------------------------------------------------- /src/core/pmndrs/HueSaturationPmndrs.vue: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /src/core/pmndrs/KuwaharaPmndrs.vue: -------------------------------------------------------------------------------- 1 | 49 | -------------------------------------------------------------------------------- /src/core/pmndrs/LensDistortionPmndrs.vue: -------------------------------------------------------------------------------- 1 | 49 | -------------------------------------------------------------------------------- /src/core/pmndrs/LinocutPmndrs.vue: -------------------------------------------------------------------------------- 1 | 40 | -------------------------------------------------------------------------------- /src/core/pmndrs/NoisePmndrs.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 37 | -------------------------------------------------------------------------------- /src/core/pmndrs/PixelationPmndrs.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 26 | -------------------------------------------------------------------------------- /src/core/pmndrs/ScanlinePmndrs.vue: -------------------------------------------------------------------------------- 1 | 63 | -------------------------------------------------------------------------------- /src/core/pmndrs/SepiaPmndrs.vue: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /src/core/pmndrs/ShockWavePmndrs.vue: -------------------------------------------------------------------------------- 1 | 73 | -------------------------------------------------------------------------------- /src/core/pmndrs/TexturePmndrs.vue: -------------------------------------------------------------------------------- 1 | 58 | -------------------------------------------------------------------------------- /src/core/pmndrs/TiltShiftPmndrs.vue: -------------------------------------------------------------------------------- 1 | 81 | -------------------------------------------------------------------------------- /src/core/pmndrs/ToneMappingPmndrs.vue: -------------------------------------------------------------------------------- 1 | 64 | -------------------------------------------------------------------------------- /src/core/pmndrs/VignettePmndrs.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 35 | -------------------------------------------------------------------------------- /src/core/pmndrs/custom/fish-eye/index.ts: -------------------------------------------------------------------------------- 1 | import { Uniform, Vector2 } from 'three' 2 | import { BlendFunction, Effect } from 'postprocessing' 3 | 4 | /** 5 | * FishEyeEffect - A custom effect for applying a fish-eye distortion 6 | */ 7 | 8 | export class FishEyeEffect extends Effect { 9 | /** 10 | * Creates a new FishEyeEffect instance. 11 | * 12 | * @param {object} [options] - Configuration options for the effect. 13 | * @param {BlendFunction} [options.blendFunction] - Blend mode. 14 | * @param {Vector2} [options.lensS] - Lens scale. 15 | * @param {Vector2} [options.lensF] - Lens factor. 16 | * @param {number} [options.scale] - Scale. 17 | * 18 | */ 19 | constructor({ blendFunction = BlendFunction.NORMAL, lensS = new Vector2(1.0, 1.0), lensF = new Vector2(0.0, 1.0), scale = 1.0 } = {}) { 20 | super('FishEyeEffect', ` 21 | uniform vec2 lensS; 22 | uniform vec2 lensF; 23 | uniform float scale; 24 | 25 | void mainUv(inout vec2 uv) { 26 | vec2 newUv = uv * 2.0 - 1.0; 27 | newUv.x = newUv.x + ((pow(newUv.y, 2.0) / scale) * newUv.x / scale) * -lensF.x; 28 | newUv.y = newUv.y + ((pow(newUv.x, 2.0) / scale) * newUv.y / scale) * -lensF.y; 29 | newUv = newUv * lensS; 30 | newUv = newUv / scale * 0.5 + 0.5; 31 | 32 | uv = newUv; 33 | } 34 | 35 | void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) { 36 | outputColor = vec4(inputColor.rgb, inputColor.a); // Preserves original alpha 37 | } 38 | `, { 39 | blendFunction, 40 | uniforms: new Map>([ 41 | ['lensS', new Uniform(lensS)], 42 | ['lensF', new Uniform(lensF)], 43 | ['scale', new Uniform(scale)], 44 | ]), 45 | }) 46 | } 47 | 48 | /** 49 | * The lensS. 50 | * 51 | * @type {Vector2} 52 | */ 53 | get lensS() { 54 | return this.uniforms.get('lensS')?.value 55 | } 56 | 57 | set lensS(value) { 58 | this.uniforms.get('lensS')!.value = value 59 | } 60 | 61 | /** 62 | * The lensF. 63 | * 64 | * @type {Vector2} 65 | */ 66 | get lensF() { 67 | return this.uniforms.get('lensF')?.value 68 | } 69 | 70 | set lensF(value) { 71 | this.uniforms.get('lensF')!.value = value 72 | } 73 | 74 | /** 75 | * The scale. 76 | * 77 | * @type {number} 78 | */ 79 | get scale() { 80 | return this.uniforms.get('scale')?.value 81 | } 82 | 83 | set scale(value) { 84 | this.uniforms.get('scale')!.value = value 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/core/three/EffectComposer.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 72 | 73 | 76 | -------------------------------------------------------------------------------- /src/core/three/Glitch.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /src/core/three/Halftone.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 61 | -------------------------------------------------------------------------------- /src/core/three/Output.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/core/three/Pixelation.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 37 | -------------------------------------------------------------------------------- /src/core/three/SMAA.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | -------------------------------------------------------------------------------- /src/core/three/UnrealBloom.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 53 | -------------------------------------------------------------------------------- /src/core/three/composables/useEffect.ts: -------------------------------------------------------------------------------- 1 | import type { Pass } from 'three/examples/jsm/postprocessing/Pass.js' 2 | import type { Reactive, ShallowRef } from 'vue' 3 | import { useTresContext } from '@tresjs/core' 4 | import { inject, nextTick, onUnmounted, shallowRef, watch, watchEffect } from 'vue' 5 | import { effectComposerInjectionKey } from '../EffectComposer.vue' 6 | 7 | /** 8 | * @param newPassFunction - A function that returns a new pass instance. 9 | * @param passDependencies - A reactive object that the pass depends on (usually props). Changes to this object will trigger re-rendering. 10 | * @param dependencyFieldsTriggeringRecreation - fields in passDependencies that require effect recreation when changed 11 | */ 12 | export const useEffect = >( 13 | newPassFunction: () => T, 14 | passDependencies?: Reactive, 15 | dependencyFieldsTriggeringRecreation?: (keyof D)[], 16 | ): { pass: ShallowRef } => { 17 | if (!passDependencies && dependencyFieldsTriggeringRecreation) { 18 | throw new Error('passDependencies is required when dependencyFieldsTriggeringRecreation is provided') 19 | } 20 | 21 | const composer = inject(effectComposerInjectionKey) 22 | 23 | const pass = shallowRef(newPassFunction()) as ShallowRef 24 | const { sizes, invalidate } = useTresContext() 25 | 26 | if (passDependencies) { 27 | watch(passDependencies, () => invalidate()) 28 | } 29 | 30 | const removePass = () => { 31 | composer?.value?.removePass(pass.value) 32 | pass.value.dispose() 33 | } 34 | 35 | const unwatch = watchEffect(() => { 36 | if (!composer?.value || !sizes.height.value || !sizes.width.value) { return } 37 | 38 | composer.value.addPass(pass.value) 39 | nextTick(() => unwatch()) 40 | }) 41 | 42 | if (dependencyFieldsTriggeringRecreation) { 43 | watch( 44 | () => dependencyFieldsTriggeringRecreation.map(field => passDependencies?.[field]), 45 | () => { 46 | if (!composer?.value) { return } 47 | 48 | const index = composer.value.passes.findIndex(p => p === pass.value) 49 | 50 | if (!~index) { return } 51 | 52 | removePass() 53 | pass.value = newPassFunction() 54 | composer.value.insertPass(pass.value, index) 55 | }, 56 | ) 57 | } 58 | 59 | onUnmounted(() => { 60 | removePass() 61 | }) 62 | 63 | return { pass } 64 | } 65 | -------------------------------------------------------------------------------- /src/core/three/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable perfectionist/sort-named-exports */ 2 | import { useEffect } from './composables/useEffect' 3 | import EffectComposer, { type EffectComposerProps } from './EffectComposer.vue' 4 | import Glitch, { type GlitchProps } from './Glitch.vue' 5 | import Halftone, { type HalftoneProps } from './Halftone.vue' 6 | import Pixelation, { type PixelationProps } from './Pixelation.vue' 7 | import Output from './Output.vue' 8 | import SMAA, { type SMAAProps } from './SMAA.vue' 9 | import UnrealBloom, { type UnrealBloomProps } from './UnrealBloom.vue' 10 | 11 | export { 12 | EffectComposer, 13 | 14 | Glitch, 15 | Halftone, 16 | Output, 17 | Pixelation, 18 | SMAA, 19 | UnrealBloom, 20 | 21 | useEffect, 22 | 23 | EffectComposerProps, 24 | GlitchProps, 25 | HalftoneProps, 26 | PixelationProps, 27 | SMAAProps, 28 | UnrealBloomProps, 29 | } 30 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './core/pmndrs' 2 | export * from './core/three' 3 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "incremental": false, 4 | "target": "esnext", 5 | "jsx": "preserve", 6 | "lib": ["esnext", "dom"], 7 | "baseUrl": ".", 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "paths": { 11 | "/@/*": ["src/*"] 12 | }, 13 | "resolveJsonModule": true, 14 | "types": ["vite/client"], 15 | "strict": true, 16 | "strictNullChecks": true, 17 | "noUnusedLocals": false, 18 | "declaration": true, 19 | "sourceMap": true, 20 | "esModuleInterop": true, 21 | "forceConsistentCasingInFileNames": true, 22 | "skipLibCheck": true 23 | }, 24 | 25 | "references": [{ "path": "./tsconfig.node.json" }], 26 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 27 | "exclude": ["dist", "node_modules", "src/**/*.cy.ts", "src/**/*.test.ts"] 28 | } 29 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { templateCompilerOptions } from '@tresjs/core' 2 | import vue from '@vitejs/plugin-vue' 3 | import { bold, gray, lightGreen, magenta } from 'kolorist' 4 | import { resolve } from 'pathe' 5 | import { defineConfig } from 'vite' 6 | import banner from 'vite-plugin-banner' 7 | import dts from 'vite-plugin-dts' 8 | import pkg from './package.json' 9 | 10 | // eslint-disable-next-line no-console 11 | console.log(`${lightGreen('▲')} ${gray('■')} ${magenta('𝗫')} ${bold('Tres/post-processing')} v${pkg.version}`) 12 | 13 | // https://vitejs.dev/config/ 14 | export default defineConfig({ 15 | resolve: { 16 | alias: { 17 | '/@': resolve(__dirname, './src'), 18 | }, 19 | dedupe: ['@tresjs/core', '@vueuse/core'], 20 | }, 21 | plugins: [ 22 | vue(templateCompilerOptions), 23 | dts({ 24 | insertTypesEntry: true, 25 | }), 26 | banner({ 27 | content: `/**\n * name: ${pkg.name}\n * version: v${ 28 | pkg.version 29 | }\n * (c) ${new Date().getFullYear()}\n * description: ${pkg.description}\n * author: ${pkg.author}\n */`, 30 | }), 31 | ], 32 | build: { 33 | copyPublicDir: false, 34 | watch: { 35 | include: [resolve(__dirname, 'src')], 36 | }, 37 | lib: { 38 | entry: resolve(__dirname, 'src/index.ts'), 39 | name: 'tres-post-processing', 40 | fileName: 'tres-post-processing', 41 | }, 42 | rollupOptions: { 43 | plugins: [ 44 | /* analyze(), 45 | visualizer({ 46 | gzipSize: true, 47 | brotliSize: true, 48 | open: false, 49 | }), */ 50 | ], 51 | external: ['three', 'vue', '@tresjs/core', 'postprocessing', '@vueuse/core'], 52 | output: { 53 | globals: { 54 | '@tresjs/core': 'TresjsCore', 55 | 'three': 'Three', 56 | 'vue': 'Vue', 57 | 'postprocessing': 'Postprocessing', 58 | '@vueuse/core': 'VueUseCore', 59 | }, 60 | }, 61 | }, 62 | }, 63 | optimizeDeps: { 64 | exclude: ['three', 'vue', '@tresjs/core', 'postprocessing', '@vueuse/core'], 65 | }, 66 | }) 67 | --------------------------------------------------------------------------------