tres-vfx 0.3.0 → 0.5.0

package/README.md

@@ -105,37 +105,47 @@ The main particle system component.
 
 #### Basic Props
 
-| Prop           | Type        | Default     | Description                                 |
-| -------------- | ----------- | ----------- | ------------------------------------------- |
-| `name`         | `string`    | -           | Register system for use with VFXEmitter     |
-| `maxParticles` | `number`    | `10000`     | Maximum number of particles                 |
-| `autoStart`    | `boolean`   | `true`      | Start emitting automatically                |
-| `delay`        | `number`    | `0`         | Seconds between emissions (0 = every frame) |
-| `emitCount`    | `number`    | `1`         | Particles to emit per burst                 |
-| `position`     | `[x, y, z]` | `[0, 0, 0]` | Emitter position                            |
+| Prop           | Type        | Default     | Description                                     |
+| -------------- | ----------- | ----------- | ----------------------------------------------- |
+| `name`         | `string`    | -           | Register system for use with VFXEmitter         |
+| `maxParticles` | `number`    | `10000`     | Maximum number of particles                     |
+| `autoStart`    | `boolean`   | `true`      | Start emitting automatically                    |
+| `delay`        | `number`    | `0`         | Seconds between emissions (0 = every frame)     |
+| `emitCount`    | `number`    | `1`         | Particles to emit per burst                     |
+| `position`     | `[x, y, z]` | `[0, 0, 0]` | Emitter position                                |
+| `debug`        | `boolean`   | `false`     | Show interactive debug panel (lazy-loads debug-vfx) |
 
 #### Appearance Props
 
 | Prop          | Type                     | Default       | Description                                                 |
 | ------------- | ------------------------ | ------------- | ----------------------------------------------------------- |
 | `size`        | `number \| [min, max]`   | `[0.1, 0.3]`  | Particle size range                                         |
-| `colorStart`  | `string[]`               | `["#ffffff"]` | Starting colors (random pick)                               |
+| `colorStart`  | `string[]`               | `["#ffffff"]` | Starting colors (random pick per particle)                  |
 | `colorEnd`    | `string[] \| null`       | `null`        | Ending colors (null = no transition)                        |
 | `fadeSize`    | `number \| [start, end]` | `[1, 0]`      | Size multiplier over lifetime                               |
 | `fadeOpacity` | `number \| [start, end]` | `[1, 0]`      | Opacity over lifetime                                       |
 | `appearance`  | `Appearance`             | `GRADIENT`    | Shape: `DEFAULT`, `GRADIENT`, `CIRCULAR`                    |
 | `intensity`   | `number`                 | `1`           | Color intensity multiplier                                  |
 | `blending`    | `Blending`               | `NORMAL`      | Blend mode: `NORMAL`, `ADDITIVE`, `MULTIPLY`, `SUBTRACTIVE` |
+| `side`        | `Side`                   | `DOUBLE`      | Face culling: `FRONT`, `BACK`, `DOUBLE`                     |
 
 #### Physics Props
 
-| Prop        | Type                    | Default                   | Description                  |
-| ----------- | ----------------------- | ------------------------- | ---------------------------- |
-| `lifetime`  | `number \| [min, max]`  | `[1, 2]`                  | Particle lifetime in seconds |
-| `speed`     | `number \| [min, max]`  | `[0.1, 0.1]`              | Initial speed                |
-| `direction` | `Range3D \| [min, max]` | `[[-1,1], [0,1], [-1,1]]` | Emission direction per axis  |
-| `gravity`   | `[x, y, z]`             | `[0, 0, 0]`               | Gravity vector               |
-| `friction`  | `FrictionConfig`        | `{ intensity: 0 }`        | Velocity damping             |
+| Prop                      | Type                    | Default                   | Description                                    |
+| ------------------------- | ----------------------- | ------------------------- | ---------------------------------------------- |
+| `lifetime`                | `number \| [min, max]`  | `[1, 2]`                  | Particle lifetime in seconds                   |
+| `speed`                   | `number \| [min, max]`  | `[0.1, 0.1]`              | Initial speed                                  |
+| `direction`               | `Range3D \| [min, max]` | `[[-1,1], [0,1], [-1,1]]` | Emission direction per axis                    |
+| `gravity`                 | `[x, y, z]`             | `[0, 0, 0]`               | Gravity vector                                 |
+| `friction`                | `FrictionConfig`        | `{ intensity: 0 }`        | Velocity damping                               |
+| `startPositionAsDirection`| `boolean`               | `false`                   | Use spawn offset as velocity direction (radial emission) |
+
+```ts
+interface FrictionConfig {
+  intensity: number // Drag amount
+  easing?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' // Deceleration curve
+}
+```
 
 #### Emitter Shape Props
 
