@react-three/postprocessing 2.15.7 → 2.15.9
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 +8 -6
- package/dist/EffectComposer.cjs.map +1 -1
- package/dist/EffectComposer.js +8 -6
- package/dist/EffectComposer.js.map +1 -1
- package/dist/effects/ASCII.cjs +4 -3
- package/dist/effects/ASCII.cjs.map +1 -1
- package/dist/effects/ASCII.d.ts +3 -2
- package/dist/effects/ASCII.js +4 -3
- package/dist/effects/ASCII.js.map +1 -1
- package/package.json +1 -1
package/dist/EffectComposer.cjs
CHANGED
|
@@ -84,12 +84,14 @@ const EffectComposer = React.memo(
|
|
|
84
84
|
const child = children2[i];
|
|
85
85
|
if (child instanceof postprocessing.Effect) {
|
|
86
86
|
const effects = [child];
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
if (!isConvolution(child)) {
|
|
88
|
+
let next = null;
|
|
89
|
+
while ((next = children2[i + 1]) instanceof postprocessing.Effect) {
|
|
90
|
+
if (isConvolution(next))
|
|
91
|
+
break;
|
|
92
|
+
effects.push(next);
|
|
93
|
+
i++;
|
|
94
|
+
}
|
|
93
95
|
}
|
|
94
96
|
const pass = new postprocessing.EffectPass(camera, ...effects);
|
|
95
97
|
passes.push(pass);
|
|
@@ -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 disableNormalPass?: 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 disableNormalPass,\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 (!disableNormalPass) {\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 disableNormalPass,\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 let next: unknown = null\n
|
|
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 disableNormalPass?: 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 disableNormalPass,\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 (!disableNormalPass) {\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 disableNormalPass,\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 // 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","useImperativeHandle","jsx"],"mappings":"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"}
|
package/dist/EffectComposer.js
CHANGED
|
@@ -82,12 +82,14 @@ const EffectComposer = React.memo(
|
|
|
82
82
|
const child = children2[i];
|
|
83
83
|
if (child instanceof Effect) {
|
|
84
84
|
const effects = [child];
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
85
|
+
if (!isConvolution(child)) {
|
|
86
|
+
let next = null;
|
|
87
|
+
while ((next = children2[i + 1]) instanceof Effect) {
|
|
88
|
+
if (isConvolution(next))
|
|
89
|
+
break;
|
|
90
|
+
effects.push(next);
|
|
91
|
+
i++;
|
|
92
|
+
}
|
|
91
93
|
}
|
|
92
94
|
const pass = new EffectPass(camera, ...effects);
|
|
93
95
|
passes.push(pass);
|
|
@@ -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 disableNormalPass?: 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 disableNormalPass,\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 (!disableNormalPass) {\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 disableNormalPass,\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 let next: unknown = null\n
|
|
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 disableNormalPass?: 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 disableNormalPass,\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 (!disableNormalPass) {\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 disableNormalPass,\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 // 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/ASCII.cjs
CHANGED
|
@@ -46,6 +46,7 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
|
|
|
46
46
|
`;
|
|
47
47
|
class ASCIIEffect extends postprocessing.Effect {
|
|
48
48
|
constructor({
|
|
49
|
+
font = "arial",
|
|
49
50
|
characters = ` .:,'-^=*+?!|0#X%WM@`,
|
|
50
51
|
fontSize = 54,
|
|
51
52
|
cellSize = 16,
|
|
@@ -62,11 +63,11 @@ class ASCIIEffect extends postprocessing.Effect {
|
|
|
62
63
|
super("ASCIIEffect", fragment, { uniforms });
|
|
63
64
|
const charactersTextureUniform = this.uniforms.get("uCharacters");
|
|
64
65
|
if (charactersTextureUniform) {
|
|
65
|
-
charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize);
|
|
66
|
+
charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize);
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
69
|
/** Draws the characters on a Canvas and returns a texture */
|
|
69
|
-
createCharactersTexture(characters, fontSize) {
|
|
70
|
+
createCharactersTexture(characters, font, fontSize) {
|
|
70
71
|
const canvas = document.createElement("canvas");
|
|
71
72
|
const SIZE = 1024;
|
|
72
73
|
const MAX_PER_ROW = 16;
|
|
@@ -78,7 +79,7 @@ class ASCIIEffect extends postprocessing.Effect {
|
|
|
78
79
|
throw new Error("Context not available");
|
|
79
80
|
}
|
|
80
81
|
context.clearRect(0, 0, SIZE, SIZE);
|
|
81
|
-
context.font = `${fontSize}px
|
|
82
|
+
context.font = `${fontSize}px ${font}`;
|
|
82
83
|
context.textAlign = "center";
|
|
83
84
|
context.textBaseline = "middle";
|
|
84
85
|
context.fillStyle = "#fff";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASCII.cjs","sources":["../../src/effects/ASCII.tsx"],"sourcesContent":["// From: https://github.com/emilwidlund/ASCII\n// https://twitter.com/emilwidlund/status/1652386482420609024\n\nimport { forwardRef, useMemo } from 'react'\nimport { CanvasTexture, Color, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three'\nimport { Effect } from 'postprocessing'\n\nconst fragment = `\nuniform sampler2D uCharacters;\nuniform float uCharactersCount;\nuniform float uCellSize;\nuniform bool uInvert;\nuniform vec3 uColor;\n\nconst vec2 SIZE = vec2(16.);\n\nvec3 greyscale(vec3 color, float strength) {\n float g = dot(color, vec3(0.299, 0.587, 0.114));\n return mix(color, vec3(g), strength);\n}\n\nvec3 greyscale(vec3 color) {\n return greyscale(color, 1.0);\n}\n\nvoid mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n vec2 cell = resolution / uCellSize;\n vec2 grid = 1.0 / cell;\n vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));\n vec4 pixelized = texture2D(inputBuffer, pixelizedUV);\n float greyscaled = greyscale(pixelized.rgb).r;\n\n if (uInvert) {\n greyscaled = 1.0 - greyscaled;\n }\n\n float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);\n vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));\n vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;\n vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;\n vec4 asciiCharacter = texture2D(uCharacters, charUV);\n\n asciiCharacter.rgb = uColor * asciiCharacter.r;\n asciiCharacter.a = pixelized.a;\n outputColor = asciiCharacter;\n}\n`\n\ninterface IASCIIEffectProps {\n characters?: string\n fontSize?: number\n cellSize?: number\n color?: string\n invert?: boolean\n}\n\nclass ASCIIEffect extends Effect {\n constructor({\n characters = ` .:,'-^=*+?!|0#X%WM@`,\n fontSize = 54,\n cellSize = 16,\n color = '#ffffff',\n invert = false,\n }: IASCIIEffectProps = {}) {\n const uniforms = new Map<string, Uniform>([\n ['uCharacters', new Uniform(new Texture())],\n ['uCellSize', new Uniform(cellSize)],\n ['uCharactersCount', new Uniform(characters.length)],\n ['uColor', new Uniform(new Color(color))],\n ['uInvert', new Uniform(invert)],\n ])\n\n super('ASCIIEffect', fragment, { uniforms })\n\n const charactersTextureUniform = this.uniforms.get('uCharacters')\n\n if (charactersTextureUniform) {\n charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize)\n }\n }\n\n /** Draws the characters on a Canvas and returns a texture */\n public createCharactersTexture(characters: string, fontSize: number): THREE.Texture {\n const canvas = document.createElement('canvas')\n const SIZE = 1024\n const MAX_PER_ROW = 16\n const CELL = SIZE / MAX_PER_ROW\n\n canvas.width = canvas.height = SIZE\n const texture = new CanvasTexture(canvas, undefined, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter)\n const context = canvas.getContext('2d')\n\n if (!context) {\n throw new Error('Context not available')\n }\n\n context.clearRect(0, 0, SIZE, SIZE)\n context.font = `${fontSize}px
|
|
1
|
+
{"version":3,"file":"ASCII.cjs","sources":["../../src/effects/ASCII.tsx"],"sourcesContent":["// From: https://github.com/emilwidlund/ASCII\n// https://twitter.com/emilwidlund/status/1652386482420609024\n\nimport { forwardRef, useMemo } from 'react'\nimport { CanvasTexture, Color, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three'\nimport { Effect } from 'postprocessing'\n\nconst fragment = `\nuniform sampler2D uCharacters;\nuniform float uCharactersCount;\nuniform float uCellSize;\nuniform bool uInvert;\nuniform vec3 uColor;\n\nconst vec2 SIZE = vec2(16.);\n\nvec3 greyscale(vec3 color, float strength) {\n float g = dot(color, vec3(0.299, 0.587, 0.114));\n return mix(color, vec3(g), strength);\n}\n\nvec3 greyscale(vec3 color) {\n return greyscale(color, 1.0);\n}\n\nvoid mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n vec2 cell = resolution / uCellSize;\n vec2 grid = 1.0 / cell;\n vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));\n vec4 pixelized = texture2D(inputBuffer, pixelizedUV);\n float greyscaled = greyscale(pixelized.rgb).r;\n\n if (uInvert) {\n greyscaled = 1.0 - greyscaled;\n }\n\n float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);\n vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));\n vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;\n vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;\n vec4 asciiCharacter = texture2D(uCharacters, charUV);\n\n asciiCharacter.rgb = uColor * asciiCharacter.r;\n asciiCharacter.a = pixelized.a;\n outputColor = asciiCharacter;\n}\n`\n\ninterface IASCIIEffectProps {\n font?: string\n characters?: string\n fontSize?: number\n cellSize?: number\n color?: string\n invert?: boolean\n}\n\nclass ASCIIEffect extends Effect {\n constructor({\n font = 'arial',\n characters = ` .:,'-^=*+?!|0#X%WM@`,\n fontSize = 54,\n cellSize = 16,\n color = '#ffffff',\n invert = false,\n }: IASCIIEffectProps = {}) {\n const uniforms = new Map<string, Uniform>([\n ['uCharacters', new Uniform(new Texture())],\n ['uCellSize', new Uniform(cellSize)],\n ['uCharactersCount', new Uniform(characters.length)],\n ['uColor', new Uniform(new Color(color))],\n ['uInvert', new Uniform(invert)],\n ])\n\n super('ASCIIEffect', fragment, { uniforms })\n\n const charactersTextureUniform = this.uniforms.get('uCharacters')\n\n if (charactersTextureUniform) {\n charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize)\n }\n }\n\n /** Draws the characters on a Canvas and returns a texture */\n public createCharactersTexture(characters: string, font: string, fontSize: number): THREE.Texture {\n const canvas = document.createElement('canvas')\n const SIZE = 1024\n const MAX_PER_ROW = 16\n const CELL = SIZE / MAX_PER_ROW\n\n canvas.width = canvas.height = SIZE\n const texture = new CanvasTexture(canvas, undefined, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter)\n const context = canvas.getContext('2d')\n\n if (!context) {\n throw new Error('Context not available')\n }\n\n context.clearRect(0, 0, SIZE, SIZE)\n context.font = `${fontSize}px ${font}`\n context.textAlign = 'center'\n context.textBaseline = 'middle'\n context.fillStyle = '#fff'\n\n for (let i = 0; i < characters.length; i++) {\n const char = characters[i]\n const x = i % MAX_PER_ROW\n const y = Math.floor(i / MAX_PER_ROW)\n context.fillText(char, x * CELL + CELL / 2, y * CELL + CELL / 2)\n }\n\n texture.needsUpdate = true\n return texture\n }\n}\n\nexport const ASCII = forwardRef<ASCIIEffect, IASCIIEffectProps>(\n ({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false }, fref) => {\n const effect = useMemo(\n () => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }),\n [characters, fontSize, cellSize, color, invert]\n )\n return <primitive ref={fref} object={effect} />\n }\n)\n"],"names":["Effect","Uniform","Texture","Color","CanvasTexture","RepeatWrapping","NearestFilter","forwardRef","useMemo","jsx"],"mappings":";;;;;;AAOA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDjB,MAAM,oBAAoBA,eAAAA,OAAO;AAAA,EAC/B,YAAY;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,IAAuB,IAAI;AACnB,UAAA,+BAAe,IAAqB;AAAA,MACxC,CAAC,eAAe,IAAIC,MAAAA,QAAQ,IAAIC,MAAAA,QAAS,CAAA,CAAC;AAAA,MAC1C,CAAC,aAAa,IAAID,cAAQ,QAAQ,CAAC;AAAA,MACnC,CAAC,oBAAoB,IAAIA,MAAAA,QAAQ,WAAW,MAAM,CAAC;AAAA,MACnD,CAAC,UAAU,IAAIA,MAAA,QAAQ,IAAIE,MAAAA,MAAM,KAAK,CAAC,CAAC;AAAA,MACxC,CAAC,WAAW,IAAIF,cAAQ,MAAM,CAAC;AAAA,IAAA,CAChC;AAED,UAAM,eAAe,UAAU,EAAE,SAAU,CAAA;AAE3C,UAAM,2BAA2B,KAAK,SAAS,IAAI,aAAa;AAEhE,QAAI,0BAA0B;AAC5B,+BAAyB,QAAQ,KAAK,wBAAwB,YAAY,MAAM,QAAQ;AAAA,IAC1F;AAAA,EACF;AAAA;AAAA,EAGO,wBAAwB,YAAoB,MAAc,UAAiC;AAC1F,UAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,UAAM,OAAO;AACb,UAAM,cAAc;AACpB,UAAM,OAAO,OAAO;AAEb,WAAA,QAAQ,OAAO,SAAS;AACzB,UAAA,UAAU,IAAIG,MAAc,cAAA,QAAQ,QAAWC,MAAAA,gBAAgBA,MAAA,gBAAgBC,qBAAeA,MAAAA,aAAa;AAC3G,UAAA,UAAU,OAAO,WAAW,IAAI;AAEtC,QAAI,CAAC,SAAS;AACN,YAAA,IAAI,MAAM,uBAAuB;AAAA,IACzC;AAEA,YAAQ,UAAU,GAAG,GAAG,MAAM,IAAI;AAC1B,YAAA,OAAO,GAAG,cAAc;AAChC,YAAQ,YAAY;AACpB,YAAQ,eAAe;AACvB,YAAQ,YAAY;AAEpB,aAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AACpC,YAAA,OAAO,WAAW,CAAC;AACzB,YAAM,IAAI,IAAI;AACd,YAAM,IAAI,KAAK,MAAM,IAAI,WAAW;AAC5B,cAAA,SAAS,MAAM,IAAI,OAAO,OAAO,GAAG,IAAI,OAAO,OAAO,CAAC;AAAA,IACjE;AAEA,YAAQ,cAAc;AACf,WAAA;AAAA,EACT;AACF;AAEO,MAAM,QAAQC,MAAA;AAAA,EACnB,CAAC,EAAE,aAAa,wBAAwB,WAAW,IAAI,WAAW,IAAI,QAAQ,WAAW,SAAS,MAAA,GAAS,SAAS;AAClH,UAAM,SAASC,MAAA;AAAA,MACb,MAAM,IAAI,YAAY,EAAE,YAAY,UAAU,UAAU,OAAO,QAAQ;AAAA,MACvE,CAAC,YAAY,UAAU,UAAU,OAAO,MAAM;AAAA,IAAA;AAEhD,WAAQC,2BAAAA,IAAA,aAAA,EAAU,KAAK,MAAM,QAAQ,OAAQ,CAAA;AAAA,EAC/C;AACF;;"}
|
package/dist/effects/ASCII.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Effect } from 'postprocessing';
|
|
3
3
|
interface IASCIIEffectProps {
|
|
4
|
+
font?: string;
|
|
4
5
|
characters?: string;
|
|
5
6
|
fontSize?: number;
|
|
6
7
|
cellSize?: number;
|
|
@@ -8,9 +9,9 @@ interface IASCIIEffectProps {
|
|
|
8
9
|
invert?: boolean;
|
|
9
10
|
}
|
|
10
11
|
declare class ASCIIEffect extends Effect {
|
|
11
|
-
constructor({ characters, fontSize, cellSize, color, invert, }?: IASCIIEffectProps);
|
|
12
|
+
constructor({ font, characters, fontSize, cellSize, color, invert, }?: IASCIIEffectProps);
|
|
12
13
|
/** Draws the characters on a Canvas and returns a texture */
|
|
13
|
-
createCharactersTexture(characters: string, fontSize: number): THREE.Texture;
|
|
14
|
+
createCharactersTexture(characters: string, font: string, fontSize: number): THREE.Texture;
|
|
14
15
|
}
|
|
15
16
|
export declare const ASCII: import("react").ForwardRefExoticComponent<IASCIIEffectProps & import("react").RefAttributes<ASCIIEffect>>;
|
|
16
17
|
export {};
|
package/dist/effects/ASCII.js
CHANGED
|
@@ -44,6 +44,7 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
|
|
|
44
44
|
`;
|
|
45
45
|
class ASCIIEffect extends Effect {
|
|
46
46
|
constructor({
|
|
47
|
+
font = "arial",
|
|
47
48
|
characters = ` .:,'-^=*+?!|0#X%WM@`,
|
|
48
49
|
fontSize = 54,
|
|
49
50
|
cellSize = 16,
|
|
@@ -60,11 +61,11 @@ class ASCIIEffect extends Effect {
|
|
|
60
61
|
super("ASCIIEffect", fragment, { uniforms });
|
|
61
62
|
const charactersTextureUniform = this.uniforms.get("uCharacters");
|
|
62
63
|
if (charactersTextureUniform) {
|
|
63
|
-
charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize);
|
|
64
|
+
charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize);
|
|
64
65
|
}
|
|
65
66
|
}
|
|
66
67
|
/** Draws the characters on a Canvas and returns a texture */
|
|
67
|
-
createCharactersTexture(characters, fontSize) {
|
|
68
|
+
createCharactersTexture(characters, font, fontSize) {
|
|
68
69
|
const canvas = document.createElement("canvas");
|
|
69
70
|
const SIZE = 1024;
|
|
70
71
|
const MAX_PER_ROW = 16;
|
|
@@ -76,7 +77,7 @@ class ASCIIEffect extends Effect {
|
|
|
76
77
|
throw new Error("Context not available");
|
|
77
78
|
}
|
|
78
79
|
context.clearRect(0, 0, SIZE, SIZE);
|
|
79
|
-
context.font = `${fontSize}px
|
|
80
|
+
context.font = `${fontSize}px ${font}`;
|
|
80
81
|
context.textAlign = "center";
|
|
81
82
|
context.textBaseline = "middle";
|
|
82
83
|
context.fillStyle = "#fff";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ASCII.js","sources":["../../src/effects/ASCII.tsx"],"sourcesContent":["// From: https://github.com/emilwidlund/ASCII\n// https://twitter.com/emilwidlund/status/1652386482420609024\n\nimport { forwardRef, useMemo } from 'react'\nimport { CanvasTexture, Color, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three'\nimport { Effect } from 'postprocessing'\n\nconst fragment = `\nuniform sampler2D uCharacters;\nuniform float uCharactersCount;\nuniform float uCellSize;\nuniform bool uInvert;\nuniform vec3 uColor;\n\nconst vec2 SIZE = vec2(16.);\n\nvec3 greyscale(vec3 color, float strength) {\n float g = dot(color, vec3(0.299, 0.587, 0.114));\n return mix(color, vec3(g), strength);\n}\n\nvec3 greyscale(vec3 color) {\n return greyscale(color, 1.0);\n}\n\nvoid mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n vec2 cell = resolution / uCellSize;\n vec2 grid = 1.0 / cell;\n vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));\n vec4 pixelized = texture2D(inputBuffer, pixelizedUV);\n float greyscaled = greyscale(pixelized.rgb).r;\n\n if (uInvert) {\n greyscaled = 1.0 - greyscaled;\n }\n\n float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);\n vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));\n vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;\n vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;\n vec4 asciiCharacter = texture2D(uCharacters, charUV);\n\n asciiCharacter.rgb = uColor * asciiCharacter.r;\n asciiCharacter.a = pixelized.a;\n outputColor = asciiCharacter;\n}\n`\n\ninterface IASCIIEffectProps {\n characters?: string\n fontSize?: number\n cellSize?: number\n color?: string\n invert?: boolean\n}\n\nclass ASCIIEffect extends Effect {\n constructor({\n characters = ` .:,'-^=*+?!|0#X%WM@`,\n fontSize = 54,\n cellSize = 16,\n color = '#ffffff',\n invert = false,\n }: IASCIIEffectProps = {}) {\n const uniforms = new Map<string, Uniform>([\n ['uCharacters', new Uniform(new Texture())],\n ['uCellSize', new Uniform(cellSize)],\n ['uCharactersCount', new Uniform(characters.length)],\n ['uColor', new Uniform(new Color(color))],\n ['uInvert', new Uniform(invert)],\n ])\n\n super('ASCIIEffect', fragment, { uniforms })\n\n const charactersTextureUniform = this.uniforms.get('uCharacters')\n\n if (charactersTextureUniform) {\n charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize)\n }\n }\n\n /** Draws the characters on a Canvas and returns a texture */\n public createCharactersTexture(characters: string, fontSize: number): THREE.Texture {\n const canvas = document.createElement('canvas')\n const SIZE = 1024\n const MAX_PER_ROW = 16\n const CELL = SIZE / MAX_PER_ROW\n\n canvas.width = canvas.height = SIZE\n const texture = new CanvasTexture(canvas, undefined, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter)\n const context = canvas.getContext('2d')\n\n if (!context) {\n throw new Error('Context not available')\n }\n\n context.clearRect(0, 0, SIZE, SIZE)\n context.font = `${fontSize}px
|
|
1
|
+
{"version":3,"file":"ASCII.js","sources":["../../src/effects/ASCII.tsx"],"sourcesContent":["// From: https://github.com/emilwidlund/ASCII\n// https://twitter.com/emilwidlund/status/1652386482420609024\n\nimport { forwardRef, useMemo } from 'react'\nimport { CanvasTexture, Color, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three'\nimport { Effect } from 'postprocessing'\n\nconst fragment = `\nuniform sampler2D uCharacters;\nuniform float uCharactersCount;\nuniform float uCellSize;\nuniform bool uInvert;\nuniform vec3 uColor;\n\nconst vec2 SIZE = vec2(16.);\n\nvec3 greyscale(vec3 color, float strength) {\n float g = dot(color, vec3(0.299, 0.587, 0.114));\n return mix(color, vec3(g), strength);\n}\n\nvec3 greyscale(vec3 color) {\n return greyscale(color, 1.0);\n}\n\nvoid mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n vec2 cell = resolution / uCellSize;\n vec2 grid = 1.0 / cell;\n vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));\n vec4 pixelized = texture2D(inputBuffer, pixelizedUV);\n float greyscaled = greyscale(pixelized.rgb).r;\n\n if (uInvert) {\n greyscaled = 1.0 - greyscaled;\n }\n\n float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);\n vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));\n vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;\n vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;\n vec4 asciiCharacter = texture2D(uCharacters, charUV);\n\n asciiCharacter.rgb = uColor * asciiCharacter.r;\n asciiCharacter.a = pixelized.a;\n outputColor = asciiCharacter;\n}\n`\n\ninterface IASCIIEffectProps {\n font?: string\n characters?: string\n fontSize?: number\n cellSize?: number\n color?: string\n invert?: boolean\n}\n\nclass ASCIIEffect extends Effect {\n constructor({\n font = 'arial',\n characters = ` .:,'-^=*+?!|0#X%WM@`,\n fontSize = 54,\n cellSize = 16,\n color = '#ffffff',\n invert = false,\n }: IASCIIEffectProps = {}) {\n const uniforms = new Map<string, Uniform>([\n ['uCharacters', new Uniform(new Texture())],\n ['uCellSize', new Uniform(cellSize)],\n ['uCharactersCount', new Uniform(characters.length)],\n ['uColor', new Uniform(new Color(color))],\n ['uInvert', new Uniform(invert)],\n ])\n\n super('ASCIIEffect', fragment, { uniforms })\n\n const charactersTextureUniform = this.uniforms.get('uCharacters')\n\n if (charactersTextureUniform) {\n charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize)\n }\n }\n\n /** Draws the characters on a Canvas and returns a texture */\n public createCharactersTexture(characters: string, font: string, fontSize: number): THREE.Texture {\n const canvas = document.createElement('canvas')\n const SIZE = 1024\n const MAX_PER_ROW = 16\n const CELL = SIZE / MAX_PER_ROW\n\n canvas.width = canvas.height = SIZE\n const texture = new CanvasTexture(canvas, undefined, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter)\n const context = canvas.getContext('2d')\n\n if (!context) {\n throw new Error('Context not available')\n }\n\n context.clearRect(0, 0, SIZE, SIZE)\n context.font = `${fontSize}px ${font}`\n context.textAlign = 'center'\n context.textBaseline = 'middle'\n context.fillStyle = '#fff'\n\n for (let i = 0; i < characters.length; i++) {\n const char = characters[i]\n const x = i % MAX_PER_ROW\n const y = Math.floor(i / MAX_PER_ROW)\n context.fillText(char, x * CELL + CELL / 2, y * CELL + CELL / 2)\n }\n\n texture.needsUpdate = true\n return texture\n }\n}\n\nexport const ASCII = forwardRef<ASCIIEffect, IASCIIEffectProps>(\n ({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false }, fref) => {\n const effect = useMemo(\n () => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }),\n [characters, fontSize, cellSize, color, invert]\n )\n return <primitive ref={fref} object={effect} />\n }\n)\n"],"names":[],"mappings":";;;;AAOA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDjB,MAAM,oBAAoB,OAAO;AAAA,EAC/B,YAAY;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,IAAuB,IAAI;AACnB,UAAA,+BAAe,IAAqB;AAAA,MACxC,CAAC,eAAe,IAAI,QAAQ,IAAI,QAAS,CAAA,CAAC;AAAA,MAC1C,CAAC,aAAa,IAAI,QAAQ,QAAQ,CAAC;AAAA,MACnC,CAAC,oBAAoB,IAAI,QAAQ,WAAW,MAAM,CAAC;AAAA,MACnD,CAAC,UAAU,IAAI,QAAQ,IAAI,MAAM,KAAK,CAAC,CAAC;AAAA,MACxC,CAAC,WAAW,IAAI,QAAQ,MAAM,CAAC;AAAA,IAAA,CAChC;AAED,UAAM,eAAe,UAAU,EAAE,SAAU,CAAA;AAE3C,UAAM,2BAA2B,KAAK,SAAS,IAAI,aAAa;AAEhE,QAAI,0BAA0B;AAC5B,+BAAyB,QAAQ,KAAK,wBAAwB,YAAY,MAAM,QAAQ;AAAA,IAC1F;AAAA,EACF;AAAA;AAAA,EAGO,wBAAwB,YAAoB,MAAc,UAAiC;AAC1F,UAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,UAAM,OAAO;AACb,UAAM,cAAc;AACpB,UAAM,OAAO,OAAO;AAEb,WAAA,QAAQ,OAAO,SAAS;AACzB,UAAA,UAAU,IAAI,cAAc,QAAQ,QAAW,gBAAgB,gBAAgB,eAAe,aAAa;AAC3G,UAAA,UAAU,OAAO,WAAW,IAAI;AAEtC,QAAI,CAAC,SAAS;AACN,YAAA,IAAI,MAAM,uBAAuB;AAAA,IACzC;AAEA,YAAQ,UAAU,GAAG,GAAG,MAAM,IAAI;AAC1B,YAAA,OAAO,GAAG,cAAc;AAChC,YAAQ,YAAY;AACpB,YAAQ,eAAe;AACvB,YAAQ,YAAY;AAEpB,aAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;AACpC,YAAA,OAAO,WAAW,CAAC;AACzB,YAAM,IAAI,IAAI;AACd,YAAM,IAAI,KAAK,MAAM,IAAI,WAAW;AAC5B,cAAA,SAAS,MAAM,IAAI,OAAO,OAAO,GAAG,IAAI,OAAO,OAAO,CAAC;AAAA,IACjE;AAEA,YAAQ,cAAc;AACf,WAAA;AAAA,EACT;AACF;AAEO,MAAM,QAAQ;AAAA,EACnB,CAAC,EAAE,aAAa,wBAAwB,WAAW,IAAI,WAAW,IAAI,QAAQ,WAAW,SAAS,MAAA,GAAS,SAAS;AAClH,UAAM,SAAS;AAAA,MACb,MAAM,IAAI,YAAY,EAAE,YAAY,UAAU,UAAU,OAAO,QAAQ;AAAA,MACvE,CAAC,YAAY,UAAU,UAAU,OAAO,MAAM;AAAA,IAAA;AAEhD,WAAQ,oBAAA,aAAA,EAAU,KAAK,MAAM,QAAQ,OAAQ,CAAA;AAAA,EAC/C;AACF;"}
|