docs: updated docs to breaking changes

Tresjs · Dec 31, 2024 · a9ac84e · a9ac84e
1 parent 62a69c2
commit a9ac84e
Show file tree

Hide file tree

Showing 26 changed files with 79 additions and 77 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -88,7 +88,7 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        '@tresjs/post-processing/three': resolve(__dirname, '../../src/core/three'),
+        '@tresjs/post-processing': resolve(__dirname, '../../src/core/three'),
         '@tresjs/post-processing/pmndrs': resolve(__dirname, '../../src/core/pmndrs'),
       },
       dedupe: ['three', '@tresjs/core'],

diff --git a/docs/.vitepress/theme/components/pmdrs/BloomDemo.vue b/docs/.vitepress/theme/components/pmdrs/BloomDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { Bloom, EffectComposer } from '@tresjs/post-processing/pmndrs'
+import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 import { BlendFunction } from 'postprocessing'
 import { Color } from 'three'
 import { reactive } from 'vue'
@@ -48,9 +48,9 @@ const { effectComposer } = useRouteDisposal()
       :intensity="1"
     />
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Bloom v-bind="bloomParams" />
-      </EffectComposer>
+      <EffectComposerPmndrs ref="effectComposer">
+        <BloomPmndrs v-bind="bloomParams" />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue b/docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { Backdrop } from '@tresjs/cientos'
-import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
+import { DepthOfFieldPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 import '@tresjs/leches/styles'
 
 import Ducky from '../Ducky.vue'
@@ -57,12 +58,12 @@ const effectParams = ref({
       cast-shadow
     />
 
-    <EffectComposer ref="effectComposer">
-      <DepthOfField
+    <EffectComposerPmndrs ref="effectComposer">
+      <DepthOfFieldPmndrs
         :bokeh-scale="effectParams.bokehScale"
         :focus-distance="effectParams.focusDistance"
         :focus-range="effectParams.focusRange"
       />
-    </EffectComposer>
+    </EffectComposerPmndrs>
   </TresCanvas>
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/GlitchDemo.vue b/docs/.vitepress/theme/components/pmdrs/GlitchDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Text3D } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
 
 import { Color } from 'three'
 
@@ -44,9 +44,9 @@ const { effectComposer } = useRouteDisposal()
       :intensity="1"
     />
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Glitch />
-      </EffectComposer>
+      <EffectComposerPmndrs ref="effectComposer">
+        <GlitchPmndrs />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/NoiseDemo.vue b/docs/.vitepress/theme/components/pmdrs/NoiseDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Noise } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, NoisePmndrs } from '@tresjs/post-processing'
 import { BlendFunction } from 'postprocessing'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
@@ -27,12 +27,12 @@ const { effectComposer } = useRouteDisposal()
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Noise
+      <EffectComposerPmndrs ref="effectComposer">
+        <NoisePmndrs
           premultiply
           :blend-function="BlendFunction.SCREEN"
         />
-      </EffectComposer>
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/OutlineDemo.vue b/docs/.vitepress/theme/components/pmdrs/OutlineDemo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Outline } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
 import type { Intersection, Object3D } from 'three'
 import { NoToneMapping } from 'three'
 import { ref } from 'vue'
@@ -58,16 +58,15 @@ const toggleMeshSelectionState = ({ object }: Intersection) => {
       :intensity="1"
     />
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Outline
+      <EffectComposerPmndrs ref="effectComposer">
+        <OutlinePmndrs
           :outlined-objects="outlinedObjects"
-
           :edge-strength="200000"
           :pulse-speed="2"
           visible-edge-color="#ffff00"
           :kernel-size="3"
         />
-      </EffectComposer>
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/PixelationDemo.vue b/docs/.vitepress/theme/components/pmdrs/PixelationDemo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Pixelation } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, PixelationPmndrs } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
@@ -46,9 +46,9 @@ const { effectComposer } = useRouteDisposal()
     />
 
     <Suspense>
