@react-three/postprocessing 2.15.13 → 2.16.1
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.
- package/dist/EffectComposer.cjs +10 -3
- package/dist/EffectComposer.cjs.map +1 -1
- package/dist/EffectComposer.d.ts +2 -1
- package/dist/EffectComposer.js +11 -4
- package/dist/EffectComposer.js.map +1 -1
- package/dist/effects/Texture.cjs +4 -1
- package/dist/effects/Texture.cjs.map +1 -1
- package/dist/effects/Texture.js +5 -2
- package/dist/effects/Texture.js.map +1 -1
- package/dist/effects/Water.cjs +33 -0
- package/dist/effects/Water.cjs.map +1 -0
- package/dist/effects/Water.d.ts +15 -0
- package/dist/effects/Water.js +33 -0
- package/dist/effects/Water.js.map +1 -0
- package/dist/index.cjs +3 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/EffectComposer.cjs
CHANGED
|
@@ -19,7 +19,7 @@ const EffectComposer = React.memo(
|
|
|
19
19
|
renderPriority = 1,
|
|
20
20
|
autoClear = true,
|
|
21
21
|
depthBuffer,
|
|
22
|
-
|
|
22
|
+
enableNormalPass,
|
|
23
23
|
stencilBuffer,
|
|
24
24
|
multisampling = 8,
|
|
25
25
|
frameBufferType = THREE.HalfFloatType
|
|
@@ -38,7 +38,7 @@ const EffectComposer = React.memo(
|
|
|
38
38
|
effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
|
|
39
39
|
let downSamplingPass2 = null;
|
|
40
40
|
let normalPass2 = null;
|
|
41
|
-
if (
|
|
41
|
+
if (enableNormalPass) {
|
|
42
42
|
normalPass2 = new postprocessing.NormalPass(scene, camera);
|
|
43
43
|
normalPass2.enabled = false;
|
|
44
44
|
effectComposer.addPass(normalPass2);
|
|
@@ -57,7 +57,7 @@ const EffectComposer = React.memo(
|
|
|
57
57
|
multisampling,
|
|
58
58
|
frameBufferType,
|
|
59
59
|
scene,
|
|
60
|
-
|
|
60
|
+
enableNormalPass,
|
|
61
61
|
resolutionScale
|
|
62
62
|
]);
|
|
63
63
|
React.useEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
|
|
@@ -115,6 +115,13 @@ const EffectComposer = React.memo(
|
|
|
115
115
|
downSamplingPass.enabled = false;
|
|
116
116
|
};
|
|
117
117
|
}, [composer, children, camera, normalPass, downSamplingPass, instance]);
|
|
118
|
+
React.useEffect(() => {
|
|
119
|
+
const currentTonemapping = gl.toneMapping;
|
|
120
|
+
gl.toneMapping = THREE.NoToneMapping;
|
|
121
|
+
return () => {
|
|
122
|
+
gl.toneMapping = currentTonemapping;
|
|
123
|
+
};
|
|
124
|
+
}, []);
|
|
118
125
|
const state = React.useMemo(
|
|
119
126
|
() => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),
|
|
120
127
|
[composer, normalPass, downSamplingPass, resolutionScale, camera, scene]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EffectComposer.cjs","sources":["../src/EffectComposer.tsx"],"sourcesContent":["import type { TextureDataType } from 'three'\nimport { HalfFloatType } from 'three'\nimport React, {\n forwardRef,\n useMemo,\n useEffect,\n useLayoutEffect,\n createContext,\n useRef,\n useImperativeHandle,\n} from 'react'\nimport { useThree, useFrame, useInstanceHandle } from '@react-three/fiber'\nimport {\n EffectComposer as EffectComposerImpl,\n RenderPass,\n EffectPass,\n NormalPass,\n // @ts-ignore\n DepthDownsamplingPass,\n Effect,\n Pass,\n EffectAttribute,\n} from 'postprocessing'\nimport { isWebGL2Available } from 'three-stdlib'\n\nexport const EffectComposerContext = createContext<{\n composer: EffectComposerImpl\n normalPass: NormalPass | null\n downSamplingPass: DepthDownsamplingPass | null\n camera: THREE.Camera\n scene: THREE.Scene\n resolutionScale?: number\n}>(null!)\n\nexport type EffectComposerProps = {\n enabled?: boolean\n children: JSX.Element | JSX.Element[]\n depthBuffer?: boolean\n
|
|
1
|
+
{"version":3,"file":"EffectComposer.cjs","sources":["../src/EffectComposer.tsx"],"sourcesContent":["import type { TextureDataType } from 'three'\nimport { HalfFloatType, NoToneMapping } from 'three'\nimport React, {\n forwardRef,\n useMemo,\n useEffect,\n useLayoutEffect,\n createContext,\n useRef,\n useImperativeHandle,\n} from 'react'\nimport { useThree, useFrame, useInstanceHandle } from '@react-three/fiber'\nimport {\n EffectComposer as EffectComposerImpl,\n RenderPass,\n EffectPass,\n NormalPass,\n // @ts-ignore\n DepthDownsamplingPass,\n Effect,\n Pass,\n EffectAttribute,\n} from 'postprocessing'\nimport { isWebGL2Available } from 'three-stdlib'\n\nexport const EffectComposerContext = createContext<{\n composer: EffectComposerImpl\n normalPass: NormalPass | null\n downSamplingPass: DepthDownsamplingPass | null\n camera: THREE.Camera\n scene: THREE.Scene\n resolutionScale?: number\n}>(null!)\n\nexport type EffectComposerProps = { \n enabled?: boolean\n children: JSX.Element | JSX.Element[]\n depthBuffer?: boolean\n /** Only used for SSGI currently, leave it disabled for everything else unless it's needed */\n enableNormalPass?: boolean\n stencilBuffer?: boolean\n autoClear?: boolean\n resolutionScale?: number\n multisampling?: number\n frameBufferType?: TextureDataType\n renderPriority?: number\n camera?: THREE.Camera\n scene?: THREE.Scene\n}\n\nconst isConvolution = (effect: Effect): boolean =>\n (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION\n\nexport const EffectComposer = React.memo(\n forwardRef(\n (\n {\n children,\n camera: _camera,\n scene: _scene,\n resolutionScale,\n enabled = true,\n renderPriority = 1,\n autoClear = true,\n depthBuffer,\n enableNormalPass,\n stencilBuffer,\n multisampling = 8,\n frameBufferType = HalfFloatType,\n }: EffectComposerProps,\n ref\n ) => {\n const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree()\n const scene = _scene || defaultScene\n const camera = _camera || defaultCamera\n\n const [composer, normalPass, downSamplingPass] = useMemo(() => {\n const webGL2Available = isWebGL2Available()\n // Initialize composer\n const effectComposer = new EffectComposerImpl(gl, {\n depthBuffer,\n stencilBuffer,\n multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,\n frameBufferType,\n })\n\n // Add render pass\n effectComposer.addPass(new RenderPass(scene, camera))\n\n // Create normal pass\n let downSamplingPass = null\n let normalPass = null\n if (enableNormalPass) {\n normalPass = new NormalPass(scene, camera)\n normalPass.enabled = false\n effectComposer.addPass(normalPass)\n if (resolutionScale !== undefined && webGL2Available) {\n downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale })\n downSamplingPass.enabled = false\n effectComposer.addPass(downSamplingPass)\n }\n }\n\n return [effectComposer, normalPass, downSamplingPass]\n }, [\n camera,\n gl,\n depthBuffer,\n stencilBuffer,\n multisampling,\n frameBufferType,\n scene,\n enableNormalPass,\n resolutionScale,\n ])\n\n useEffect(() => composer?.setSize(size.width, size.height), [composer, size])\n useFrame(\n (_, delta) => {\n if (enabled) {\n const currentAutoClear = gl.autoClear\n gl.autoClear = autoClear\n if (stencilBuffer && !autoClear) gl.clearStencil()\n composer.render(delta)\n gl.autoClear = currentAutoClear\n }\n },\n enabled ? renderPriority : 0\n )\n\n const group = useRef(null)\n const instance = useInstanceHandle(group)\n useLayoutEffect(() => {\n const passes: Pass[] = []\n\n if (group.current && instance.current && composer) {\n const children = instance.current.objects as unknown[]\n\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (child instanceof Effect) {\n const effects: Effect[] = [child]\n\n if (!isConvolution(child)) {\n let next: unknown = null\n while ((next = children[i + 1]) instanceof Effect) {\n if (isConvolution(next)) break\n effects.push(next)\n i++\n }\n }\n\n const pass = new EffectPass(camera, ...effects)\n passes.push(pass)\n } else if (child instanceof Pass) {\n passes.push(child)\n }\n }\n\n for (const pass of passes) composer?.addPass(pass)\n\n if (normalPass) normalPass.enabled = true\n if (downSamplingPass) downSamplingPass.enabled = true\n }\n\n return () => {\n for (const pass of passes) composer?.removePass(pass)\n if (normalPass) normalPass.enabled = false\n if (downSamplingPass) downSamplingPass.enabled = false\n }\n }, [composer, children, camera, normalPass, downSamplingPass, instance])\n\n // Disable tone mapping because threejs disallows tonemapping on render targets\n useEffect(() => {\n const currentTonemapping = gl.toneMapping\n gl.toneMapping = NoToneMapping\n return () => {\n gl.toneMapping = currentTonemapping\n }\n }, [])\n\n // Memoize state, otherwise it would trigger all consumers on every render\n const state = useMemo(\n () => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),\n [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]\n )\n\n // Expose the composer\n useImperativeHandle(ref, () => composer, [composer])\n\n return (\n <EffectComposerContext.Provider value={state}>\n <group ref={group}>{children}</group>\n </EffectComposerContext.Provider>\n )\n }\n )\n)\n"],"names":["createContext","EffectAttribute","forwardRef","HalfFloatType","useThree","useMemo","isWebGL2Available","EffectComposerImpl","RenderPass","downSamplingPass","normalPass","NormalPass","DepthDownsamplingPass","useEffect","useFrame","useRef","useInstanceHandle","useLayoutEffect","children","Effect","EffectPass","Pass","NoToneMapping","useImperativeHandle","jsx"],"mappings":"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"}
|
package/dist/EffectComposer.d.ts
CHANGED
|
@@ -13,7 +13,8 @@ export type EffectComposerProps = {
|
|
|
13
13
|
enabled?: boolean;
|
|
14
14
|
children: JSX.Element | JSX.Element[];
|
|
15
15
|
depthBuffer?: boolean;
|
|
16
|
-
|
|
16
|
+
/** Only used for SSGI currently, leave it disabled for everything else unless it's needed */
|
|
17
|
+
enableNormalPass?: boolean;
|
|
17
18
|
stencilBuffer?: boolean;
|
|
18
19
|
autoClear?: boolean;
|
|
19
20
|
resolutionScale?: number;
|
package/dist/EffectComposer.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { HalfFloatType } from "three";
|
|
2
|
+
import { NoToneMapping, HalfFloatType } from "three";
|
|
3
3
|
import React, { createContext, forwardRef, useMemo, useEffect, useRef, useLayoutEffect, useImperativeHandle } from "react";
|
|
4
4
|
import { useThree, useFrame, useInstanceHandle } from "@react-three/fiber";
|
|
5
5
|
import { EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, EffectAttribute, Pass } from "postprocessing";
|
|
@@ -17,7 +17,7 @@ const EffectComposer = React.memo(
|
|
|
17
17
|
renderPriority = 1,
|
|
18
18
|
autoClear = true,
|
|
19
19
|
depthBuffer,
|
|
20
|
-
|
|
20
|
+
enableNormalPass,
|
|
21
21
|
stencilBuffer,
|
|
22
22
|
multisampling = 8,
|
|
23
23
|
frameBufferType = HalfFloatType
|
|
@@ -36,7 +36,7 @@ const EffectComposer = React.memo(
|
|
|
36
36
|
effectComposer.addPass(new RenderPass(scene, camera));
|
|
37
37
|
let downSamplingPass2 = null;
|
|
38
38
|
let normalPass2 = null;
|
|
39
|
-
if (
|
|
39
|
+
if (enableNormalPass) {
|
|
40
40
|
normalPass2 = new NormalPass(scene, camera);
|
|
41
41
|
normalPass2.enabled = false;
|
|
42
42
|
effectComposer.addPass(normalPass2);
|
|
@@ -55,7 +55,7 @@ const EffectComposer = React.memo(
|
|
|
55
55
|
multisampling,
|
|
56
56
|
frameBufferType,
|
|
57
57
|
scene,
|
|
58
|
-
|
|
58
|
+
enableNormalPass,
|
|
59
59
|
resolutionScale
|
|
60
60
|
]);
|
|
61
61
|
useEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
|
|
@@ -113,6 +113,13 @@ const EffectComposer = React.memo(
|
|
|
113
113
|
downSamplingPass.enabled = false;
|
|
114
114
|
};
|
|
115
115
|
}, [composer, children, camera, normalPass, downSamplingPass, instance]);
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
const currentTonemapping = gl.toneMapping;
|
|
118
|
+
gl.toneMapping = NoToneMapping;
|
|
119
|
+
return () => {
|
|
120
|
+
gl.toneMapping = currentTonemapping;
|
|
121
|
+
};
|
|
122
|
+
}, []);
|
|
116
123
|
const state = useMemo(
|
|
117
124
|
() => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),
|
|
118
125
|
[composer, normalPass, downSamplingPass, resolutionScale, camera, scene]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EffectComposer.js","sources":["../src/EffectComposer.tsx"],"sourcesContent":["import type { TextureDataType } from 'three'\nimport { HalfFloatType } from 'three'\nimport React, {\n forwardRef,\n useMemo,\n useEffect,\n useLayoutEffect,\n createContext,\n useRef,\n useImperativeHandle,\n} from 'react'\nimport { useThree, useFrame, useInstanceHandle } from '@react-three/fiber'\nimport {\n EffectComposer as EffectComposerImpl,\n RenderPass,\n EffectPass,\n NormalPass,\n // @ts-ignore\n DepthDownsamplingPass,\n Effect,\n Pass,\n EffectAttribute,\n} from 'postprocessing'\nimport { isWebGL2Available } from 'three-stdlib'\n\nexport const EffectComposerContext = createContext<{\n composer: EffectComposerImpl\n normalPass: NormalPass | null\n downSamplingPass: DepthDownsamplingPass | null\n camera: THREE.Camera\n scene: THREE.Scene\n resolutionScale?: number\n}>(null!)\n\nexport type EffectComposerProps = {\n enabled?: boolean\n children: JSX.Element | JSX.Element[]\n depthBuffer?: boolean\n
|
|
1
|
+
{"version":3,"file":"EffectComposer.js","sources":["../src/EffectComposer.tsx"],"sourcesContent":["import type { TextureDataType } from 'three'\nimport { HalfFloatType, NoToneMapping } from 'three'\nimport React, {\n forwardRef,\n useMemo,\n useEffect,\n useLayoutEffect,\n createContext,\n useRef,\n useImperativeHandle,\n} from 'react'\nimport { useThree, useFrame, useInstanceHandle } from '@react-three/fiber'\nimport {\n EffectComposer as EffectComposerImpl,\n RenderPass,\n EffectPass,\n NormalPass,\n // @ts-ignore\n DepthDownsamplingPass,\n Effect,\n Pass,\n EffectAttribute,\n} from 'postprocessing'\nimport { isWebGL2Available } from 'three-stdlib'\n\nexport const EffectComposerContext = createContext<{\n composer: EffectComposerImpl\n normalPass: NormalPass | null\n downSamplingPass: DepthDownsamplingPass | null\n camera: THREE.Camera\n scene: THREE.Scene\n resolutionScale?: number\n}>(null!)\n\nexport type EffectComposerProps = { \n enabled?: boolean\n children: JSX.Element | JSX.Element[]\n depthBuffer?: boolean\n /** Only used for SSGI currently, leave it disabled for everything else unless it's needed */\n enableNormalPass?: boolean\n stencilBuffer?: boolean\n autoClear?: boolean\n resolutionScale?: number\n multisampling?: number\n frameBufferType?: TextureDataType\n renderPriority?: number\n camera?: THREE.Camera\n scene?: THREE.Scene\n}\n\nconst isConvolution = (effect: Effect): boolean =>\n (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION\n\nexport const EffectComposer = React.memo(\n forwardRef(\n (\n {\n children,\n camera: _camera,\n scene: _scene,\n resolutionScale,\n enabled = true,\n renderPriority = 1,\n autoClear = true,\n depthBuffer,\n enableNormalPass,\n stencilBuffer,\n multisampling = 8,\n frameBufferType = HalfFloatType,\n }: EffectComposerProps,\n ref\n ) => {\n const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree()\n const scene = _scene || defaultScene\n const camera = _camera || defaultCamera\n\n const [composer, normalPass, downSamplingPass] = useMemo(() => {\n const webGL2Available = isWebGL2Available()\n // Initialize composer\n const effectComposer = new EffectComposerImpl(gl, {\n depthBuffer,\n stencilBuffer,\n multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,\n frameBufferType,\n })\n\n // Add render pass\n effectComposer.addPass(new RenderPass(scene, camera))\n\n // Create normal pass\n let downSamplingPass = null\n let normalPass = null\n if (enableNormalPass) {\n normalPass = new NormalPass(scene, camera)\n normalPass.enabled = false\n effectComposer.addPass(normalPass)\n if (resolutionScale !== undefined && webGL2Available) {\n downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale })\n downSamplingPass.enabled = false\n effectComposer.addPass(downSamplingPass)\n }\n }\n\n return [effectComposer, normalPass, downSamplingPass]\n }, [\n camera,\n gl,\n depthBuffer,\n stencilBuffer,\n multisampling,\n frameBufferType,\n scene,\n enableNormalPass,\n resolutionScale,\n ])\n\n useEffect(() => composer?.setSize(size.width, size.height), [composer, size])\n useFrame(\n (_, delta) => {\n if (enabled) {\n const currentAutoClear = gl.autoClear\n gl.autoClear = autoClear\n if (stencilBuffer && !autoClear) gl.clearStencil()\n composer.render(delta)\n gl.autoClear = currentAutoClear\n }\n },\n enabled ? renderPriority : 0\n )\n\n const group = useRef(null)\n const instance = useInstanceHandle(group)\n useLayoutEffect(() => {\n const passes: Pass[] = []\n\n if (group.current && instance.current && composer) {\n const children = instance.current.objects as unknown[]\n\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n\n if (child instanceof Effect) {\n const effects: Effect[] = [child]\n\n if (!isConvolution(child)) {\n let next: unknown = null\n while ((next = children[i + 1]) instanceof Effect) {\n if (isConvolution(next)) break\n effects.push(next)\n i++\n }\n }\n\n const pass = new EffectPass(camera, ...effects)\n passes.push(pass)\n } else if (child instanceof Pass) {\n passes.push(child)\n }\n }\n\n for (const pass of passes) composer?.addPass(pass)\n\n if (normalPass) normalPass.enabled = true\n if (downSamplingPass) downSamplingPass.enabled = true\n }\n\n return () => {\n for (const pass of passes) composer?.removePass(pass)\n if (normalPass) normalPass.enabled = false\n if (downSamplingPass) downSamplingPass.enabled = false\n }\n }, [composer, children, camera, normalPass, downSamplingPass, instance])\n\n // Disable tone mapping because threejs disallows tonemapping on render targets\n useEffect(() => {\n const currentTonemapping = gl.toneMapping\n gl.toneMapping = NoToneMapping\n return () => {\n gl.toneMapping = currentTonemapping\n }\n }, [])\n\n // Memoize state, otherwise it would trigger all consumers on every render\n const state = useMemo(\n () => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),\n [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]\n )\n\n // Expose the composer\n useImperativeHandle(ref, () => composer, [composer])\n\n return (\n <EffectComposerContext.Provider value={state}>\n <group ref={group}>{children}</group>\n </EffectComposerContext.Provider>\n )\n }\n )\n)\n"],"names":["EffectComposerImpl","downSamplingPass","normalPass","children"],"mappings":"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"}
|
package/dist/effects/Texture.cjs
CHANGED
|
@@ -8,7 +8,10 @@ const THREE = require("three");
|
|
|
8
8
|
const Texture = React.forwardRef(function Texture2({ textureSrc, texture, ...props }, ref) {
|
|
9
9
|
const t = fiber.useLoader(THREE.TextureLoader, textureSrc);
|
|
10
10
|
React.useLayoutEffect(() => {
|
|
11
|
-
|
|
11
|
+
if ("encoding" in t)
|
|
12
|
+
t.encoding = 3001;
|
|
13
|
+
else
|
|
14
|
+
t.colorSpace = "srgb";
|
|
12
15
|
t.wrapS = t.wrapT = THREE.RepeatWrapping;
|
|
13
16
|
}, [t]);
|
|
14
17
|
const effect = React.useMemo(() => new postprocessing.TextureEffect({ ...props, texture: t || texture }), [props, t, texture]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Texture.cjs","sources":["../../src/effects/Texture.tsx"],"sourcesContent":["import { TextureEffect } from 'postprocessing'\nimport { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'\nimport { useLoader } from '@react-three/fiber'\nimport { TextureLoader,
|
|
1
|
+
{"version":3,"file":"Texture.cjs","sources":["../../src/effects/Texture.tsx"],"sourcesContent":["import { TextureEffect } from 'postprocessing'\nimport { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'\nimport { useLoader } from '@react-three/fiber'\nimport { TextureLoader, RepeatWrapping } from 'three'\n\ntype TextureProps = ConstructorParameters<typeof TextureEffect>[0] & {\n textureSrc: string\n}\n\nexport const Texture = forwardRef<TextureEffect, TextureProps>(function Texture(\n { textureSrc, texture, ...props }: TextureProps,\n ref: Ref<TextureEffect>\n) {\n const t = useLoader(TextureLoader, textureSrc)\n useLayoutEffect(() => {\n // @ts-ignore\n if ('encoding' in t) t.encoding = 3001 // sRGBEncoding\n // @ts-ignore\n else t.colorSpace = 'srgb'\n t.wrapS = t.wrapT = RepeatWrapping\n }, [t])\n const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [props, t, texture])\n return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["forwardRef","Texture","useLoader","TextureLoader","useLayoutEffect","RepeatWrapping","useMemo","TextureEffect"],"mappings":";;;;;;;AASa,MAAA,UAAUA,MAAAA,WAAwC,SAASC,SACtE,EAAE,YAAY,SAAS,GAAG,MAAM,GAChC,KACA;AACM,QAAA,IAAIC,MAAAA,UAAUC,MAAA,eAAe,UAAU;AAC7CC,QAAAA,gBAAgB,MAAM;AAEpB,QAAI,cAAc;AAAG,QAAE,WAAW;AAAA;AAE7B,QAAE,aAAa;AAClB,MAAA,QAAQ,EAAE,QAAQC,MAAAA;AAAAA,EAAA,GACnB,CAAC,CAAC,CAAC;AACN,QAAM,SAASC,MAAAA,QAAQ,MAAM,IAAIC,eAAAA,cAAc,EAAE,GAAG,OAAO,SAAS,KAAK,QAAS,CAAA,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;AACxG,wCAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;;"}
|
package/dist/effects/Texture.js
CHANGED
|
@@ -2,11 +2,14 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { TextureEffect } from "postprocessing";
|
|
3
3
|
import { forwardRef, useLayoutEffect, useMemo } from "react";
|
|
4
4
|
import { useLoader } from "@react-three/fiber";
|
|
5
|
-
import { TextureLoader,
|
|
5
|
+
import { TextureLoader, RepeatWrapping } from "three";
|
|
6
6
|
const Texture = forwardRef(function Texture2({ textureSrc, texture, ...props }, ref) {
|
|
7
7
|
const t = useLoader(TextureLoader, textureSrc);
|
|
8
8
|
useLayoutEffect(() => {
|
|
9
|
-
|
|
9
|
+
if ("encoding" in t)
|
|
10
|
+
t.encoding = 3001;
|
|
11
|
+
else
|
|
12
|
+
t.colorSpace = "srgb";
|
|
10
13
|
t.wrapS = t.wrapT = RepeatWrapping;
|
|
11
14
|
}, [t]);
|
|
12
15
|
const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [props, t, texture]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Texture.js","sources":["../../src/effects/Texture.tsx"],"sourcesContent":["import { TextureEffect } from 'postprocessing'\nimport { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'\nimport { useLoader } from '@react-three/fiber'\nimport { TextureLoader,
|
|
1
|
+
{"version":3,"file":"Texture.js","sources":["../../src/effects/Texture.tsx"],"sourcesContent":["import { TextureEffect } from 'postprocessing'\nimport { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'\nimport { useLoader } from '@react-three/fiber'\nimport { TextureLoader, RepeatWrapping } from 'three'\n\ntype TextureProps = ConstructorParameters<typeof TextureEffect>[0] & {\n textureSrc: string\n}\n\nexport const Texture = forwardRef<TextureEffect, TextureProps>(function Texture(\n { textureSrc, texture, ...props }: TextureProps,\n ref: Ref<TextureEffect>\n) {\n const t = useLoader(TextureLoader, textureSrc)\n useLayoutEffect(() => {\n // @ts-ignore\n if ('encoding' in t) t.encoding = 3001 // sRGBEncoding\n // @ts-ignore\n else t.colorSpace = 'srgb'\n t.wrapS = t.wrapT = RepeatWrapping\n }, [t])\n const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [props, t, texture])\n return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["Texture"],"mappings":";;;;;AASa,MAAA,UAAU,WAAwC,SAASA,SACtE,EAAE,YAAY,SAAS,GAAG,MAAM,GAChC,KACA;AACM,QAAA,IAAI,UAAU,eAAe,UAAU;AAC7C,kBAAgB,MAAM;AAEpB,QAAI,cAAc;AAAG,QAAE,WAAW;AAAA;AAE7B,QAAE,aAAa;AAClB,MAAA,QAAQ,EAAE,QAAQ;AAAA,EAAA,GACnB,CAAC,CAAC,CAAC;AACN,QAAM,SAAS,QAAQ,MAAM,IAAI,cAAc,EAAE,GAAG,OAAO,SAAS,KAAK,QAAS,CAAA,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;AACxG,6BAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const THREE = require("three");
|
|
4
|
+
const postprocessing = require("postprocessing");
|
|
5
|
+
const util = require("../util.cjs");
|
|
6
|
+
const WaterShader = {
|
|
7
|
+
fragmentShader: `
|
|
8
|
+
uniform float factor;
|
|
9
|
+
void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
|
|
10
|
+
vec2 vUv = uv;
|
|
11
|
+
float frequency = 6.0 * factor;
|
|
12
|
+
float amplitude = 0.015 * factor;
|
|
13
|
+
float x = vUv.y * frequency + time * .7;
|
|
14
|
+
float y = vUv.x * frequency + time * .3;
|
|
15
|
+
vUv.x += cos(x+y) * amplitude * cos(y);
|
|
16
|
+
vUv.y += sin(x-y) * amplitude * cos(y);
|
|
17
|
+
vec4 rgba = texture2D(inputBuffer, vUv);
|
|
18
|
+
outputColor = rgba;
|
|
19
|
+
}`
|
|
20
|
+
};
|
|
21
|
+
class WaterEffectImpl extends postprocessing.Effect {
|
|
22
|
+
constructor({ blendFunction = postprocessing.BlendFunction.NORMAL, factor = 0 } = {}) {
|
|
23
|
+
super("WaterEffect", WaterShader.fragmentShader, {
|
|
24
|
+
blendFunction,
|
|
25
|
+
attributes: postprocessing.EffectAttribute.CONVOLUTION,
|
|
26
|
+
uniforms: /* @__PURE__ */ new Map([["factor", new THREE.Uniform(factor)]])
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
const WaterEffect = util.wrapEffect(WaterEffectImpl, { blendFunction: postprocessing.BlendFunction.NORMAL });
|
|
31
|
+
exports.WaterEffect = WaterEffect;
|
|
32
|
+
exports.WaterEffectImpl = WaterEffectImpl;
|
|
33
|
+
//# sourceMappingURL=Water.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Water.cjs","sources":["../../src/effects/Water.tsx"],"sourcesContent":["import { Uniform } from 'three'\nimport { BlendFunction, Effect, EffectAttribute } from 'postprocessing'\nimport { wrapEffect } from '../util'\n\nconst WaterShader = {\n fragmentShader: `\n uniform float factor;\n void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n vec2 vUv = uv;\n float frequency = 6.0 * factor;\n float amplitude = 0.015 * factor;\n float x = vUv.y * frequency + time * .7; \n float y = vUv.x * frequency + time * .3;\n vUv.x += cos(x+y) * amplitude * cos(y);\n vUv.y += sin(x-y) * amplitude * cos(y);\n vec4 rgba = texture2D(inputBuffer, vUv);\n outputColor = rgba;\n }`\n}\n\nexport class WaterEffectImpl extends Effect {\n constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {\n super('WaterEffect', WaterShader.fragmentShader, {\n blendFunction,\n attributes: EffectAttribute.CONVOLUTION,\n uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]])\n })\n }\n}\n\nexport const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL })\n"],"names":["Effect","BlendFunction","EffectAttribute","Uniform","wrapEffect"],"mappings":";;;;;AAIA,MAAM,cAAc;AAAA,EAClB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAalB;AAEO,MAAM,wBAAwBA,eAAAA,OAAO;AAAA,EAC1C,YAAY,EAAE,gBAAgBC,eAAA,cAAc,QAAQ,SAAS,EAAM,IAAA,IAAI;AAC/D,UAAA,eAAe,YAAY,gBAAgB;AAAA,MAC/C;AAAA,MACA,YAAYC,eAAgB,gBAAA;AAAA,MAC5B,UAAc,oBAAA,IAAwC,CAAC,CAAC,UAAU,IAAIC,cAAQ,MAAM,CAAC,CAAC,CAAC;AAAA,IAAA,CACxF;AAAA,EACH;AACF;AAEO,MAAM,cAAcC,KAAW,WAAA,iBAAiB,EAAE,eAAeH,eAAAA,cAAc,OAAQ,CAAA;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BlendFunction, Effect } from 'postprocessing';
|
|
3
|
+
export declare class WaterEffectImpl extends Effect {
|
|
4
|
+
constructor({ blendFunction, factor }?: {
|
|
5
|
+
blendFunction?: BlendFunction | undefined;
|
|
6
|
+
factor?: number | undefined;
|
|
7
|
+
});
|
|
8
|
+
}
|
|
9
|
+
export declare const WaterEffect: import("react").ForwardRefExoticComponent<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<WaterEffectImpl>, import("@react-three/fiber").NodeProps<WaterEffectImpl, typeof WaterEffectImpl>>> & {
|
|
10
|
+
blendFunction?: BlendFunction | undefined;
|
|
11
|
+
factor?: number | undefined;
|
|
12
|
+
} & {
|
|
13
|
+
blendFunction?: BlendFunction | undefined;
|
|
14
|
+
opacity?: number | undefined;
|
|
15
|
+
}, "ref"> & import("react").RefAttributes<typeof WaterEffectImpl>>;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Uniform } from "three";
|
|
2
|
+
import { Effect, EffectAttribute, BlendFunction } from "postprocessing";
|
|
3
|
+
import { wrapEffect } from "../util.js";
|
|
4
|
+
const WaterShader = {
|
|
5
|
+
fragmentShader: `
|
|
6
|
+
uniform float factor;
|
|
7
|
+
void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
|
|
8
|
+
vec2 vUv = uv;
|
|
9
|
+
float frequency = 6.0 * factor;
|
|
10
|
+
float amplitude = 0.015 * factor;
|
|
11
|
+
float x = vUv.y * frequency + time * .7;
|
|
12
|
+
float y = vUv.x * frequency + time * .3;
|
|
13
|
+
vUv.x += cos(x+y) * amplitude * cos(y);
|
|
14
|
+
vUv.y += sin(x-y) * amplitude * cos(y);
|
|
15
|
+
vec4 rgba = texture2D(inputBuffer, vUv);
|
|
16
|
+
outputColor = rgba;
|
|
17
|
+
}`
|
|
18
|
+
};
|
|
19
|
+
class WaterEffectImpl extends Effect {
|
|
20
|
+
constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
|
|
21
|
+
super("WaterEffect", WaterShader.fragmentShader, {
|
|
22
|
+
blendFunction,
|
|
23
|
+
attributes: EffectAttribute.CONVOLUTION,
|
|
24
|
+
uniforms: /* @__PURE__ */ new Map([["factor", new Uniform(factor)]])
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL });
|
|
29
|
+
export {
|
|
30
|
+
WaterEffect,
|
|
31
|
+
WaterEffectImpl
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=Water.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Water.js","sources":["../../src/effects/Water.tsx"],"sourcesContent":["import { Uniform } from 'three'\nimport { BlendFunction, Effect, EffectAttribute } from 'postprocessing'\nimport { wrapEffect } from '../util'\n\nconst WaterShader = {\n fragmentShader: `\n uniform float factor;\n void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n vec2 vUv = uv;\n float frequency = 6.0 * factor;\n float amplitude = 0.015 * factor;\n float x = vUv.y * frequency + time * .7; \n float y = vUv.x * frequency + time * .3;\n vUv.x += cos(x+y) * amplitude * cos(y);\n vUv.y += sin(x-y) * amplitude * cos(y);\n vec4 rgba = texture2D(inputBuffer, vUv);\n outputColor = rgba;\n }`\n}\n\nexport class WaterEffectImpl extends Effect {\n constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {\n super('WaterEffect', WaterShader.fragmentShader, {\n blendFunction,\n attributes: EffectAttribute.CONVOLUTION,\n uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]])\n })\n }\n}\n\nexport const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL })\n"],"names":[],"mappings":";;;AAIA,MAAM,cAAc;AAAA,EAClB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAalB;AAEO,MAAM,wBAAwB,OAAO;AAAA,EAC1C,YAAY,EAAE,gBAAgB,cAAc,QAAQ,SAAS,EAAM,IAAA,IAAI;AAC/D,UAAA,eAAe,YAAY,gBAAgB;AAAA,MAC/C;AAAA,MACA,YAAY,gBAAgB;AAAA,MAC5B,UAAc,oBAAA,IAAwC,CAAC,CAAC,UAAU,IAAI,QAAQ,MAAM,CAAC,CAAC,CAAC;AAAA,IAAA,CACxF;AAAA,EACH;AACF;AAEO,MAAM,cAAc,WAAW,iBAAiB,EAAE,eAAe,cAAc,OAAQ,CAAA;"}
|
package/dist/index.cjs
CHANGED
|
@@ -34,6 +34,7 @@ const LUT = require("./effects/LUT.cjs");
|
|
|
34
34
|
const TiltShift = require("./effects/TiltShift.cjs");
|
|
35
35
|
const TiltShift2 = require("./effects/TiltShift2.cjs");
|
|
36
36
|
const ASCII = require("./effects/ASCII.cjs");
|
|
37
|
+
const Water = require("./effects/Water.cjs");
|
|
37
38
|
const index = require("./effects/SSR/index.cjs");
|
|
38
39
|
const index$1 = require("./effects/N8AO/index.cjs");
|
|
39
40
|
exports.Select = Selection.Select;
|
|
@@ -77,6 +78,8 @@ exports.TiltShift = TiltShift.TiltShift;
|
|
|
77
78
|
exports.TiltShift2 = TiltShift2.TiltShift2;
|
|
78
79
|
exports.TiltShiftEffect = TiltShift2.TiltShiftEffect;
|
|
79
80
|
exports.ASCII = ASCII.ASCII;
|
|
81
|
+
exports.WaterEffect = Water.WaterEffect;
|
|
82
|
+
exports.WaterEffectImpl = Water.WaterEffectImpl;
|
|
80
83
|
exports.SSR = index.SSR;
|
|
81
84
|
exports.N8AO = index$1.N8AO;
|
|
82
85
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ import { LUT } from "./effects/LUT.js";
|
|
|
32
32
|
import { TiltShift } from "./effects/TiltShift.js";
|
|
33
33
|
import { TiltShift2, TiltShiftEffect } from "./effects/TiltShift2.js";
|
|
34
34
|
import { ASCII } from "./effects/ASCII.js";
|
|
35
|
+
import { WaterEffect, WaterEffectImpl } from "./effects/Water.js";
|
|
35
36
|
import { SSR } from "./effects/SSR/index.js";
|
|
36
37
|
import { N8AO } from "./effects/N8AO/index.js";
|
|
37
38
|
export {
|
|
@@ -74,6 +75,8 @@ export {
|
|
|
74
75
|
TiltShiftEffect,
|
|
75
76
|
ToneMapping,
|
|
76
77
|
Vignette,
|
|
78
|
+
WaterEffect,
|
|
79
|
+
WaterEffectImpl,
|
|
77
80
|
resolveRef,
|
|
78
81
|
selectionContext,
|
|
79
82
|
useVector2,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|