@xperimntl/vue-threejs-postprocessing 1.1.0 → 1.1.1

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

@@ -0,0 +1,539 @@
+import { defineComponent, shallowRef, watch, provide, onBeforeUnmount, inject } from 'vue';
+import { EffectComposer as EffectComposer$1, RenderPass, EffectPass, BloomEffect, BrightnessContrastEffect, HueSaturationEffect, LUT3DEffect, ToneMappingMode, ToneMappingEffect, DepthOfFieldEffect, BlendFunction, NoiseEffect, VignetteEffect } from 'postprocessing';
+import { useThree, useFrame, defineFiberPlugin, withPluginOptions } from '@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 = 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 = useThree();
+    const composerRef = 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 EffectComposer$1(gl, {
+        multisampling: props.multisampling > 0 ? props.multisampling : 0,
+        depthBuffer: props.depthBuffer,
+        stencilBuffer: props.stencilBuffer
+      });
+
+      // Create render pass
+      currentRenderPass = new 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 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 EffectPass(camera, ...sortedEffects);
+        composer.addPass(currentEffectPass);
+      }
+    }
+    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
+    };
+    provide(COMPOSER_CONTEXT, composerContext);
+
+    // Watch for camera changes — update render pass and effect pass
+    watch(() => state.value.camera, camera => {
+      if (currentRenderPass) {
+        currentRenderPass.mainCamera = camera;
+      }
+      if (currentEffectPass) {
+        currentEffectPass.mainCamera = camera;
+      }
+    });
+
+    // Watch for size changes — update composer size
+    watch(() => state.value.size, size => {
+      const composer = composerRef.value;
+      if (composer) {
+        composer.setSize(size.width, size.height, false);
+      }
+    });
+
+    // Watch for multisampling changes — recreate composer
+    watch(() => props.multisampling, () => {
+      if (createComposer()) rebuildEffectPass();
+    });
+
+    // Use useFrame with priority 1 to take over rendering
+    useFrame((_frameState, delta) => {
+      if (!props.enabled || !composerRef.value) return;
+      composerRef.value.render(delta);
+    }, 1);
+
+    // Cleanup on unmount
+    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 = 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 = inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('Bloom must be a child of EffectComposer');
+    }
+    const effect = new BloomEffect({
+      intensity: props.intensity,
+      luminanceThreshold: props.luminanceThreshold,
+      luminanceSmoothing: props.luminanceSmoothing,
+      mipmapBlur: props.mipmapBlur
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    watch(() => props.intensity, value => {
+      effect.intensity = value;
+    });
+    watch(() => props.luminanceThreshold, value => {
+      effect.luminanceMaterial.threshold = value;
+    });
+    watch(() => props.luminanceSmoothing, value => {
+      effect.luminanceMaterial.smoothing = value;
+    });
+    watch(() => props.mipmapBlur, value => {
+      effect.mipmapBlurPass.enabled = value;
+    });
+    onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const BrightnessContrast = defineComponent({
+  name: 'BrightnessContrast',
+  props: {
+    brightness: {
+      type: Number,
+      default: 0
+    },
+    contrast: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
+    const composerCtx = inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('BrightnessContrast must be a child of EffectComposer');
+    }
+    const effect = new BrightnessContrastEffect({
+      brightness: props.brightness,
+      contrast: props.contrast
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    watch(() => props.brightness, value => {
+      effect.brightness = value;
+    });
+    watch(() => props.contrast, value => {
+      effect.contrast = value;
+    });
+    onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const HueSaturation = defineComponent({
+  name: 'HueSaturation',
+  props: {
+    hue: {
+      type: Number,
+      default: 0
+    },
+    saturation: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
+    const composerCtx = inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('HueSaturation must be a child of EffectComposer');
+    }
+    const effect = new HueSaturationEffect({
+      hue: props.hue,
+      saturation: props.saturation
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    watch(() => props.hue, value => {
+      effect.hue = value;
+    });
+    watch(() => props.saturation, value => {
+      effect.saturation = value;
+    });
+    onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const LUT = defineComponent({
+  name: 'LUT',
+  props: {
+    lut: {
+      type: Object,
+      required: true
+    },
+    tetrahedralInterpolation: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const composerCtx = inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('LUT must be a child of EffectComposer');
+    }
+    const effect = new LUT3DEffect(props.lut, {
+      tetrahedralInterpolation: props.tetrahedralInterpolation
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    watch(() => props.lut, value => {
+      effect.lut = value;
+    });
+    watch(() => props.tetrahedralInterpolation, value => {
+      effect.tetrahedralInterpolation = value;
+    });
+    onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const ToneMapping = defineComponent({
+  name: 'ToneMapping',
+  props: {
+    mode: {
+      type: Number,
+      default: ToneMappingMode.AGX
+    },
+    resolution: {
+      type: Number,
+      default: 256
+    },
+    whitePoint: {
+      type: Number,
+      default: 4
+    },
+    middleGrey: {
+      type: Number,
+      default: 0.6
+    }
+  },
+  setup(props) {
+    const composerCtx = inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('ToneMapping must be a child of EffectComposer');
+    }
+    const effect = new ToneMappingEffect({
+      mode: props.mode,
+      resolution: props.resolution,
+      whitePoint: props.whitePoint,
+      middleGrey: props.middleGrey
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    watch(() => props.mode, value => {
+      effect.mode = value;
+    });
+    watch(() => props.resolution, value => {
+      effect.resolution.width = value;
+      effect.resolution.height = value;
+    });
+    watch(() => props.whitePoint, value => {
+      effect.whitePoint = value;
+    });
+    watch(() => props.middleGrey, value => {
+      effect.middleGrey = value;
+    });
+    onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const DepthOfField = defineComponent({
+  name: 'DepthOfField',
+  props: {
+    focusDistance: {
+      type: Number,
+      default: 0
+    },
+    focalLength: {
+      type: Number,
+      default: 0.1
+    },
+    bokehScale: {
+      type: Number,
+      default: 2
+    }
+  },
+  setup(props) {
+    const composerCtx = inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('DepthOfField must be a child of EffectComposer');
+    }
+    const state = useThree();
+    const {
+      camera
+    } = state.value;
+    const effect = new DepthOfFieldEffect(camera, {
+      focusDistance: props.focusDistance,
+      focalLength: props.focalLength,
+      bokehScale: props.bokehScale
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    watch(() => props.focusDistance, value => {
+      effect.cocMaterial.focusDistance = value;
+    });
+    watch(() => props.focalLength, value => {
+      effect.cocMaterial.focalLength = value;
+    });
+    watch(() => props.bokehScale, value => {
+      effect.bokehScale = value;
+    });
+    onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const Noise = defineComponent({
+  name: 'Noise',
+  props: {
+    premultiply: {
+      type: Boolean,
+      default: false
+    },
+    blendFunction: {
+      type: Number,
+      default: BlendFunction.SCREEN
+    }
+  },
+  setup(props) {
+    const composerCtx = inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('Noise must be a child of EffectComposer');
+    }
+    const effect = new NoiseEffect({
+      premultiply: props.premultiply,
+      blendFunction: props.blendFunction
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    watch(() => props.premultiply, value => {
+      effect.premultiply = value;
+    });
+    watch(() => props.blendFunction, value => {
+      effect.blendMode.blendFunction = value;
+    });
+    onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const Vignette = defineComponent({
+  name: 'Vignette',
+  props: {
+    offset: {
+      type: Number,
+      default: 0.5
+    },
+    darkness: {
+      type: Number,
+      default: 0.5
+    }
+  },
+  setup(props) {
+    const composerCtx = inject(COMPOSER_CONTEXT);
+    if (!composerCtx) {
+      throw new Error('Vignette must be a child of EffectComposer');
+    }
+    const effect = new VignetteEffect({
+      offset: props.offset,
+      darkness: props.darkness
+    });
+    const removeEffect = composerCtx.addEffect(effect, 0);
+    watch(() => props.offset, value => {
+      effect.offset = value;
+    });
+    watch(() => props.darkness, value => {
+      effect.darkness = value;
+    });
+    onBeforeUnmount(() => {
+      removeEffect();
+      effect.dispose();
+    });
+    return () => null;
+  }
+});
+
+const postprocessingFiberPlugin = defineFiberPlugin({
+  name: '@xperimntl/vue-threejs-postprocessing',
+  setup(ctx, options) {
+    if (options) {
+      ctx.provide(POSTPROCESSING_DEFAULTS, options);
+    }
+  }
+});
+function createPostprocessingPlugin(options) {
+  return withPluginOptions(postprocessingFiberPlugin, options);
+}
+
+export { Bloom, BrightnessContrast, COMPOSER_CONTEXT, DepthOfField, EffectComposer, HueSaturation, LUT, Noise, POSTPROCESSING_DEFAULTS, ToneMapping, Vignette, createPostprocessingPlugin, postprocessingFiberPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xperimntl/vue-threejs-postprocessing",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Vue-native postprocessing effects for @xperimntl/vue-threejs",
   "license": "MIT",
   "repository": {