-      <EffectComposer ref="effectComposer">
-        <Pixelation :granularity="8" />
-      </EffectComposer>
+      <EffectComposerPmndrs ref="effectComposer">
+        <PixelationPmndrs :granularity="8" />
+      </EffectComposerPmndrs>
     </Suspense>
   </TresCanvas>
 </template>
diff --git a/docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue b/docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing/pmndrs'
+import { DepthOfFieldPmndrs, EffectComposerPmndrs, VignettePmndrs } from '@tresjs/post-processing'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
@@ -29,10 +29,10 @@ const { effectComposer } = useRouteDisposal()
     <Suspense>
       <BlenderCube />
     </Suspense>
-    <EffectComposer ref="effectComposer">
-      <DepthOfField :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
-      <Vignette :darkness="0.9" :offset="0.3" />
-    </EffectComposer>
+    <EffectComposerPmndrs ref="effectComposer">
+      <DepthOfFieldPmndrs :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
+      <VignettePmndrs :darkness="0.9" :offset="0.3" />
+    </EffectComposerPmndrs>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>
diff --git a/docs/.vitepress/theme/components/three/GlitchThreeDemo.vue b/docs/.vitepress/theme/components/three/GlitchThreeDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Text3D } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Glitch } from '@tresjs/post-processing/three'
+import { EffectComposer, Glitch } from '@tresjs/post-processing'
 
 import { Color } from 'three'
 

diff --git a/docs/.vitepress/theme/components/three/HalftoneThreeDemo.vue b/docs/.vitepress/theme/components/three/HalftoneThreeDemo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Halftone } from '@tresjs/post-processing/three'
+import { EffectComposer, Halftone } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
 

diff --git a/docs/.vitepress/theme/components/three/PixelationThreeDemo.vue b/docs/.vitepress/theme/components/three/PixelationThreeDemo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Pixelation } from '@tresjs/post-processing/three'
+import { EffectComposer, Pixelation } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
 

diff --git a/docs/.vitepress/theme/components/three/SMAAThreeDemo.vue b/docs/.vitepress/theme/components/three/SMAAThreeDemo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, SMAA } from '@tresjs/post-processing/three'
+import { EffectComposer, SMAA } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
 

diff --git a/docs/.vitepress/theme/components/three/UnrealBloomThreeDemo.vue b/docs/.vitepress/theme/components/three/UnrealBloomThreeDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, UnrealBloom } from '@tresjs/post-processing/three'
+import { EffectComposer, UnrealBloom } from '@tresjs/post-processing'
 import { Color } from 'three'
 import { reactive } from 'vue'
 

diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -34,13 +34,13 @@ pnpm add @tresjs/post-processing
 
 ## Basic Usage
 
-You can import post-processing effects from both pmndrs and native Three.js.
+You can import post-processing effects from both pmndrs and native Three.js. All effects are now available under the unified `@tresjs/post-processing` namespace.
 
 ### Using native Three.js effects
 
 ```html
 <script setup lang="ts">
-  import { EffectComposer, UnrealBloom, Glitch } from '@tresjs/post-processing/three'
+  import { EffectComposer, UnrealBloom, Glitch } from '@tresjs/post-processing'
 </script>
 
 <template>
@@ -54,20 +54,22 @@ You can import post-processing effects from both pmndrs and native Three.js.
 </template>
 ```
 
-### Using pmndrs effects
+### Using Pmndrs effects
+
+You can also use Pmndrs `postprocessing` effects, but you need to use the `EffectComposerPmndrs` component instead of `EffectComposer` and suffix the effects with `Pmndrs`.
 
 ```html
 <script setup lang="ts">
-  import { EffectComposer, Bloom, Glitch } from '@tresjs/post-processing/pmndrs'
+  import { EffectComposerPmndrs, BloomPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
   <TresCanvas shadows alpha>
     <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
-    <EffectComposer>
-      <Bloom />
-      <Glitch />
-    </EffectComposer>
+    <EffectComposerPmndrs>
+      <BloomPmndrs />
+      <GlitchPmndrs />
+    </EffectComposerPmndrs>
   </TresCanvas>
 </template>
 ```
