@react-three/postprocessing 2.15.9 → 2.15.11

package/dist/effects/ASCII.cjs

@@ -94,10 +94,17 @@ class ASCIIEffect extends postprocessing.Effect {
   }
 }
 const ASCII = React.forwardRef(
-  ({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = "#ffffff", invert = false }, fref) => {
+  ({
+    font = "arial",
+    characters = ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize = 54,
+    cellSize = 16,
+    color = "#ffffff",
+    invert = false
+  }, fref) => {
     const effect = React.useMemo(
-      () => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }),
-      [characters, fontSize, cellSize, color, invert]
+      () => new ASCIIEffect({ characters, font, fontSize, cellSize, color, invert }),
+      [characters, fontSize, cellSize, color, invert, font]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ref: fref, object: effect });
   }

package/dist/effects/ASCII.cjs.map

@@ -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  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;;"}
+{"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.js

@@ -92,10 +92,17 @@ class ASCIIEffect extends Effect {
   }
 }
 const ASCII = forwardRef(
-  ({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = "#ffffff", invert = false }, fref) => {
+  ({
+    font = "arial",
+    characters = ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize = 54,
+    cellSize = 16,
+    color = "#ffffff",
+    invert = false
+  }, fref) => {
     const effect = useMemo(
-      () => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }),
-      [characters, fontSize, cellSize, color, invert]
+      () => new ASCIIEffect({ characters, font, fontSize, cellSize, color, invert }),
+      [characters, fontSize, cellSize, color, invert, font]
     );
     return /* @__PURE__ */ jsx("primitive", { ref: fref, object: effect });
   }

package/dist/effects/ASCII.js.map

@@ -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  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;"}
+{"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;"}

package/dist/effects/Outline.cjs

@@ -87,6 +87,11 @@ const Outline = React.forwardRef(function Outline2({
       }
     }
   }, [api, effect.selection, invalidate]);
+  React.useEffect(() => {
+    return () => {
+      effect.dispose();
+    };
+  }, [effect]);
   return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ref: forwardRef2, object: effect });
 });
 exports.Outline = Outline;

