feat: 66 noise (#71)

* chore: update versions

* feat: noise effect

* chore: pass down props to effect

* Update playground/src/pages/noise.vue

Co-authored-by: Tino Koch <[email protected]>

* chore: change playground example blendfunction to screen

* chore: release v0.6.0-next.0

* docs: added noise docs

* docs: lint NoiseDemo

* chore: made order of effects alphabetic

* feat: omit blendFunction for watchers

---------

Co-authored-by: Tino Koch <[email protected]>

CHANGELOG.md

@@ -1,5 +1,12 @@
 
 
+## [0.6.0-next.0](https://github.com/Tresjs/post-processing/compare/0.5.0...0.6.0-next.0) (2023-10-30)
+
+
+### Features
+
+* noise effect ([9f65ebf](https://github.com/Tresjs/post-processing/commit/9f65ebf8a74a08b2c95cfcee87270df515f9a563))
+
 ## [0.5.0](https://github.com/Tresjs/post-processing/compare/0.4.0...0.5.0) (2023-10-28)
 
 

docs/.vitepress/config.ts

@@ -31,6 +31,7 @@ export default defineConfig({
           { text: 'Bloom', link: '/guide/effects/bloom' },
           { text: 'Depth of Field', link: '/guide/effects/depth-of-field' },
           { text: 'Glitch', link: '/guide/effects/glitch' },
+          { text: 'Noise', link: '/guide/effects/noise' },
           { text: 'Outline', link: '/guide/effects/outline' },
           { text: 'Pixelation', link: '/guide/effects/pixelation' },
         ],

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { EffectComposer, Noise } from '@tresjs/post-processing'
+import { OrbitControls } from '@tresjs/cientos'
+import { BlendFunction } from 'postprocessing'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <Suspense>
+      <EffectComposer :depth-buffer="true">
+        <Noise
+          premultiply
+          :blend-function="BlendFunction.SCREEN"
+        />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

docs/components.d.ts

@@ -3,17 +3,16 @@
 // @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 {
     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']
     GlitchDemo: typeof import('./.vitepress/theme/components/GlitchDemo.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
+    NoiseDemo: typeof import('./.vitepress/theme/components/NoiseDemo.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']

docs/guide/effects/noise.md

@@ -0,0 +1,37 @@
+# Noise
+
+<DocsDemo>
+  <NoiseDemo />
+</DocsDemo>
+
+Noise is an effect that adds Gaussian noise to the scene. This can be used to simulate a variety of effects, such as static on a TV or film grain.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { BlendFunction } from 'postprocessing'
+
+import { EffectComposer, Bloom } from '@tresjs/post-processing'
+</script>
+
+<template>
+  <EffectComposer>
+    <Noise
+      premultiply
+      :blend-function="BlendFunction.SCREEN"
+    />
+  </EffectComposer>
+</template>
+```
+
+## Props
+
+| Prop                 | Description                                                                                          | Default                                                                                                                                        |
+| -------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `blendFunction`      | The blend function of this effect. This prop is not reactive.                                        |  [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40) |
+| `premultiply`          | Indicates whether noise will be multiplied with the input colors prior to blending | `false`           | 
+
+
+## Further Reading
+see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/NoiseEffect.js~NoiseEffect.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",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/post-processing",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0-next.0",
   "packageManager": "[email protected]",
   "description": "Post-processing library for TresJS",
   "author": "Alvaro Saburido <[email protected]> (https://github.com/alvarosabu/)",

playground/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
     GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
+    NoiseDemo: typeof import('./src/components/NoiseDemo.vue')['default']
     OutlineDemo: typeof import('./src/components/OutlineDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

playground/package.json

@@ -11,13 +11,13 @@
   "dependencies": {
     "@tresjs/cientos": "^3.5.1",
     "@tresjs/core": "3.5.0",
-    "@tresjs/leches": "^0.13.0",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@tresjs/leches": "^0.13.0",
     "@types/three": "^0.158.1",
     "unplugin-auto-import": "^0.16.7",
     "unplugin-vue-components": "^0.25.2",
     "vite-plugin-qrcode": "^0.2.2"
   }
-}
+}

playground/src/pages/noise.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { EffectComposer, Noise } from '@tresjs/post-processing'
+import { OrbitControls } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { BlendFunction } from 'postprocessing'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+const { value: premultiply } = useControls({
+  premultiply: true,
+})
+
+const { value: blendFunction } = useControls({
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key],
+    })),
+    value: BlendFunction.SCREEN,
+  },
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <Suspense>
+      <EffectComposer :depth-buffer="true">
+        <Noise
+          :premultiply="premultiply"
+          :blend-function="blendFunction"
+        />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

playground/src/router.ts

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

src/core/effects/Noise.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { BlendFunction, NoiseEffect } from 'postprocessing'
+import { useEffect } from '../composables/effect'
+import { makePropWatchersUsingAllProps } from '../../util/prop'
+import { omit } from '../../util/object'
+
+export interface NoiseProps {
+  /**
+   * Whether the noise should be multiplied with the input color.
+   */
+  premultiply?: boolean
+  blendFunction?: BlendFunction
+}
+
+const props = withDefaults(defineProps<NoiseProps>(), {
+  premultiply: false,
+  blendFunction: BlendFunction.SCREEN,
+})
+
+const { pass, effect } = useEffect(() => new NoiseEffect(props))
+defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
+
+makePropWatchersUsingAllProps(
+  omit(props, ['blendFunction']),
+  effect,
+  () => new NoiseEffect(),
+)
+</script>
+
+<template></template>

src/index.ts

@@ -3,6 +3,7 @@ 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 Noise from './core/effects/Noise.vue'
 
 import EffectComposer from './core/EffectComposer.vue'
 
@@ -13,4 +14,5 @@ export {
   Pixelation,
   DepthOfField, 
   EffectComposer,
+  Noise,
 }