Merge branch 'main' into renovate/three-0.x

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/bloom.md

@@ -35,7 +35,7 @@ import { EffectComposer, Bloom } from '@tresjs/post-processing'
 | `kernelSize`         | The kernel size.                                                                                     | `KernelSize.LARGE`                                                                                                                             |
 | `luminanceThreshold` | The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1]. | `0.9`                                                                                                                                          |
 | `luminanceSmoothing` | Controls the smoothness of the luminance threshold. Range is [0, 1].                                 | `0.025`                                                                                                                                        |
-| `mipMapBlur`         | Enables mip map blur. (UnrealBloom)                                                                  | `false`                                                                                                                                        |
+| `mipMapBlur`         | Enables mip map blur (UnrealBloom). This prop is not reactive.                                                                 | `false`                                                                                                                                        |
 
 ## Further Reading
 see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html)

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/components/UnrealBloom.vue

@@ -17,7 +17,6 @@ const gl = {
 const bloomParams = reactive({
   luminanceThreshold: 0.2,
   luminanceSmoothing: 0.3,
-  mipmapBlur: true,
   intensity: 4.0,
   blendFunction: BlendFunction.ADD,
 })
@@ -26,7 +25,6 @@ const { pane } = useTweakPane()
 
 pane.addInput(bloomParams, 'luminanceThreshold', { min: 0, max: 1 })
 pane.addInput(bloomParams, 'luminanceSmoothing', { min: 0, max: 1 })
-pane.addInput(bloomParams, 'mipmapBlur')
 pane.addInput(bloomParams, 'intensity', { min: 0, max: 10 })
 
 const materialRef = ref(null)
@@ -77,7 +75,10 @@ onMounted(() => {
     />
     <Suspense>
       <EffectComposer :depth-buffer="true">
-        <Bloom v-bind="bloomParams" />
+        <Bloom
+          v-bind="bloomParams"
+          mipmap-blur
+        />
       </EffectComposer>
     </Suspense>
   </TresCanvas>

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/composables/effect.ts

@@ -0,0 +1,44 @@
+import type { Effect } from 'postprocessing'
+import { EffectPass } from 'postprocessing'
+import { inject, onUnmounted, shallowRef, watchEffect, defineExpose } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { effectComposerInjectionKey } from '../injectionKeys'
+
+export const useEffect = <T extends Effect>( newEffectFunction: () => T) => {
+  const composer = inject(effectComposerInjectionKey)
+  const pass = shallowRef<EffectPass | null>(null)
+  const effect = shallowRef<T | null>(null)
+
+  const { scene, camera } = useTresContext()
+
+  watchEffect(() => {
+    if (!camera.value || !effect?.value) return
+
+    effect.value.mainCamera = camera.value
+  })
+
+  let unwatch = () => {} // seperate declaration prevents error in HMR
+
+  unwatch = watchEffect(() => {
+    if (!camera.value || !composer?.value || !scene.value) return
+
+    unwatch()
+    if (effect.value) return
+
+    effect.value = newEffectFunction()
+    pass.value = new EffectPass(camera.value, effect.value)
+
+    composer.value.addPass(pass.value)
+  })
+
+  onUnmounted(() => {
+    if (pass.value) composer?.value?.removePass(pass.value)
+    effect.value?.dispose()
+    pass.value?.dispose()
+  })
+
+  return {
+    pass,
+    effect,
+  }
+}

src/core/effects/Bloom.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
-import { h, inject, onUnmounted, shallowRef, watchEffect } from 'vue'
+import { BloomEffect } from 'postprocessing'
 import type { KernelSize, BlendFunction } from 'postprocessing'
-import { EffectPass, BloomEffect } from 'postprocessing'
-import { effectComposerInjectionKey } from '../injectionKeys'
+import { useEffect } from '../composables/effect'
+import { makePropWatchers } from '../../util/prop'
 
 export interface BloomProps {
   /**
@@ -59,49 +58,28 @@ export interface BloomProps {
   mipmapBlur?: boolean
 }
 
-const props = defineProps<BloomProps>()
+const props = withDefaults(
+  defineProps<BloomProps>(),
+  {
+    mipmapBlur: undefined,
+  },
+)
 
-const composer = inject(effectComposerInjectionKey)
-const pass = shallowRef<EffectPass | null>(null)
-const effect = shallowRef<BloomEffect | null>(null)
+const { pass, effect } = useEffect(() => new BloomEffect(props))
 
 defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
 
-const { camera } = useTresContext()
-
-const unwatch = watchEffect(() => {
-  if (!camera.value || !composer?.value) return
-
-  unwatch?.()
-  if (effect.value) return
-
-  effect.value = new BloomEffect(props)
-  pass.value = new EffectPass(camera.value, effect.value)
-
-  composer.value.addPass(pass.value)
-})
-
-watchEffect(() => {
-  if (!effect.value) return
-  const plainEffectPass = new BloomEffect()
-
-  // blendFunction is not updated, because it has no setter in BloomEffect
-
-  effect.value.intensity = props.intensity !== undefined ? props.intensity : plainEffectPass.intensity
-  effect.value.kernelSize = props.kernelSize !== undefined ? props.kernelSize : plainEffectPass.kernelSize
-  effect.value.luminanceMaterial.smoothing
-    = props.luminanceSmoothing !== undefined ? props.luminanceSmoothing : plainEffectPass.luminanceMaterial.smoothing
-  effect.value.luminanceMaterial.threshold
-    = props.luminanceThreshold !== undefined ? props.luminanceThreshold : plainEffectPass.luminanceMaterial.threshold
-
-  plainEffectPass.dispose()
-})
-
-onUnmounted(() => {
-  if (pass.value) composer?.value?.removePass(pass.value)
-  effect.value?.dispose()
-  pass.value?.dispose()
-})
+makePropWatchers(
+  [
+    // blendFunction is not updated, because it has no setter in BloomEffect
+    [() => props.intensity, 'intensity'],
+    [() => props.kernelSize, 'kernelSize'],
+    [() => props.luminanceSmoothing, 'luminanceMaterial.smoothing'],
+    [() => props.luminanceThreshold, 'luminanceMaterial.threshold'],
+  ],
+  effect,
+  () => new BloomEffect(),
+)
 </script>
 
 <template></template>

src/core/effects/DepthOfField.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import type { BlendFunction } from 'postprocessing'
 import { useTresContext } from '@tresjs/core'
-import { EffectPass, DepthOfFieldEffect } from 'postprocessing'
-import { inject, onUnmounted, shallowRef, watchEffect } from 'vue'
+import { DepthOfFieldEffect } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
-import { effectComposerInjectionKey } from '../injectionKeys'
+import { useEffect } from '../composables/effect'
 
 export interface DepthOfFieldProps {
   /**
@@ -43,27 +42,10 @@ export interface DepthOfFieldProps {
 }
 
 const props = defineProps<DepthOfFieldProps>()
-
-const composer = inject(effectComposerInjectionKey)
-const pass = shallowRef<EffectPass | null>(null)
-const effect = shallowRef<DepthOfFieldEffect | null>(null)
-
-defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
-
 const { camera } = useTresContext()
-
-const unwatch = watchEffect(() => {
-  if (!camera.value || !composer?.value) return
-
-  unwatch?.()
-
-  if (effect.value) return
-
-  effect.value = new DepthOfFieldEffect(camera.value, props)
-  pass.value = new EffectPass(camera.value, effect.value)
-
-  composer?.value?.addPass(pass.value)
-})
+  
+const { pass, effect } = useEffect(() => new DepthOfFieldEffect(camera.value, props))
+defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
 
 makePropWatchers(
   [
@@ -80,12 +62,6 @@ makePropWatchers(
   effect,
   () => new DepthOfFieldEffect(),
 )
-
-onUnmounted(() => {
-  if (pass.value) composer?.value?.removePass(pass.value)
-  effect.value?.dispose()
-  pass.value?.dispose()
-})
 </script>
 
 <template></template>