@react-three/postprocessing 2.15.0 → 2.15.2

package/dist/EffectComposer.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const THREE = require("three");
+const React = require("react");
+const fiber = require("@react-three/fiber");
+const postprocessing = require("postprocessing");
+const threeStdlib = require("three-stdlib");
+const EffectComposerContext = React.createContext(null);
+const EffectComposer = React.memo(
+  React.forwardRef(
+    ({
+      children,
+      camera: _camera,
+      scene: _scene,
+      resolutionScale,
+      enabled = true,
+      renderPriority = 1,
+      autoClear = true,
+      depthBuffer,
+      disableNormalPass,
+      stencilBuffer,
+      multisampling = 8,
+      frameBufferType = THREE.HalfFloatType
+    }, ref) => {
+      const { gl, scene: defaultScene, camera: defaultCamera, size } = fiber.useThree();
+      const scene = _scene || defaultScene;
+      const camera = _camera || defaultCamera;
+      const [composer, normalPass, downSamplingPass] = React.useMemo(() => {
+        const webGL2Available = threeStdlib.isWebGL2Available();
+        const effectComposer = new postprocessing.EffectComposer(gl, {
+          depthBuffer,
+          stencilBuffer,
+          multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
+          frameBufferType
+        });
+        effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
+        let downSamplingPass2 = null;
+        let normalPass2 = null;
+        if (!disableNormalPass) {
+          normalPass2 = new postprocessing.NormalPass(scene, camera);
+          normalPass2.enabled = false;
+          effectComposer.addPass(normalPass2);
+          if (resolutionScale !== void 0 && webGL2Available) {
+            downSamplingPass2 = new postprocessing.DepthDownsamplingPass({ normalBuffer: normalPass2.texture, resolutionScale });
+            downSamplingPass2.enabled = false;
+            effectComposer.addPass(downSamplingPass2);
+          }
+        }
+        return [effectComposer, normalPass2, downSamplingPass2];
+      }, [
+        camera,
+        gl,
+        depthBuffer,
+        stencilBuffer,
+        multisampling,
+        frameBufferType,
+        scene,
+        disableNormalPass,
+        resolutionScale
+      ]);
+      React.useEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
+      fiber.useFrame(
+        (_, delta) => {
+          if (enabled) {
+            const currentAutoClear = gl.autoClear;
+            gl.autoClear = autoClear;
+            if (stencilBuffer && !autoClear)
+              gl.clearStencil();
+            composer.render(delta);
+            gl.autoClear = currentAutoClear;
+          }
+        },
+        enabled ? renderPriority : 0
+      );
+      const group = React.useRef(null);
+      const instance = fiber.useInstanceHandle(group);
+      React.useLayoutEffect(() => {
+        const passes = [];
+        if (group.current && instance.current && composer) {
+          const children2 = instance.current.objects;
+          for (let i = 0; i < children2.length; i++) {
+            const child = children2[i];
+            if (child instanceof postprocessing.Effect) {
+              const effects = [];
+              while (
+                // Filter to effects
+                children2[i] instanceof postprocessing.Effect && // Don't merge convolution effects
+                (children2[i].getAttributes() & postprocessing.EffectAttribute.CONVOLUTION) !== 0
+              )
+                effects.push(children2[i++]);
+              i--;
+              const pass = new postprocessing.EffectPass(camera, ...effects);
+              passes.push(pass);
+            } else if (child instanceof postprocessing.Pass) {
+              passes.push(child);
+            }
+          }
+          for (const pass of passes)
+            composer == null ? void 0 : composer.addPass(pass);
+          if (normalPass)
+            normalPass.enabled = true;
+          if (downSamplingPass)
+            downSamplingPass.enabled = true;
+        }
+        return () => {
+          for (const pass of passes)
+            composer == null ? void 0 : composer.removePass(pass);
+          if (normalPass)
+            normalPass.enabled = false;
+          if (downSamplingPass)
+            downSamplingPass.enabled = false;
+        };
+      }, [composer, children, camera, normalPass, downSamplingPass, instance]);
+      const state = React.useMemo(
+        () => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),
+        [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]
+      );
+      React.useImperativeHandle(ref, () => composer, [composer]);
+      return /* @__PURE__ */ jsxRuntime.jsx(EffectComposerContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx("group", { ref: group, children }) });
+    }
+  )
+);
+exports.EffectComposer = EffectComposer;
+exports.EffectComposerContext = EffectComposerContext;
+//# sourceMappingURL=EffectComposer.cjs.map