@@ -153,14 +163,50 @@ The main particle system component.
 
 | Prop                | Type                    | Default    | Description                                                |
 | ------------------- | ----------------------- | ---------- | ---------------------------------------------------------- |
-| `geometry`          | `BufferGeometry`        | `null`     | Custom particle geometry                                   |
-| `lighting`          | `Lighting`              | `STANDARD` | Material: `BASIC`, `STANDARD`, `PHYSICAL`                  |
+| `geometry`          | `BufferGeometry`        | `null`     | Custom particle geometry (switches to instanced mesh mode) |
+| `lighting`          | `Lighting`              | `STANDARD` | Material: `BASIC` (unlit), `STANDARD` (PBR), `PHYSICAL` (full PBR) |
+| `lightingParams`    | `LightingParams`        | `null`     | PBR material parameters (see below)                        |
 | `shadow`            | `boolean`               | `false`    | Enable shadow casting/receiving                            |
-| `orientToDirection` | `boolean`               | `false`    | Orient geometry to velocity                                |
+| `orientToDirection` | `boolean`               | `false`    | Orient geometry to velocity direction                      |
 | `orientAxis`        | `string`                | `"z"`      | Axis to align: `"x"`, `"y"`, `"z"`, `"-x"`, `"-y"`, `"-z"` |
 | `rotation`          | `Range3D \| [min, max]` | `[0, 0]`   | Initial rotation per axis                                  |
 | `rotationSpeed`     | `Range3D \| [min, max]` | `[0, 0]`   | Rotation speed rad/s                                       |
 
+**`lightingParams`** gives full control over PBR material properties when using `lighting: 'standard'` or `'physical'`:
+
+```ts
+interface LightingParams {
+  roughness?: number          // Surface roughness (0 = mirror, 1 = matte)
+  metalness?: number          // Metallic factor (0 = dielectric, 1 = metal)
+  emissive?: string           // Emissive color hex string
+  emissiveIntensity?: number  // Emissive brightness
+  envMapIntensity?: number    // Environment map strength
+  // Physical mode only:
+  clearcoat?: number          // Clearcoat layer intensity
+  clearcoatRoughness?: number // Clearcoat roughness
+  transmission?: number       // Glass-like transparency
+  thickness?: number          // Volume thickness for transmission
+  ior?: number                // Index of refraction
+  iridescence?: number        // Iridescence effect intensity
+  iridescenceIOR?: number     // Iridescence index of refraction
+}
+```
+
+```tsx
+<VFXParticles
+  geometry={gemGeometry}
+  lighting="physical"
+  lightingParams={{
+    roughness: 0.3,
+    metalness: 0.8,
+    clearcoat: 1,
+    clearcoatRoughness: 0.1,
+    iridescence: 1,
+    iridescenceIOR: 1.5,
+  }}
+/>
+```
+
 #### Stretch Props
 
 | Prop             | Type            | Default | Description                   |
