@react-three/postprocessing 3.0.2 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +81 -81
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +555 -0
  5. package/dist/index.js.map +1 -0
  6. package/package.json +66 -68
  7. package/src/EffectComposer.test.tsx +126 -126
  8. package/src/EffectComposer.tsx +200 -200
  9. package/src/Selection.tsx +46 -46
  10. package/src/effects/ASCII.tsx +135 -135
  11. package/src/effects/Autofocus.tsx +153 -153
  12. package/src/effects/Bloom.tsx +6 -6
  13. package/src/effects/BrightnessContrast.tsx +4 -4
  14. package/src/effects/ChromaticAberration.tsx +5 -5
  15. package/src/effects/ColorAverage.tsx +15 -15
  16. package/src/effects/ColorDepth.tsx +4 -4
  17. package/src/effects/Depth.tsx +4 -4
  18. package/src/effects/DepthOfField.tsx +89 -89
  19. package/src/effects/DotScreen.tsx +4 -4
  20. package/src/effects/FXAA.tsx +4 -4
  21. package/src/effects/Glitch.tsx +40 -40
  22. package/src/effects/GodRays.tsx +16 -16
  23. package/src/effects/Grid.tsx +21 -21
  24. package/src/effects/HueSaturation.tsx +4 -4
  25. package/src/effects/LUT.tsx +26 -26
  26. package/src/effects/LensFlare.tsx +611 -611
  27. package/src/effects/N8AO.tsx +81 -81
  28. package/src/effects/Noise.tsx +4 -4
  29. package/src/effects/Outline.tsx +117 -117
  30. package/src/effects/Pixelation.tsx +15 -15
  31. package/src/effects/Ramp.tsx +150 -150
  32. package/src/effects/SMAA.tsx +4 -4
  33. package/src/effects/SSAO.tsx +41 -41
  34. package/src/effects/ScanlineEffect.tsx +7 -7
  35. package/src/effects/SelectiveBloom.tsx +126 -126
  36. package/src/effects/Sepia.tsx +4 -4
  37. package/src/effects/ShockWave.tsx +4 -4
  38. package/src/effects/Texture.tsx +23 -23
  39. package/src/effects/TiltShift.tsx +4 -4
  40. package/src/effects/TiltShift2.tsx +90 -90
  41. package/src/effects/ToneMapping.tsx +6 -6
  42. package/src/effects/Vignette.tsx +4 -4
  43. package/src/effects/Water.tsx +35 -35
  44. package/src/index.ts +40 -40
  45. package/src/util.tsx +55 -55
