Skip to content

Commit cdb9497

Browse files
alvarosabuTinoooo
alvarosabu
and
Tinoooo
authored
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 <17991193+Tinoooo@users.noreply.github.com> * 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 <17991193+Tinoooo@users.noreply.github.com>
1 parent e15c060 commit cdb9497

File tree

15 files changed

+175
-14
lines changed

15 files changed

+175
-14
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11

22

3+
## [0.6.0-next.0](https://github.com/Tresjs/post-processing/compare/0.5.0...0.6.0-next.0) (2023-10-30)
4+
5+
6+
### Features
7+
8+
* noise effect ([9f65ebf](https://github.com/Tresjs/post-processing/commit/9f65ebf8a74a08b2c95cfcee87270df515f9a563))
9+
310
## [0.5.0](https://github.com/Tresjs/post-processing/compare/0.4.0...0.5.0) (2023-10-28)
411

512

‎docs/.vitepress/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default defineConfig({
3131
{ text: 'Bloom', link: '/guide/effects/bloom' },
3232
{ text: 'Depth of Field', link: '/guide/effects/depth-of-field' },
3333
{ text: 'Glitch', link: '/guide/effects/glitch' },
34+
{ text: 'Noise', link: '/guide/effects/noise' },
3435
{ text: 'Outline', link: '/guide/effects/outline' },
3536
{ text: 'Pixelation', link: '/guide/effects/pixelation' },
3637
],

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import { TresCanvas } from '@tresjs/core'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
4+
import { EffectComposer, Noise } from '@tresjs/post-processing'
5+
import { OrbitControls } from '@tresjs/cientos'
6+
import { BlendFunction } from 'postprocessing'
7+
import '@tresjs/leches/styles'
8+
9+
const gl = {
10+
clearColor: '#82DBC5',
11+
shadows: true,
12+
alpha: false,
13+
shadowMapType: BasicShadowMap,
14+
outputColorSpace: SRGBColorSpace,
15+
toneMapping: NoToneMapping,
16+
}
17+
</script>
18+
19+
<template>
20+
<TresCanvas v-bind="gl">
21+
<TresPerspectiveCamera :position="[3, 3, 3]" />
22+
<OrbitControls />
23+
<TresGridHelper />
24+
<TresAmbientLight :intensity="1" />
25+
<Suspense>
26+
<EffectComposer :depth-buffer="true">
27+
<Noise
28+
premultiply
29+
:blend-function="BlendFunction.SCREEN"
30+
/>
31+
</EffectComposer>
32+
</Suspense>
33+
</TresCanvas>
34+
</template>

‎docs/components.d.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33
// @ts-nocheck
44
// Generated by unplugin-vue-components
55
// Read more: https://github.com/vuejs/core/pull/3399
6-
import '@vue/runtime-core'
7-
86
export {}
97

10-
declare module '@vue/runtime-core' {
8+
declare module 'vue' {
119
export interface GlobalComponents {
1210
BloomDemo: typeof import('./.vitepress/theme/components/BloomDemo.vue')['default']
1311
DepthOfFieldDemo: typeof import('./.vitepress/theme/components/DepthOfFieldDemo.vue')['default']
1412
DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
1513
GlitchDemo: typeof import('./.vitepress/theme/components/GlitchDemo.vue')['default']
1614
LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
15+
NoiseDemo: typeof import('./.vitepress/theme/components/NoiseDemo.vue')['default']
1716
OutlineDemo: typeof import('./.vitepress/theme/components/OutlineDemo.vue')['default']
1817
PixelationDemo: typeof import('./.vitepress/theme/components/PixelationDemo.vue')['default']
1918
RouterLink: typeof import('vue-router')['RouterLink']

‎docs/guide/effects/noise.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Noise
2+
3+
<DocsDemo>
4+
<NoiseDemo />
5+
</DocsDemo>
6+
7+
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.
8+
9+
## Usage
10+
11+
```vue
12+
<script setup lang="ts">
13+
import { BlendFunction } from 'postprocessing'
14+
15+
import { EffectComposer, Bloom } from '@tresjs/post-processing'
16+
</script>
17+
18+
<template>
19+
<EffectComposer>
20+
<Noise
21+
premultiply
22+
:blend-function="BlendFunction.SCREEN"
23+
/>
24+
</EffectComposer>
25+
</template>
26+
```
27+
28+
## Props
29+
30+
| Prop | Description | Default |
31+
| -------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
32+
| `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) |
33+
| `premultiply` | Indicates whether noise will be multiplied with the input colors prior to blending | `false` |
34+
35+
36+
## Further Reading
37+
see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/NoiseEffect.js~NoiseEffect.html)

‎docs/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "docs",
3-
"private": true,
4-
"version": "0.0.0",
53
"type": "module",
4+
"version": "0.0.0",
5+
"private": true,
66
"scripts": {
77
"dev": "vitepress dev",
88
"build": "vitepress build",

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@tresjs/post-processing",
33
"type": "module",
4-
"version": "0.5.0",
4+
"version": "0.6.0-next.0",
55
"packageManager": "pnpm@8.10.2",
66
"description": "Post-processing library for TresJS",
77
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",

‎playground/components.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ declare module 'vue' {
99
export interface GlobalComponents {
1010
copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
1111
GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
12+
NoiseDemo: typeof import('./src/components/NoiseDemo.vue')['default']
1213
OutlineDemo: typeof import('./src/components/OutlineDemo.vue')['default']
1314
RouterLink: typeof import('vue-router')['RouterLink']
1415
RouterView: typeof import('vue-router')['RouterView']

‎playground/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
"dependencies": {
1212
"@tresjs/cientos": "^3.5.1",
1313
"@tresjs/core": "3.5.0",
14-
"@tresjs/leches": "^0.13.0",
1514
"vue-router": "^4.2.5"
1615
},
1716
"devDependencies": {
17+
"@tresjs/leches": "^0.13.0",
1818
"@types/three": "^0.158.1",
1919
"unplugin-auto-import": "^0.16.7",
2020
"unplugin-vue-components": "^0.25.2",
2121
"vite-plugin-qrcode": "^0.2.2"
2222
}
23-
}
23+
}

‎playground/src/pages/noise.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script setup lang="ts">
2+
import { TresCanvas } from '@tresjs/core'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
4+
import { EffectComposer, Noise } from '@tresjs/post-processing'
5+
import { OrbitControls } from '@tresjs/cientos'
6+
import { TresLeches, useControls } from '@tresjs/leches'
7+
import { BlendFunction } from 'postprocessing'
8+
import '@tresjs/leches/styles'
9+
10+
const gl = {
11+
clearColor: '#82DBC5',
12+
shadows: true,
13+
alpha: false,
14+
shadowMapType: BasicShadowMap,
15+
outputColorSpace: SRGBColorSpace,
16+
toneMapping: NoToneMapping,
17+
}
18+
const { value: premultiply } = useControls({
19+
premultiply: true,
20+
})
21+
22+
const { value: blendFunction } = useControls({
23+
blendFunction: {
24+
options: Object.keys(BlendFunction).map(key => ({
25+
text: key,
26+
value: BlendFunction[key],
27+
})),
28+
value: BlendFunction.SCREEN,
29+
},
30+
})
31+
</script>
32+
33+
<template>
34+
<TresLeches />
35+
<TresCanvas v-bind="gl">
36+
<TresPerspectiveCamera :position="[3, 3, 3]" />
37+
<OrbitControls />
38+
<TresGridHelper />
39+
<TresAmbientLight :intensity="1" />
40+
<Suspense>
41+
<EffectComposer :depth-buffer="true">
42+
<Noise
43+
:premultiply="premultiply"
44+
:blend-function="blendFunction"
45+
/>
46+
</EffectComposer>
47+
</Suspense>
48+
</TresCanvas>
49+
</template>

0 commit comments

Comments
 (0)