feat: vignette effect

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' },
         ],
       },
     ],

docs/.vitepress/theme/components/BlenderCube.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } 
+= await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+const model = nodes.Cube
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
+import { EffectComposer, Vignette, DepthOfField } from '@tresjs/post-processing'
+import BlenderCube from './BlenderCube.vue'
+
+const gl = {
+  clearColor: '#4f4f4f',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Suspense>
+      <BlenderCube />
+    </Suspense>
+    <EffectComposer>
+      <DepthOfField
+        :focus-distance="0"
+        :focal-length="0.02"
+        :bokeh-scale="2"
+      />
+      <Vignette
+        :darkness="0.9"
+        :offset="0.3"
+      />
+    </EffectComposer>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

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']
   }
 }

docs/guide/effects/vignette.md

@@ -0,0 +1,37 @@
+# Vignette
+
+<DocsDemo>
+  <VignetteDemo />
+</DocsDemo>
+
+Vignette is an effect that darkens the edges of the scene to make the center pop.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { EffectComposer, Vignette } from '@tresjs/post-processing'
+</script>
+
+<template>
+  <EffectComposer>
+    <Vignette
+      :darkness="0.9"
+      :offset="0.2"
+    />
+  </EffectComposer>
+</template>
+```
+
+## 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)

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",

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']

playground/src/components/BlenderCube.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } 
+  = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+const model = nodes.Cube
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>

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 }) */
   }
 })
 </script>

playground/src/pages/vignette.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
+import { EffectComposer, Vignette, DepthOfField } from '@tresjs/post-processing'
+import { TresLeches, useControls } from '@tresjs/leches'
+import BlenderCube from '../components/BlenderCube.vue'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#4f4f4f',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const { darkness, offset } = useControls({
+  offset: {
+    value: 0.3,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+  darkness: {
+    value: 0.9,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Suspense>
+      <BlenderCube />
+    </Suspense>
+    <EffectComposer>
+      <DepthOfField
+        :focus-distance="0"
+        :focal-length="0.02"
+        :bokeh-scale="2"
+      />
+      <Vignette
+        :darkness="darkness.value"
+        :offset="offset.value"
+      />
+    </EffectComposer>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/router.ts

@@ -21,6 +21,7 @@ const routes = [
   makeRoute('Glitch'),
   makeRoute('Depth of Field'),
   makeRoute('Pixelation'),
+  makeRoute('Vignette'),
 ]
 
 export const router = createRouter({

src/core/effects/Vignette.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { BlendFunction, VignetteEffect, VignetteTechnique } from 'postprocessing'
+import { useEffect } from '../composables/effect'
+import { makePropWatchersUsingAllProps } from '../../util/prop'
+import { omit } from '../../util/object'
+
+export interface VignetteProps {
+  /**
+   * Whether the noise should be multiplied with the input color.
+   */
+  technique?: VignetteTechnique
+  blendFunction?: BlendFunction
+  offset: number
+  darkness: number
+}
+
+const props = withDefaults(defineProps<VignetteProps>(), {
+  technique: VignetteTechnique.DEFAULT,
+  blendFunction: BlendFunction.NORMAL,
+  offset: 0.5,
+  darkness: 0.5,
+})
+
+const { pass, effect } = useEffect(() => new VignetteEffect(props))
+defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
+
+makePropWatchersUsingAllProps(
+  omit(props, ['blendFunction']),
+  effect,
+  () => new VignetteEffect(),
+)
+</script>
+
+<template></template>

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,
 }