package/dist/EffectComposer.cjs.map

@@ -0,0 +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\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[] = []\n              while (\n                // Filter to effects\n                children[i] instanceof Effect &&\n                // Don't merge convolution effects\n                ((children[i] as Effect).getAttributes() & EffectAttribute.CONVOLUTION) !== 0\n              )\n                effects.push(children[i++] as Effect)\n              i--\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","forwardRef","HalfFloatType","useThree","useMemo","isWebGL2Available","EffectComposerImpl","RenderPass","downSamplingPass","normalPass","NormalPass","DepthDownsamplingPass","useEffect","useFrame","useRef","useInstanceHandle","useLayoutEffect","children","Effect","EffectAttribute","EffectPass","Pass","useImperativeHandle","jsx"],"mappings":"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"}

package/dist/EffectComposer.js

@@ -0,0 +1,126 @@
+import { jsx } from "react/jsx-runtime";
+import { HalfFloatType } from "three";
+import React, { createContext, forwardRef, useMemo, useEffect, useRef, useLayoutEffect, useImperativeHandle } from "react";
+import { useThree, useFrame, useInstanceHandle } from "@react-three/fiber";
+import { EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectAttribute, EffectPass, Pass } from "postprocessing";
+import { isWebGL2Available } from "three-stdlib";
+const EffectComposerContext = createContext(null);
+const EffectComposer = React.memo(
+  forwardRef(
+    ({
+      children,
+      camera: _camera,
+      scene: _scene,
+      resolutionScale,
+      enabled = true,
+      renderPriority = 1,
+      autoClear = true,
+      depthBuffer,
+      disableNormalPass,
+      stencilBuffer,
+      multisampling = 8,
+      frameBufferType = HalfFloatType
+    }, ref) => {
+      const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree();
+      const scene = _scene || defaultScene;
+      const camera = _camera || defaultCamera;
+      const [composer, normalPass, downSamplingPass] = useMemo(() => {
+        const webGL2Available = isWebGL2Available();
+        const effectComposer = new EffectComposer$1(gl, {
+          depthBuffer,
+          stencilBuffer,
+          multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
+          frameBufferType
+        });
+        effectComposer.addPass(new RenderPass(scene, camera));
+        let downSamplingPass2 = null;
+        let normalPass2 = null;
+        if (!disableNormalPass) {
+          normalPass2 = new NormalPass(scene, camera);
+          normalPass2.enabled = false;
+          effectComposer.addPass(normalPass2);
+          if (resolutionScale !== void 0 && webGL2Available) {
+            downSamplingPass2 = new DepthDownsamplingPass({ normalBuffer: normalPass2.texture, resolutionScale });
+            downSamplingPass2.enabled = false;
+            effectComposer.addPass(downSamplingPass2);
+          }
+        }
+        return [effectComposer, normalPass2, downSamplingPass2];
+      }, [
+        camera,
+        gl,
+        depthBuffer,
+        stencilBuffer,
+        multisampling,
+        frameBufferType,
+        scene,
+        disableNormalPass,
+        resolutionScale
+      ]);
+      useEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
+      useFrame(
+        (_, delta) => {
+          if (enabled) {
+            const currentAutoClear = gl.autoClear;
+            gl.autoClear = autoClear;
+            if (stencilBuffer && !autoClear)
+              gl.clearStencil();
+            composer.render(delta);
+            gl.autoClear = currentAutoClear;
+          }
+        },
+        enabled ? renderPriority : 0
+      );
+      const group = useRef(null);
+      const instance = useInstanceHandle(group);
+      useLayoutEffect(() => {
+        const passes = [];
+        if (group.current && instance.current && composer) {
+          const children2 = instance.current.objects;
+          for (let i = 0; i < children2.length; i++) {
+            const child = children2[i];
+            if (child instanceof Effect) {
+              const effects = [];
+              while (
+                // Filter to effects
+                children2[i] instanceof Effect && // Don't merge convolution effects
+                (children2[i].getAttributes() & EffectAttribute.CONVOLUTION) !== 0
+              )
+                effects.push(children2[i++]);
+              i--;
+              const pass = new EffectPass(camera, ...effects);
+              passes.push(pass);
+            } else if (child instanceof Pass) {
+              passes.push(child);
+            }
+          }
+          for (const pass of passes)
+            composer == null ? void 0 : composer.addPass(pass);
+          if (normalPass)
+            normalPass.enabled = true;
+          if (downSamplingPass)
+            downSamplingPass.enabled = true;
+        }
+        return () => {
+          for (const pass of passes)
+            composer == null ? void 0 : composer.removePass(pass);
+          if (normalPass)
+            normalPass.enabled = false;
+          if (downSamplingPass)
+            downSamplingPass.enabled = false;
+        };
+      }, [composer, children, camera, normalPass, downSamplingPass, instance]);
+      const state = useMemo(
+        () => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),
+        [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]
+      );
+      useImperativeHandle(ref, () => composer, [composer]);
+      return /* @__PURE__ */ jsx(EffectComposerContext.Provider, { value: state, children: /* @__PURE__ */ jsx("group", { ref: group, children }) });
+    }
+  )
+);
+export {
+  EffectComposer,
+  EffectComposerContext
+};
+//# sourceMappingURL=EffectComposer.js.map