@@ -221,6 +267,79 @@ interface CollisionConfig {
 }
 ```
 
+#### Trail Props
+
+| Prop    | Type          | Default | Description                 |
+| ------- | ------------- | ------- | --------------------------- |
+| `trail` | `TrailConfig` | `null`  | Trail rendering via meshline |
+
+Requires `makio-meshline` installed as a peer dependency.
+
+```ts
+interface TrailConfig {
+  segments?: number // Trail resolution (default: 32)
+  width?: number // Line width (default: 0.1)
+  taper?: boolean | ((t: number) => number) // Width taper (default: true)
+  opacity?: number | ((data: TrailOpacityData) => Node) // Opacity control (default: 1)
+  length?: number // History in seconds (default: 0.5)
+  showParticles?: boolean // Show particles alongside trails (default: true)
+  fragmentColorFn?: (data: TrailData) => Node // Per-pixel trail coloring
+}
+```
+
+**`taper`** controls how the trail width varies from head to tail:
+
+```tsx
+// Default linear taper (thick at head, thin at tail)
+trail={{ taper: true }}
+
+// No tapering (uniform width)
+trail={{ taper: false }}
+
+// Custom JS callback: t goes 0 (head) → 1 (tail), return width multiplier
+trail={{ taper: (t) => Math.sin(t * Math.PI) }} // fat middle, thin ends
+trail={{ taper: (t) => Math.abs(Math.sin(t * Math.PI * 4)) }} // wavy
+```
+
+**`opacity`** controls trail transparency. As a number it sets global opacity. As a TSL callback it runs per-vertex in the fragment shader with full access to particle data:
+
+```tsx
+// Global opacity
+trail={{ opacity: 0.5 }}
+
+// TSL callback with particle data
+trail={{
+  opacity: ({ alpha, trailProgress, progress, lifetime, position, velocity, size }) => {
+    // Fade based on trail position and particle lifetime
+    return alpha.mul(trailProgress.oneMinus()).mul(lifetime)
+  }
+}}
+```
+
+#### Sorting Props
+
+| Prop                | Type      | Default | Description                                         |
+| ------------------- | --------- | ------- | --------------------------------------------------- |
+| `sortParticles`     | `boolean` | `false` | Enable back-to-front depth sorting for transparency |
+| `sortFrameInterval` | `number`  | `null`  | Run sort every N frames (WebGPU only, performance tuning) |
+
+When enabled, particles are sorted by distance to camera for correct alpha blending. On WebGPU this uses a GPU bitonic sort; on WebGL fallback it uses a CPU radix sort.
+
+```tsx
+<VFXParticles
+  sortParticles
+  sortFrameInterval={2}  // Sort every other frame for better perf
+  blending="normal"
+/>
+```
+
+#### Rendering Props
+
+| Prop          | Type      | Default | Description                                      |
+| ------------- | --------- | ------- | ------------------------------------------------ |
+| `depthTest`   | `boolean` | `true`  | Test against depth buffer                        |
+| `renderOrder` | `number`  | `0`     | Three.js render order (higher = renders on top)  |
+
 #### Soft Particles Props
 
 | Prop            | Type      | Default | Description                  |
@@ -242,25 +361,28 @@ interface CurveData {
 }
 ```
 
-| Prop                 | Type        | Description                              |
-| -------------------- | ----------- | ---------------------------------------- |
-| `fadeSizeCurve`      | `CurveData` | Size multiplier over lifetime            |
-| `fadeOpacityCurve`   | `CurveData` | Opacity over lifetime                    |
-| `velocityCurve`      | `CurveData` | Velocity multiplier (overrides friction) |
-| `rotationSpeedCurve` | `CurveData` | Rotation speed multiplier                |
+| Prop                 | Type        | Description                                       |
+| -------------------- | ----------- | ------------------------------------------------- |
+| `fadeSizeCurve`      | `CurveData` | Size multiplier over lifetime                     |
+| `fadeOpacityCurve`   | `CurveData` | Opacity over lifetime                             |
+| `velocityCurve`      | `CurveData` | Velocity multiplier (overrides friction)          |
+| `rotationSpeedCurve` | `CurveData` | Rotation speed multiplier                         |
+| `curveTexturePath`   | `string`    | Path to pre-baked curve texture (faster startup)  |
 
 #### Custom Shader Props
 
