feat(post-processing): pixelation effect (#68)

* feat: added pixelation effect component

* chore: added playground code for pixelation effect

* docs: pixelation effect docs

* chore: removed debug code

Author: Tinoooo

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' },
         ],
       },
     ],

docs/.vitepress/theme/components/PixelationDemo.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { Color } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { EffectComposer, Pixelation } from '@tresjs/post-processing'
+
+const boxWidth = 2
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#121212"
+    :alpha="false"
+    :shadows="true"
+    :disable-render="true"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh
+      :position="[1, 0.5, 1]"
+    >
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial
+        color="hotpink"
+      />
+    </TresMesh>
+    <TresMesh
+      :position="[-1.5, 0.75, 0]"
+    >
+      <TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
+      <TresMeshNormalMaterial />
+      <TresMeshStandardMaterial
+        color="aqua"
+      />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="0.9" />
+    <TresDirectionalLight
+      :position="[-10, 5, 8]"
+      :intensity="1"
+    />
+
+    <Suspense>
+      <EffectComposer>
+        <Pixelation :granularity="8" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>
+

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']
   }

docs/guide/effects/pixelation.md

@@ -0,0 +1,30 @@
+# Pixelation
+
+<DocsDemo>
+  <PixelationDemo />
+</DocsDemo>
+
+Pixelation is an effect that pixelates the scene.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { EffectComposer, Pixelation } from '@tresjs/post-processing'
+</script>
+
+<template>
+  <EffectComposer>
+    <Pixelation />
+  </EffectComposer>
+</template>
+```
+
+## 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)

playground/src/pages/pixelation.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { EffectComposer, Pixelation } from '@tresjs/post-processing'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+useControls('fpsgraph')
+const { granularity } = useControls({
+  granularity: {
+    value: 10,
+    min: 1,
+    max: 30,
+    step: 1,
+  },
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh
+      :position="[-3.5, 1, 0]"
+    >
+      <TresConeGeometry :args="[1.25, 2, 4, 1, false, Math.PI * 0.25]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresMesh :position="[0, 1, 0]">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresMesh :position="[3.5, 1, 0]">
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresGridHelper />
+
+    <EffectComposer>
+      <Pixelation :granularity="granularity" />
+    </EffectComposer>
+  </TresCanvas>
+</template>

playground/src/router.ts

@@ -20,6 +20,7 @@ const routes = [
   makeRoute('Outline'),
   makeRoute('Glitch'),
   makeRoute('Depth of Field'),
+  makeRoute('Pixelation'),
 ]
 
 export const router = createRouter({

src/core/effects/Pixelation.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { PixelationEffect } from 'postprocessing'
+import { useEffect } from '../composables/effect'
+import { makePropWatchersUsingAllProps } from '../../util/prop'
+
+export interface PixelationProps {
+  /**
+   * The pixel granularity.
+   */
+  granularity?: number
+}
+
+const props = defineProps<PixelationProps>()
+
+const { pass, effect } = useEffect(() => new PixelationEffect(props.granularity))
+defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
+
+makePropWatchersUsingAllProps(
+  props,
+  effect,
+  () => new PixelationEffect(),
+)
+</script>
+
+<template></template>

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,
+}