package/dist/effects/Outline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Outline.cjs","sources":["../../src/effects/Outline.tsx"],"sourcesContent":["import { OutlineEffect } from 'postprocessing'\nimport { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'\nimport { Object3D } from 'three'\nimport { useThree } from '@react-three/fiber'\nimport { EffectComposerContext } from '../EffectComposer'\nimport { selectionContext } from '../Selection'\nimport { resolveRef } from '../util'\n\ntype ObjectRef = MutableRefObject<Object3D>\n\nexport type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &\n  Partial<{\n    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]\n    selectionLayer: number\n  }>\n\nexport const Outline = forwardRef(function Outline(\n  {\n    selection = [],\n    selectionLayer = 10,\n    blendFunction,\n    patternTexture,\n    edgeStrength,\n    pulseSpeed,\n    visibleEdgeColor,\n    hiddenEdgeColor,\n    width,\n    height,\n    kernelSize,\n    blur,\n    xRay,\n    ...props\n  }: OutlineProps,\n  forwardRef: Ref<OutlineEffect>\n) {\n  const invalidate = useThree((state) => state.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n\n  const effect = useMemo(\n    () =>\n      new OutlineEffect(scene, camera, {\n        blendFunction,\n        patternTexture,\n        edgeStrength,\n        pulseSpeed,\n        visibleEdgeColor,\n        hiddenEdgeColor,\n        width,\n        height,\n        kernelSize,\n        blur,\n        xRay,\n        ...props,\n      }),\n    [\n      blendFunction,\n      blur,\n      camera,\n      edgeStrength,\n      height,\n      hiddenEdgeColor,\n      kernelSize,\n      patternTexture,\n      pulseSpeed,\n      scene,\n      visibleEdgeColor,\n      width,\n      xRay,\n    ]\n  )\n\n  const api = useContext(selectionContext)\n\n  useEffect(() => {\n    // Do not allow array selection if declarative selection is active\n    // TODO: array selection should probably be deprecated altogether\n    if (!api && selection) {\n      effect.selection.set(\n        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]\n      )\n      invalidate()\n      return () => {\n        effect.selection.clear()\n        invalidate()\n      }\n    }\n  }, [effect, selection, api, invalidate])\n\n  useEffect(() => {\n    effect.selectionLayer = selectionLayer\n    invalidate()\n  }, [effect, invalidate, selectionLayer])\n\n  const ref = useRef<OutlineEffect>()\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect.selection, invalidate])\n\n  return <primitive ref={forwardRef} object={effect} />\n})\n"],"names":["forwardRef","Outline","useThree","useContext","EffectComposerContext","useMemo","OutlineEffect","selectionContext","useEffect","resolveRef","useRef","jsx"],"mappings":";;;;;;;;;AAgBa,MAAA,UAAUA,MAAAA,WAAW,SAASC,SACzC;AAAA,EACE,YAAY,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACAD,aACA;AACA,QAAM,aAAaE,MAAAA,SAAS,CAAC,UAAU,MAAM,UAAU;AACvD,QAAM,EAAE,OAAO,OAAO,IAAIC,iBAAWC,eAAqB,qBAAA;AAE1D,QAAM,SAASC,MAAA;AAAA,IACb,MACE,IAAIC,eAAAA,cAAc,OAAO,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,MAAMH,iBAAWI,UAAAA,gBAAgB;AAEvCC,QAAAA,UAAU,MAAM;AAGV,QAAA,CAAC,OAAO,WAAW;AACrB,aAAO,UAAU;AAAA,QACf,MAAM,QAAQ,SAAS,IAAK,UAAyB,IAAIC,KAAAA,UAAU,IAAI,CAACA,gBAAW,SAAS,CAAa;AAAA,MAAA;AAEhG;AACX,aAAO,MAAM;AACX,eAAO,UAAU;AACN;MAAA;AAAA,IAEf;AAAA,KACC,CAAC,QAAQ,WAAW,KAAK,UAAU,CAAC;AAEvCD,QAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB;AACb;EACV,GAAA,CAAC,QAAQ,YAAY,cAAc,CAAC;AAE3BE,eAAsB;AAClCF,QAAAA,UAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,KACC,CAAC,KAAK,OAAO,WAAW,UAAU,CAAC;AAEtC,SAAQG,2BAAAA,IAAA,aAAA,EAAU,KAAKX,aAAY,QAAQ,OAAQ,CAAA;AACrD,CAAC;;"}
+{"version":3,"file":"Outline.cjs","sources":["../../src/effects/Outline.tsx"],"sourcesContent":["import { OutlineEffect } from 'postprocessing'\nimport { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'\nimport { Object3D } from 'three'\nimport { useThree } from '@react-three/fiber'\nimport { EffectComposerContext } from '../EffectComposer'\nimport { selectionContext } from '../Selection'\nimport { resolveRef } from '../util'\n\ntype ObjectRef = MutableRefObject<Object3D>\n\nexport type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &\n  Partial<{\n    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]\n    selectionLayer: number\n  }>\n\nexport const Outline = forwardRef(function Outline(\n  {\n    selection = [],\n    selectionLayer = 10,\n    blendFunction,\n    patternTexture,\n    edgeStrength,\n    pulseSpeed,\n    visibleEdgeColor,\n    hiddenEdgeColor,\n    width,\n    height,\n    kernelSize,\n    blur,\n    xRay,\n    ...props\n  }: OutlineProps,\n  forwardRef: Ref<OutlineEffect>\n) {\n  const invalidate = useThree((state) => state.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n\n  const effect = useMemo(\n    () =>\n      new OutlineEffect(scene, camera, {\n        blendFunction,\n        patternTexture,\n        edgeStrength,\n        pulseSpeed,\n        visibleEdgeColor,\n        hiddenEdgeColor,\n        width,\n        height,\n        kernelSize,\n        blur,\n        xRay,\n        ...props,\n      }),\n    [\n      blendFunction,\n      blur,\n      camera,\n      edgeStrength,\n      height,\n      hiddenEdgeColor,\n      kernelSize,\n      patternTexture,\n      pulseSpeed,\n      scene,\n      visibleEdgeColor,\n      width,\n      xRay,\n    ]\n  )\n\n  const api = useContext(selectionContext)\n\n  useEffect(() => {\n    // Do not allow array selection if declarative selection is active\n    // TODO: array selection should probably be deprecated altogether\n    if (!api && selection) {\n      effect.selection.set(\n        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]\n      )\n      invalidate()\n      return () => {\n        effect.selection.clear()\n        invalidate()\n      }\n    }\n  }, [effect, selection, api, invalidate])\n\n  useEffect(() => {\n    effect.selectionLayer = selectionLayer\n    invalidate()\n  }, [effect, invalidate, selectionLayer])\n\n  const ref = useRef<OutlineEffect>()\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect.selection, invalidate])\n\n  useEffect(() => {\n    return () => {\n      effect.dispose()\n    }\n  }, [effect])\n\n  return <primitive ref={forwardRef} object={effect} />\n})\n"],"names":["forwardRef","Outline","useThree","useContext","EffectComposerContext","useMemo","OutlineEffect","selectionContext","useEffect","resolveRef","useRef","jsx"],"mappings":";;;;;;;;;AAgBa,MAAA,UAAUA,MAAAA,WAAW,SAASC,SACzC;AAAA,EACE,YAAY,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACAD,aACA;AACA,QAAM,aAAaE,MAAAA,SAAS,CAAC,UAAU,MAAM,UAAU;AACvD,QAAM,EAAE,OAAO,OAAO,IAAIC,iBAAWC,eAAqB,qBAAA;AAE1D,QAAM,SAASC,MAAA;AAAA,IACb,MACE,IAAIC,eAAAA,cAAc,OAAO,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,MAAMH,iBAAWI,UAAAA,gBAAgB;AAEvCC,QAAAA,UAAU,MAAM;AAGV,QAAA,CAAC,OAAO,WAAW;AACrB,aAAO,UAAU;AAAA,QACf,MAAM,QAAQ,SAAS,IAAK,UAAyB,IAAIC,KAAAA,UAAU,IAAI,CAACA,gBAAW,SAAS,CAAa;AAAA,MAAA;AAEhG;AACX,aAAO,MAAM;AACX,eAAO,UAAU;AACN;MAAA;AAAA,IAEf;AAAA,KACC,CAAC,QAAQ,WAAW,KAAK,UAAU,CAAC;AAEvCD,QAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB;AACb;EACV,GAAA,CAAC,QAAQ,YAAY,cAAc,CAAC;AAE3BE,eAAsB;AAClCF,QAAAA,UAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,KACC,CAAC,KAAK,OAAO,WAAW,UAAU,CAAC;AAEtCA,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACX,aAAO,QAAQ;AAAA,IAAA;AAAA,EACjB,GACC,CAAC,MAAM,CAAC;AAEX,SAAQG,2BAAAA,IAAA,aAAA,EAAU,KAAKX,aAAY,QAAQ,OAAQ,CAAA;AACrD,CAAC;;"}

package/dist/effects/Outline.js

@@ -85,6 +85,11 @@ const Outline = forwardRef(function Outline2({
       }
     }
   }, [api, effect.selection, invalidate]);