diff --git a/docs/guide/pmndrs/bloom.md b/docs/guide/pmndrs/bloom.md
@@ -10,19 +10,19 @@ Bloom is an effect that simulates the way that bright objects in the real world
 
 ```vue
 <script setup lang="ts">
-import { Bloom, EffectComposer } from '@tresjs/post-processing/pmndrs'
+import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposer>
-    <Bloom
+  <EffectComposerPmndrs>
+    <BloomPmndrs
       :radius="0.85"
       :intensity="4.0"
       :luminance-threshold="0.1"
       :luminance-smoothing="0.3"
       mipmap-blur
     />
-  </EffectComposer>
+  </EffectComposerPmndrs>
 </template>
 ```
 

diff --git a/docs/guide/pmndrs/depth-of-field.md b/docs/guide/pmndrs/depth-of-field.md
@@ -12,13 +12,13 @@ This photographic technique allows photographers and filmmakers to draw attentio
 
 ```vue
 <script setup lang="ts">
-import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
+import { DepthOfFieldPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposer>
-    <DepthOfField />
-  </EffectComposer>
+  <EffectComposerPmndrs>
+    <DepthOfFieldPmndrs />
+  </EffectComposerPmndrs>
 </template>
 ```
 

diff --git a/docs/guide/pmndrs/glitch.md b/docs/guide/pmndrs/glitch.md
@@ -16,13 +16,13 @@ This effect may potentially cause epileptic seizures in people with photosensiti
 
 ```vue
 <script setup lang="ts">
-import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposer>
-    <Glitch />
-  </EffectComposer>
+  <EffectComposerPmndrs>
+    <GlitchPmndrs />
+  </EffectComposerPmndrs>
 </template>
 ```
 

diff --git a/docs/guide/pmndrs/noise.md b/docs/guide/pmndrs/noise.md
@@ -10,18 +10,18 @@ Noise is an effect that adds Gaussian noise to the scene. This can be used to si
 
 ```vue
 <script setup lang="ts">
-import { Bloom, EffectComposer } from '@tresjs/post-processing/pmndrs'
+import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
 
 import { BlendFunction } from 'postprocessing'
 </script>
 
 <template>
-  <EffectComposer>
-    <Noise
+  <EffectComposerPmndrs>
+    <NoisePmndrs
       premultiply
       :blend-function="BlendFunction.SCREEN"
     />
-  </EffectComposer>
+  </EffectComposerPmndrs>
 </template>
 ```
 

diff --git a/docs/guide/pmndrs/outline.md b/docs/guide/pmndrs/outline.md
@@ -10,13 +10,13 @@ Outline is an effect that applies an outline to objects in your scene. This effe
 
 ```vue
 <script setup lang="ts">
-import { EffectComposer, Outline } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposer>
-    <Outline />
-  </EffectComposer>
+  <EffectComposerPmndrs>
+    <OutlinePmndrs />
+  </EffectComposerPmndrs>
 </template>
 ```
 

diff --git a/docs/guide/pmndrs/pixelation.md b/docs/guide/pmndrs/pixelation.md
@@ -10,13 +10,13 @@ Pixelation is an effect that pixelates the scene.
 
 ```vue
 <script setup lang="ts">
-import { EffectComposer, Pixelation } from '@tresjs/post-processing/pmndrs'
+import { EffectComposerPmndrs, PixelationPmndrs } from '@tresjs/post-processing'
 </script>
 
 <template>
-  <EffectComposer>
-    <Pixelation />
-  </EffectComposer>
+  <EffectComposerPmndrs>
+    <PixelationPmndrs />
+  </EffectComposerPmndrs>
 </template>
 ```