-| Prop             | Type           | Description                    |
-| ---------------- | -------------- | ------------------------------ |
-| `colorNode`      | `NodeFunction` | Custom color shader            |
-| `opacityNode`    | `NodeFunction` | Custom opacity shader          |
-| `backdropNode`   | `NodeFunction` | Backdrop sampling (refraction) |
-| `castShadowNode` | `NodeFunction` | Shadow map output              |
-| `alphaTestNode`  | `NodeFunction` | Alpha test/discard             |
+| Prop             | Type                   | Description                            |
+| ---------------- | ---------------------- | -------------------------------------- |
+| `geometryNode`   | `GeometryNodeFunction` | Geometry-mode vertex position override |
+| `colorNode`      | `NodeFunction`         | Custom color shader                    |
+| `opacityNode`    | `NodeFunction`         | Custom opacity shader                  |
+| `backdropNode`   | `NodeFunction`         | Backdrop sampling (refraction)         |
+| `castShadowNode` | `NodeFunction`         | Shadow map output                      |
+| `alphaTestNode`  | `NodeFunction`         | Alpha test/discard                     |
 
 ```ts
 type NodeFunction = (data: ParticleData, defaultColor?: Node) => Node
+type GeometryNodeFunction = (data: ParticleData, defaultPosition: Node) => Node
 
 interface ParticleData {
   progress: Node // 0 → 1 over lifetime
@@ -518,6 +640,9 @@ import type {
   TurbulenceConfig,
   CollisionConfig,
   AttractorConfig,
+  TrailConfig,
+  TrailData,
+  TrailOpacityData,
 } from 'r3f-vfx'
 ```
 

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import * as vue from 'vue';
-import { PropType, Ref } from 'vue';
-import * as THREE from 'three/webgpu';
 import * as core_vfx from 'core-vfx';
 import { VFXParticleSystemOptions, FrictionConfig, FlipbookConfig, Rotation3DInput, StretchConfig, TurbulenceConfig, AttractorConfig, CollisionConfig, EmitterControllerOptions, CoreState } from 'core-vfx';
 export { Appearance, AttractorConfig, AttractorType, BaseParticleProps, Blending, CollisionConfig, CurveChannel, CurveData, CurvePoint, CurveTextureResolved, CurveTextureResult, Easing, EmitterController, EmitterControllerOptions, EmitterShape, FlipbookConfig, FrictionConfig, Lighting, NormalizedParticleProps, ParticleData, Rotation3DInput, StretchConfig, TurbulenceConfig, VFXParticleSystem, VFXParticleSystemOptions, bakeCurveToArray, buildCurveTextureBin, createCombinedCurveTexture, isNonDefaultRotation, isWebGPUBackend, normalizeProps, resolveCurveTexture } from 'core-vfx';
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+import * as THREE from 'three/webgpu';
 
 declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
     name: {
@@ -121,6 +121,10 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<string | number>;
         default: "standard";
     };
+    lightingParams: {
+        type: PropType<VFXParticleSystemOptions["lightingParams"]>;
+        default: null;
+    };
     shadow: {
         type: BooleanConstructor;
         default: boolean;
@@ -149,6 +153,10 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<unknown>;
         default: null;
     };
+    geometryNode: {
+        type: PropType<unknown>;
+        default: null;
+    };
     opacityNode: {
         type: PropType<unknown>;
         default: null;
@@ -221,6 +229,14 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<CollisionConfig | null>;
         default: null;
     };
+    sortParticles: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sortFrameInterval: {
+        type: PropType<number | null>;
+        default: null;
+    };
     curveTexturePath: {
         type: PropType<string | null>;
         default: null;
@@ -351,6 +367,10 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<string | number>;
         default: "standard";
     };
+    lightingParams: {
+        type: PropType<VFXParticleSystemOptions["lightingParams"]>;
+        default: null;
+    };
     shadow: {
         type: BooleanConstructor;
         default: boolean;
@@ -379,6 +399,10 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<unknown>;
         default: null;
     };
+    geometryNode: {
+        type: PropType<unknown>;
+        default: null;
+    };
     opacityNode: {
         type: PropType<unknown>;
         default: null;
@@ -451,6 +475,14 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<CollisionConfig | null>;
         default: null;
     };