package/dist/EffectComposer.js.map

@@ -0,0 +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\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[] = []\n              while (\n                // Filter to effects\n                children[i] instanceof Effect &&\n                // Don't merge convolution effects\n                ((children[i] as Effect).getAttributes() & EffectAttribute.CONVOLUTION) !== 0\n              )\n                effects.push(children[i++] as Effect)\n              i--\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/Selection.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const selectionContext = React.createContext(null);
+function Selection({ children, enabled = true }) {
+  const [selected, select] = React.useState([]);
+  const value = React.useMemo(() => ({ selected, select, enabled }), [selected, select, enabled]);
+  return /* @__PURE__ */ jsxRuntime.jsx(selectionContext.Provider, { value, children });
+}
+function Select({ enabled = false, children, ...props }) {
+  const group = React.useRef(null);
+  const api = React.useContext(selectionContext);
+  React.useEffect(() => {
+    if (api && enabled) {
+      let changed = false;
+      const current = [];
+      group.current.traverse((o) => {
+        o.type === "Mesh" && current.push(o);
+        if (api.selected.indexOf(o) === -1)
+          changed = true;
+      });
+      if (changed) {
+        api.select((state) => [...state, ...current]);
+        return () => {
+          api.select((state) => state.filter((selected) => !current.includes(selected)));
+        };
+      }
+    }
+  }, [enabled, children, api]);
+  return /* @__PURE__ */ jsxRuntime.jsx("group", { ref: group, ...props, children });
+}
+exports.Select = Select;
+exports.Selection = Selection;
+exports.selectionContext = selectionContext;
+//# sourceMappingURL=Selection.cjs.map

package/dist/Selection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selection.cjs","sources":["../src/Selection.tsx"],"sourcesContent":["import * as THREE from 'three'\nimport React, { createContext, useState, useContext, useEffect, useRef, useMemo } from 'react'\n\nexport type Api = {\n  selected: THREE.Object3D[]\n  select: React.Dispatch<React.SetStateAction<THREE.Object3D[]>>\n  enabled: boolean\n}\nexport type SelectApi = JSX.IntrinsicElements['group'] & {\n  enabled?: boolean\n}\n\nexport const selectionContext = createContext<Api | null>(null)\n\nexport function Selection({ children, enabled = true }: { enabled?: boolean; children: React.ReactNode }) {\n  const [selected, select] = useState<THREE.Object3D[]>([])\n  const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled])\n  return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>\n}\n\nexport function Select({ enabled = false, children, ...props }: SelectApi) {\n  const group = useRef<THREE.Group>(null!)\n  const api = useContext(selectionContext)\n  useEffect(() => {\n    if (api && enabled) {\n      let changed = false\n      const current: THREE.Object3D<THREE.Event>[] = []\n      group.current.traverse((o) => {\n        o.type === 'Mesh' && current.push(o)\n        if (api.selected.indexOf(o) === -1) changed = true\n      })\n      if (changed) {\n        api.select((state) => [...state, ...current])\n        return () => {\n          api.select((state) => state.filter((selected) => !current.includes(selected)))\n        }\n      }\n    }\n  }, [enabled, children, api])\n  return (\n    <group ref={group} {...props}>\n      {children}\n    </group>\n  )\n}\n"],"names":["createContext","useState","useMemo","jsx","useRef","useContext","useEffect"],"mappings":";;;;AAYa,MAAA,mBAAmBA,oBAA0B,IAAI;AAEvD,SAAS,UAAU,EAAE,UAAU,UAAU,QAA0D;AACxG,QAAM,CAAC,UAAU,MAAM,IAAIC,MAAA,SAA2B,CAAE,CAAA;AACxD,QAAM,QAAQC,MAAAA,QAAQ,OAAO,EAAE,UAAU,QAAQ,QAAQ,IAAI,CAAC,UAAU,QAAQ,OAAO,CAAC;AACxF,SAAQC,2BAAAA,IAAA,iBAAiB,UAAjB,EAA0B,OAAe,SAAS,CAAA;AAC5D;AAEO,SAAS,OAAO,EAAE,UAAU,OAAO,UAAU,GAAG,SAAoB;AACnE,QAAA,QAAQC,aAAoB,IAAK;AACjC,QAAA,MAAMC,iBAAW,gBAAgB;AACvCC,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,SAAS;AAClB,UAAI,UAAU;AACd,YAAM,UAAyC,CAAA;AACzC,YAAA,QAAQ,SAAS,CAAC,MAAM;AAC5B,UAAE,SAAS,UAAU,QAAQ,KAAK,CAAC;AACnC,YAAI,IAAI,SAAS,QAAQ,CAAC,MAAM;AAAc,oBAAA;AAAA,MAAA,CAC/C;AACD,UAAI,SAAS;AACP,YAAA,OAAO,CAAC,UAAU,CAAC,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,eAAO,MAAM;AACX,cAAI,OAAO,CAAC,UAAU,MAAM,OAAO,CAAC,aAAa,CAAC,QAAQ,SAAS,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MAEjF;AAAA,IACF;AAAA,EACC,GAAA,CAAC,SAAS,UAAU,GAAG,CAAC;AAC3B,wCACG,SAAM,EAAA,KAAK,OAAQ,GAAG,OACpB,SACH,CAAA;AAEJ;;;;"}

