diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index f528c0bf..9a1f831e 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -32,6 +32,7 @@ export default defineConfig({
{ text: 'Depth of Field', link: '/guide/effects/depth-of-field' },
{ text: 'Glitch', link: '/guide/effects/glitch' },
{ text: 'Outline', link: '/guide/effects/outline' },
+ { text: 'Pixelation', link: '/guide/effects/pixelation' },
],
},
],
diff --git a/docs/.vitepress/theme/components/PixelationDemo.vue b/docs/.vitepress/theme/components/PixelationDemo.vue
new file mode 100644
index 00000000..f5f58684
--- /dev/null
+++ b/docs/.vitepress/theme/components/PixelationDemo.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 4d396b81..ee5f823e 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
GlitchDemo: typeof import('./.vitepress/theme/components/GlitchDemo.vue')['default']
LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
OutlineDemo: typeof import('./.vitepress/theme/components/OutlineDemo.vue')['default']
+ PixelationDemo: typeof import('./.vitepress/theme/components/PixelationDemo.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
diff --git a/docs/guide/effects/pixelation.md b/docs/guide/effects/pixelation.md
new file mode 100644
index 00000000..22c0883e
--- /dev/null
+++ b/docs/guide/effects/pixelation.md
@@ -0,0 +1,30 @@
+# Pixelation
+
+
+
+
+
+Pixelation is an effect that pixelates the scene.
+
+## Usage
+
+```vue
+
+
+
+
+
+
+
+```
+
+## Props
+
+| Prop | Description | Default |
+| ----------- | ------------------------------ | ------- |
+| granularity | The granularity of the pixels. | 30 |
+
+## Further Reading
+see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/PixelationEffect.js~PixelationEffect.html)
\ No newline at end of file
diff --git a/playground/src/pages/pixelation.vue b/playground/src/pages/pixelation.vue
new file mode 100644
index 00000000..efd6158f
--- /dev/null
+++ b/playground/src/pages/pixelation.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/playground/src/router.ts b/playground/src/router.ts
index d050265d..a8264695 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -20,6 +20,7 @@ const routes = [
makeRoute('Outline'),
makeRoute('Glitch'),
makeRoute('Depth of Field'),
+ makeRoute('Pixelation'),
]
export const router = createRouter({
diff --git a/src/core/effects/Pixelation.vue b/src/core/effects/Pixelation.vue
new file mode 100644
index 00000000..c7a103ee
--- /dev/null
+++ b/src/core/effects/Pixelation.vue
@@ -0,0 +1,25 @@
+
+
+
diff --git a/src/index.ts b/src/index.ts
index 722678d1..4b914dd9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,16 @@
import Bloom from './core/effects/Bloom.vue'
import Glitch from './core/effects/Glitch.vue'
import Outline from './core/effects/Outline.vue'
+import Pixelation from './core/effects/Pixelation.vue'
import DepthOfField from './core/effects/DepthOfField.vue'
import EffectComposer from './core/EffectComposer.vue'
-export { EffectComposer, Bloom, Outline, Glitch, DepthOfField }
+export {
+ Bloom,
+ Glitch,
+ Outline,
+ Pixelation,
+ DepthOfField,
+ EffectComposer,
+}
diff --git a/stats.html b/stats.html
index 5d5264bc..403aae32 100644
--- a/stats.html
+++ b/stats.html
@@ -4818,7 +4818,7 @@