Merge branch 'feature/122-sub-modules-for-pmndrs-and-native-component…

…s' of github.com:Tresjs/post-processing into feature/122-sub-modules-for-pmndrs-and-native-components

docs/.vitepress/config.ts

@@ -63,8 +63,9 @@ export default defineConfig({
         items: [
           { text: 'Glitch', link: '/guide/three/glitch' },
           { text: 'Halftone', link: '/guide/three/halftone' },
-          { text: 'SMAA', link: '/guide/three/smaa' },
+          { 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' },
         ],
       },

docs/guide/index.md

@@ -6,7 +6,7 @@
 
 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.
 
-Because Post-processing, is not an easy task, fortunate now it is 😜.
+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.

docs/guide/three/glitch.md

@@ -4,9 +4,9 @@
   <GlitchThreeDemo />
 </DocsDemo>
 
-Glitch is an effect that simulates that simulates digital glitches, which are random or intentional errors that occur in digital media such as images, videos, or audio. 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.
+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.
 
-The native `<Glitch />` pass in TresJS 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.
+The native `<Glitch />` 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.
 
 ::: warning
 This effect may potentially cause epileptic seizures in people with photosensitive epilepsy. Viewer discretion is advised.
@@ -32,3 +32,7 @@ import { EffectComposer, Glitch } from '@tresjs/post-processing/three'
 |---------|--------------------------------------------------------------------------------------------------------------------|---------|
 | `dtSize` | The size of the generated noise map. Will be ignored if a perturbation map is provided. This prop is not reactive. | `64`    |
 | `goWild` | If true, the glitch effect will be more wild 🤪  | `false`
+
+## Further Reading
+
+see [Three.js example](https://threejs.org/examples/?q=glit#webgl_postprocessing_glitch)

docs/guide/three/halftone.md

@@ -34,3 +34,7 @@ import { EffectComposer, Halftone } from '@tresjs/post-processing/three'
 | `blending`    | The blending mode of the halftone effect.                                                         | `1`     |
 | `greyscale`   | If true, the halftone effect will be in greyscale.                                                | `false` |
 | `blendingMode`| The blending mode used for the halftone effect.                                                   | `1`     |
+
+## Further Reading
+
+see [Three.js example](https://threejs.org/examples/?q=halftone#webgl_postprocessing_rgb_halftone)

docs/guide/three/output.md

@@ -0,0 +1,7 @@
+# Output
+
+The `<Output />` is usually the last pass in the chain and performs sRGB color space conversion and tone mapping.
+
+## Further Reading
+
+see [Three.js docs](https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing)

docs/guide/three/pixelation.md

@@ -27,3 +27,7 @@ import { EffectComposer, Pixelation } from '@tresjs/post-processing/three'
 | `pixelSize`         | The size of the pixels. Larger values result in a more pixelated appearance. | `30`    |
 | `depthEdgeStrength` | The strength of the depth edges.                                             | `1.0`   |
 | `normalEdgeStrength`| The strength of the normal edges.                                            | `0.5`   |
+
+## Further Reading
+
+see [Three.js example](https://threejs.org/examples/?q=pixe#webgl_postprocessing_pixel)

docs/guide/three/smaa.md

@@ -27,3 +27,7 @@ import { EffectComposer, SMAA } from '@tresjs/post-processing/three'
 |---------|---------------------------------------------------------------------------------------------------|---------------------------------|
 | `width` | The width of the render target. If not provided, it defaults to the width of the renderer.        |       |
 | `height`| The height of the render target. If not provided, it defaults to the height of the renderer.      |    |
+
+## Further Reading
+
+see [Three.js example](https://threejs.org/examples/?q=smaa#webgl_postprocessing_smaa)

docs/guide/three/unreal-bloom.md

@@ -27,3 +27,7 @@ import { EffectComposer, UnrealBloom } from '@tresjs/post-processing/three'
 | `radius`   | The radius of the bloom effect.                                                                   | `0`     |
 | `strength` | The strength of the bloom effect.                                                                 | `1`     |
 | `threshold`| The threshold luminance for the bloom effect.                                                     | `0`     |
+
+## Further Reading
+
+see [Three.js example](https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom)

package.json

@@ -55,36 +55,36 @@
   },
   "peerDependencies": {
     "@tresjs/core": ">=4.0",
-    "three": ">=0.133",
+    "three": ">=0.169",
     "vue": ">=3.4"
   },
   "dependencies": {
-    "@vueuse/core": "^10.11.0",
-    "postprocessing": "^6.36.0"
+    "@vueuse/core": "^11.1.0",
+    "postprocessing": "^6.36.3"
   },
   "devDependencies": {
-    "@release-it/conventional-changelog": "^8.0.1",
-    "@tresjs/core": "^4.2.2",
-    "@tresjs/eslint-config": "^1.1.0",
-    "@types/three": "^0.167.0",
-    "@unocss/core": "^0.61.5",
-    "@vitejs/plugin-vue": "^5.1.0",
-    "eslint": "^9.7.0",
+    "@release-it/conventional-changelog": "^8.0.2",
+    "@tresjs/core": "^4.3.0",
+    "@tresjs/eslint-config": "^1.4.0",
+    "@types/three": "^0.169.0",
+    "@unocss/core": "^0.63.4",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "eslint": "^9.12.0",
     "gsap": "^3.12.5",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.2",
-    "release-it": "^17.6.0",
+    "release-it": "^17.8.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "three": "^0.167.0",
-    "typescript": "^5.5.4",
-    "unocss": "^0.61.5",
-    "vite": "^5.3.5",
-    "vite-plugin-banner": "^0.7.1",
+    "three": "^0.169.0",
+    "typescript": "^5.6.3",
+    "unocss": "^0.63.4",
+    "vite": "^5.4.8",
+    "vite-plugin-banner": "^0.8.0",
     "vite-plugin-dts": "4.0.0-beta.1",
     "vite-svg-loader": "^5.1.0",
-    "vitepress": "1.3.1",
-    "vue": "^3.4.34",
-    "vue-tsc": "^2.0.29"
+    "vitepress": "1.4.0",
+    "vue": "^3.5.12",
+    "vue-tsc": "^2.1.6"
   }
 }