Merge branch 'main' into feature/65-vignette-effect

.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 docs/.vitepress/dist/
-docs/.vitepress/cache/
+docs/.vitepress/cache/
+stats.html

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' },
           { text: 'Vignette', link: '/guide/effects/vignette' },

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

@@ -13,6 +13,7 @@ declare module 'vue' {
     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)

package.json

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

playground/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     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']
+    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/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue + TS</title>
   </head>

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/public/nuxt-stones/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "docs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "vitepress preview"
+  },
+  "dependencies": {
+    "@tresjs/cientos": "^3.0.1",
+    "@tresjs/core": "^3.2.2",
+    "@tresjs/post-processing": "workspace:^",
+    "gsap": "^3.11.5"
+  },
+  "devDependencies": {
+    "unocss": "^0.52.3",
+    "unplugin-vue-components": "^0.24.1",
+    "vite-svg-loader": "^4.0.0",
+    "vitepress": "1.0.0-beta.1"
+  }
+}

playground/src/App.vue

@@ -1,5 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+function setBodyClass(routeName: string) {
+  document.title = `Post-processing Playground - ${routeName}`
+  document.body.className = routeName
+}
+watch([route], () => setBodyClass(route.name?.toString() ?? ''))
+</script>
 
 <template>
-  <router-view />
+  <Suspense>
+    <router-view />
+  </Suspense>
 </template>