package/dist/Selection.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useMemo, useRef, useContext, useEffect } from "react";
+const selectionContext = createContext(null);
+function Selection({ children, enabled = true }) {
+  const [selected, select] = useState([]);
+  const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled]);
+  return /* @__PURE__ */ jsx(selectionContext.Provider, { value, children });
+}
+function Select({ enabled = false, children, ...props }) {
+  const group = useRef(null);
+  const api = useContext(selectionContext);
+  useEffect(() => {
+    if (api && enabled) {
+      let changed = false;
+      const current = [];
+      group.current.traverse((o) => {
+        o.type === "Mesh" && current.push(o);
+        if (api.selected.indexOf(o) === -1)
+          changed = true;
+      });
+      if (changed) {
+        api.select((state) => [...state, ...current]);
+        return () => {
+          api.select((state) => state.filter((selected) => !current.includes(selected)));
+        };
+      }
+    }
+  }, [enabled, children, api]);
+  return /* @__PURE__ */ jsx("group", { ref: group, ...props, children });
+}
+export {
+  Select,
+  Selection,
+  selectionContext
+};
+//# sourceMappingURL=Selection.js.map

package/dist/Selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selection.js","sources":["../src/Selection.tsx"],"sourcesContent":["import * as THREE from 'three'\nimport React, { createContext, useState, useContext, useEffect, useRef, useMemo } from 'react'\n\nexport type Api = {\n  selected: THREE.Object3D[]\n  select: React.Dispatch<React.SetStateAction<THREE.Object3D[]>>\n  enabled: boolean\n}\nexport type SelectApi = JSX.IntrinsicElements['group'] & {\n  enabled?: boolean\n}\n\nexport const selectionContext = createContext<Api | null>(null)\n\nexport function Selection({ children, enabled = true }: { enabled?: boolean; children: React.ReactNode }) {\n  const [selected, select] = useState<THREE.Object3D[]>([])\n  const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled])\n  return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>\n}\n\nexport function Select({ enabled = false, children, ...props }: SelectApi) {\n  const group = useRef<THREE.Group>(null!)\n  const api = useContext(selectionContext)\n  useEffect(() => {\n    if (api && enabled) {\n      let changed = false\n      const current: THREE.Object3D<THREE.Event>[] = []\n      group.current.traverse((o) => {\n        o.type === 'Mesh' && current.push(o)\n        if (api.selected.indexOf(o) === -1) changed = true\n      })\n      if (changed) {\n        api.select((state) => [...state, ...current])\n        return () => {\n          api.select((state) => state.filter((selected) => !current.includes(selected)))\n        }\n      }\n    }\n  }, [enabled, children, api])\n  return (\n    <group ref={group} {...props}>\n      {children}\n    </group>\n  )\n}\n"],"names":[],"mappings":";;AAYa,MAAA,mBAAmB,cAA0B,IAAI;AAEvD,SAAS,UAAU,EAAE,UAAU,UAAU,QAA0D;AACxG,QAAM,CAAC,UAAU,MAAM,IAAI,SAA2B,CAAE,CAAA;AACxD,QAAM,QAAQ,QAAQ,OAAO,EAAE,UAAU,QAAQ,QAAQ,IAAI,CAAC,UAAU,QAAQ,OAAO,CAAC;AACxF,SAAQ,oBAAA,iBAAiB,UAAjB,EAA0B,OAAe,SAAS,CAAA;AAC5D;AAEO,SAAS,OAAO,EAAE,UAAU,OAAO,UAAU,GAAG,SAAoB;AACnE,QAAA,QAAQ,OAAoB,IAAK;AACjC,QAAA,MAAM,WAAW,gBAAgB;AACvC,YAAU,MAAM;AACd,QAAI,OAAO,SAAS;AAClB,UAAI,UAAU;AACd,YAAM,UAAyC,CAAA;AACzC,YAAA,QAAQ,SAAS,CAAC,MAAM;AAC5B,UAAE,SAAS,UAAU,QAAQ,KAAK,CAAC;AACnC,YAAI,IAAI,SAAS,QAAQ,CAAC,MAAM;AAAc,oBAAA;AAAA,MAAA,CAC/C;AACD,UAAI,SAAS;AACP,YAAA,OAAO,CAAC,UAAU,CAAC,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,eAAO,MAAM;AACX,cAAI,OAAO,CAAC,UAAU,MAAM,OAAO,CAAC,aAAa,CAAC,QAAQ,SAAS,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MAEjF;AAAA,IACF;AAAA,EACC,GAAA,CAAC,SAAS,UAAU,GAAG,CAAC;AAC3B,6BACG,SAAM,EAAA,KAAK,OAAQ,GAAG,OACpB,SACH,CAAA;AAEJ;"}

