feat: native threejs effects (#121)

* added EffectComposer and some debugging files

* wip

* added composable

* cleanup

* added more props to native pixelation effect

* restructured playground

* added glitch Effect

* added glitch effect

* renamed folder

* added check to prevent console warning

* added smaa effect

* added output pass

* moved injectionKey

* added prop to EffectComposer

* added halftone effect

* added unreal bloom effect

* removed obsolete computed

* added on demand rendering support

* lint fixes

* added enabled prop to effect composer component

* removed obsolete code

* eslint stuff

* rebuilt pnpm lock file

* moved files

* type fixes and removed dependency

* added renderer invalidation to glitch effects

* added invalidation for noise effect

* lint fix

---------

Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

Author: Tinoooo

docs/.vitepress/config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vitepress'
-import { resolve } from 'pathe'
 import { templateCompilerOptions } from '@tresjs/core'
+import { resolve } from 'pathe'
+import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({

docs/.vitepress/theme/components/BloomDemo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Color } from 'three'
-import { reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { BlendFunction } from 'postprocessing'
 import { Bloom, EffectComposer } from '@tresjs/post-processing'
+import { BlendFunction } from 'postprocessing'
+import { Color } from 'three'
+import { reactive } from 'vue'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/DepthOfFieldDemo.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { gsap } from 'gsap'
 import { TresCanvas } from '@tresjs/core'
 import { DepthOfField, EffectComposer } from '@tresjs/post-processing'
+import { gsap } from 'gsap'
+import { ref } from 'vue'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/GlitchDemo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Color } from 'three'
-import { TresCanvas } from '@tresjs/core'
 import { Text3D } from '@tresjs/cientos'
-
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Glitch } from '@tresjs/post-processing'
 
+import { Color } from 'three'
+
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
 const gl = {

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -2,9 +2,9 @@
 /// <reference types="vite-svg-loader" />
 import { gsap } from 'gsap'
 import { onMounted, ref } from 'vue'
-import Triangle from '../assets/triangle.svg'
 import SecondRow from '../assets/second-row.svg'
 import ThirdRow from '../assets/third-row.svg'
+import Triangle from '../assets/triangle.svg'
 
 const triangleRef = ref()
 const secondRowRef = ref()

docs/.vitepress/theme/components/NoiseDemo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { EffectComposer, Noise } from '@tresjs/post-processing'
-import { OrbitControls } from '@tresjs/cientos'
 import { BlendFunction } from 'postprocessing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/OutlineDemo.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import type { Intersection, Object3D } from 'three'
-import { NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
 import { EffectComposer, Outline } from '@tresjs/post-processing'
 import { KernelSize } from 'postprocessing'
+import { NoToneMapping } from 'three'
 
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
-
+import { ref } from 'vue'
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
+import '@tresjs/leches/styles'
+
 const gl = {
   clearColor: '#121212',
   toneMapping: NoToneMapping,

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Pixelation } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'

docs/.vitepress/theme/components/VignetteDemo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/composables/useRouteDisposal.ts

@@ -1,6 +1,6 @@
-import { ref, watch } from 'vue'
-import { useRouter } from 'vitepress'
 import type { EffectComposer } from '@tresjs/post-processing'
+import { useRouter } from 'vitepress'
+import { ref, watch } from 'vue'
 
 export function useRouteDisposal() {
   const router = useRouter()