From e191856b20928f693427135bfecc6f8987e0b49e Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Sat, 13 Jul 2024 12:41:14 +0200 Subject: [PATCH 01/28] added EffectComposer and some debugging files --- playground/src/pages/three.vue | 36 ++++++++++++++++++++++ playground/src/router.ts | 1 + src/core/EffectComposer.vue | 2 ++ src/core/three/EffectComposer.vue | 51 +++++++++++++++++++++++++++++++ src/index.ts | 2 ++ 5 files changed, 92 insertions(+) create mode 100644 playground/src/pages/three.vue create mode 100644 src/core/three/EffectComposer.vue diff --git a/playground/src/pages/three.vue b/playground/src/pages/three.vue new file mode 100644 index 00000000..c7f2fc0c --- /dev/null +++ b/playground/src/pages/three.vue @@ -0,0 +1,36 @@ + + + + diff --git a/playground/src/router.ts b/playground/src/router.ts index 139be94d..bd53b220 100644 --- a/playground/src/router.ts +++ b/playground/src/router.ts @@ -27,6 +27,7 @@ export const routes = [ makeRoute('Bloom', '🌞'), makeRoute('Noise', '📟'), makeRoute('Vignette', 'ðŸ•ķïļ'), + makeRoute('Three', '3'), // TODO move ] export const advancedRoutes = [ diff --git a/src/core/EffectComposer.vue b/src/core/EffectComposer.vue index fe44282b..37f3c99e 100644 --- a/src/core/EffectComposer.vue +++ b/src/core/EffectComposer.vue @@ -79,6 +79,7 @@ const effectComposerParams = computed(() => { const initEffectComposer = () => { if (!renderer.value && !scene.value && !camera.value) { return } + effectComposer.value?.dispose() effectComposer.value = new EffectComposerImpl(renderer.value, effectComposerParams.value) effectComposer.value.addPass(new RenderPass(scene.value, camera.value)) @@ -87,6 +88,7 @@ const initEffectComposer = () => { watch([renderer, scene, camera, () => props.disableNormalPass], () => { if (!sizes.width.value || !sizes.height.value) { return } + initEffectComposer() }) diff --git a/src/core/three/EffectComposer.vue b/src/core/three/EffectComposer.vue new file mode 100644 index 00000000..208bf80a --- /dev/null +++ b/src/core/three/EffectComposer.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/index.ts b/src/index.ts index c7e8ad25..218724e8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,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 Glitch from './core/effects/Glitch.vue' import Outline from './core/effects/Outline.vue' import Pixelation from './core/effects/Pixelation.vue' @@ -19,4 +20,5 @@ export { Pixelation, Vignette, useEffect, + EffectComposerThree, } From 6e3cf34004f993f082b4d31c350efb8a264f946e Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Sun, 14 Jul 2024 22:45:06 +0200 Subject: [PATCH 02/28] wip --- playground/src/pages/three.vue | 6 ++++-- src/core/injectionKeys.ts | 1 + src/core/three/EffectComposer.vue | 10 ++++++++-- src/core/three/Pixelation.vue | 15 +++++++++++++++ src/index.ts | 2 ++ 5 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 src/core/three/Pixelation.vue diff --git a/playground/src/pages/three.vue b/playground/src/pages/three.vue index c7f2fc0c..76e94250 100644 --- a/playground/src/pages/three.vue +++ b/playground/src/pages/three.vue @@ -1,7 +1,7 @@ @@ -31,6 +31,8 @@ import { OrbitControls } from '@tresjs/cientos' - + + + diff --git a/src/core/injectionKeys.ts b/src/core/injectionKeys.ts index c64598b5..7fe8509c 100644 --- a/src/core/injectionKeys.ts +++ b/src/core/injectionKeys.ts @@ -1,3 +1,4 @@ +// TODO move import type { EffectComposer } from 'postprocessing' import type { InjectionKey, ShallowRef } from 'vue' diff --git a/src/core/three/EffectComposer.vue b/src/core/three/EffectComposer.vue index 208bf80a..cdb39a7d 100644 --- a/src/core/three/EffectComposer.vue +++ b/src/core/three/EffectComposer.vue @@ -1,11 +1,17 @@ - + + diff --git a/src/index.ts b/src/index.ts index 218724e8..c17d8b6d 100644 --- a/src/index.ts +++ b/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, } From d2776395c24d1d9213ad5eee40c4a1341e78d365 Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Sun, 18 Aug 2024 19:46:22 +0200 Subject: [PATCH 03/28] added composable --- playground/src/pages/three.vue | 2 +- src/core/composables/useEffectThree.ts | 22 ++++++++++++++++++++++ src/core/three/EffectComposer.vue | 4 ++-- src/core/three/Pixelation.vue | 18 ++++++++++++------ 4 files changed, 37 insertions(+), 9 deletions(-) create mode 100644 src/core/composables/useEffectThree.ts diff --git a/playground/src/pages/three.vue b/playground/src/pages/three.vue index 76e94250..226a54df 100644 --- a/playground/src/pages/three.vue +++ b/playground/src/pages/three.vue @@ -32,7 +32,7 @@ import { OrbitControls } from '@tresjs/cientos' - + diff --git a/src/core/composables/useEffectThree.ts b/src/core/composables/useEffectThree.ts new file mode 100644 index 00000000..9f42aa8d --- /dev/null +++ b/src/core/composables/useEffectThree.ts @@ -0,0 +1,22 @@ +import type { Pass } from 'three/examples/jsm/postprocessing/Pass' +import { inject, onUnmounted, shallowRef, watchEffect } from 'vue' +import { effectComposerInjectionKey } from '../three/EffectComposer.vue' + +export const useEffectThree = (newPassFunction: () => T) => { + const composer = inject(effectComposerInjectionKey) + + const pass = shallowRef(newPassFunction()) + + let unwatch = () => {} // seperate declaration prevents error in HMR + unwatch = watchEffect(() => { + if (!composer?.value) { return } + + composer.value.addPass(pass.value) + unwatch() + }) + + onUnmounted(() => { + composer?.value?.removePass(pass.value) + pass.value.dispose() + }) +} diff --git a/src/core/three/EffectComposer.vue b/src/core/three/EffectComposer.vue index cdb39a7d..60509d4b 100644 --- a/src/core/three/EffectComposer.vue +++ b/src/core/three/EffectComposer.vue @@ -1,9 +1,9 @@ diff --git a/src/core/three/Pixelation.vue b/src/core/three/Pixelation.vue index c413e169..df4752cc 100644 --- a/src/core/three/Pixelation.vue +++ b/src/core/three/Pixelation.vue @@ -1,15 +1,21 @@ - + + From b70f78cdc6fefb1044721d094be736ea55fca000 Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Sun, 18 Aug 2024 19:50:39 +0200 Subject: [PATCH 04/28] cleanup --- src/core/composables/useEffectThree.ts | 3 +++ src/core/effects/Bloom.vue | 2 +- src/core/effects/DepthOfField.vue | 2 +- src/core/effects/Glitch.vue | 2 +- src/core/effects/Noise.vue | 2 +- src/core/effects/Outline.vue | 2 +- src/core/effects/Pixelation.vue | 2 +- src/core/effects/Vignette.vue | 2 +- src/core/three/Pixelation.vue | 6 ++---- 9 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/core/composables/useEffectThree.ts b/src/core/composables/useEffectThree.ts index 9f42aa8d..7fa22a61 100644 --- a/src/core/composables/useEffectThree.ts +++ b/src/core/composables/useEffectThree.ts @@ -1,4 +1,5 @@ import type { Pass } from 'three/examples/jsm/postprocessing/Pass' +import type { Ref } from 'vue' import { inject, onUnmounted, shallowRef, watchEffect } from 'vue' import { effectComposerInjectionKey } from '../three/EffectComposer.vue' @@ -19,4 +20,6 @@ export const useEffectThree = (newPassFunction: () => T) => { composer?.value?.removePass(pass.value) pass.value.dispose() }) + + return { pass } } diff --git a/src/core/effects/Bloom.vue b/src/core/effects/Bloom.vue index 72f04ebe..a1f44a21 100644 --- a/src/core/effects/Bloom.vue +++ b/src/core/effects/Bloom.vue @@ -67,7 +67,7 @@ const props = withDefaults( const { pass, effect } = useEffect(() => new BloomEffect(props)) -defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref +defineExpose({ pass, effect }) makePropWatchers( [ diff --git a/src/core/effects/DepthOfField.vue b/src/core/effects/DepthOfField.vue index 39326cfb..06ab4e3b 100644 --- a/src/core/effects/DepthOfField.vue +++ b/src/core/effects/DepthOfField.vue @@ -45,7 +45,7 @@ const props = defineProps() const { camera } = useTresContext() const { pass, effect } = useEffect(() => new DepthOfFieldEffect(camera.value, props)) -defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref +defineExpose({ pass, effect }) makePropWatchers( [ diff --git a/src/core/effects/Glitch.vue b/src/core/effects/Glitch.vue index 72aa9b10..cc564fcd 100644 --- a/src/core/effects/Glitch.vue +++ b/src/core/effects/Glitch.vue @@ -99,7 +99,7 @@ export interface GlitchProps { const props = defineProps() const { pass, effect } = useEffect(() => new GlitchEffect(props)) -defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref +defineExpose({ pass, effect }) watchEffect(() => { const getMode = () => { diff --git a/src/core/effects/Noise.vue b/src/core/effects/Noise.vue index 57da7616..e3002eb9 100644 --- a/src/core/effects/Noise.vue +++ b/src/core/effects/Noise.vue @@ -18,7 +18,7 @@ const props = withDefaults(defineProps(), { }) const { pass, effect } = useEffect(() => new NoiseEffect(props)) -defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref +defineExpose({ pass, effect }) makePropWatchersUsingAllProps( omit(props, ['blendFunction']), diff --git a/src/core/effects/Outline.vue b/src/core/effects/Outline.vue index 5de9556e..caaa7080 100644 --- a/src/core/effects/Outline.vue +++ b/src/core/effects/Outline.vue @@ -88,7 +88,7 @@ const params: OutlineEffectParameters = { const { pass, effect } = useEffect(() => new OutlineEffect(scene.value, camera.value, params)) -defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref +defineExpose({ pass, effect }) watch( [() => props.outlinedObjects, effect], // watchEffect is intentionally not used here as it would result in an endless loop diff --git a/src/core/effects/Pixelation.vue b/src/core/effects/Pixelation.vue index c5fcc518..e6208ff7 100644 --- a/src/core/effects/Pixelation.vue +++ b/src/core/effects/Pixelation.vue @@ -13,7 +13,7 @@ export interface PixelationProps { const props = defineProps() const { pass, effect } = useEffect(() => new PixelationEffect(props.granularity)) -defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref +defineExpose({ pass, effect }) makePropWatchersUsingAllProps( props, diff --git a/src/core/effects/Vignette.vue b/src/core/effects/Vignette.vue index 7d9be8fe..d6183b46 100644 --- a/src/core/effects/Vignette.vue +++ b/src/core/effects/Vignette.vue @@ -22,7 +22,7 @@ const props = withDefaults(defineProps(), { }) const { pass, effect } = useEffect(() => new VignetteEffect(props)) -defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref +defineExpose({ pass, effect }) makePropWatchersUsingAllProps( omit(props, ['blendFunction']), diff --git a/src/core/three/Pixelation.vue b/src/core/three/Pixelation.vue index df4752cc..793f8b4f 100644 --- a/src/core/three/Pixelation.vue +++ b/src/core/three/Pixelation.vue @@ -1,9 +1,7 @@ From dba098df516b2b19771bde11c8745b678f266cd7 Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Wed, 4 Sep 2024 20:44:28 +0200 Subject: [PATCH 05/28] added more props to native pixelation effect --- playground/src/main.ts | 7 +++++++ src/core/three/Pixelation.vue | 17 +++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/playground/src/main.ts b/playground/src/main.ts index 8f33a554..5cab0a0a 100644 --- a/playground/src/main.ts +++ b/playground/src/main.ts @@ -9,3 +9,10 @@ const app = createApp(App) app.use(router) app.mount('#app') + +const orginalWarn = console.warn +console.warn = (...args: any[]) => { + if (!args[0].includes('Component is missing template or render function')) { + orginalWarn.apply(console, args) + } +} diff --git a/src/core/three/Pixelation.vue b/src/core/three/Pixelation.vue index 793f8b4f..78bec6fb 100644 --- a/src/core/three/Pixelation.vue +++ b/src/core/three/Pixelation.vue @@ -1,10 +1,14 @@ @@ -16,4 +20,17 @@ const { scene, camera } = useTresContext() const { pass } = useEffectThree(() => new RenderPixelatedPass(props.pixelSize, scene.value, camera.value!)) defineExpose({ pass }) + +watchEffect(() => { + pass.value.setPixelSize(props.pixelSize) +}) + +makePropWatchers( + [ + [() => props.depthEdgeStrength, 'depthEdgeStrength'], + [() => props.normalEdgeStrength, 'normalEdgeStrength'], + ], + pass, + () => new RenderPixelatedPass(1, scene.value, camera.value!), +) From 82d2b32a1539930367fc71808b31baf48363b456 Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Wed, 4 Sep 2024 21:37:21 +0200 Subject: [PATCH 06/28] restructured playground --- playground/components.d.ts | 2 + playground/src/components/EffectListItem.vue | 22 ++++++ playground/src/pages/index.vue | 69 +++++-------------- .../src/pages/{ => postprocessing}/bloom.vue | 0 .../{ => postprocessing}/depth-of-field.vue | 0 .../src/pages/{ => postprocessing}/glitch.vue | 0 .../src/pages/{ => postprocessing}/noise.vue | 0 .../on-demand.vue | 0 .../pages/{ => postprocessing}/outline.vue | 0 .../pages/{ => postprocessing}/pixelation.vue | 0 .../pages/{ => postprocessing}/vignette.vue | 0 .../pages/{three.vue => three/pixelation.vue} | 1 - playground/src/router.ts | 51 +++++++------- 13 files changed, 69 insertions(+), 76 deletions(-) create mode 100644 playground/src/components/EffectListItem.vue rename playground/src/pages/{ => postprocessing}/bloom.vue (100%) rename playground/src/pages/{ => postprocessing}/depth-of-field.vue (100%) rename playground/src/pages/{ => postprocessing}/glitch.vue (100%) rename playground/src/pages/{ => postprocessing}/noise.vue (100%) rename playground/src/pages/{advanced => postprocessing}/on-demand.vue (100%) rename playground/src/pages/{ => postprocessing}/outline.vue (100%) rename playground/src/pages/{ => postprocessing}/pixelation.vue (100%) rename playground/src/pages/{ => postprocessing}/vignette.vue (100%) rename playground/src/pages/{three.vue => three/pixelation.vue} (96%) diff --git a/playground/components.d.ts b/playground/components.d.ts index 520e31a7..33147f2c 100644 --- a/playground/components.d.ts +++ b/playground/components.d.ts @@ -9,10 +9,12 @@ declare module 'vue' { export interface GlobalComponents { BlenderCube: typeof import('./src/components/BlenderCube.vue')['default'] copy: typeof import('./src/components/UnrealBloom copy.vue')['default'] + EffectListItem: typeof import('./src/components/EffectListItem.vue')['default'] GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default'] GraphPane: typeof import('./src/components/GraphPane.vue')['default'] NoiseDemo: typeof import('./src/components/NoiseDemo.vue')['default'] OutlineDemo: typeof import('./src/components/OutlineDemo.vue')['default'] + RouteListItem: typeof import('./src/components/RouteListItem.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] TheExperience: typeof import('./src/components/TheExperience.vue')['default'] diff --git a/playground/src/components/EffectListItem.vue b/playground/src/components/EffectListItem.vue new file mode 100644 index 00000000..6ff857f0 --- /dev/null +++ b/playground/src/components/EffectListItem.vue @@ -0,0 +1,22 @@ + + + diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue index e2356fcb..2da7c00e 100644 --- a/playground/src/pages/index.vue +++ b/playground/src/pages/index.vue @@ -1,16 +1,17 @@ @@ -51,51 +52,19 @@ const sections = [

-
- -
- {{ meta.icon }} -
-

- {{ name }} -

-
-
-
- {{ icon }} -
-

- {{ title }} -

-
+

+ {{ section.title }} +

+
+ - - {{ route.name }} - -
+ :route="route" + class="my-4 sm:my-0" + />
-
+
diff --git a/playground/src/pages/bloom.vue b/playground/src/pages/postprocessing/bloom.vue similarity index 100% rename from playground/src/pages/bloom.vue rename to playground/src/pages/postprocessing/bloom.vue diff --git a/playground/src/pages/depth-of-field.vue b/playground/src/pages/postprocessing/depth-of-field.vue similarity index 100% rename from playground/src/pages/depth-of-field.vue rename to playground/src/pages/postprocessing/depth-of-field.vue diff --git a/playground/src/pages/glitch.vue b/playground/src/pages/postprocessing/glitch.vue similarity index 100% rename from playground/src/pages/glitch.vue rename to playground/src/pages/postprocessing/glitch.vue diff --git a/playground/src/pages/noise.vue b/playground/src/pages/postprocessing/noise.vue similarity index 100% rename from playground/src/pages/noise.vue rename to playground/src/pages/postprocessing/noise.vue diff --git a/playground/src/pages/advanced/on-demand.vue b/playground/src/pages/postprocessing/on-demand.vue similarity index 100% rename from playground/src/pages/advanced/on-demand.vue rename to playground/src/pages/postprocessing/on-demand.vue diff --git a/playground/src/pages/outline.vue b/playground/src/pages/postprocessing/outline.vue similarity index 100% rename from playground/src/pages/outline.vue rename to playground/src/pages/postprocessing/outline.vue diff --git a/playground/src/pages/pixelation.vue b/playground/src/pages/postprocessing/pixelation.vue similarity index 100% rename from playground/src/pages/pixelation.vue rename to playground/src/pages/postprocessing/pixelation.vue diff --git a/playground/src/pages/vignette.vue b/playground/src/pages/postprocessing/vignette.vue similarity index 100% rename from playground/src/pages/vignette.vue rename to playground/src/pages/postprocessing/vignette.vue diff --git a/playground/src/pages/three.vue b/playground/src/pages/three/pixelation.vue similarity index 96% rename from playground/src/pages/three.vue rename to playground/src/pages/three/pixelation.vue index 226a54df..b5b64886 100644 --- a/playground/src/pages/three.vue +++ b/playground/src/pages/three/pixelation.vue @@ -1,4 +1,3 @@ - + + diff --git a/playground/src/components/EffectListItem.vue b/playground/src/components/EffectListItem.vue index 6ff857f0..9a45068c 100644 --- a/playground/src/components/EffectListItem.vue +++ b/playground/src/components/EffectListItem.vue @@ -16,7 +16,7 @@ defineProps<{ {{ route.meta.icon }}

- {{ route.meta.name }} + {{ route.meta?.name }}

diff --git a/playground/src/pages/three/glitch.vue b/playground/src/pages/three/glitch.vue new file mode 100644 index 00000000..7c2d62d4 --- /dev/null +++ b/playground/src/pages/three/glitch.vue @@ -0,0 +1,12 @@ + + + diff --git a/playground/src/pages/three/pixelation.vue b/playground/src/pages/three/pixelation.vue index b5b64886..cf0df86d 100644 --- a/playground/src/pages/three/pixelation.vue +++ b/playground/src/pages/three/pixelation.vue @@ -1,37 +1,12 @@ diff --git a/playground/src/router.ts b/playground/src/router.ts index 4d14e288..97e16102 100644 --- a/playground/src/router.ts +++ b/playground/src/router.ts @@ -25,6 +25,7 @@ const home: RouteRecordRaw = { export const threeRoutes = [ makeRoute('Pixelation', 'ðŸ‘ū'), + makeRoute('Glitch', '📚'), ] export const postProcessingRoutes = [ diff --git a/src/core/composables/useEffectThree.ts b/src/core/composables/useEffectThree.ts index 7fa22a61..be5f8cff 100644 --- a/src/core/composables/useEffectThree.ts +++ b/src/core/composables/useEffectThree.ts @@ -1,5 +1,4 @@ import type { Pass } from 'three/examples/jsm/postprocessing/Pass' -import type { Ref } from 'vue' import { inject, onUnmounted, shallowRef, watchEffect } from 'vue' import { effectComposerInjectionKey } from '../three/EffectComposer.vue' diff --git a/src/core/three/Glitch.vue b/src/core/three/Glitch.vue new file mode 100644 index 00000000..f6a648e6 --- /dev/null +++ b/src/core/three/Glitch.vue @@ -0,0 +1,8 @@ + diff --git a/src/index.ts b/src/index.ts index c17d8b6d..a806fc2c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,7 +2,8 @@ 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 PixelationThree from './core/three/Pixelation.vue' // TODO seperate exports differently +import GlitchThree from './core/three/Glitch.vue' // TODO seperate exports differently import Glitch from './core/effects/Glitch.vue' import Outline from './core/effects/Outline.vue' import Pixelation from './core/effects/Pixelation.vue' @@ -23,4 +24,5 @@ export { useEffect, EffectComposerThree, PixelationThree, + GlitchThree, } From 00f8b52887db3a72a5d3ab478edbef0daaafefa5 Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Wed, 4 Sep 2024 22:16:05 +0200 Subject: [PATCH 08/28] added glitch effect --- playground/src/pages/three/glitch.vue | 9 ++++- src/core/composables/useEffectThree.ts | 2 +- src/core/effects/Glitch.vue | 46 +------------------------- src/core/three/Glitch.vue | 26 +++++++++++++-- 4 files changed, 34 insertions(+), 49 deletions(-) diff --git a/playground/src/pages/three/glitch.vue b/playground/src/pages/three/glitch.vue index 7c2d62d4..72637298 100644 --- a/playground/src/pages/three/glitch.vue +++ b/playground/src/pages/three/glitch.vue @@ -1,12 +1,19 @@ diff --git a/src/core/composables/useEffectThree.ts b/src/core/composables/useEffectThree.ts index be5f8cff..8fd41dfd 100644 --- a/src/core/composables/useEffectThree.ts +++ b/src/core/composables/useEffectThree.ts @@ -1,4 +1,4 @@ -import type { Pass } from 'three/examples/jsm/postprocessing/Pass' +import type { Pass } from 'three/examples/jsm/postprocessing/Pass.js' import { inject, onUnmounted, shallowRef, watchEffect } from 'vue' import { effectComposerInjectionKey } from '../three/EffectComposer.vue' diff --git a/src/core/effects/Glitch.vue b/src/core/effects/Glitch.vue index cc564fcd..27c4ed33 100644 --- a/src/core/effects/Glitch.vue +++ b/src/core/effects/Glitch.vue @@ -11,87 +11,43 @@ export interface GlitchProps { blendFunction?: BlendFunction /** * The minimum and maximum delay between glitch activations in seconds. - * - * @default [1.5, 3.5] - * - * @type {Vector2} - * @memberof GlitchProps */ delay?: Vector2 /** * The minimum and maximum duration of a glitch in seconds. - * - * @default [0.6, 1.0] - * - * @type {Vector2} - * @memberof GlitchProps */ duration?: Vector2 /** * The strength of weak and strong glitches. - * - * @default [0.3, 1.0] - * - * @type {Vector2} - * @memberof GlitchProps */ strength?: Vector2 /** - * The glitch mode. Can be DISABLED | SPORADIC | CONSTANT_MILD | CONSTANT_WILD . - * - * @default GlitchMode.SPORADIC - * - * @type {GlitchMode} - * @memberof GlitchProps + * The glitch mode. Can be DISABLED | SPORADIC | CONSTANT_MILD | CONSTANT_WILD. */ mode?: GlitchMode /** * Turn the effect on and off. - * - * @type {boolean} - * @memberof GlitchProps */ active?: boolean /** * * The threshold for strong glitches. - * - * @default 0.85 - * - * @type {number} - * @memberof GlitchProps */ ratio?: number /** * The scale of the blocky glitch columns. - * - * @default 0.05 - * - * @type {number} - * @memberof GlitchProps */ columns?: number /** * A chromatic aberration offset. If provided, the glitch effect will influence this offset. - * - * @type {Vector2} - * @memberof GlitchProps */ chromaticAberrationOffset?: Vector2 /** * A perturbation map. If none is provided, a noise texture will be created. - * - * @type {Texture} - * @memberof GlitchProps */ perturbationMap?: Texture /** * The size of the generated noise map. Will be ignored if a perturbation map is provided. - * - * @default 64 - * - * @type {number} - * @memberof GlitchProps */ dtSize?: number } diff --git a/src/core/three/Glitch.vue b/src/core/three/Glitch.vue index f6a648e6..3de1bd4d 100644 --- a/src/core/three/Glitch.vue +++ b/src/core/three/Glitch.vue @@ -1,8 +1,30 @@ - -const { pass } = useEffectThree(() => new GlitchPass()) + From d32515b4bd7dbe67dc437f8498efa2aa40b0d419 Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Wed, 4 Sep 2024 22:17:24 +0200 Subject: [PATCH 09/28] renamed folder --- src/core/{effects => postprocessing}/Bloom.vue | 0 .../{effects => postprocessing}/DepthOfField.vue | 0 src/core/{effects => postprocessing}/Glitch.vue | 0 src/core/{effects => postprocessing}/Noise.vue | 0 src/core/{effects => postprocessing}/Outline.vue | 0 .../{effects => postprocessing}/Pixelation.vue | 0 src/core/{effects => postprocessing}/Vignette.vue | 0 src/index.ts | 14 +++++++------- 8 files changed, 7 insertions(+), 7 deletions(-) rename src/core/{effects => postprocessing}/Bloom.vue (100%) rename src/core/{effects => postprocessing}/DepthOfField.vue (100%) rename src/core/{effects => postprocessing}/Glitch.vue (100%) rename src/core/{effects => postprocessing}/Noise.vue (100%) rename src/core/{effects => postprocessing}/Outline.vue (100%) rename src/core/{effects => postprocessing}/Pixelation.vue (100%) rename src/core/{effects => postprocessing}/Vignette.vue (100%) diff --git a/src/core/effects/Bloom.vue b/src/core/postprocessing/Bloom.vue similarity index 100% rename from src/core/effects/Bloom.vue rename to src/core/postprocessing/Bloom.vue diff --git a/src/core/effects/DepthOfField.vue b/src/core/postprocessing/DepthOfField.vue similarity index 100% rename from src/core/effects/DepthOfField.vue rename to src/core/postprocessing/DepthOfField.vue diff --git a/src/core/effects/Glitch.vue b/src/core/postprocessing/Glitch.vue similarity index 100% rename from src/core/effects/Glitch.vue rename to src/core/postprocessing/Glitch.vue diff --git a/src/core/effects/Noise.vue b/src/core/postprocessing/Noise.vue similarity index 100% rename from src/core/effects/Noise.vue rename to src/core/postprocessing/Noise.vue diff --git a/src/core/effects/Outline.vue b/src/core/postprocessing/Outline.vue similarity index 100% rename from src/core/effects/Outline.vue rename to src/core/postprocessing/Outline.vue diff --git a/src/core/effects/Pixelation.vue b/src/core/postprocessing/Pixelation.vue similarity index 100% rename from src/core/effects/Pixelation.vue rename to src/core/postprocessing/Pixelation.vue diff --git a/src/core/effects/Vignette.vue b/src/core/postprocessing/Vignette.vue similarity index 100% rename from src/core/effects/Vignette.vue rename to src/core/postprocessing/Vignette.vue diff --git a/src/index.ts b/src/index.ts index a806fc2c..d5b53477 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,14 +1,14 @@ -import Bloom from './core/effects/Bloom.vue' -import DepthOfField from './core/effects/DepthOfField.vue' +import Bloom from './core/postprocessing/Bloom.vue' +import DepthOfField from './core/postprocessing/DepthOfField.vue' import EffectComposer from './core/EffectComposer.vue' import EffectComposerThree from './core/three/EffectComposer.vue' import PixelationThree from './core/three/Pixelation.vue' // TODO seperate exports differently import GlitchThree from './core/three/Glitch.vue' // TODO seperate exports differently -import Glitch from './core/effects/Glitch.vue' -import Outline from './core/effects/Outline.vue' -import Pixelation from './core/effects/Pixelation.vue' -import Vignette from './core/effects/Vignette.vue' -import Noise from './core/effects/Noise.vue' +import Glitch from './core/postprocessing/Glitch.vue' +import Outline from './core/postprocessing/Outline.vue' +import Pixelation from './core/postprocessing/Pixelation.vue' +import Vignette from './core/postprocessing/Vignette.vue' +import Noise from './core/postprocessing/Noise.vue' import { useEffect } from './core/composables/effect.ts' From 377a650468e7ce658524983ec6af8182b6b52c9b Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Thu, 5 Sep 2024 16:01:52 +0200 Subject: [PATCH 10/28] added check to prevent console warning --- src/core/composables/useEffectThree.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/composables/useEffectThree.ts b/src/core/composables/useEffectThree.ts index 8fd41dfd..05998871 100644 --- a/src/core/composables/useEffectThree.ts +++ b/src/core/composables/useEffectThree.ts @@ -1,15 +1,17 @@ import type { Pass } from 'three/examples/jsm/postprocessing/Pass.js' import { inject, onUnmounted, shallowRef, watchEffect } from 'vue' +import { useTresContext } from '@tresjs/core' import { effectComposerInjectionKey } from '../three/EffectComposer.vue' export const useEffectThree = (newPassFunction: () => T) => { const composer = inject(effectComposerInjectionKey) const pass = shallowRef(newPassFunction()) + const { sizes } = useTresContext() let unwatch = () => {} // seperate declaration prevents error in HMR unwatch = watchEffect(() => { - if (!composer?.value) { return } + if (!composer?.value || !sizes.height.value || !sizes.width.value) { return } composer.value.addPass(pass.value) unwatch() From 37f1ab6383d1a88140903caa450624035befc368 Mon Sep 17 00:00:00 2001 From: Tino Koch <17991193+Tinoooo@users.noreply.github.com> Date: Thu, 5 Sep 2024 17:23:41 +0200 Subject: [PATCH 11/28] added smaa effect --- playground/src/components/BasicScene.vue | 10 ++++++--- playground/src/pages/three/smaa.vue | 18 ++++++++++++++++ playground/src/router.ts | 1 + src/core/three/SMAA.vue | 26 ++++++++++++++++++++++++ src/index.ts | 2 ++ 5 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 playground/src/pages/three/smaa.vue create mode 100644 src/core/three/SMAA.vue diff --git a/playground/src/components/BasicScene.vue b/playground/src/components/BasicScene.vue index a4bd4bf2..a06f0f39 100644 --- a/playground/src/components/BasicScene.vue +++ b/playground/src/components/BasicScene.vue @@ -2,6 +2,10 @@ import { TresCanvas } from '@tresjs/core' import { EffectComposerThree, PixelationThree } from '@tresjs/post-processing' import { OrbitControls } from '@tresjs/cientos' + +defineProps<{ + wireframe?: boolean +}>()