package/dist/effects/ASCII.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const THREE = require("three");
+const postprocessing = require("postprocessing");
+const fragment = `
+uniform sampler2D uCharacters;
+uniform float uCharactersCount;
+uniform float uCellSize;
+uniform bool uInvert;
+uniform vec3 uColor;
+
+const vec2 SIZE = vec2(16.);
+
+vec3 greyscale(vec3 color, float strength) {
+    float g = dot(color, vec3(0.299, 0.587, 0.114));
+    return mix(color, vec3(g), strength);
+}
+
+vec3 greyscale(vec3 color) {
+    return greyscale(color, 1.0);
+}
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    vec2 cell = resolution / uCellSize;
+    vec2 grid = 1.0 / cell;
+    vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));
+    vec4 pixelized = texture2D(inputBuffer, pixelizedUV);
+    float greyscaled = greyscale(pixelized.rgb).r;
+
+    if (uInvert) {
+        greyscaled = 1.0 - greyscaled;
+    }
+
+    float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);
+    vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));
+    vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;
+    vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;
+    vec4 asciiCharacter = texture2D(uCharacters, charUV);
+
+    asciiCharacter.rgb = uColor * asciiCharacter.r;
+    asciiCharacter.a = pixelized.a;
+    outputColor = asciiCharacter;
+}
+`;
+class ASCIIEffect extends postprocessing.Effect {
+  constructor({
+    characters = ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize = 54,
+    cellSize = 16,
+    color = "#ffffff",
+    invert = false
+  } = {}) {
+    const uniforms = /* @__PURE__ */ new Map([
+      ["uCharacters", new THREE.Uniform(new THREE.Texture())],
+      ["uCellSize", new THREE.Uniform(cellSize)],
+      ["uCharactersCount", new THREE.Uniform(characters.length)],
+      ["uColor", new THREE.Uniform(new THREE.Color(color))],
+      ["uInvert", new THREE.Uniform(invert)]
+    ]);
+    super("ASCIIEffect", fragment, { uniforms });
+    const charactersTextureUniform = this.uniforms.get("uCharacters");
+    if (charactersTextureUniform) {
+      charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize);
+    }
+  }
+  /** Draws the characters on a Canvas and returns a texture */
+  createCharactersTexture(characters, fontSize) {
+    const canvas = document.createElement("canvas");
+    const SIZE = 1024;
+    const MAX_PER_ROW = 16;
+    const CELL = SIZE / MAX_PER_ROW;
+    canvas.width = canvas.height = SIZE;
+    const texture = new THREE.CanvasTexture(canvas, void 0, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestFilter);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Context not available");
+    }
+    context.clearRect(0, 0, SIZE, SIZE);
+    context.font = `${fontSize}px arial`;
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.fillStyle = "#fff";
+    for (let i = 0; i < characters.length; i++) {
+      const char = characters[i];
+      const x = i % MAX_PER_ROW;
+      const y = Math.floor(i / MAX_PER_ROW);
+      context.fillText(char, x * CELL + CELL / 2, y * CELL + CELL / 2);
+    }
+    texture.needsUpdate = true;
+    return texture;
+  }
+}
+const ASCII = React.forwardRef(
+  ({ 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]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ref: fref, object: effect });
+  }
+);
+exports.ASCII = ASCII;
+//# sourceMappingURL=ASCII.cjs.map