package/package.json CHANGED
@@ -1,68 +1,66 @@
1
- {
2
- "name": "@react-three/postprocessing",
3
- "version": "3.0.2",
4
- "description": "postprocessing wrapper for React and @react-three/fiber",
5
- "keywords": [
6
- "postprocessing",
7
- "react",
8
- "three",
9
- "@react-three/fiber",
10
- "webgl",
11
- "3d"
12
- ],
13
- "license": "MIT",
14
- "files": [
15
- "dist",
16
- "src"
17
- ],
18
- "type": "module",
19
- "main": "./dist/index.js",
20
- "exports": "./dist/index.js",
21
- "sideEffects": false,
22
- "repository": {
23
- "type": "git",
24
- "url": "git+https://github.com/pmndrs/react-postprocessing.git"
25
- },
26
- "scripts": {
27
- "build": "vite build",
28
- "eslint": "eslint . --fix --ext=js,ts,jsx,tsx",
29
- "eslint:ci": "eslint . --ext=js,ts,jsx,tsx",
30
- "test": "vitest run",
31
- "typecheck": "tsc",
32
- "release": "semantic-release"
33
- },
34
- "dependencies": {
35
- "maath": "^0.6.0",
36
- "n8ao": "^1.9.4",
37
- "postprocessing": "^6.36.6"
38
- },
39
- "devDependencies": {
40
- "@react-three/fiber": "^9.0.1",
41
- "@types/node": "^22.10.7",
42
- "@types/react": "^19.0.2",
43
- "@types/react-dom": "^19.0.2",
44
- "@types/three": "^0.156.0",
45
- "@typescript-eslint/eslint-plugin": "^5.59.1",
46
- "@typescript-eslint/parser": "^5.59.1",
47
- "eslint": "^8.39.0",
48
- "eslint-config-prettier": "^8.8.0",
49
- "eslint-import-resolver-alias": "^1.1.2",
50
- "eslint-plugin-import": "^2.27.5",
51
- "eslint-plugin-prettier": "^4.2.1",
52
- "eslint-plugin-react": "^7.32.2",
53
- "eslint-plugin-react-hooks": "^4.6.0",
54
- "prettier": "^2.8.8",
55
- "react": "^19.0.0",
56
- "react-dom": "^19.0.0",
57
- "semantic-release": "^21.0.2",
58
- "three": "^0.156.0",
59
- "typescript": "^5.0.4",
60
- "vite": "^4.3.5",
61
- "vitest": "^2.1.8"
62
- },
63
- "peerDependencies": {
64
- "@react-three/fiber": "^9.0.0",
65
- "react": "^19.0",
66
- "three": ">= 0.156.0"
67
- }
68
- }
1
+ {
2
+ "name": "@react-three/postprocessing",
3
+ "version": "3.0.3",
4
+ "description": "postprocessing wrapper for React and @react-three/fiber",
5
+ "keywords": [
6
+ "postprocessing",
7
+ "react",
8
+ "three",
9
+ "@react-three/fiber",
10
+ "webgl",
11
+ "3d"
12
+ ],
13
+ "license": "MIT",
14
+ "files": [
15
+ "dist",
16
+ "src"
17
+ ],
18
+ "type": "module",
19
+ "main": "./dist/index.js",
20
+ "exports": "./dist/index.js",
21
+ "sideEffects": false,
22
+ "repository": {
23
+ "type": "git",
24
+ "url": "git+https://github.com/pmndrs/react-postprocessing.git"
25
+ },
26
+ "scripts": {
27
+ "build": "vite build",
28
+ "eslint": "eslint . --fix --ext=js,ts,jsx,tsx",
29
+ "eslint:ci": "eslint . --ext=js,ts,jsx,tsx",
30
+ "test": "vitest run",
31
+ "typecheck": "tsc"
32
+ },
33
+ "dependencies": {
34
+ "maath": "^0.6.0",
35
+ "n8ao": "^1.9.4",
36
+ "postprocessing": "^6.36.6"
37
+ },
38
+ "devDependencies": {
39
+ "@react-three/fiber": "^9.0.1",
40
+ "@types/node": "^22.10.7",
41
+ "@types/react": "^19.0.2",
42
+ "@types/react-dom": "^19.0.2",
43
+ "@types/three": "^0.156.0",
44
+ "@typescript-eslint/eslint-plugin": "^5.59.1",
45
+ "@typescript-eslint/parser": "^5.59.1",
46
+ "eslint": "^8.39.0",
47
+ "eslint-config-prettier": "^8.8.0",
48
+ "eslint-import-resolver-alias": "^1.1.2",
49
+ "eslint-plugin-import": "^2.27.5",
50
+ "eslint-plugin-prettier": "^4.2.1",
51
+ "eslint-plugin-react": "^7.32.2",
52
+ "eslint-plugin-react-hooks": "^4.6.0",
53
+ "prettier": "^2.8.8",
54
+ "react": "^19.0.0",
55
+ "react-dom": "^19.0.0",
56
+ "three": "^0.156.0",
57
+ "typescript": "^5.0.4",
58
+ "vite": "^4.3.5",
59
+ "vitest": "^2.1.8"
60
+ },
61
+ "peerDependencies": {
62
+ "@react-three/fiber": "^9.0.0",
63
+ "react": "^19.0",
64
+ "three": ">= 0.156.0"
65
+ }
66
+ }
@@ -1,126 +1,126 @@
1
- import * as React from 'react'
2
- import * as THREE from 'three'
3
- import { vi, describe, it, expect } from 'vitest'
4
- import { extend, createRoot, act } from '@react-three/fiber'
5
- import { EffectComposer } from './EffectComposer'
6
- import { EffectComposer as EffectComposerImpl, RenderPass, Pass, Effect, EffectPass } from 'postprocessing'
7
-
8
- // Let React know that we'll be testing effectful components
9
- declare global {
10
- var IS_REACT_ACT_ENVIRONMENT: boolean
11
- }
12
- global.IS_REACT_ACT_ENVIRONMENT = true
13
-
14
- // Create virtual R3F root for testing
15
- extend(THREE as any)
16
- const root = createRoot({
17
- style: {} as CSSStyleDeclaration,
18
- addEventListener: (() => {}) as any,
19
- removeEventListener: (() => {}) as any,
20
- width: 1280,
21
- height: 800,
22
- clientWidth: 1280,
23
- clientHeight: 800,
24
- getContext: (() =>
25
- new Proxy(
26
- {},
27
- {
28
- get(_target, prop) {
29
- switch (prop) {
30
- case 'getParameter':
31
- return () => 'WebGL 2' // GL_VERSION
32
- case 'getExtension':
33
- return () => ({}) // EXT_blend_minmax
34
- case 'getContextAttributes':
35
- return () => ({ alpha: true })
36
- case 'getShaderPrecisionFormat':
37
- return () => ({ rangeMin: 1, rangeMax: 1, precision: 1 })
38
- default:
39
- return () => {}
40
- }
41
- },
42
- }
43
- )) as any,
44
- } satisfies Partial<HTMLCanvasElement> as HTMLCanvasElement)
45
- root.configure({ frameloop: 'never' })
46
-
47
- const EFFECT_SHADER = 'mainImage() {}'
48
-
49
- describe('EffectComposer', () => {
50
- it('should merge effects together', async () => {
51
- const composerRef = React.createRef<EffectComposerImpl>()
52
-
53
- const effectA = new Effect('A', EFFECT_SHADER)
54
- const effectB = new Effect('B', EFFECT_SHADER)
55
- const effectC = new Effect('C', EFFECT_SHADER)
56
- const passA = new Pass()
57
- const passB = new Pass()
58
-
59
- // Forward order
60
- await act(async () =>
61
- root.render(
62
- <EffectComposer ref={composerRef}>
63
- {/* EffectPass(effectA, effectB) */}
64
- <primitive object={effectA} />
65
- <primitive object={effectB} />
66
- {/* PassA */}
67
- <primitive object={passA} />
68
- {/* EffectPass(effectC) */}
69
- <primitive object={effectC} />
70
- {/* PassB */}
71
- <primitive object={passB} />
72
- </EffectComposer>
73
- )
74
- )
75
- expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
76
- RenderPass,
77
- EffectPass,
78
- Pass,
79
- EffectPass,
80
- Pass,
81
- ])
82
- // @ts-expect-error
83
- expect((composerRef.current!.passes[1] as EffectPass).effects).toStrictEqual([effectA, effectB])
84
- expect(composerRef.current!.passes[2]).toBe(passA)
85
- // @ts-expect-error
86
- expect((composerRef.current!.passes[3] as EffectPass).effects).toStrictEqual([effectC])
87
- expect(composerRef.current!.passes[4]).toBe(passB)
88
-
89
- // NOTE: instance children ordering is unstable until R3F v9, so we remount from scratch
90
- await act(async () => root.render(null))
91
-
92
- // Reverse order
93
- await act(async () =>
94
- root.render(
95
- <EffectComposer ref={composerRef}>
96
- {/* PassB */}
97
- <primitive object={passB} />
98
- {/* EffectPass(effectC) */}
99
- <primitive object={effectC} />
100
- {/* PassA */}
101
- <primitive object={passA} />
102
- {/* EffectPass(effectB, effectA) */}
103
- <primitive object={effectB} />
104
- <primitive object={effectA} />
105
- </EffectComposer>
106
- )
107
- )
108
- expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
109
- RenderPass,
110
- Pass,
111
- EffectPass,
112
- Pass,
113
- EffectPass,
114
- ])
115
- expect(composerRef.current!.passes[1]).toBe(passB)
116
- // @ts-expect-error
117
- expect((composerRef.current!.passes[2] as EffectPass).effects).toStrictEqual([effectC])
118
- expect(composerRef.current!.passes[3]).toBe(passA)
119
- // @ts-expect-error
120
- expect((composerRef.current!.passes[4] as EffectPass).effects).toStrictEqual([effectB, effectA])
121
- })
122
-
123
- it.skip('should split convolution effects', async () => {
124
- await act(async () => root.render(null))
125
- })
126
- })
1
+ import * as React from 'react'
2
+ import * as THREE from 'three'
3
+ import { vi, describe, it, expect } from 'vitest'
4
+ import { extend, createRoot, act } from '@react-three/fiber'
5
+ import { EffectComposer } from './EffectComposer'
6
+ import { EffectComposer as EffectComposerImpl, RenderPass, Pass, Effect, EffectPass } from 'postprocessing'
7
+
8
+ // Let React know that we'll be testing effectful components
9
+ declare global {
10
+ var IS_REACT_ACT_ENVIRONMENT: boolean
11
+ }
12
+ global.IS_REACT_ACT_ENVIRONMENT = true
13
+
14
+ // Create virtual R3F root for testing
15
+ extend(THREE as any)
16
+ const root = createRoot({
17
+ style: {} as CSSStyleDeclaration,
18
+ addEventListener: (() => {}) as any,
19
+ removeEventListener: (() => {}) as any,
20
+ width: 1280,
21
+ height: 800,
22
+ clientWidth: 1280,
23
+ clientHeight: 800,
24
+ getContext: (() =>
25
+ new Proxy(
26
+ {},
27
+ {
28
+ get(_target, prop) {
29
+ switch (prop) {
30
+ case 'getParameter':
31
+ return () => 'WebGL 2' // GL_VERSION
32
+ case 'getExtension':
33
+ return () => ({}) // EXT_blend_minmax
34
+ case 'getContextAttributes':
35
+ return () => ({ alpha: true })
36
+ case 'getShaderPrecisionFormat':
37
+ return () => ({ rangeMin: 1, rangeMax: 1, precision: 1 })
38
+ default:
39
+ return () => {}
40
+ }
41
+ },
42
+ }
43
+ )) as any,
44
+ } satisfies Partial<HTMLCanvasElement> as HTMLCanvasElement)
45
+ root.configure({ frameloop: 'never' })
46
+
47
+ const EFFECT_SHADER = 'mainImage() {}'
48
+
49
+ describe('EffectComposer', () => {
50
+ it('should merge effects together', async () => {
51
+ const composerRef = React.createRef<EffectComposerImpl>()
52
+
53
+ const effectA = new Effect('A', EFFECT_SHADER)
54
+ const effectB = new Effect('B', EFFECT_SHADER)
55
+ const effectC = new Effect('C', EFFECT_SHADER)
56
+ const passA = new Pass()
57
+ const passB = new Pass()
58
+
59
+ // Forward order
60
+ await act(async () =>
61
+ root.render(
62
+ <EffectComposer ref={composerRef}>
63
+ {/* EffectPass(effectA, effectB) */}
64
+ <primitive object={effectA} />
65
+ <primitive object={effectB} />
66
+ {/* PassA */}
67
+ <primitive object={passA} />
68
+ {/* EffectPass(effectC) */}
69
+ <primitive object={effectC} />
70
+ {/* PassB */}
71
+ <primitive object={passB} />
72
+ </EffectComposer>
73
+ )
74
+ )
75
+ expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
76
+ RenderPass,
77
+ EffectPass,
78
+ Pass,
79
+ EffectPass,
80
+ Pass,
81
+ ])
82
+ // @ts-expect-error
83
+ expect((composerRef.current!.passes[1] as EffectPass).effects).toStrictEqual([effectA, effectB])
84
+ expect(composerRef.current!.passes[2]).toBe(passA)
85
+ // @ts-expect-error
86
+ expect((composerRef.current!.passes[3] as EffectPass).effects).toStrictEqual([effectC])
87
+ expect(composerRef.current!.passes[4]).toBe(passB)
88
+
89
+ // NOTE: instance children ordering is unstable until R3F v9, so we remount from scratch
90
+ await act(async () => root.render(null))
91
+
92
+ // Reverse order
93
+ await act(async () =>
94
+ root.render(
95
+ <EffectComposer ref={composerRef}>
96
+ {/* PassB */}
97
+ <primitive object={passB} />
98
+ {/* EffectPass(effectC) */}
99
+ <primitive object={effectC} />
100
+ {/* PassA */}
101
+ <primitive object={passA} />
102
+ {/* EffectPass(effectB, effectA) */}
103
+ <primitive object={effectB} />
104
+ <primitive object={effectA} />
105
+ </EffectComposer>
106
+ )
107
+ )
108
+ expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
109
+ RenderPass,
110
+ Pass,
111
+ EffectPass,
112
+ Pass,
113
+ EffectPass,
114
+ ])
115
+ expect(composerRef.current!.passes[1]).toBe(passB)
116
+ // @ts-expect-error
117
+ expect((composerRef.current!.passes[2] as EffectPass).effects).toStrictEqual([effectC])
118
+ expect(composerRef.current!.passes[3]).toBe(passA)
119
+ // @ts-expect-error
120
+ expect((composerRef.current!.passes[4] as EffectPass).effects).toStrictEqual([effectB, effectA])
121
+ })
122
+
123
+ it.skip('should split convolution effects', async () => {
124
+ await act(async () => root.render(null))
125
+ })
126
+ })