@xperimntl/vue-threejs-postprocessing 1.1.0 → 1.1.1

package/dist/xperimntl-vue-threejs-postprocessing.cjs.dev.js

@@ -0,0 +1,555 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var postprocessing = require('postprocessing');
+var vueThreejs = require('@xperimntl/vue-threejs');
+
+/** Injection key for the EffectComposer context. */
+const COMPOSER_CONTEXT = Symbol('v3f-composer-context');
+/** Injection key for plugin-level defaults. */
+const POSTPROCESSING_DEFAULTS = Symbol('v3f-postprocessing-defaults');
+
+const EffectComposer = vue.defineComponent({
+  name: 'EffectComposer',
+  props: {
+    enabled: {
+      type: Boolean,
+      default: true
+    },
+    multisampling: {
+      type: Number,
+      default: 8
+    },
+    autoClear: {
+      type: Boolean,
+      default: true
+    },
+    resolutionScale: {
+      type: Number,
+      default: 1
+    },
+    depthBuffer: {
+      type: Boolean,
+      default: true
+    },
+    stencilBuffer: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const state = vueThreejs.useThree();
+    const composerRef = vue.shallowRef(null);
+
+    // Ordered list of registered effects
+    const effects = [];
+
+    // Track the current EffectPass so we can dispose/replace it
+    let currentEffectPass = null;
+    let currentRenderPass = null;
+
+    // Store the original autoClear value so we can restore on unmount
+    let originalAutoClear = null;
+    function disposeComposer() {
+      // Dispose composer
+      if (composerRef.value) {
+        composerRef.value.dispose();
+        composerRef.value = null;
+      }
+      currentEffectPass = null;
+      currentRenderPass = null;
+    }
+    function createComposer() {
+      const {
+        gl,
+        scene,
+        camera
+      } = state.value;
+      if (!gl || !scene || !camera) return null;
+
+      // Dispose previous composer if it exists
+      disposeComposer();
+      const composer = new postprocessing.EffectComposer(gl, {
+        multisampling: props.multisampling > 0 ? props.multisampling : 0,
+        depthBuffer: props.depthBuffer,
+        stencilBuffer: props.stencilBuffer
+      });
+
+      // Create render pass
+      currentRenderPass = new postprocessing.RenderPass(scene, camera);
+      composer.addPass(currentRenderPass);
+
+      // Create effect pass if we already have effects
+      if (effects.length > 0) {
+        const sortedEffects = [...effects].sort((a, b) => a.priority - b.priority).map(e => e.effect);
+        currentEffectPass = new postprocessing.EffectPass(camera, ...sortedEffects);
+        composer.addPass(currentEffectPass);
+      }
+      composerRef.value = composer;
+
+      // Disable default renderer autoClear
+      if (originalAutoClear === null) {
+        originalAutoClear = gl.autoClear;
+      }
+      gl.autoClear = false;
+      return composer;
+    }
+    function rebuildEffectPass() {
+      const composer = composerRef.value;
+      if (!composer) return;
+      const {
+        camera
+      } = state.value;
+
+      // Remove old effect pass
+      if (currentEffectPass) {
+        composer.removePass(currentEffectPass);
+        currentEffectPass.dispose();
+        currentEffectPass = null;
+      }
+
+      // Build new effect pass with current effects
+      if (effects.length > 0) {
+        const sortedEffects = [...effects].sort((a, b) => a.priority - b.priority).map(e => e.effect);
+        currentEffectPass = new postprocessing.EffectPass(camera, ...sortedEffects);
+        composer.addPass(currentEffectPass);
+      }
+    }
+    vue.watch(() => [state.value.gl, state.value.scene, state.value.camera], ([gl, scene, camera]) => {
+      if (!gl || !scene || !camera) {
+        disposeComposer();
+        return;
+      }
+      createComposer();
+    }, {
+      immediate: true
+    });
+
+    // Provide the context so child effect components can register
+    const composerContext = {
+      addEffect(effect, priority = 0) {
+        effects.push({
+          effect,
+          priority
+        });
+        rebuildEffectPass();
+        return () => composerContext.removeEffect(effect);
+      },
+      removeEffect(effect) {
+        const index = effects.findIndex(e => e.effect === effect);
+        if (index !== -1) {
+          effects.splice(index, 1);
+          rebuildEffectPass();
+        }
+      },
+      composer: composerRef
+    };
+    vue.provide(COMPOSER_CONTEXT, composerContext);
+
+    // Watch for camera changes — update render pass and effect pass
+    vue.watch(() => state.value.camera, camera => {
+      if (currentRenderPass) {
+        currentRenderPass.mainCamera = camera;
+      }
+      if (currentEffectPass) {
+        currentEffectPass.mainCamera = camera;
+      }
+    });
+
+    // Watch for size changes — update composer size
+    vue.watch(() => state.value.size, size => {
+      const composer = composerRef.value;
+      if (composer) {
+        composer.setSize(size.width, size.height, false);
+      }
+    });
+
+    // Watch for multisampling changes — recreate composer
+    vue.watch(() => props.multisampling, () => {
+      if (createComposer()) rebuildEffectPass();
+    });
+
+    // Use useFrame with priority 1 to take over rendering
+    vueThreejs.useFrame((_frameState, delta) => {
+      if (!props.enabled || !composerRef.value) return;
+      composerRef.value.render(delta);
+    }, 1);
+
+    // Cleanup on unmount
+    vue.onBeforeUnmount(() => {
+      const {
+        gl
+      } = state.value;
+
+      // Restore original autoClear
+      if (originalAutoClear !== null) {
+        gl.autoClear = originalAutoClear;
+      }
+      disposeComposer();
+      effects.length = 0;
+    });
+    return () => slots.default == null ? void 0 : slots.default();
+  }
+});
+
+const Bloom = vue.defineComponent({
+  name: 'Bloom',
+  props: {
+    intensity: {
+      type: Number,
+      default: 1
+    },
+    luminanceThreshold: {
+      type: Number,
+      default: 0.9
+    },
+    luminanceSmoothing: {
+      type: Number,
+      default: 0.025
+    },
+    mipmapBlur: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const composerCtx = vue.inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('Bloom must be a child of EffectComposer');
+    }
+    const effect = new postprocessing.BloomEffect({
+      intensity: props.intensity,
+      luminanceThreshold: props.luminanceThreshold,
+      luminanceSmoothing: props.luminanceSmoothing,
+      mipmapBlur: props.mipmapBlur
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    vue.watch(() => props.intensity, value => {
+      effect.intensity = value;
+    });
+    vue.watch(() => props.luminanceThreshold, value => {
+      effect.luminanceMaterial.threshold = value;
+    });
+    vue.watch(() => props.luminanceSmoothing, value => {
+      effect.luminanceMaterial.smoothing = value;
+    });
+    vue.watch(() => props.mipmapBlur, value => {
+      effect.mipmapBlurPass.enabled = value;
+    });
+    vue.onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const BrightnessContrast = vue.defineComponent({
+  name: 'BrightnessContrast',
+  props: {
+    brightness: {
+      type: Number,
+      default: 0
+    },
+    contrast: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
+    const composerCtx = vue.inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('BrightnessContrast must be a child of EffectComposer');
+    }
+    const effect = new postprocessing.BrightnessContrastEffect({
+      brightness: props.brightness,
+      contrast: props.contrast
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    vue.watch(() => props.brightness, value => {
+      effect.brightness = value;
+    });
+    vue.watch(() => props.contrast, value => {
+      effect.contrast = value;
+    });
+    vue.onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const HueSaturation = vue.defineComponent({
+  name: 'HueSaturation',
+  props: {
+    hue: {
+      type: Number,
+      default: 0
+    },
+    saturation: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
+    const composerCtx = vue.inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('HueSaturation must be a child of EffectComposer');
+    }
+    const effect = new postprocessing.HueSaturationEffect({
+      hue: props.hue,
+      saturation: props.saturation
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    vue.watch(() => props.hue, value => {
+      effect.hue = value;
+    });
+    vue.watch(() => props.saturation, value => {
+      effect.saturation = value;
+    });
+    vue.onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const LUT = vue.defineComponent({
+  name: 'LUT',
+  props: {
+    lut: {
+      type: Object,
+      required: true
+    },
+    tetrahedralInterpolation: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const composerCtx = vue.inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('LUT must be a child of EffectComposer');
+    }
+    const effect = new postprocessing.LUT3DEffect(props.lut, {
+      tetrahedralInterpolation: props.tetrahedralInterpolation
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    vue.watch(() => props.lut, value => {
+      effect.lut = value;
+    });
+    vue.watch(() => props.tetrahedralInterpolation, value => {
+      effect.tetrahedralInterpolation = value;
+    });
+    vue.onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const ToneMapping = vue.defineComponent({
+  name: 'ToneMapping',
+  props: {
+    mode: {
+      type: Number,
+      default: postprocessing.ToneMappingMode.AGX
+    },
+    resolution: {
+      type: Number,
+      default: 256
+    },
+    whitePoint: {
+      type: Number,
+      default: 4
+    },
+    middleGrey: {
+      type: Number,
+      default: 0.6
+    }
+  },
+  setup(props) {
+    const composerCtx = vue.inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('ToneMapping must be a child of EffectComposer');
+    }
+    const effect = new postprocessing.ToneMappingEffect({
+      mode: props.mode,
+      resolution: props.resolution,
+      whitePoint: props.whitePoint,
+      middleGrey: props.middleGrey
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    vue.watch(() => props.mode, value => {
+      effect.mode = value;
+    });
+    vue.watch(() => props.resolution, value => {
+      effect.resolution.width = value;
+      effect.resolution.height = value;
+    });
+    vue.watch(() => props.whitePoint, value => {
+      effect.whitePoint = value;
+    });
+    vue.watch(() => props.middleGrey, value => {
+      effect.middleGrey = value;
+    });
+    vue.onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const DepthOfField = vue.defineComponent({
+  name: 'DepthOfField',
+  props: {
+    focusDistance: {
+      type: Number,
+      default: 0
+    },
+    focalLength: {
+      type: Number,
+      default: 0.1
+    },
+    bokehScale: {
+      type: Number,
+      default: 2
+    }
+  },
+  setup(props) {
+    const composerCtx = vue.inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('DepthOfField must be a child of EffectComposer');
+    }
+    const state = vueThreejs.useThree();
+    const {
+      camera
+    } = state.value;
+    const effect = new postprocessing.DepthOfFieldEffect(camera, {
+      focusDistance: props.focusDistance,
+      focalLength: props.focalLength,
+      bokehScale: props.bokehScale
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    vue.watch(() => props.focusDistance, value => {
+      effect.cocMaterial.focusDistance = value;
+    });
+    vue.watch(() => props.focalLength, value => {
+      effect.cocMaterial.focalLength = value;
+    });
+    vue.watch(() => props.bokehScale, value => {
+      effect.bokehScale = value;
+    });
+    vue.onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const Noise = vue.defineComponent({
+  name: 'Noise',
+  props: {
+    premultiply: {
+      type: Boolean,
+      default: false
+    },
+    blendFunction: {
+      type: Number,
+      default: postprocessing.BlendFunction.SCREEN
+    }
+  },
+  setup(props) {
+    const composerCtx = vue.inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('Noise must be a child of EffectComposer');
+    }
+    const effect = new postprocessing.NoiseEffect({
+      premultiply: props.premultiply,
+      blendFunction: props.blendFunction
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    vue.watch(() => props.premultiply, value => {
+      effect.premultiply = value;
+    });
+    vue.watch(() => props.blendFunction, value => {
+      effect.blendMode.blendFunction = value;
+    });
+    vue.onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const Vignette = vue.defineComponent({
+  name: 'Vignette',
+  props: {
+    offset: {
+      type: Number,
+      default: 0.5
+    },
+    darkness: {
+      type: Number,
+      default: 0.5
+    }
+  },
+  setup(props) {
+    const composerCtx = vue.inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('Vignette must be a child of EffectComposer');
+    }
+    const effect = new postprocessing.VignetteEffect({
+      offset: props.offset,
+      darkness: props.darkness
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    vue.watch(() => props.offset, value => {
+      effect.offset = value;
+    });
+    vue.watch(() => props.darkness, value => {
+      effect.darkness = value;
+    });
+    vue.onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const postprocessingFiberPlugin = vueThreejs.defineFiberPlugin({
+  name: '@xperimntl/vue-threejs-postprocessing',
+  setup(ctx, options) {
+    if (options) {
+      ctx.provide(POSTPROCESSING_DEFAULTS, options);
+    }
+  }
+});
+function createPostprocessingPlugin(options) {
+  return vueThreejs.withPluginOptions(postprocessingFiberPlugin, options);
+}
+
+exports.Bloom = Bloom;
+exports.BrightnessContrast = BrightnessContrast;
+exports.COMPOSER_CONTEXT = COMPOSER_CONTEXT;
+exports.DepthOfField = DepthOfField;
+exports.EffectComposer = EffectComposer;
+exports.HueSaturation = HueSaturation;
+exports.LUT = LUT;
+exports.Noise = Noise;
+exports.POSTPROCESSING_DEFAULTS = POSTPROCESSING_DEFAULTS;
+exports.ToneMapping = ToneMapping;
+exports.Vignette = Vignette;
+exports.createPostprocessingPlugin = createPostprocessingPlugin;
+exports.postprocessingFiberPlugin = postprocessingFiberPlugin;

package/dist/xperimntl-vue-threejs-postprocessing.cjs.js

@@ -1,16 +1,7 @@
-"use strict";
-// this file might look strange and you might be wondering what it's for
-// it's lets you import your source files by importing this entrypoint
-// as you would import it if it was built with preconstruct build
-// this file is slightly different to some others though
-// it has a require hook which compiles your code with Babel
-// this means that you don't have to set up @babel/register or anything like that
-// but you can still require this module and it'll be compiled
+'use strict';
 
-// this bit of code imports the require hook and registers it
-let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
-
-// this re-exports the source file
-module.exports = require("../src/index.ts");
-
-unregister();
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./xperimntl-vue-threejs-postprocessing.cjs.prod.js");
+} else {
+  module.exports = require("./xperimntl-vue-threejs-postprocessing.cjs.dev.js");
+}