package/dist/effects/ASCII.cjs.map

@@ -0,0 +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 arial`\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;AAiDjB,MAAM,oBAAoBA,eAAAA,OAAO;AAAA,EAC/B,YAAY;AAAA,IACV,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,QAAQ;AAAA,IACpF;AAAA,EACF;AAAA;AAAA,EAGO,wBAAwB,YAAoB,UAAiC;AAC5E,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;AAClC,YAAQ,OAAO,GAAG;AAClB,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.js

@@ -0,0 +1,105 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { Uniform, Texture, Color, CanvasTexture, RepeatWrapping, NearestFilter } from "three";
+import { Effect } from "postprocessing";
+const fragment = `
+uniform sampler2D uCharacters;
+uniform float uCharactersCount;
+uniform float uCellSize;
+uniform bool uInvert;
+uniform vec3 uColor;
+
+const vec2 SIZE = vec2(16.);
+
+vec3 greyscale(vec3 color, float strength) {
+    float g = dot(color, vec3(0.299, 0.587, 0.114));
+    return mix(color, vec3(g), strength);
+}
+
+vec3 greyscale(vec3 color) {
+    return greyscale(color, 1.0);
+}
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    vec2 cell = resolution / uCellSize;
+    vec2 grid = 1.0 / cell;
+    vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));
+    vec4 pixelized = texture2D(inputBuffer, pixelizedUV);
+    float greyscaled = greyscale(pixelized.rgb).r;
+
+    if (uInvert) {
+        greyscaled = 1.0 - greyscaled;
+    }
+
+    float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);
+    vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));
+    vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;
+    vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;
+    vec4 asciiCharacter = texture2D(uCharacters, charUV);
+
+    asciiCharacter.rgb = uColor * asciiCharacter.r;
+    asciiCharacter.a = pixelized.a;
+    outputColor = asciiCharacter;
+}
+`;
+class ASCIIEffect extends Effect {
+  constructor({
+    characters = ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize = 54,
+    cellSize = 16,
+    color = "#ffffff",
+    invert = false
+  } = {}) {
+    const uniforms = /* @__PURE__ */ new Map([
+      ["uCharacters", new Uniform(new Texture())],
+      ["uCellSize", new Uniform(cellSize)],
+      ["uCharactersCount", new Uniform(characters.length)],
+      ["uColor", new Uniform(new Color(color))],
+      ["uInvert", new Uniform(invert)]
+    ]);
+    super("ASCIIEffect", fragment, { uniforms });
+    const charactersTextureUniform = this.uniforms.get("uCharacters");
+    if (charactersTextureUniform) {
+      charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize);
+    }
+  }
+  /** Draws the characters on a Canvas and returns a texture */
+  createCharactersTexture(characters, fontSize) {
+    const canvas = document.createElement("canvas");
+    const SIZE = 1024;
+    const MAX_PER_ROW = 16;
+    const CELL = SIZE / MAX_PER_ROW;
+    canvas.width = canvas.height = SIZE;
+    const texture = new CanvasTexture(canvas, void 0, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Context not available");
+    }
+    context.clearRect(0, 0, SIZE, SIZE);
+    context.font = `${fontSize}px arial`;
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.fillStyle = "#fff";
+    for (let i = 0; i < characters.length; i++) {
+      const char = characters[i];
+      const x = i % MAX_PER_ROW;
+      const y = Math.floor(i / MAX_PER_ROW);
+      context.fillText(char, x * CELL + CELL / 2, y * CELL + CELL / 2);
+    }
+    texture.needsUpdate = true;
+    return texture;
+  }
+}
+const ASCII = forwardRef(
+  ({ 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]
+    );
+    return /* @__PURE__ */ jsx("primitive", { ref: fref, object: effect });
+  }
+);
+export {
+  ASCII
+};
+//# sourceMappingURL=ASCII.js.map

package/dist/effects/ASCII.js.map

@@ -0,0 +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 arial`\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;AAiDjB,MAAM,oBAAoB,OAAO;AAAA,EAC/B,YAAY;AAAA,IACV,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,QAAQ;AAAA,IACpF;AAAA,EACF;AAAA;AAAA,EAGO,wBAAwB,YAAoB,UAAiC;AAC5E,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;AAClC,YAAQ,OAAO,GAAG;AAClB,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;"}