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 <[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]>
1 parent e15c060 commit cdb9497

File tree

15 files changed

+175
-14
lines changed

15 files changed

+175
-14
lines changed

‎CHANGELOG.md

+7
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

+1
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

+34
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

+2-3
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

+37
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

+2-2
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

+1-1
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": "[email protected]",
66
"description": "Post-processing library for TresJS",
77
"author": "Alvaro Saburido <[email protected]> (https://github.com/alvarosabu/)",

‎playground/components.d.ts

+1
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

+2-2
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

+49
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>

‎playground/src/router.ts

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const routes = [
2121
makeRoute('Glitch'),
2222
makeRoute('Depth of Field'),
2323
makeRoute('Pixelation'),
24+
makeRoute('Noise'),
2425
]
2526

2627
export const router = createRouter({

‎pnpm-lock.yaml

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/effects/Noise.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts" setup>
2+
import { BlendFunction, NoiseEffect } from 'postprocessing'
3+
import { useEffect } from '../composables/effect'
4+
import { makePropWatchersUsingAllProps } from '../../util/prop'
5+
import { omit } from '../../util/object'
6+
7+
export interface NoiseProps {
8+
/**
9+
* Whether the noise should be multiplied with the input color.
10+
*/
11+
premultiply?: boolean
12+
blendFunction?: BlendFunction
13+
}
14+
15+
const props = withDefaults(defineProps<NoiseProps>(), {
16+
premultiply: false,
17+
blendFunction: BlendFunction.SCREEN,
18+
})
19+
20+
const { pass, effect } = useEffect(() => new NoiseEffect(props))
21+
defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
22+
23+
makePropWatchersUsingAllProps(
24+
omit(props, ['blendFunction']),
25+
effect,
26+
() => new NoiseEffect(),
27+
)
28+
</script>
29+
30+
<template></template>

‎src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Glitch from './core/effects/Glitch.vue'
33
import Outline from './core/effects/Outline.vue'
44
import Pixelation from './core/effects/Pixelation.vue'
55
import DepthOfField from './core/effects/DepthOfField.vue'
6+
import Noise from './core/effects/Noise.vue'
67

78
import EffectComposer from './core/EffectComposer.vue'
89

@@ -13,4 +14,5 @@ export {
1314
Pixelation,
1415
DepthOfField,
1516
EffectComposer,
17+
Noise,
1618
}

‎stats.html

+1-1
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)