@react-three/postprocessing 2.16.0 → 2.16.2
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/package.json +2 -2
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":";;;;;;AAyBa,MAAA,wBAAwB,cAOlC,IAAK;AAkBR,MAAM,gBAAgB,CAAC,YACpB,OAAO,cAAkB,IAAA,gBAAgB,iBAAiB,gBAAgB;AAEtE,MAAM,iBAAiB,MAAM;AAAA,EAClC;AAAA,IACE,CACE;AAAA,MACE;AAAA,MACA,QAAQ;AAAA,MACR,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,OAEpB,QACG;AACG,YAAA,EAAE,IAAI,OAAO,cAAc,QAAQ,eAAe,SAAS;AACjE,YAAM,QAAQ,UAAU;AACxB,YAAM,SAAS,WAAW;AAE1B,YAAM,CAAC,UAAU,YAAY,gBAAgB,IAAI,QAAQ,MAAM;AAC7D,cAAM,kBAAkB;AAElB,cAAA,iBAAiB,IAAIA,iBAAmB,IAAI;AAAA,UAChD;AAAA,UACA;AAAA,UACA,eAAe,gBAAgB,KAAK,kBAAkB,gBAAgB;AAAA,UACtE;AAAA,QAAA,CACD;AAGD,uBAAe,QAAQ,IAAI,WAAW,OAAO,MAAM,CAAC;AAGpD,YAAIC,oBAAmB;AACvB,YAAIC,cAAa;AACjB,YAAI,kBAAkB;AACpBA,wBAAa,IAAI,WAAW,OAAO,MAAM;AACzCA,sBAAW,UAAU;AACrB,yBAAe,QAAQA,WAAU;AAC7B,cAAA,oBAAoB,UAAa,iBAAiB;AACpDD,gCAAmB,IAAI,sBAAsB,EAAE,cAAcC,YAAW,SAAS,iBAAiB;AAClGD,8BAAiB,UAAU;AAC3B,2BAAe,QAAQA,iBAAgB;AAAA,UACzC;AAAA,QACF;AAEO,eAAA,CAAC,gBAAgBC,aAAYD,iBAAgB;AAAA,MAAA,GACnD;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAES,gBAAA,MAAM,qCAAU,QAAQ,KAAK,OAAO,KAAK,SAAS,CAAC,UAAU,IAAI,CAAC;AAC5E;AAAA,QACE,CAAC,GAAG,UAAU;AACZ,cAAI,SAAS;AACX,kBAAM,mBAAmB,GAAG;AAC5B,eAAG,YAAY;AACf,gBAAI,iBAAiB,CAAC;AAAW,iBAAG,aAAa;AACjD,qBAAS,OAAO,KAAK;AACrB,eAAG,YAAY;AAAA,UACjB;AAAA,QACF;AAAA,QACA,UAAU,iBAAiB;AAAA,MAAA;AAGvB,YAAA,QAAQ,OAAO,IAAI;AACnB,YAAA,WAAW,kBAAkB,KAAK;AACxC,sBAAgB,MAAM;AACpB,cAAM,SAAiB,CAAA;AAEvB,YAAI,MAAM,WAAW,SAAS,WAAW,UAAU;AAC3CE,gBAAAA,YAAW,SAAS,QAAQ;AAElC,mBAAS,IAAI,GAAG,IAAIA,UAAS,QAAQ,KAAK;AAClC,kBAAA,QAAQA,UAAS,CAAC;AAExB,gBAAI,iBAAiB,QAAQ;AACrB,oBAAA,UAAoB,CAAC,KAAK;AAE5B,kBAAA,CAAC,cAAc,KAAK,GAAG;AACzB,oBAAI,OAAgB;AACpB,wBAAQ,OAAOA,UAAS,IAAI,CAAC,cAAc,QAAQ;AACjD,sBAAI,cAAc,IAAI;AAAG;AACzB,0BAAQ,KAAK,IAAI;AACjB;AAAA,gBACF;AAAA,cACF;AAEA,oBAAM,OAAO,IAAI,WAAW,QAAQ,GAAG,OAAO;AAC9C,qBAAO,KAAK,IAAI;AAAA,YAAA,WACP,iBAAiB,MAAM;AAChC,qBAAO,KAAK,KAAK;AAAA,YACnB;AAAA,UACF;AAEA,qBAAW,QAAQ;AAAQ,iDAAU,QAAQ;AAEzC,cAAA;AAAY,uBAAW,UAAU;AACjC,cAAA;AAAkB,6BAAiB,UAAU;AAAA,QACnD;AAEA,eAAO,MAAM;AACX,qBAAW,QAAQ;AAAQ,iDAAU,WAAW;AAC5C,cAAA;AAAY,uBAAW,UAAU;AACjC,cAAA;AAAkB,6BAAiB,UAAU;AAAA,QAAA;AAAA,MACnD,GACC,CAAC,UAAU,UAAU,QAAQ,YAAY,kBAAkB,QAAQ,CAAC;AAGvE,gBAAU,MAAM;AACd,cAAM,qBAAqB,GAAG;AAC9B,WAAG,cAAc;AACjB,eAAO,MAAM;AACX,aAAG,cAAc;AAAA,QAAA;AAAA,MAErB,GAAG,CAAE,CAAA;AAGL,YAAM,QAAQ;AAAA,QACZ,OAAO,EAAE,UAAU,YAAY,kBAAkB,iBAAiB,QAAQ;QAC1E,CAAC,UAAU,YAAY,kBAAkB,iBAAiB,QAAQ,KAAK;AAAA,MAAA;AAIzE,0BAAoB,KAAK,MAAM,UAAU,CAAC,QAAQ,CAAC;AAGjD,aAAA,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,OACrC,UAAA,oBAAC,SAAM,EAAA,KAAK,OAAQ,SAAS,CAAA,EAC/B,CAAA;AAAA,IAEJ;AAAA,EACF;AACF;"}
|
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;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-three/postprocessing",
|
|
3
|
-
"version": "2.16.
|
|
3
|
+
"version": "2.16.2",
|
|
4
4
|
"description": "postprocessing wrapper for React and @react-three/fiber",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"postprocessing",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
],
|
|
27
27
|
"repository": {
|
|
28
28
|
"type": "git",
|
|
29
|
-
"url": "git+https://github.com/
|
|
29
|
+
"url": "git+https://github.com/pmndrs/react-postprocessing.git"
|
|
30
30
|
},
|
|
31
31
|
"lint-staged": {
|
|
32
32
|
"*.{js,jsx,ts,tsx}": [
|