diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index d88e5152..00000000 --- a/.eslintignore +++ /dev/null @@ -1,8 +0,0 @@ -dist -**.spec.js -**.test.ts -**.test.js -**.cy.js -**/cypress/** -docs/.vitepress/cache -docs/.vitepress/dist \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index cd76aa45..00000000 --- a/.eslintrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "@tresjs/eslint-config-vue", - "rules": { - "@typescript-eslint/no-use-before-define": "off", - "vue/valid-template-root": "off" - } -} diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 00000000..51e1e35f --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1 @@ +* @alvarosabu \ No newline at end of file diff --git a/.github/dependabot.yml b/.github/dependabot.yml deleted file mode 100644 index dbd6520d..00000000 --- a/.github/dependabot.yml +++ /dev/null @@ -1,11 +0,0 @@ -# To get started with Dependabot version updates, you'll need to specify which -# package ecosystems to update and where the package manifests are located. -# Please see the documentation for all configuration options: -# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates - -version: 2 -updates: - - package-ecosystem: '' # See documentation for possible values - directory: '/' # Location of package manifests - schedule: - interval: 'weekly' diff --git a/.github/workflows/actions/pnpm/action.yml b/.github/workflows/actions/pnpm/action.yml deleted file mode 100644 index 3cb61fb5..00000000 --- a/.github/workflows/actions/pnpm/action.yml +++ /dev/null @@ -1,27 +0,0 @@ -# From https://github.com/remirror/template/blob/4f8c5f5629a081217672a8cce1df085510f43913/.github/actions/pnpm/action.yml -name: 'pnpm installation' -description: 'Install and audit dependencies for pnpm' -inputs: - cache: # id of input - description: 'The location of the pnpm cache' - required: true - default: '.pnpm-store' - version: # id of input - description: 'The version to use' - required: false - default: 6.10.0 - -runs: - using: 'composite' - steps: - - name: install pnpm - run: npm install pnpm@${{ inputs.version }} -g - shell: bash - - - name: setup pnpm config - run: pnpm config set store-dir ${{ inputs.cache }} - shell: bash - - - name: install dependencies - run: pnpm install --shamefully-hoist - shell: bash diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index a990e44b..c42b0fb5 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -8,17 +8,15 @@ env: jobs: lint: name: Lint - runs-on: ubuntu-20.04 + runs-on: ubuntu-24.04 strategy: matrix: - node-version: [16] + node-version: [20] steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Pnpm - uses: pnpm/action-setup@v2 - with: - version: 8 + uses: pnpm/action-setup@v4 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml new file mode 100644 index 00000000..0cdcc4e8 --- /dev/null +++ b/.github/workflows/pkg.pr.new.yml @@ -0,0 +1,37 @@ +name: Publish Any Commit +on: + push: + branches: + - '**' + tags: + - '!**' + +env: + PNPM_CACHE_FOLDER: .pnpm-store + +permissions: {} + +concurrency: + group: ${{ github.workflow }}-${{ github.event.number }} + cancel-in-progress: true + +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [20] + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - run: corepack enable + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - name: Install dependencies + run: pnpm install + - name: Build + run: pnpm build + - run: pnpm dlx pkg-pr-new publish --pnpm \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index ae7ec869..c7504b7e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,34 @@ +## [1.0.0](https://github.com/Tresjs/post-processing/compare/1.0.0-next.1...1.0.0) (2024-11-26) + +### Features + +* native threejs effects ([#121](https://github.com/Tresjs/post-processing/issues/121)) ([cd24a57](https://github.com/Tresjs/post-processing/commit/cd24a57cb73d52e13efb9687ade8cd2799738ffa)) +* prop types exposure ([#136](https://github.com/Tresjs/post-processing/issues/136)) ([bd6ff06](https://github.com/Tresjs/post-processing/commit/bd6ff0614f2798acc1bb6553b6b3be5910b38735)) +* sub modules for pmndrs and native components ([#123](https://github.com/Tresjs/post-processing/issues/123)) ([c8df59f](https://github.com/Tresjs/post-processing/commit/c8df59f0fdfdf0d9ba90dba6de30f458fdb7cff4)) + +### Bug Fixes + +* 67 depth of field and outline effect ([#138](https://github.com/Tresjs/post-processing/issues/138)) ([3112305](https://github.com/Tresjs/post-processing/commit/3112305e8b517f1cf5497ef942e1db2cf4b25a0b)) + +## [1.0.0-next.1](https://github.com/Tresjs/post-processing/compare/0.7.1...1.0.0-next.1) (2024-07-26) + + +### Features + +* export useEffect composable ([#105](https://github.com/Tresjs/post-processing/issues/105)) ([b7810ba](https://github.com/Tresjs/post-processing/commit/b7810ba2864e70516c95b9866c2ea5d02a8f9b9d)) +* update core to v4 ([#109](https://github.com/Tresjs/post-processing/issues/109)) ([f79cb28](https://github.com/Tresjs/post-processing/commit/f79cb288205f7be357557979e91ca392002edcac)) + +## [1.0.0-next.0](https://github.com/Tresjs/post-processing/compare/0.7.1...1.0.0-next.0) (2024-05-21) + + +### Features + +* export useEffect composable ([#105](https://github.com/Tresjs/post-processing/issues/105)) ([b7810ba](https://github.com/Tresjs/post-processing/commit/b7810ba2864e70516c95b9866c2ea5d02a8f9b9d)) +* render emit and advance playgroudn for render modes ([5d256fc](https://github.com/Tresjs/post-processing/commit/5d256fcc5e40582e0f87c8cc1ec46fbd9a007435)) +* update to v4, `useLoop` and remove disable render ([544fb39](https://github.com/Tresjs/post-processing/commit/544fb39be3af7f71ddf994f14789215351cec569)) + ## [0.7.1](https://github.com/Tresjs/post-processing/compare/0.7.0...0.7.1) (2024-03-18) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 4aa89216..de4213b2 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -28,16 +28,16 @@ Project maintainers are responsible for clarifying the standards of acceptable b Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. -## Scope +## Scope This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. -## Enforcement +## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [TresJS Discord](https://discord.gg/UCr96AQmWn). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership. -## Attribution +## Attribution This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html diff --git a/README.md b/README.md index af9c7f66..7d83c3cf 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ pnpm i @tresjs/post-processing ## Docs -Checkout the [docs](https://postprocessing.tresjs.org/) +Checkout the [docs](https://post-processing.tresjs.org/) ## Demos @@ -57,10 +57,6 @@ And then to run the development server on http://localhost:5173 pnpm run playground ``` -### Test - -TODO... - ### Docs To run de docs in dev mode diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json deleted file mode 100644 index abc08e54..00000000 --- a/docs/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "@tresjs/eslint-config-vue" -} diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 1a305183..0f57f6eb 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,6 +1,6 @@ -import { defineConfig } from 'vitepress' -import { resolve } from 'pathe' import { templateCompilerOptions } from '@tresjs/core' +import { resolve } from 'pathe' +import { defineConfig } from 'vitepress' // https://vitepress.dev/reference/site-config export default defineConfig({ @@ -28,7 +28,7 @@ export default defineConfig({ content: '/og-banner.png', }, ], - ['script', { defer: 'true', 'data-site': 'OWBUVCJK', src: 'https://cdn.usefathom.com/script.js' }], + ['script', { 'defer': 'true', 'data-site': 'OWBUVCJK', 'src': 'https://cdn.usefathom.com/script.js' }], ], themeConfig: { logo: '/logo.svg', @@ -38,7 +38,6 @@ export default defineConfig({ // https://vitepress.dev/reference/default-theme-config nav: [ { text: 'Guide', link: '/guide/' }, - { text: 'Examples', link: 'https://playground.tresjs.org/' }, ], sidebar: [ @@ -47,15 +46,26 @@ export default defineConfig({ items: [{ text: 'Introduction', link: '/guide/' }], }, { - text: 'Effects', + text: 'Pmndrs', + items: [ + { text: 'Bloom', link: '/guide/pmndrs/bloom' }, + { text: 'Depth of Field', link: '/guide/pmndrs/depth-of-field' }, + { text: 'Glitch', link: '/guide/pmndrs/glitch' }, + { text: 'Noise', link: '/guide/pmndrs/noise' }, + { text: 'Outline', link: '/guide/pmndrs/outline' }, + { text: 'Pixelation', link: '/guide/pmndrs/pixelation' }, + { text: 'Vignette', link: '/guide/pmndrs/vignette' }, + ], + }, + { + text: 'Three', items: [ - { text: 'Bloom', link: '/guide/effects/bloom' }, - { text: 'Depth of Field', link: '/guide/effects/depth-of-field' }, - { text: 'Glitch', link: '/guide/effects/glitch' }, - { text: 'Noise', link: '/guide/effects/noise' }, - { text: 'Outline', link: '/guide/effects/outline' }, - { text: 'Pixelation', link: '/guide/effects/pixelation' }, - { text: 'Vignette', link: '/guide/effects/vignette' }, + { text: 'Glitch', link: '/guide/three/glitch' }, + { text: 'Halftone', link: '/guide/three/halftone' }, + { text: 'Output', link: '/guide/three/output' }, + { text: 'Pixelation', link: '/guide/three/pixelation' }, + { text: 'SMAA', link: '/guide/three/smaa' }, + { text: 'Unreal Bloom', link: '/guide/three/unreal-bloom' }, ], }, ], @@ -78,9 +88,10 @@ export default defineConfig({ }, resolve: { alias: { - '@tresjs/post-processing': resolve(__dirname, '../../dist/tres-postprocessing.js'), + '@tresjs/post-processing/three': resolve(__dirname, '../../src/core/three'), + '@tresjs/post-processing/pmndrs': resolve(__dirname, '../../src/core/pmndrs'), }, - dedupe: ['three'], + dedupe: ['three', '@tresjs/core'], }, }, vue: { diff --git a/docs/.vitepress/config.ts.timestamp-1700208814950-61916cb6f3fe3.mjs b/docs/.vitepress/config.ts.timestamp-1700208814950-61916cb6f3fe3.mjs deleted file mode 100644 index 0f030659..00000000 --- a/docs/.vitepress/config.ts.timestamp-1700208814950-61916cb6f3fe3.mjs +++ /dev/null @@ -1,67 +0,0 @@ -// .vitepress/config.ts -import { defineConfig } from "file:///Users/alvarosabu/Projects/tres/post-processing/node_modules/.pnpm/vitepress@1.0.0-rc.25_@algolia+client-search@4.20.0_postcss@8.4.31_search-insights@2.10.0_typescript@5.2.2/node_modules/vitepress/dist/node/index.js"; -import { resolve } from "file:///Users/alvarosabu/Projects/tres/post-processing/node_modules/.pnpm/pathe@1.1.1/node_modules/pathe/dist/index.mjs"; -import { templateCompilerOptions } from "file:///Users/alvarosabu/Projects/tres/post-processing/node_modules/.pnpm/@tresjs+core@3.5.0_three@0.158.0_vue@3.3.8/node_modules/@tresjs/core/dist/tres.js"; -var __vite_injected_original_dirname = "/Users/alvarosabu/Projects/tres/post-processing/docs/.vitepress"; -var config_default = defineConfig({ - title: "Post-processing", - description: "Post-processing effects for ViteJS", - head: [["link", { rel: "icon", type: "image/svg", href: "/favicon.svg" }]], - themeConfig: { - logo: "/logo.svg", - search: { - provider: "local" - }, - // https://vitepress.dev/reference/default-theme-config - nav: [ - { text: "Guide", link: "/guide/" }, - { text: "Examples", link: "/examples" } - ], - sidebar: [ - { - text: "Guide", - items: [{ text: "Introduction", link: "/guide/" }] - }, - { - text: "Effects", - items: [ - { text: "Bloom", link: "/guide/effects/bloom" }, - { text: "Depth of Field", link: "/guide/effects/depth-of-field" }, - { text: "Glitch", link: "/guide/effects/glitch" }, - { text: "Noise", link: "/guide/effects/noise" }, - { text: "Outline", link: "/guide/effects/outline" }, - { text: "Pixelation", link: "/guide/effects/pixelation" }, - { text: "Vignette", link: "/guide/effects/vignette" } - ] - } - ], - socialLinks: [ - { icon: "twitter", link: "https://twitter.com/tresjs_dev" }, - { icon: "discord", link: "https://discord.gg/UCr96AQmWn" } - ] - }, - vite: { - optimizeDeps: { - exclude: ["vitepress"], - include: ["three"] - }, - server: { - hmr: { - overlay: false - } - }, - resolve: { - alias: { - "@tresjs/post-processing": resolve(__vite_injected_original_dirname, "../../dist/tres-postprocessing.js") - }, - dedupe: ["three"] - } - }, - vue: { - ...templateCompilerOptions - } -}); -export { - config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLnZpdGVwcmVzcy9jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYWx2YXJvc2FidS9Qcm9qZWN0cy90cmVzL3Bvc3QtcHJvY2Vzc2luZy9kb2NzLy52aXRlcHJlc3NcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9hbHZhcm9zYWJ1L1Byb2plY3RzL3RyZXMvcG9zdC1wcm9jZXNzaW5nL2RvY3MvLnZpdGVwcmVzcy9jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2FsdmFyb3NhYnUvUHJvamVjdHMvdHJlcy9wb3N0LXByb2Nlc3NpbmcvZG9jcy8udml0ZXByZXNzL2NvbmZpZy50c1wiO2ltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gJ3ZpdGVwcmVzcydcbmltcG9ydCBVbm9jc3MgZnJvbSAndW5vY3NzL3ZpdGUnXG5pbXBvcnQgc3ZnTG9hZGVyIGZyb20gJ3ZpdGUtc3ZnLWxvYWRlcidcbmltcG9ydCB7IHJlc29sdmUgfSBmcm9tICdwYXRoZSdcbmltcG9ydCB7IHRlbXBsYXRlQ29tcGlsZXJPcHRpb25zIH0gZnJvbSAnQHRyZXNqcy9jb3JlJ1xuXG4vLyBodHRwczovL3ZpdGVwcmVzcy5kZXYvcmVmZXJlbmNlL3NpdGUtY29uZmlnXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICB0aXRsZTogJ1Bvc3QtcHJvY2Vzc2luZycsXG4gIGRlc2NyaXB0aW9uOiAnUG9zdC1wcm9jZXNzaW5nIGVmZmVjdHMgZm9yIFZpdGVKUycsXG4gIGhlYWQ6IFtbJ2xpbmsnLCB7IHJlbDogJ2ljb24nLCB0eXBlOiAnaW1hZ2Uvc3ZnJywgaHJlZjogJy9mYXZpY29uLnN2ZycgfV1dLFxuICB0aGVtZUNvbmZpZzoge1xuICAgIGxvZ286ICcvbG9nby5zdmcnLFxuICAgIHNlYXJjaDoge1xuICAgICAgcHJvdmlkZXI6ICdsb2NhbCcsXG4gICAgfSxcbiAgICAvLyBodHRwczovL3ZpdGVwcmVzcy5kZXYvcmVmZXJlbmNlL2RlZmF1bHQtdGhlbWUtY29uZmlnXG4gICAgbmF2OiBbXG4gICAgICB7IHRleHQ6ICdHdWlkZScsIGxpbms6ICcvZ3VpZGUvJyB9LFxuICAgICAgeyB0ZXh0OiAnRXhhbXBsZXMnLCBsaW5rOiAnL2V4YW1wbGVzJyB9LFxuICAgIF0sXG5cbiAgICBzaWRlYmFyOiBbXG4gICAgICB7XG4gICAgICAgIHRleHQ6ICdHdWlkZScsXG4gICAgICAgIGl0ZW1zOiBbeyB0ZXh0OiAnSW50cm9kdWN0aW9uJywgbGluazogJy9ndWlkZS8nIH1dLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgdGV4dDogJ0VmZmVjdHMnLFxuICAgICAgICBpdGVtczogW1xuICAgICAgICAgIHsgdGV4dDogJ0Jsb29tJywgbGluazogJy9ndWlkZS9lZmZlY3RzL2Jsb29tJyB9LFxuICAgICAgICAgIHsgdGV4dDogJ0RlcHRoIG9mIEZpZWxkJywgbGluazogJy9ndWlkZS9lZmZlY3RzL2RlcHRoLW9mLWZpZWxkJyB9LFxuICAgICAgICAgIHsgdGV4dDogJ0dsaXRjaCcsIGxpbms6ICcvZ3VpZGUvZWZmZWN0cy9nbGl0Y2gnIH0sXG4gICAgICAgICAgeyB0ZXh0OiAnTm9pc2UnLCBsaW5rOiAnL2d1aWRlL2VmZmVjdHMvbm9pc2UnIH0sXG4gICAgICAgICAgeyB0ZXh0OiAnT3V0bGluZScsIGxpbms6ICcvZ3VpZGUvZWZmZWN0cy9vdXRsaW5lJyB9LFxuICAgICAgICAgIHsgdGV4dDogJ1BpeGVsYXRpb24nLCBsaW5rOiAnL2d1aWRlL2VmZmVjdHMvcGl4ZWxhdGlvbicgfSxcbiAgICAgICAgICB7IHRleHQ6ICdWaWduZXR0ZScsIGxpbms6ICcvZ3VpZGUvZWZmZWN0cy92aWduZXR0ZScgfSxcbiAgICAgICAgXSxcbiAgICAgIH0sXG4gICAgXSxcblxuICAgIHNvY2lhbExpbmtzOiBbXG4gICAgICB7IGljb246ICd0d2l0dGVyJywgbGluazogJ2h0dHBzOi8vdHdpdHRlci5jb20vdHJlc2pzX2RldicgfSxcbiAgICAgIHsgaWNvbjogJ2Rpc2NvcmQnLCBsaW5rOiAnaHR0cHM6Ly9kaXNjb3JkLmdnL1VDcjk2QVFtV24nIH0sXG4gICAgXSxcbiAgfSxcbiAgdml0ZToge1xuICAgIG9wdGltaXplRGVwczoge1xuICAgICAgZXhjbHVkZTogWyd2aXRlcHJlc3MnXSxcbiAgICAgIGluY2x1ZGU6IFsndGhyZWUnXSxcbiAgICB9LFxuICAgIHNlcnZlcjoge1xuICAgICAgaG1yOiB7XG4gICAgICAgIG92ZXJsYXk6IGZhbHNlLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiB7XG4gICAgICAgICdAdHJlc2pzL3Bvc3QtcHJvY2Vzc2luZyc6IHJlc29sdmUoX19kaXJuYW1lLCAnLi4vLi4vZGlzdC90cmVzLXBvc3Rwcm9jZXNzaW5nLmpzJyksXG4gICAgICB9LFxuICAgICAgZGVkdXBlOiBbJ3RocmVlJ10sXG4gICAgfSxcbiAgfSxcbiAgdnVlOiB7XG4gICAgLi4udGVtcGxhdGVDb21waWxlck9wdGlvbnMsXG4gIH0sXG59KVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFxVyxTQUFTLG9CQUFvQjtBQUdsWSxTQUFTLGVBQWU7QUFDeEIsU0FBUywrQkFBK0I7QUFKeEMsSUFBTSxtQ0FBbUM7QUFPekMsSUFBTyxpQkFBUSxhQUFhO0FBQUEsRUFDMUIsT0FBTztBQUFBLEVBQ1AsYUFBYTtBQUFBLEVBQ2IsTUFBTSxDQUFDLENBQUMsUUFBUSxFQUFFLEtBQUssUUFBUSxNQUFNLGFBQWEsTUFBTSxlQUFlLENBQUMsQ0FBQztBQUFBLEVBQ3pFLGFBQWE7QUFBQSxJQUNYLE1BQU07QUFBQSxJQUNOLFFBQVE7QUFBQSxNQUNOLFVBQVU7QUFBQSxJQUNaO0FBQUE7QUFBQSxJQUVBLEtBQUs7QUFBQSxNQUNILEVBQUUsTUFBTSxTQUFTLE1BQU0sVUFBVTtBQUFBLE1BQ2pDLEVBQUUsTUFBTSxZQUFZLE1BQU0sWUFBWTtBQUFBLElBQ3hDO0FBQUEsSUFFQSxTQUFTO0FBQUEsTUFDUDtBQUFBLFFBQ0UsTUFBTTtBQUFBLFFBQ04sT0FBTyxDQUFDLEVBQUUsTUFBTSxnQkFBZ0IsTUFBTSxVQUFVLENBQUM7QUFBQSxNQUNuRDtBQUFBLE1BQ0E7QUFBQSxRQUNFLE1BQU07QUFBQSxRQUNOLE9BQU87QUFBQSxVQUNMLEVBQUUsTUFBTSxTQUFTLE1BQU0sdUJBQXVCO0FBQUEsVUFDOUMsRUFBRSxNQUFNLGtCQUFrQixNQUFNLGdDQUFnQztBQUFBLFVBQ2hFLEVBQUUsTUFBTSxVQUFVLE1BQU0sd0JBQXdCO0FBQUEsVUFDaEQsRUFBRSxNQUFNLFNBQVMsTUFBTSx1QkFBdUI7QUFBQSxVQUM5QyxFQUFFLE1BQU0sV0FBVyxNQUFNLHlCQUF5QjtBQUFBLFVBQ2xELEVBQUUsTUFBTSxjQUFjLE1BQU0sNEJBQTRCO0FBQUEsVUFDeEQsRUFBRSxNQUFNLFlBQVksTUFBTSwwQkFBMEI7QUFBQSxRQUN0RDtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsSUFFQSxhQUFhO0FBQUEsTUFDWCxFQUFFLE1BQU0sV0FBVyxNQUFNLGlDQUFpQztBQUFBLE1BQzFELEVBQUUsTUFBTSxXQUFXLE1BQU0sZ0NBQWdDO0FBQUEsSUFDM0Q7QUFBQSxFQUNGO0FBQUEsRUFDQSxNQUFNO0FBQUEsSUFDSixjQUFjO0FBQUEsTUFDWixTQUFTLENBQUMsV0FBVztBQUFBLE1BQ3JCLFNBQVMsQ0FBQyxPQUFPO0FBQUEsSUFDbkI7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLEtBQUs7QUFBQSxRQUNILFNBQVM7QUFBQSxNQUNYO0FBQUEsSUFDRjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsT0FBTztBQUFBLFFBQ0wsMkJBQTJCLFFBQVEsa0NBQVcsbUNBQW1DO0FBQUEsTUFDbkY7QUFBQSxNQUNBLFFBQVEsQ0FBQyxPQUFPO0FBQUEsSUFDbEI7QUFBQSxFQUNGO0FBQUEsRUFDQSxLQUFLO0FBQUEsSUFDSCxHQUFHO0FBQUEsRUFDTDtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== diff --git a/docs/.vitepress/theme/TresLayout.vue b/docs/.vitepress/theme/TresLayout.vue index 15c65b81..c61001ab 100644 --- a/docs/.vitepress/theme/TresLayout.vue +++ b/docs/.vitepress/theme/TresLayout.vue @@ -1,5 +1,4 @@ \ No newline at end of file + diff --git a/docs/.vitepress/theme/components/DepthOfFieldDemo.vue b/docs/.vitepress/theme/components/DepthOfFieldDemo.vue deleted file mode 100644 index 66ec50d8..00000000 --- a/docs/.vitepress/theme/components/DepthOfFieldDemo.vue +++ /dev/null @@ -1,78 +0,0 @@ - - - diff --git a/docs/.vitepress/theme/components/DocsDemo.vue b/docs/.vitepress/theme/components/DocsDemo.vue index 15ae834e..fea9897b 100644 --- a/docs/.vitepress/theme/components/DocsDemo.vue +++ b/docs/.vitepress/theme/components/DocsDemo.vue @@ -8,8 +8,8 @@ style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;" > - + - + - \ No newline at end of file + diff --git a/docs/.vitepress/theme/components/Ducky.vue b/docs/.vitepress/theme/components/Ducky.vue new file mode 100644 index 00000000..8de0f1a0 --- /dev/null +++ b/docs/.vitepress/theme/components/Ducky.vue @@ -0,0 +1,10 @@ + + + diff --git a/docs/.vitepress/theme/components/LoveVueThreeJS.vue b/docs/.vitepress/theme/components/LoveVueThreeJS.vue index 6b6f14c4..7818d06f 100644 --- a/docs/.vitepress/theme/components/LoveVueThreeJS.vue +++ b/docs/.vitepress/theme/components/LoveVueThreeJS.vue @@ -1,10 +1,10 @@ - - diff --git a/docs/.vitepress/theme/components/BloomDemo.vue b/docs/.vitepress/theme/components/pmdrs/BloomDemo.vue similarity index 86% rename from docs/.vitepress/theme/components/BloomDemo.vue rename to docs/.vitepress/theme/components/pmdrs/BloomDemo.vue index acd1ac03..524f2a1c 100644 --- a/docs/.vitepress/theme/components/BloomDemo.vue +++ b/docs/.vitepress/theme/components/pmdrs/BloomDemo.vue @@ -1,11 +1,11 @@ + + diff --git a/docs/.vitepress/theme/components/GlitchDemo.vue b/docs/.vitepress/theme/components/pmdrs/GlitchDemo.vue similarity index 86% rename from docs/.vitepress/theme/components/GlitchDemo.vue rename to docs/.vitepress/theme/components/pmdrs/GlitchDemo.vue index a0cbc03a..7a6b7018 100644 --- a/docs/.vitepress/theme/components/GlitchDemo.vue +++ b/docs/.vitepress/theme/components/pmdrs/GlitchDemo.vue @@ -1,17 +1,16 @@ + + diff --git a/docs/.vitepress/theme/components/PixelationDemo.vue b/docs/.vitepress/theme/components/pmdrs/PixelationDemo.vue similarity index 90% rename from docs/.vitepress/theme/components/PixelationDemo.vue rename to docs/.vitepress/theme/components/pmdrs/PixelationDemo.vue index 198e1951..941feee7 100644 --- a/docs/.vitepress/theme/components/PixelationDemo.vue +++ b/docs/.vitepress/theme/components/pmdrs/PixelationDemo.vue @@ -1,10 +1,9 @@ + + diff --git a/docs/.vitepress/theme/components/three/HalftoneThreeDemo.vue b/docs/.vitepress/theme/components/three/HalftoneThreeDemo.vue new file mode 100644 index 00000000..6eb5c60e --- /dev/null +++ b/docs/.vitepress/theme/components/three/HalftoneThreeDemo.vue @@ -0,0 +1,54 @@ + + + diff --git a/docs/.vitepress/theme/components/three/PixelationThreeDemo.vue b/docs/.vitepress/theme/components/three/PixelationThreeDemo.vue new file mode 100644 index 00000000..f4463d4d --- /dev/null +++ b/docs/.vitepress/theme/components/three/PixelationThreeDemo.vue @@ -0,0 +1,54 @@ + + + diff --git a/docs/.vitepress/theme/components/three/SMAAThreeDemo.vue b/docs/.vitepress/theme/components/three/SMAAThreeDemo.vue new file mode 100644 index 00000000..98cdf416 --- /dev/null +++ b/docs/.vitepress/theme/components/three/SMAAThreeDemo.vue @@ -0,0 +1,53 @@ + + + diff --git a/docs/.vitepress/theme/components/three/UnrealBloomThreeDemo.vue b/docs/.vitepress/theme/components/three/UnrealBloomThreeDemo.vue new file mode 100644 index 00000000..c8839336 --- /dev/null +++ b/docs/.vitepress/theme/components/three/UnrealBloomThreeDemo.vue @@ -0,0 +1,52 @@ + + + diff --git a/docs/.vitepress/theme/composables/useRouteDisposal.ts b/docs/.vitepress/theme/composables/useRouteDisposal.ts index 5bb3712d..8edb6366 100644 --- a/docs/.vitepress/theme/composables/useRouteDisposal.ts +++ b/docs/.vitepress/theme/composables/useRouteDisposal.ts @@ -1,6 +1,6 @@ -import { ref, watch } from 'vue' +import type { EffectComposer } from '@tresjs/post-processing/pmndrs' import { useRouter } from 'vitepress' -import type { EffectComposer } from '@tresjs/post-processing' +import { ref, watch } from 'vue' export function useRouteDisposal() { const router = useRouter() @@ -14,4 +14,4 @@ export function useRouteDisposal() { return { effectComposer, } -} \ No newline at end of file +} diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 65c460e6..f6112853 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,9 +1,9 @@ // https://vitepress.dev/guide/custom-theme -import 'uno.css' import Theme from 'vitepress/theme' +import TresLayout from './TresLayout.vue' import './style.css' -import TresLayout from './TresLayout.vue' +import 'uno.css' export default { ...Theme, diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 6db8cc0f..a77ee8ce 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -60,4 +60,8 @@ .VPNavBarTitle .logo { height: 16px !important; -} \ No newline at end of file +} + +img { + border-radius: 8px; +} diff --git a/docs/components.d.ts b/docs/components.d.ts index d3ee93cc..15443dae 100644 --- a/docs/components.d.ts +++ b/docs/components.d.ts @@ -1,23 +1,31 @@ /* eslint-disable */ -/* prettier-ignore */ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 export {} +/* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default'] - BloomDemo: typeof import('./.vitepress/theme/components/BloomDemo.vue')['default'] - DepthOfFieldDemo: typeof import('./.vitepress/theme/components/DepthOfFieldDemo.vue')['default'] + BloomDemo: typeof import('./.vitepress/theme/components/pmdrs/BloomDemo.vue')['default'] + copy: typeof import('./.vitepress/theme/components/three/HalftoneThreeDemo copy.vue')['default'] + DepthOfFieldDemo: typeof import('./.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue')['default'] DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default'] - GlitchDemo: typeof import('./.vitepress/theme/components/GlitchDemo.vue')['default'] + Ducky: typeof import('./.vitepress/theme/components/Ducky.vue')['default'] + GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default'] + GlitchThreeDemo: typeof import('./.vitepress/theme/components/three/GlitchThreeDemo.vue')['default'] + GlitchTreeDemo: typeof import('./.vitepress/theme/components/three/GlitchTreeDemo.vue')['default'] + HalftoneThreeDemo: typeof import('./.vitepress/theme/components/three/HalftoneThreeDemo.vue')['default'] LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default'] - NoiseDemo: typeof import('./.vitepress/theme/components/NoiseDemo.vue')['default'] - OutlineDemo: typeof import('./.vitepress/theme/components/OutlineDemo.vue')['default'] - PixelationDemo: typeof import('./.vitepress/theme/components/PixelationDemo.vue')['default'] + NoiseDemo: typeof import('./.vitepress/theme/components/pmdrs/NoiseDemo.vue')['default'] + OutlineDemo: typeof import('./.vitepress/theme/components/pmdrs/OutlineDemo.vue')['default'] + PixelationDemo: typeof import('./.vitepress/theme/components/pmdrs/PixelationDemo.vue')['default'] + PixelationThreeDemo: typeof import('./.vitepress/theme/components/three/PixelationThreeDemo.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] - VignetteDemo: typeof import('./.vitepress/theme/components/VignetteDemo.vue')['default'] + SMAAThreeDemo: typeof import('./.vitepress/theme/components/three/SMAAThreeDemo.vue')['default'] + UnrealBloomThreeDemo: typeof import('./.vitepress/theme/components/three/UnrealBloomThreeDemo.vue')['default'] + VignetteDemo: typeof import('./.vitepress/theme/components/pmdrs/VignetteDemo.vue')['default'] } } diff --git a/docs/guide/index.md b/docs/guide/index.md index af7318be..1eb572b3 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -1,12 +1,14 @@ # Post-processing -![Post-processing banner](/banner.png) +> Apply post-processing effects to your 3D scenes with ease. -> Post-processing, in simple terms, consist in applying visual effects to your 3D scenes after they have been rendered. It allows you to add beautiful effects such as depth-of-field, bloom, motion blur, and many more. These effects can greatly enhance the overall look and feel of your projects, making them more immersive and visually captivating. +![Post-processing banner](/tres-post-processing-banner.png) -The `post-processing` package leverages the excellent work done by the pmndrs [postprocessing](https://github.com/pmndrs/postprocessing) package , providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful. +Post-processing, in simple terms, consist in applying visual effects to your 3D scenes after they have been rendered. It allows you to add beautiful effects such as depth-of-field, bloom, motion blur, and many more. -Because Post-processing, is not an easy task, fortunate now it is 😜. +The `post-processing` package leverages both the excellent work done by the pmndrs [postprocessing](https://github.com/pmndrs/postprocessing) package and native [Three.js post-processing effects](https://threejs.org/examples/?q=postprocessing#webgl_postprocessing). Providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful. + +Post-processing used to be not an easy task, but fortunately, now it is. 😜 ::: info This package is not required to use with the core library, but it can make your DX significally better, specially for complex scenes. @@ -32,20 +34,40 @@ pnpm add @tresjs/post-processing ## Basic Usage -```ts -import { EffectComposer, DepthOfField, Bloom } from '@tresjs/post-processing' +You can import post-processing effects from both pmndrs and native Three.js. + +### Using native Three.js effects + +```html + + + ``` -Now you can use the `EffectComposer` component in your scene. +### Using pmndrs effects ```html + + ``` diff --git a/docs/guide/effects/bloom.md b/docs/guide/pmndrs/bloom.md similarity index 92% rename from docs/guide/effects/bloom.md rename to docs/guide/pmndrs/bloom.md index b7680ffe..fecdb52c 100644 --- a/docs/guide/effects/bloom.md +++ b/docs/guide/pmndrs/bloom.md @@ -10,7 +10,7 @@ Bloom is an effect that simulates the way that bright objects in the real world ```vue