+    sortParticles: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sortFrameInterval: {
+        type: PropType<number | null>;
+        default: null;
+    };
     curveTexturePath: {
         type: PropType<string | null>;
         default: null;
@@ -466,6 +498,7 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {
     direction: Rotation3DInput;
     startPosition: Rotation3DInput;
+    lightingParams: core_vfx.LightingParams | undefined;
     name: string;
     debug: boolean;
     maxParticles: number;
@@ -499,6 +532,7 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
     autoStart: boolean;
     delay: number;
     backdropNode: null;
+    geometryNode: null;
     opacityNode: null;
     colorNode: null;
     alphaTestNode: null;
@@ -517,6 +551,8 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
     softParticles: boolean;
     softDistance: number;
     collision: CollisionConfig;
+    sortParticles: boolean;
+    sortFrameInterval: number | null;
     curveTexturePath: string | null;
     depthTest: boolean;
     renderOrder: number;

package/dist/index.js

@@ -147,6 +147,10 @@ var VFXParticles = defineComponent({
       type: null,
       default: Lighting.STANDARD
     },
+    lightingParams: {
+      type: Object,
+      default: null
+    },
     shadow: { type: Boolean, default: false },
     blending: {
       type: null,
@@ -160,6 +164,7 @@ var VFXParticles = defineComponent({
     autoStart: { type: Boolean, default: true },
     delay: { type: Number, default: 0 },
     backdropNode: { type: null, default: null },
+    geometryNode: { type: null, default: null },
     opacityNode: { type: null, default: null },
     colorNode: { type: null, default: null },
     alphaTestNode: {
@@ -205,6 +210,11 @@ var VFXParticles = defineComponent({
       type: Object,
       default: null
     },
+    sortParticles: { type: Boolean, default: false },
+    sortFrameInterval: {
+      type: null,
+      default: null
+    },
     curveTexturePath: {
       type: null,
       default: null
@@ -213,8 +223,9 @@ var VFXParticles = defineComponent({
     renderOrder: { type: Number, default: 0 }
   },
   setup(props, { expose }) {
-    var _a, _b, _c, _d;
-    const { renderer: rendererCtx } = useTresContext();
+    var _a, _b, _c, _d, _e;
+    const tresCtx = useTresContext();
+    const rendererCtx = tresCtx.renderer;
     const { onBeforeRender } = useLoop();
     const systemRef = shallowRef(null);
     const renderObjectRef = shallowRef(null);
@@ -237,6 +248,7 @@ var VFXParticles = defineComponent({
       props.attractors !== null && ((_d = (_c = props.attractors) == null ? void 0 : _c.length) != null ? _d : 0) > 0
     );
     const activeCollision = ref(props.collision !== null);
+    const activeLightingParamsKey = ref(JSON.stringify((_e = props.lightingParams) != null ? _e : null));
     const activeNeedsPerParticleColor = ref(
       props.colorStart.length > 1 || props.colorEnd !== null
     );
@@ -246,7 +258,7 @@ var VFXParticles = defineComponent({
     const prevGeometryTypeRef = ref(null);
     const prevGeometryArgsRef = ref(null);
     function buildOptions() {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I;
+      var _a2, _b2, _c2, _d2, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
       const dbg = props.debug ? debugValuesRef.value : null;
       return {
         maxParticles: activeMaxParticles.value,
@@ -258,7 +270,7 @@ var VFXParticles = defineComponent({
         fadeOpacity: (_d2 = dbg == null ? void 0 : dbg.fadeOpacity) != null ? _d2 : props.fadeOpacity,
         fadeOpacityCurve: activeFadeOpacityCurve.value,
         velocityCurve: activeVelocityCurve.value,
-        gravity: (_e = dbg == null ? void 0 : dbg.gravity) != null ? _e : props.gravity,
+        gravity: (_e2 = dbg == null ? void 0 : dbg.gravity) != null ? _e2 : props.gravity,
         lifetime: (_f = dbg == null ? void 0 : dbg.lifetime) != null ? _f : props.lifetime,
         direction: (_g = dbg == null ? void 0 : dbg.direction) != null ? _g : props.direction,
         startPosition: (_h = dbg == null ? void 0 : dbg.startPosition) != null ? _h : props.startPosition,
@@ -275,6 +287,7 @@ var VFXParticles = defineComponent({
         orientAxis: (_m = dbg == null ? void 0 : dbg.orientAxis) != null ? _m : props.orientAxis,
         stretchBySpeed: (_n = dbg == null ? void 0 : dbg.stretchBySpeed) != null ? _n : props.stretchBySpeed,
         lighting: activeLighting.value,
+        lightingParams: props.lightingParams,
         shadow: activeShadow.value,
         blending: (_o = dbg == null ? void 0 : dbg.blending) != null ? _o : props.blending,
         intensity: (_p = dbg == null ? void 0 : dbg.intensity) != null ? _p : props.intensity,
@@ -295,13 +308,16 @@ var VFXParticles = defineComponent({
         softParticles: (_E = dbg == null ? void 0 : dbg.softParticles) != null ? _E : props.softParticles,
         softDistance: (_F = dbg == null ? void 0 : dbg.softDistance) != null ? _F : props.softDistance,
         collision: (_G = dbg == null ? void 0 : dbg.collision) != null ? _G : props.collision,
+        sortParticles: (_H = dbg == null ? void 0 : dbg.sortParticles) != null ? _H : props.sortParticles,
+        sortFrameInterval: (dbg == null ? void 0 : dbg.sortFrameInterval) !== void 0 ? dbg.sortFrameInterval : props.sortFrameInterval,
         backdropNode: props.backdropNode,
+        geometryNode: props.geometryNode,
         opacityNode: props.opacityNode,
         colorNode: props.colorNode,
         alphaTestNode: props.alphaTestNode,
         castShadowNode: props.castShadowNode,
-        depthTest: (_H = dbg == null ? void 0 : dbg.depthTest) != null ? _H : props.depthTest,
-        renderOrder: (_I = dbg == null ? void 0 : dbg.renderOrder) != null ? _I : props.renderOrder,
+        depthTest: (_I = dbg == null ? void 0 : dbg.depthTest) != null ? _I : props.depthTest,
+        renderOrder: (_J = dbg == null ? void 0 : dbg.renderOrder) != null ? _J : props.renderOrder,
         curveTexturePath: props.curveTexturePath
       };
     }
@@ -367,7 +383,7 @@ var VFXParticles = defineComponent({
       }
     }
     function handleDebugUpdate(newValues) {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j;
+      var _a2, _b2, _c2, _d2, _e2, _f, _g, _h, _i, _j, _k;
       debugValuesRef.value = __spreadValues(__spreadValues({}, debugValuesRef.value), newValues);
       const system = systemRef.value;
       if (!system) return;
@@ -398,7 +414,7 @@ var VFXParticles = defineComponent({
       }
       if ("turbulence" in newValues) {
         system.setTurbulenceSpeed(
-          (_f = (_e = newValues.turbulence) == null ? void 0 : _e.speed) != null ? _f : 1
+          (_f = (_e2 = newValues.turbulence) == null ? void 0 : _e2.speed) != null ? _f : 1
         );
       }
       const newFeatures = resolveFeatures(
@@ -426,6 +442,12 @@ var VFXParticles = defineComponent({
         system.setDelay((_g = newValues.delay) != null ? _g : 0);
       if ("emitCount" in newValues)
         system.setEmitCount((_h = newValues.emitCount) != null ? _h : 1);
+      if ("sortParticles" in newValues)
+        system.setSortEnabled(!!newValues.sortParticles);
+      if ("sortFrameInterval" in newValues)
+        system.setSortFrameInterval(
+          (_i = newValues.sortFrameInterval) != null ? _i : null
+        );
       if (newValues.autoStart !== void 0) {
         emitting.value = newValues.autoStart;
       }
@@ -452,8 +474,8 @@ var VFXParticles = defineComponent({
         activeShadow.value = newValues.shadow;
       }
       if ("geometryType" in newValues || "geometryArgs" in newValues) {
-        const geoType = (_i = newValues.geometryType) != null ? _i : prevGeometryTypeRef.value;
-        const geoArgs = (_j = newValues.geometryArgs) != null ? _j : prevGeometryArgsRef.value;
+        const geoType = (_j = newValues.geometryType) != null ? _j : prevGeometryTypeRef.value;
+        const geoArgs = (_k = newValues.geometryArgs) != null ? _k : prevGeometryArgsRef.value;
         const geoTypeChanged = "geometryType" in newValues && geoType !== prevGeometryTypeRef.value;
         const geoArgsChanged = "geometryArgs" in newValues && JSON.stringify(geoArgs) !== JSON.stringify(prevGeometryArgsRef.value);
         if (geoTypeChanged || geoArgsChanged) {
@@ -529,7 +551,9 @@ var VFXParticles = defineComponent({
             attractToCenter: props.attractToCenter,
             softParticles: props.softParticles,
             softDistance: props.softDistance,
-            collision: props.collision
+            collision: props.collision,
+            sortParticles: props.sortParticles,
+            sortFrameInterval: props.sortFrameInterval
           }, detectGeometryTypeAndArgs(props.geometry));
           debugValuesRef.value = initialValues;
           prevGeometryTypeRef.value = initialValues.geometryType;
@@ -556,10 +580,11 @@ var VFXParticles = defineComponent({
         props.rotationSpeed,
         props.turbulence,
         props.attractors,
-        props.collision
+        props.collision,
+        props.lightingParams
       ],
       () => {
-        var _a2, _b2, _c2, _d2;
+        var _a2, _b2, _c2, _d2, _e2;
         if (props.debug) return;
         activeMaxParticles.value = props.maxParticles;
         activeLighting.value = props.lighting;
@@ -576,6 +601,7 @@ var VFXParticles = defineComponent({
         activeTurbulence.value = props.turbulence !== null && ((_b2 = (_a2 = props.turbulence) == null ? void 0 : _a2.intensity) != null ? _b2 : 0) > 0;
         activeAttractors.value = props.attractors !== null && ((_d2 = (_c2 = props.attractors) == null ? void 0 : _c2.length) != null ? _d2 : 0) > 0;
         activeCollision.value = props.collision !== null;
+        activeLightingParamsKey.value = JSON.stringify((_e2 = props.lightingParams) != null ? _e2 : null);
       }
     );
     watch(
@@ -594,7 +620,8 @@ var VFXParticles = defineComponent({
         activeFadeSizeCurve,
         activeFadeOpacityCurve,
         activeVelocityCurve,
-        activeRotationSpeedCurve
+        activeRotationSpeedCurve,
+        activeLightingParamsKey
       ],
       () => {
         initSystem();
@@ -633,7 +660,9 @@ var VFXParticles = defineComponent({
         props.orientAxis,
         props.stretchBySpeed,
         props.delay,
-        props.emitCount
+        props.emitCount,
+        props.sortParticles,
+        props.sortFrameInterval
       ],
       () => {
         var _a2, _b2;
@@ -644,6 +673,8 @@ var VFXParticles = defineComponent({
         system.setDelay(props.delay);
         system.setEmitCount(props.emitCount);
         system.setTurbulenceSpeed((_b2 = (_a2 = props.turbulence) == null ? void 0 : _a2.speed) != null ? _b2 : 1);
+        system.setSortFrameInterval(props.sortFrameInterval);
+        system.setSortEnabled(props.sortParticles);
         const normalized = normalizeProps({
           size: props.size,
           speed: props.speed,
@@ -679,10 +710,17 @@ var VFXParticles = defineComponent({
       },
       { deep: true }
     );
-    onBeforeRender(({ delta }) => {
+    onBeforeRender((frame) => {
+      var _a2, _b2, _c2, _d2, _e2;
       const system = systemRef.value;
       if (!system || !system.initialized) return;
-      system.update(delta);
+      const delta = (_a2 = frame == null ? void 0 : frame.delta) != null ? _a2 : 0;
+      const cam = (_e2 = (_d2 = (_c2 = frame == null ? void 0 : frame.camera) != null ? _c2 : (_b2 = tresCtx.camera) == null ? void 0 : _b2.value) != null ? _d2 : tresCtx.camera) != null ? _e2 : null;
+      const pos = cam == null ? void 0 : cam.position;
+      if (pos) {
+        system.setCameraPosition([pos.x, pos.y, pos.z]);
+      }
+      void system.update(delta);
       if (emitting.value) {
         system.autoEmit(delta);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tres-vfx",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -24,8 +24,8 @@
     "prepublishOnly": "bun run typecheck && bun run build && bun run copy-readme"
   },
   "dependencies": {
-    "core-vfx": "0.2.0",
-    "debug-vfx": "0.1.2"
+    "core-vfx": "0.4.0",
+    "debug-vfx": "0.4.0"
   },
   "peerDependencies": {
     "@tresjs/core": ">=5.0.0",