wip

playground/src/pages/three.vue

@@ -1,7 +1,7 @@
 <!-- TODO move component -->
 <script lang="ts" setup>
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposerThree } from '@tresjs/post-processing'
+import { EffectComposerThree, PixelationThree } from '@tresjs/post-processing'
 import { OrbitControls } from '@tresjs/cientos'
 </script>
 
@@ -31,6 +31,8 @@ import { OrbitControls } from '@tresjs/cientos'
 
     <TresGridHelper />
 
-    <EffectComposerThree />
+    <EffectComposerThree>
+      <PixelationThree />
+    </EffectComposerThree>
   </TresCanvas>
 </template>

src/core/injectionKeys.ts

@@ -1,3 +1,4 @@
+// TODO move
 import type { EffectComposer } from 'postprocessing'
 import type { InjectionKey, ShallowRef } from 'vue'
 

src/core/three/EffectComposer.vue

@@ -1,11 +1,17 @@
-<script lang="ts" setup>
+<script lang="ts">
 import { useDevicePixelRatio } from '@vueuse/core'
 import { useLoop, useTresContext } from '@tresjs/core'
 import { EffectComposer as EffectComposerThreejs } from 'three/addons/postprocessing/EffectComposer.js'
-import { type ShallowRef, onUnmounted, shallowRef, watchEffect } from 'vue'
+import { type InjectionKey, type ShallowRef, onUnmounted, provide, shallowRef, watchEffect } from 'vue'
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'
 
+export const effectComposerInjectionKey: InjectionKey<ShallowRef<EffectComposerThreejs | null>> = Symbol('effectComposerThree')
+</script>
+
+<script lang="ts" setup>
 const effectComposer: ShallowRef<EffectComposerThreejs | null> = shallowRef(null)
+provide(effectComposerInjectionKey, effectComposer)
+
 defineExpose({ composer: effectComposer })
 
 const { renderer, sizes, scene, camera } = useTresContext()

src/core/three/Pixelation.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js'
+import { inject } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { effectComposerInjectionKey } from './EffectComposer.vue'
+
+// TODO props
+
+const composer = inject(effectComposerInjectionKey)
+const { scene, camera } = useTresContext()
+
+const renderPixelatedPass = new RenderPixelatedPass(16, scene.value, camera.value!)
+
+composer!.value!.addPass(renderPixelatedPass) // TODO move to composable
+</script>

src/index.ts

@@ -2,6 +2,7 @@ import Bloom from './core/effects/Bloom.vue'
 import DepthOfField from './core/effects/DepthOfField.vue'
 import EffectComposer from './core/EffectComposer.vue'
 import EffectComposerThree from './core/three/EffectComposer.vue'
+import PixelationThree from './core/three/Pixelation.vue'
 import Glitch from './core/effects/Glitch.vue'
 import Outline from './core/effects/Outline.vue'
 import Pixelation from './core/effects/Pixelation.vue'
@@ -21,4 +22,5 @@ export {
   Vignette,
   useEffect,
   EffectComposerThree,
+  PixelationThree,
 }