@react-three/postprocessing 2.15.8 → 2.15.10
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/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";
|
|
@@ -93,10 +94,17 @@ class ASCIIEffect extends postprocessing.Effect {
|
|
|
93
94
|
}
|
|
94
95
|
}
|
|
95
96
|
const ASCII = React.forwardRef(
|
|
96
|
-
({
|
|
97
|
+
({
|
|
98
|
+
font = "arial",
|
|
99
|
+
characters = ` .:,'-^=*+?!|0#X%WM@`,
|
|
100
|
+
fontSize = 54,
|
|
101
|
+
cellSize = 16,
|
|
102
|
+
color = "#ffffff",
|
|
103
|
+
invert = false
|
|
104
|
+
}, fref) => {
|
|
97
105
|
const effect = React.useMemo(
|
|
98
|
-
() => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }),
|
|
99
|
-
[characters, fontSize, cellSize, color, invert]
|
|
106
|
+
() => new ASCIIEffect({ characters, font, fontSize, cellSize, color, invert }),
|
|
107
|
+
[characters, fontSize, cellSize, color, invert, font]
|
|
100
108
|
);
|
|
101
109
|
return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ref: fref, object: effect });
|
|
102
110
|
}
|
|
@@ -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 (\n {\n font = 'arial',\n characters = ` .:,'-^=*+?!|0#X%WM@`,\n fontSize = 54,\n cellSize = 16,\n color = '#ffffff',\n invert = false,\n },\n fref\n ) => {\n const effect = useMemo(\n () => new ASCIIEffect({ characters, font, fontSize, cellSize, color, invert }),\n [characters, fontSize, cellSize, color, invert, font]\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,CACE;AAAA,IACE,OAAO;AAAA,IACP,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,KAEX,SACG;AACH,UAAM,SAASC,MAAA;AAAA,MACb,MAAM,IAAI,YAAY,EAAE,YAAY,MAAM,UAAU,UAAU,OAAO,QAAQ;AAAA,MAC7E,CAAC,YAAY,UAAU,UAAU,OAAO,QAAQ,IAAI;AAAA,IAAA;AAEtD,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";
|
|
@@ -91,10 +92,17 @@ class ASCIIEffect extends Effect {
|
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
94
|
const ASCII = forwardRef(
|
|
94
|
-
({
|
|
95
|
+
({
|
|
96
|
+
font = "arial",
|
|
97
|
+
characters = ` .:,'-^=*+?!|0#X%WM@`,
|
|
98
|
+
fontSize = 54,
|
|
99
|
+
cellSize = 16,
|
|
100
|
+
color = "#ffffff",
|
|
101
|
+
invert = false
|
|
102
|
+
}, fref) => {
|
|
95
103
|
const effect = useMemo(
|
|
96
|
-
() => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }),
|
|
97
|
-
[characters, fontSize, cellSize, color, invert]
|
|
104
|
+
() => new ASCIIEffect({ characters, font, fontSize, cellSize, color, invert }),
|
|
105
|
+
[characters, fontSize, cellSize, color, invert, font]
|
|
98
106
|
);
|
|
99
107
|
return /* @__PURE__ */ jsx("primitive", { ref: fref, object: effect });
|
|
100
108
|
}
|
|
@@ -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 (\n {\n font = 'arial',\n characters = ` .:,'-^=*+?!|0#X%WM@`,\n fontSize = 54,\n cellSize = 16,\n color = '#ffffff',\n invert = false,\n },\n fref\n ) => {\n const effect = useMemo(\n () => new ASCIIEffect({ characters, font, fontSize, cellSize, color, invert }),\n [characters, fontSize, cellSize, color, invert, font]\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,CACE;AAAA,IACE,OAAO;AAAA,IACP,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,KAEX,SACG;AACH,UAAM,SAAS;AAAA,MACb,MAAM,IAAI,YAAY,EAAE,YAAY,MAAM,UAAU,UAAU,OAAO,QAAQ;AAAA,MAC7E,CAAC,YAAY,UAAU,UAAU,OAAO,QAAQ,IAAI;AAAA,IAAA;AAEtD,WAAQ,oBAAA,aAAA,EAAU,KAAK,MAAM,QAAQ,OAAQ,CAAA;AAAA,EAC/C;AACF;"}
|