+  useEffect(() => {
+    return () => {
+      effect.dispose();
+    };
+  }, [effect]);
   return /* @__PURE__ */ jsx("primitive", { ref: forwardRef2, object: effect });
 });
 export {

package/dist/effects/Outline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Outline.js","sources":["../../src/effects/Outline.tsx"],"sourcesContent":["import { OutlineEffect } from 'postprocessing'\nimport { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'\nimport { Object3D } from 'three'\nimport { useThree } from '@react-three/fiber'\nimport { EffectComposerContext } from '../EffectComposer'\nimport { selectionContext } from '../Selection'\nimport { resolveRef } from '../util'\n\ntype ObjectRef = MutableRefObject<Object3D>\n\nexport type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &\n  Partial<{\n    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]\n    selectionLayer: number\n  }>\n\nexport const Outline = forwardRef(function Outline(\n  {\n    selection = [],\n    selectionLayer = 10,\n    blendFunction,\n    patternTexture,\n    edgeStrength,\n    pulseSpeed,\n    visibleEdgeColor,\n    hiddenEdgeColor,\n    width,\n    height,\n    kernelSize,\n    blur,\n    xRay,\n    ...props\n  }: OutlineProps,\n  forwardRef: Ref<OutlineEffect>\n) {\n  const invalidate = useThree((state) => state.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n\n  const effect = useMemo(\n    () =>\n      new OutlineEffect(scene, camera, {\n        blendFunction,\n        patternTexture,\n        edgeStrength,\n        pulseSpeed,\n        visibleEdgeColor,\n        hiddenEdgeColor,\n        width,\n        height,\n        kernelSize,\n        blur,\n        xRay,\n        ...props,\n      }),\n    [\n      blendFunction,\n      blur,\n      camera,\n      edgeStrength,\n      height,\n      hiddenEdgeColor,\n      kernelSize,\n      patternTexture,\n      pulseSpeed,\n      scene,\n      visibleEdgeColor,\n      width,\n      xRay,\n    ]\n  )\n\n  const api = useContext(selectionContext)\n\n  useEffect(() => {\n    // Do not allow array selection if declarative selection is active\n    // TODO: array selection should probably be deprecated altogether\n    if (!api && selection) {\n      effect.selection.set(\n        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]\n      )\n      invalidate()\n      return () => {\n        effect.selection.clear()\n        invalidate()\n      }\n    }\n  }, [effect, selection, api, invalidate])\n\n  useEffect(() => {\n    effect.selectionLayer = selectionLayer\n    invalidate()\n  }, [effect, invalidate, selectionLayer])\n\n  const ref = useRef<OutlineEffect>()\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect.selection, invalidate])\n\n  return <primitive ref={forwardRef} object={effect} />\n})\n"],"names":["Outline","forwardRef"],"mappings":";;;;;;;AAgBa,MAAA,UAAU,WAAW,SAASA,SACzC;AAAA,EACE,YAAY,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACAC,aACA;AACA,QAAM,aAAa,SAAS,CAAC,UAAU,MAAM,UAAU;AACvD,QAAM,EAAE,OAAO,OAAO,IAAI,WAAW,qBAAqB;AAE1D,QAAM,SAAS;AAAA,IACb,MACE,IAAI,cAAc,OAAO,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,MAAM,WAAW,gBAAgB;AAEvC,YAAU,MAAM;AAGV,QAAA,CAAC,OAAO,WAAW;AACrB,aAAO,UAAU;AAAA,QACf,MAAM,QAAQ,SAAS,IAAK,UAAyB,IAAI,UAAU,IAAI,CAAC,WAAW,SAAS,CAAa;AAAA,MAAA;AAEhG;AACX,aAAO,MAAM;AACX,eAAO,UAAU;AACN;MAAA;AAAA,IAEf;AAAA,KACC,CAAC,QAAQ,WAAW,KAAK,UAAU,CAAC;AAEvC,YAAU,MAAM;AACd,WAAO,iBAAiB;AACb;EACV,GAAA,CAAC,QAAQ,YAAY,cAAc,CAAC;AAE3B,SAAsB;AAClC,YAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,KACC,CAAC,KAAK,OAAO,WAAW,UAAU,CAAC;AAEtC,SAAQ,oBAAA,aAAA,EAAU,KAAKA,aAAY,QAAQ,OAAQ,CAAA;AACrD,CAAC;"}
+{"version":3,"file":"Outline.js","sources":["../../src/effects/Outline.tsx"],"sourcesContent":["import { OutlineEffect } from 'postprocessing'\nimport { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'\nimport { Object3D } from 'three'\nimport { useThree } from '@react-three/fiber'\nimport { EffectComposerContext } from '../EffectComposer'\nimport { selectionContext } from '../Selection'\nimport { resolveRef } from '../util'\n\ntype ObjectRef = MutableRefObject<Object3D>\n\nexport type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &\n  Partial<{\n    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]\n    selectionLayer: number\n  }>\n\nexport const Outline = forwardRef(function Outline(\n  {\n    selection = [],\n    selectionLayer = 10,\n    blendFunction,\n    patternTexture,\n    edgeStrength,\n    pulseSpeed,\n    visibleEdgeColor,\n    hiddenEdgeColor,\n    width,\n    height,\n    kernelSize,\n    blur,\n    xRay,\n    ...props\n  }: OutlineProps,\n  forwardRef: Ref<OutlineEffect>\n) {\n  const invalidate = useThree((state) => state.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n\n  const effect = useMemo(\n    () =>\n      new OutlineEffect(scene, camera, {\n        blendFunction,\n        patternTexture,\n        edgeStrength,\n        pulseSpeed,\n        visibleEdgeColor,\n        hiddenEdgeColor,\n        width,\n        height,\n        kernelSize,\n        blur,\n        xRay,\n        ...props,\n      }),\n    [\n      blendFunction,\n      blur,\n      camera,\n      edgeStrength,\n      height,\n      hiddenEdgeColor,\n      kernelSize,\n      patternTexture,\n      pulseSpeed,\n      scene,\n      visibleEdgeColor,\n      width,\n      xRay,\n    ]\n  )\n\n  const api = useContext(selectionContext)\n\n  useEffect(() => {\n    // Do not allow array selection if declarative selection is active\n    // TODO: array selection should probably be deprecated altogether\n    if (!api && selection) {\n      effect.selection.set(\n        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]\n      )\n      invalidate()\n      return () => {\n        effect.selection.clear()\n        invalidate()\n      }\n    }\n  }, [effect, selection, api, invalidate])\n\n  useEffect(() => {\n    effect.selectionLayer = selectionLayer\n    invalidate()\n  }, [effect, invalidate, selectionLayer])\n\n  const ref = useRef<OutlineEffect>()\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect.selection, invalidate])\n\n  useEffect(() => {\n    return () => {\n      effect.dispose()\n    }\n  }, [effect])\n\n  return <primitive ref={forwardRef} object={effect} />\n})\n"],"names":["Outline","forwardRef"],"mappings":";;;;;;;AAgBa,MAAA,UAAU,WAAW,SAASA,SACzC;AAAA,EACE,YAAY,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACAC,aACA;AACA,QAAM,aAAa,SAAS,CAAC,UAAU,MAAM,UAAU;AACvD,QAAM,EAAE,OAAO,OAAO,IAAI,WAAW,qBAAqB;AAE1D,QAAM,SAAS;AAAA,IACb,MACE,IAAI,cAAc,OAAO,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,MAAM,WAAW,gBAAgB;AAEvC,YAAU,MAAM;AAGV,QAAA,CAAC,OAAO,WAAW;AACrB,aAAO,UAAU;AAAA,QACf,MAAM,QAAQ,SAAS,IAAK,UAAyB,IAAI,UAAU,IAAI,CAAC,WAAW,SAAS,CAAa;AAAA,MAAA;AAEhG;AACX,aAAO,MAAM;AACX,eAAO,UAAU;AACN;MAAA;AAAA,IAEf;AAAA,KACC,CAAC,QAAQ,WAAW,KAAK,UAAU,CAAC;AAEvC,YAAU,MAAM;AACd,WAAO,iBAAiB;AACb;EACV,GAAA,CAAC,QAAQ,YAAY,cAAc,CAAC;AAE3B,SAAsB;AAClC,YAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,KACC,CAAC,KAAK,OAAO,WAAW,UAAU,CAAC;AAEtC,YAAU,MAAM;AACd,WAAO,MAAM;AACX,aAAO,QAAQ;AAAA,IAAA;AAAA,EACjB,GACC,CAAC,MAAM,CAAC;AAEX,SAAQ,oBAAA,aAAA,EAAU,KAAKA,aAAY,QAAQ,OAAQ,CAAA;AACrD,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.15.9",
+  "version": "2.15.11",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",