From 70b86ad41b8b93c5b572e9a076402d3656ba3fbb Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Tue, 7 Nov 2023 10:32:48 +0100 Subject: [PATCH] feat: vignette effect --- docs/.vitepress/config.ts | 1 + .../theme/components/BlenderCube.vue | 11 ++++ .../theme/components/VignetteDemo.vue | 39 +++++++++++++ docs/components.d.ts | 6 +- docs/guide/effects/vignette.md | 37 ++++++++++++ docs/package.json | 4 +- playground/components.d.ts | 1 + playground/src/components/BlenderCube.vue | 11 ++++ playground/src/components/UnrealBloom.vue | 6 +- playground/src/pages/vignette.vue | 56 +++++++++++++++++++ playground/src/router.ts | 1 + src/core/effects/Vignette.vue | 34 +++++++++++ src/index.ts | 11 ++-- stats.html | 2 +- 14 files changed, 206 insertions(+), 14 deletions(-) create mode 100644 docs/.vitepress/theme/components/BlenderCube.vue create mode 100644 docs/.vitepress/theme/components/VignetteDemo.vue create mode 100644 docs/guide/effects/vignette.md create mode 100644 playground/src/components/BlenderCube.vue create mode 100644 playground/src/pages/vignette.vue create mode 100644 src/core/effects/Vignette.vue diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 9a1f831e..1030d994 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -33,6 +33,7 @@ export default defineConfig({ { text: 'Glitch', link: '/guide/effects/glitch' }, { text: 'Outline', link: '/guide/effects/outline' }, { text: 'Pixelation', link: '/guide/effects/pixelation' }, + { text: 'Vignette', link: '/guide/effects/vignette' }, ], }, ], diff --git a/docs/.vitepress/theme/components/BlenderCube.vue b/docs/.vitepress/theme/components/BlenderCube.vue new file mode 100644 index 00000000..4f2211e1 --- /dev/null +++ b/docs/.vitepress/theme/components/BlenderCube.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/docs/.vitepress/theme/components/VignetteDemo.vue b/docs/.vitepress/theme/components/VignetteDemo.vue new file mode 100644 index 00000000..92196114 --- /dev/null +++ b/docs/.vitepress/theme/components/VignetteDemo.vue @@ -0,0 +1,39 @@ + + + \ No newline at end of file diff --git a/docs/components.d.ts b/docs/components.d.ts index ee5f823e..ca43e573 100644 --- a/docs/components.d.ts +++ b/docs/components.d.ts @@ -3,12 +3,11 @@ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 -import '@vue/runtime-core' - export {} -declare module '@vue/runtime-core' { +declare module 'vue' { export interface GlobalComponents { + BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default'] BloomDemo: typeof import('./.vitepress/theme/components/BloomDemo.vue')['default'] DepthOfFieldDemo: typeof import('./.vitepress/theme/components/DepthOfFieldDemo.vue')['default'] DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default'] @@ -18,5 +17,6 @@ declare module '@vue/runtime-core' { PixelationDemo: typeof import('./.vitepress/theme/components/PixelationDemo.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + VignetteDemo: typeof import('./.vitepress/theme/components/VignetteDemo.vue')['default'] } } diff --git a/docs/guide/effects/vignette.md b/docs/guide/effects/vignette.md new file mode 100644 index 00000000..a6c7da39 --- /dev/null +++ b/docs/guide/effects/vignette.md @@ -0,0 +1,37 @@ +# Vignette + + + + + +Vignette is an effect that darkens the edges of the scene to make the center pop. + +## Usage + +```vue + + + +``` + +## Props + +| Prop | Description | Default | +| ------------- | ----------------------------------------------------------- | -------------------------- | +| technique | Whether the noise should be multiplied with the input color. | VignetteTechnique.DEFAULT | +| blendFunction | The blend function to use. | BlendFunction.NORMAL | +| offset | The offset value. | 0.5 | +| darkness | The darkness value. | 0.5 | + + +## Further Reading +see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/VignetteEffect.js~VignetteEffect.html) \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index eaa26761..7f65e351 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,8 +1,8 @@ { "name": "docs", - "private": true, - "version": "0.0.0", "type": "module", + "version": "0.0.0", + "private": true, "scripts": { "dev": "vitepress dev", "build": "vitepress build", diff --git a/playground/components.d.ts b/playground/components.d.ts index 287278e1..39cebea4 100644 --- a/playground/components.d.ts +++ b/playground/components.d.ts @@ -7,6 +7,7 @@ export {} declare module 'vue' { export interface GlobalComponents { + BlenderCube: typeof import('./src/components/BlenderCube.vue')['default'] copy: typeof import('./src/components/UnrealBloom copy.vue')['default'] GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default'] OutlineDemo: typeof import('./src/components/OutlineDemo.vue')['default'] diff --git a/playground/src/components/BlenderCube.vue b/playground/src/components/BlenderCube.vue new file mode 100644 index 00000000..4c7abbf8 --- /dev/null +++ b/playground/src/components/BlenderCube.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/playground/src/components/UnrealBloom.vue b/playground/src/components/UnrealBloom.vue index 4eda71e0..2c38d7f2 100644 --- a/playground/src/components/UnrealBloom.vue +++ b/playground/src/components/UnrealBloom.vue @@ -20,18 +20,18 @@ const bloomParams = reactive({ intensity: 4.0, blendFunction: BlendFunction.ADD, }) - +/* const { pane } = useTweakPane() pane.addInput(bloomParams, 'luminanceThreshold', { min: 0, max: 1 }) pane.addInput(bloomParams, 'luminanceSmoothing', { min: 0, max: 1 }) pane.addInput(bloomParams, 'intensity', { min: 0, max: 10 }) - + */ const materialRef = ref(null) onMounted(() => { if (materialRef.value) { - pane.addInput(materialRef.value, 'emissiveIntensity', { min: 0, max: 10, step: 0.1 }) + /* pane.addInput(materialRef.value, 'emissiveIntensity', { min: 0, max: 10, step: 0.1 }) */ } }) diff --git a/playground/src/pages/vignette.vue b/playground/src/pages/vignette.vue new file mode 100644 index 00000000..167c08e8 --- /dev/null +++ b/playground/src/pages/vignette.vue @@ -0,0 +1,56 @@ + + + \ No newline at end of file diff --git a/playground/src/router.ts b/playground/src/router.ts index a8264695..60a1145d 100644 --- a/playground/src/router.ts +++ b/playground/src/router.ts @@ -21,6 +21,7 @@ const routes = [ makeRoute('Glitch'), makeRoute('Depth of Field'), makeRoute('Pixelation'), + makeRoute('Vignette'), ] export const router = createRouter({ diff --git a/src/core/effects/Vignette.vue b/src/core/effects/Vignette.vue new file mode 100644 index 00000000..4e512ebf --- /dev/null +++ b/src/core/effects/Vignette.vue @@ -0,0 +1,34 @@ + + + diff --git a/src/index.ts b/src/index.ts index 4b914dd9..63deb5bf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,16 +1,17 @@ import Bloom from './core/effects/Bloom.vue' +import DepthOfField from './core/effects/DepthOfField.vue' +import EffectComposer from './core/EffectComposer.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' +import Vignette from './core/effects/Vignette.vue' export { Bloom, + DepthOfField, + EffectComposer, Glitch, Outline, Pixelation, - DepthOfField, - EffectComposer, + Vignette, } diff --git a/stats.html b/stats.html index 927a1281..38ec8434 100644 --- a/stats.html +++ b/stats.html @@ -4818,7 +4818,7 @@