this._handleDrop(ev)}
+ onDragOver={(ev) => this._handleDragOver(ev)}
+ onDragLeave={(ev) => this._handleDragLeave(ev)}
+ className={`flex flex-col w-full p-5 rounded-lg ${this.state.dragOver ? "bg-muted-foreground/75 dark:bg-muted-foreground/20" : "bg-muted-foreground/10 dark:bg-muted-foreground/5"} transition-all duration-300 ease-in-out`}
+ >
+
+ );
+ }
+
+ private _getPreviewComponent(mesh: Mesh | null | undefined): ReactNode {
+ return (
+
+ {this._getPreviewComponent(mesh)}
+
+
+
+ {mesh && this.props.children}
+
+
+
+
+
+ {mesh && (
+ {this.props.title}
+ {mesh && {mesh.name}
}
+
+
+ )}
+
+
+ Vertices
+
+
+ {mesh.getTotalVertices()}
+
+
+ Faces
+
+
+ {mesh.getTotalIndices() ? mesh.getTotalIndices() / 3 : 0}
+ {
+ const oldMesh = this.props.object[this.props.property];
+
+ this.props.object[this.props.property] = null;
+ this.props.onChange?.(null);
+
+ if (!this.props.noUndoRedo) {
+ registerUndoRedo({
+ executeRedo: true,
+ undo: () => {
+ this.props.object[this.props.property] = oldMesh;
+ },
+ redo: () => {
+ this.props.object[this.props.property] = null;
+ },
+ });
+ }
+
+ this.forceUpdate();
+ }}
+ className="flex justify-center items-center w-24 h-full hover:bg-muted-foreground rounded-lg transition-all duration-300"
+ >
+ {mesh &&
+
+ {mesh ? (
+
+ );
+ }
+
+ private _handleDragOver(ev: DragEvent
+
+ ) : (
+ {mesh.name}
+
+
+ );
+}
diff --git a/editor/src/editor/layout/inspector/fields/vector.tsx b/editor/src/editor/layout/inspector/fields/vector.tsx
index e2447bbb1..24977e195 100644
--- a/editor/src/editor/layout/inspector/fields/vector.tsx
+++ b/editor/src/editor/layout/inspector/fields/vector.tsx
@@ -22,10 +22,15 @@ export interface IEditorInspectorVectorFieldProps extends IEditorInspectorFieldP
}
export function EditorInspectorVectorField(props: IEditorInspectorVectorFieldProps) {
- const value = props.object[props.property] as IVector4Like;
+ const value = props.object?.[props.property] as IVector4Like | undefined;
const [pointerOver, setPointerOver] = useState(false);
+ // Return null if value is undefined or null
+ if (!value || typeof value !== "object") {
+ return null;
+ }
+
return (
+ {props.label}
+
+ {props.tooltip && (
+
+
+
+
+ {props.tooltip}
+
+
+ )}
+
+
+
+
+
+
+
+ setPointerOver(true)} onMouseLeave={() => setPointerOver(false)}>
+
+
+
+
+ {Object.values(BehaviorRegistry).map((definition) => (
+ handleAddBehavior(definition.type)}>
+ {definition.label}
+
+ ))}
+
+
+
+ );
+}
diff --git a/editor/src/editor/windows/effect-editor/properties/emission.tsx b/editor/src/editor/windows/effect-editor/properties/emission.tsx
new file mode 100644
index 000000000..97c861ee1
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/properties/emission.tsx
@@ -0,0 +1,504 @@
+import { ReactNode } from "react";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+
+import { EditorInspectorNumberField } from "../../../layout/inspector/fields/number";
+import { EditorInspectorVectorField } from "../../../layout/inspector/fields/vector";
+import { EditorInspectorSwitchField } from "../../../layout/inspector/fields/switch";
+import { EditorInspectorListField } from "../../../layout/inspector/fields/list";
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+import { EditorInspectorSectionField } from "../../../layout/inspector/fields/section";
+
+import {
+ type IEffectNode,
+ type IEmissionBurst,
+ EffectSolidParticleSystem,
+ EffectParticleSystem,
+ SolidSphereParticleEmitter,
+ SolidConeParticleEmitter,
+ SolidBoxParticleEmitter,
+ SolidHemisphericParticleEmitter,
+ SolidCylinderParticleEmitter,
+ Value,
+} from "babylonjs-editor-tools";
+import { EffectValueEditor } from "../editors/value";
+
+export interface IEffectEditorEmissionPropertiesProps {
+ nodeData: IEffectNode;
+ onChange: () => void;
+}
+
+/**
+ * Renders emitter shape properties for SolidParticleSystem
+ */
+function renderSolidParticleSystemEmitter(system: EffectSolidParticleSystem, onChange: () => void): ReactNode {
+ const emitter = system.particleEmitterType;
+ const emitterType = emitter ? emitter.constructor.name : "Point";
+
+ const emitterTypeMap: Record = {
+ SolidPointParticleEmitter: "point",
+ SolidSphereParticleEmitter: "sphere",
+ SolidConeParticleEmitter: "cone",
+ SolidBoxParticleEmitter: "box",
+ SolidHemisphericParticleEmitter: "hemisphere",
+ SolidCylinderParticleEmitter: "cylinder",
+ };
+
+ const currentType = emitterTypeMap[emitterType] || "point";
+ const emitterTypes = [
+ { text: "Point", value: "point" },
+ { text: "Box", value: "box" },
+ { text: "Sphere", value: "sphere" },
+ { text: "Cone", value: "cone" },
+ { text: "Hemisphere", value: "hemisphere" },
+ { text: "Cylinder", value: "cylinder" },
+ ];
+
+ // Helper to get current values from various emitter types
+ const getRadius = (): number => {
+ if (emitter instanceof SolidSphereParticleEmitter || emitter instanceof SolidConeParticleEmitter) {
+ return emitter.radius;
+ }
+ if (emitter instanceof SolidHemisphericParticleEmitter || emitter instanceof SolidCylinderParticleEmitter) {
+ return emitter.radius;
+ }
+ return 1;
+ };
+
+ const getRadiusRange = (): number => {
+ if (emitter instanceof SolidHemisphericParticleEmitter || emitter instanceof SolidCylinderParticleEmitter) {
+ return emitter.radiusRange;
+ }
+ return 1;
+ };
+
+ const getDirectionRandomizer = (): number => {
+ if (emitter instanceof SolidHemisphericParticleEmitter || emitter instanceof SolidCylinderParticleEmitter) {
+ return emitter.directionRandomizer;
+ }
+ return 0;
+ };
+
+ return (
+ <>
+ ({ text: t.text, value: t.value }))}
+ onChange={(value) => {
+ const currentRadius = getRadius();
+ const currentArc = emitter instanceof SolidSphereParticleEmitter || emitter instanceof SolidConeParticleEmitter ? emitter.arc : Math.PI * 2;
+ const currentThickness = emitter instanceof SolidSphereParticleEmitter || emitter instanceof SolidConeParticleEmitter ? emitter.thickness : 1;
+ const currentAngle = emitter instanceof SolidConeParticleEmitter ? emitter.angle : Math.PI / 6;
+ const currentHeight = emitter instanceof SolidCylinderParticleEmitter ? emitter.height : 1;
+ const currentRadiusRange = getRadiusRange();
+ const currentDirRandomizer = getDirectionRandomizer();
+
+ switch (value) {
+ case "point":
+ system.createPointEmitter();
+ break;
+ case "box":
+ system.createBoxEmitter();
+ break;
+ case "sphere":
+ system.createSphereEmitter(currentRadius, currentArc, currentThickness);
+ break;
+ case "cone":
+ system.createConeEmitter(currentRadius, currentArc, currentThickness, currentAngle);
+ break;
+ case "hemisphere":
+ system.createHemisphericEmitter(currentRadius, currentRadiusRange, currentDirRandomizer);
+ break;
+ case "cylinder":
+ system.createCylinderEmitter(currentRadius, currentHeight, currentRadiusRange, currentDirRandomizer);
+ break;
+ }
+ onChange();
+ }}
+ />
+
+ {emitter instanceof SolidSphereParticleEmitter && (
+ <>
+
+
+
+
+
+ )}
+
+ {emitter instanceof SolidHemisphericParticleEmitter && (
+ <>
+ = {
+ PointParticleEmitter: "point",
+ BoxParticleEmitter: "box",
+ SphereParticleEmitter: "sphere",
+ SphereDirectedParticleEmitter: "sphere",
+ ConeParticleEmitter: "cone",
+ ConeDirectedParticleEmitter: "cone",
+ HemisphericParticleEmitter: "hemisphere",
+ CylinderParticleEmitter: "cylinder",
+ CylinderDirectedParticleEmitter: "cylinder",
+ };
+
+ const currentType = emitterTypeMap[emitterType] || "point";
+ const emitterTypes = [
+ { text: "Point", value: "point" },
+ { text: "Box", value: "box" },
+ { text: "Sphere", value: "sphere" },
+ { text: "Cone", value: "cone" },
+ { text: "Hemisphere", value: "hemisphere" },
+ { text: "Cylinder", value: "cylinder" },
+ ];
+
+ return (
+ <>
+ ({ text: t.text, value: t.value }))}
+ onChange={(value) => {
+ const currentRadius = "radius" in emitter ? (emitter as any).radius : 1;
+ const currentAngle = "angle" in emitter ? (emitter as any).angle : Math.PI / 6;
+ const currentHeight = "height" in emitter ? (emitter as any).height : 1;
+ const currentDirection1 = "direction1" in emitter ? (emitter as any).direction1?.clone() : Vector3.Zero();
+ const currentDirection2 = "direction2" in emitter ? (emitter as any).direction2?.clone() : Vector3.Zero();
+ const currentMinEmitBox = "minEmitBox" in emitter ? (emitter as any).minEmitBox?.clone() : new Vector3(-0.5, -0.5, -0.5);
+ const currentMaxEmitBox = "maxEmitBox" in emitter ? (emitter as any).maxEmitBox?.clone() : new Vector3(0.5, 0.5, 0.5);
+
+ switch (value) {
+ case "point":
+ system.createPointEmitter(currentDirection1, currentDirection2);
+ break;
+ case "box":
+ system.createBoxEmitter(currentDirection1, currentDirection2, currentMinEmitBox, currentMaxEmitBox);
+ break;
+ case "sphere":
+ system.createSphereEmitter(currentRadius);
+ break;
+ case "cone":
+ system.createConeEmitter(currentRadius, currentAngle);
+ break;
+ case "hemisphere":
+ system.createHemisphericEmitter(currentRadius);
+ break;
+ case "cylinder":
+ system.createCylinderEmitter(currentRadius, currentHeight);
+ break;
+ }
+ onChange();
+ }}
+ />
+
+ {emitterType === "BoxParticleEmitter" && (
+ <>
+
+
+
+
+
+ )}
+
+ {(emitterType === "ConeParticleEmitter" || emitterType === "ConeDirectedParticleEmitter") && (
+ <>
+
+
+ )}
+
+ )}
+
+ {(emitterType === "CylinderParticleEmitter" || emitterType === "CylinderDirectedParticleEmitter") && (
+ <>
+
+
+ )}
+
+ )}
+
+ {(emitterType === "SphereParticleEmitter" || emitterType === "SphereDirectedParticleEmitter") && (
+ <>
+
+
+ )}
+
+ )}
+
+ {emitterType === "PointParticleEmitter" && (
+
+
+ )}
+
+ {emitterType === "HemisphericParticleEmitter" && (
+ <>
+
+
+ );
+}
+
+/**
+ * Renders emission parameters (looping, duration, emit over time/distance, bursts)
+ */
+function renderEmissionParameters(nodeData: IEffectNode, onChange: () => void): ReactNode {
+ if (nodeData.type !== "particle" || !nodeData.data) {
+ return null;
+ }
+
+ const system = nodeData.data;
+
+ // Proxy for looping (targetStopDuration === 0 means looping)
+ const loopingProxy = {
+ get isLooping() {
+ return (system as any).targetStopDuration === 0;
+ },
+ set isLooping(value: boolean) {
+ if (value) {
+ (system as any).targetStopDuration = 0;
+ } else if ((system as any).targetStopDuration === 0) {
+ (system as any).targetStopDuration = 5; // Default duration
+ }
+ },
+ };
+
+ // Proxy for prewarm (preWarmCycles > 0 means prewarm enabled)
+ const prewarmProxy = {
+ get prewarm() {
+ return (system as any).preWarmCycles > 0;
+ },
+ set prewarm(value: boolean) {
+ if (value && (system as any).preWarmCycles === 0) {
+ (system as any).preWarmCycles = Math.ceil((system as any).targetStopDuration || 5) * 60;
+ (system as any).preWarmStepOffset = 1 / 60;
+ } else if (!value) {
+ (system as any).preWarmCycles = 0;
+ }
+ },
+ };
+
+ return (
+ <>
+
+ {
+ (system as EffectSolidParticleSystem).emissionOverDistance = val as Value;
+ onChange();
+ }}
+ />
+
+ )}
+
+ {renderBursts(system as any, onChange)}
+
+ );
+}
+
+/**
+ * Combined emission properties component
+ * Includes both emitter shape and emission parameters
+ */
+export function EffectEditorEmissionProperties(props: IEffectEditorEmissionPropertiesProps): ReactNode {
+ const { nodeData, onChange } = props;
+
+ if (nodeData.type !== "particle" || !nodeData.data) {
+ return null;
+ }
+
+ return (
+ <>
+ {renderEmitterShape(nodeData, onChange)}
+
+ {renderEmissionParameters(nodeData, onChange)}
+
+ );
+}
diff --git a/editor/src/editor/windows/effect-editor/properties/initialization.tsx b/editor/src/editor/windows/effect-editor/properties/initialization.tsx
new file mode 100644
index 000000000..2948f8d6b
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/properties/initialization.tsx
@@ -0,0 +1,221 @@
+import { ReactNode } from "react";
+
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+
+import { type IEffectNode, parseConstantValue, parseIntervalValue, parseConstantColor, Value, Color, Rotation } from "babylonjs-editor-tools";
+import { EffectValueEditor, type IVec3Function } from "../editors/value";
+import { EffectColorEditor } from "../editors/color";
+
+export interface IEffectEditorParticleInitializationPropertiesProps {
+ nodeData: IEffectNode;
+ onChange?: () => void;
+}
+
+export function EffectEditorParticleInitializationProperties(props: IEffectEditorParticleInitializationPropertiesProps): ReactNode {
+ const { nodeData } = props;
+ const onChange = props.onChange || (() => {});
+
+ if (nodeData.type !== "particle" || !nodeData.data) {
+ return null;
+ }
+
+ const system = nodeData.data;
+
+ // Helper to get/set startLife - both systems use native minLifeTime/maxLifeTime
+ const getStartLife = (): Value | undefined => {
+ // Both systems have native minLifeTime/maxLifeTime properties
+ return { type: "IntervalValue", min: (system as any).minLifeTime, max: (system as any).maxLifeTime };
+ };
+
+ const setStartLife = (value: Value): void => {
+ const interval = parseIntervalValue(value);
+ (system as any).minLifeTime = interval.min;
+ (system as any).maxLifeTime = interval.max;
+ onChange();
+ };
+
+ // Helper to get/set startSize - both systems use native minSize/maxSize
+ const getStartSize = (): Value | IVec3Function | undefined => {
+ // Both systems have native minSize/maxSize properties
+ return { type: "IntervalValue", min: (system as any).minSize, max: (system as any).maxSize };
+ };
+
+ const setStartSize = (value: Value | IVec3Function): void => {
+ if (typeof value === "object" && "type" in value && value.type === "Vec3Function") {
+ // For Vec3Function, use average of x, y, z
+ const x = parseConstantValue(value.x);
+ const y = parseConstantValue(value.y);
+ const z = parseConstantValue(value.z);
+ const avg = (x + y + z) / 3;
+ (system as any).minSize = avg;
+ (system as any).maxSize = avg;
+ } else {
+ const interval = parseIntervalValue(value as Value);
+ (system as any).minSize = interval.min;
+ (system as any).maxSize = interval.max;
+ }
+ onChange();
+ };
+
+ // Helper to get/set startSpeed - both systems use native minEmitPower/maxEmitPower
+ const getStartSpeed = (): Value | undefined => {
+ // Both systems have native minEmitPower/maxEmitPower properties
+ return { type: "IntervalValue", min: (system as any).minEmitPower, max: (system as any).maxEmitPower };
+ };
+
+ const setStartSpeed = (value: Value): void => {
+ const interval = parseIntervalValue(value);
+ (system as any).minEmitPower = interval.min;
+ (system as any).maxEmitPower = interval.max;
+ onChange();
+ };
+
+ // Helper to get/set startColor - both systems use native color1
+ const getStartColor = (): Color | undefined => {
+ // Both systems have native color1 property
+ if ((system as any).color1) {
+ return { type: "ConstantColor", value: [(system as any).color1.r, (system as any).color1.g, (system as any).color1.b, (system as any).color1.a] };
+ }
+ return undefined;
+ };
+
+ const setStartColor = (value: Color): void => {
+ const color = parseConstantColor(value);
+ (system as any).color1 = color;
+ onChange();
+ };
+
+ // Helper to get/set startRotation - both systems use native minInitialRotation/maxInitialRotation
+ const getStartRotation = (): Rotation | undefined => {
+ // Both systems have native minInitialRotation/maxInitialRotation properties
+ return {
+ type: "Euler",
+ angleZ: { type: "IntervalValue", min: (system as any).minInitialRotation, max: (system as any).maxInitialRotation },
+ order: "xyz",
+ };
+ };
+
+ const setStartRotation = (value: Rotation): void => {
+ // Extract angleZ from rotation
+ if (typeof value === "object" && "type" in value && value.type === "Euler" && value.angleZ) {
+ const interval = parseIntervalValue(value.angleZ);
+ (system as any).minInitialRotation = interval.min;
+ (system as any).maxInitialRotation = interval.max;
+ } else if (
+ typeof value === "number" ||
+ (typeof value === "object" && "type" in value && (value.type === "ConstantValue" || value.type === "IntervalValue" || value.type === "PiecewiseBezier"))
+ ) {
+ const interval = parseIntervalValue(value as Value);
+ (system as any).minInitialRotation = interval.min;
+ (system as any).maxInitialRotation = interval.max;
+ }
+ onChange();
+ };
+
+ // Helper to get/set angular speed - both systems use native minAngularSpeed/maxAngularSpeed
+ const getAngularSpeed = (): Value | undefined => {
+ return { type: "IntervalValue", min: (system as any).minAngularSpeed, max: (system as any).maxAngularSpeed };
+ };
+
+ const setAngularSpeed = (value: Value): void => {
+ const interval = parseIntervalValue(value);
+ (system as any).minAngularSpeed = interval.min;
+ (system as any).maxAngularSpeed = interval.max;
+ onChange();
+ };
+
+ // Helper to get/set scale X - both systems use native minScaleX/maxScaleX
+ const getScaleX = (): Value | undefined => {
+ return { type: "IntervalValue", min: (system as any).minScaleX, max: (system as any).maxScaleX };
+ };
+
+ const setScaleX = (value: Value): void => {
+ const interval = parseIntervalValue(value);
+ (system as any).minScaleX = interval.min;
+ (system as any).maxScaleX = interval.max;
+ onChange();
+ };
+
+ // Helper to get/set scale Y - both systems use native minScaleY/maxScaleY
+ const getScaleY = (): Value | undefined => {
+ return { type: "IntervalValue", min: (system as any).minScaleY, max: (system as any).maxScaleY };
+ };
+
+ const setScaleY = (value: Value): void => {
+ const interval = parseIntervalValue(value);
+ (system as any).minScaleY = interval.min;
+ (system as any).maxScaleY = interval.max;
+ onChange();
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setStartRotation({
+ type: "Euler",
+ angleZ: newAngleZ as Value,
+ order: "xyz",
+ });
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ step={0.1}
+ />
+ );
+ })()}
+
+
+
+
+
+ );
+}
diff --git a/editor/src/editor/windows/effect-editor/properties/object.tsx b/editor/src/editor/windows/effect-editor/properties/object.tsx
new file mode 100644
index 000000000..eb16d0363
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/properties/object.tsx
@@ -0,0 +1,81 @@
+import { ReactNode } from "react";
+
+import { EditorInspectorStringField } from "../../../layout/inspector/fields/string";
+import { EditorInspectorVectorField } from "../../../layout/inspector/fields/vector";
+import { EditorInspectorSwitchField } from "../../../layout/inspector/fields/switch";
+
+import { type IEffectNode, isSystem } from "babylonjs-editor-tools";
+import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+
+export interface IEffectEditorObjectPropertiesProps {
+ nodeData: IEffectNode;
+ onChange?: () => void;
+}
+
+export function EffectEditorObjectProperties(props: IEffectEditorObjectPropertiesProps): ReactNode {
+ const { nodeData, onChange } = props;
+
+ if (!nodeData.data) {
+ return (
+ <>
+ Rotation
}
+ object={o}
+ property="proxy"
+ asDegrees
+ step={0.1}
+ onFinishChange={() => onFinishChange?.()}
+ />
+ );
+ }
+
+ return (
+ {
+ public render(): ReactNode {
+ return (
+ = {
+ 0: { isBillboardBased: true, billboardMode: ParticleSystem.BILLBOARDMODE_ALL },
+ 1: { isBillboardBased: true, billboardMode: ParticleSystem.BILLBOARDMODE_STRETCHED },
+ 2: { isBillboardBased: false, billboardMode: ParticleSystem.BILLBOARDMODE_ALL },
+ 3: { isBillboardBased: true, billboardMode: ParticleSystem.BILLBOARDMODE_ALL },
+ 4: { isBillboardBased: true, billboardMode: ParticleSystem.BILLBOARDMODE_Y },
+ 5: { isBillboardBased: true, billboardMode: ParticleSystem.BILLBOARDMODE_Y },
+ };
+
+ if (renderMode !== undefined && renderMode in renderModeMap) {
+ return renderModeMap[renderMode];
+ }
+ return { isBillboardBased: true, billboardMode: ParticleSystem.BILLBOARDMODE_ALL };
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/quarks/resourceConverter.ts b/editor/src/editor/windows/effect-editor/converters/quarks/resourceConverter.ts
new file mode 100644
index 000000000..f9710c606
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarks/resourceConverter.ts
@@ -0,0 +1,275 @@
+import { Color3 } from "@babylonjs/core/Maths/math.color";
+import { Texture as BabylonTexture } from "@babylonjs/core/Materials/Textures";
+import type { IQuarksMaterial, IQuarksTexture, IQuarksImage, IQuarksGeometry, IQuarksShape, IQuarksGradientKey, IQuarksValue } from "./types";
+import type { IMaterial, ITexture, IImage, IGeometry, IGeometryData, IGradientKey, IShape, Value } from "babylonjs-editor-tools";
+import {
+ THREE_REPEAT_WRAPPING,
+ THREE_CLAMP_TO_EDGE_WRAPPING,
+ THREE_MIRRORED_REPEAT_WRAPPING,
+ THREE_LINEAR_FILTER,
+ THREE_NEAREST_MIPMAP_NEAREST_FILTER,
+ THREE_LINEAR_MIPMAP_NEAREST_FILTER,
+ THREE_NEAREST_MIPMAP_LINEAR_FILTER,
+ DEFAULT_COLOR_HEX,
+} from "./constants";
+import { convertValue } from "./valueConverter";
+import { convertGradientKey } from "./colorConverter";
+
+/**
+ * Helper: Convert array of gradient keys
+ */
+export function convertGradientKeys(keys: IQuarksGradientKey[] | undefined): IGradientKey[] {
+ return keys ? keys.map((k) => convertGradientKey(k)) : [];
+}
+
+/**
+ * Helper: Convert speed/frame value (can be Value or object with keys)
+ */
+export function convertSpeedOrFrameValue(
+ value: IQuarksValue | { keys?: IQuarksGradientKey[]; functions?: unknown[] } | undefined
+): Value | { keys?: IGradientKey[]; functions?: unknown[] } | undefined {
+ if (value === undefined) {
+ return undefined;
+ }
+ if (typeof value === "object" && value !== null && "keys" in value) {
+ const result: { keys?: IGradientKey[]; functions?: unknown[] } = {};
+ if (value.keys) {
+ result.keys = convertGradientKeys(value.keys);
+ }
+ if ("functions" in value && value.functions) {
+ result.functions = value.functions;
+ }
+ return result;
+ }
+ if (typeof value === "number" || (typeof value === "object" && value !== null && "type" in value)) {
+ return convertValue(value as IQuarksValue);
+ }
+ return undefined;
+}
+
+/**
+ * Helper: Flip Z coordinate in array (for left-handed conversion)
+ */
+function flipZCoordinate(array: number[], itemSize: number = 3): number[] {
+ const result = Array.from(array);
+ for (let i = itemSize - 1; i < result.length; i += itemSize) {
+ result[i] = -result[i];
+ }
+ return result;
+}
+
+/**
+ * Helper: Convert attribute array
+ */
+function convertAttribute(attr: { array: number[]; itemSize: number } | undefined, flipZ: boolean = false): { array: number[]; itemSize: number } | undefined {
+ if (!attr) {
+ return undefined;
+ }
+ return {
+ array: flipZ ? flipZCoordinate(attr.array, attr.itemSize) : Array.from(attr.array),
+ itemSize: attr.itemSize,
+ };
+}
+
+/**
+ * Convert IQuarks shape to shape
+ */
+export function convertShape(shape: IQuarksShape): IShape {
+ const result: IShape = {
+ type: shape.type,
+ radius: shape.radius,
+ arc: shape.arc,
+ thickness: shape.thickness,
+ angle: shape.angle,
+ mode: shape.mode,
+ spread: shape.spread,
+ size: shape.size,
+ height: shape.height,
+ };
+ if (shape.speed !== undefined) {
+ result.speed = convertValue(shape.speed);
+ }
+ return result;
+}
+
+/**
+ * Convert IQuarks materials to materials
+ */
+export function convertMaterial(material: IQuarksMaterial): IMaterial {
+ const babylonMaterial: IMaterial = {
+ uuid: material.uuid,
+ type: material.type,
+ transparent: material.transparent,
+ depthWrite: material.depthWrite,
+ side: material.side,
+ map: material.map,
+ };
+
+ // Convert color from hex to Color3
+ if (material.color !== undefined) {
+ const colorHex = typeof material.color === "number" ? material.color : parseInt(String(material.color).replace("#", ""), 16) || DEFAULT_COLOR_HEX;
+ const r = ((colorHex >> 16) & 0xff) / 255;
+ const g = ((colorHex >> 8) & 0xff) / 255;
+ const b = (colorHex & 0xff) / 255;
+ babylonMaterial.color = new Color3(r, g, b);
+ }
+
+ // Convert blending mode (Three.js → Babylon.js)
+ if (material.blending !== undefined) {
+ const blendModeMap: Record = {
+ 0: 0, // NoBlending → ALPHA_DISABLE
+ 1: 1, // NormalBlending → ALPHA_COMBINE
+ 2: 2, // AdditiveBlending → ALPHA_ADD
+ };
+ babylonMaterial.blending = blendModeMap[material.blending] ?? material.blending;
+ }
+
+ return babylonMaterial;
+}
+
+/**
+ * Convert IQuarks textures to textures
+ */
+export function convertTexture(texture: IQuarksTexture): ITexture {
+ const babylonTexture: ITexture = {
+ uuid: texture.uuid,
+ image: texture.image,
+ generateMipmaps: texture.generateMipmaps,
+ flipY: texture.flipY,
+ };
+
+ // Convert wrap mode (Three.js → Babylon.js)
+ if (texture.wrap && Array.isArray(texture.wrap)) {
+ const wrapModeMap: Record = {
+ [THREE_REPEAT_WRAPPING]: BabylonTexture.WRAP_ADDRESSMODE,
+ [THREE_CLAMP_TO_EDGE_WRAPPING]: BabylonTexture.CLAMP_ADDRESSMODE,
+ [THREE_MIRRORED_REPEAT_WRAPPING]: BabylonTexture.MIRROR_ADDRESSMODE,
+ };
+ babylonTexture.wrapU = wrapModeMap[texture.wrap[0]] ?? BabylonTexture.WRAP_ADDRESSMODE;
+ babylonTexture.wrapV = wrapModeMap[texture.wrap[1]] ?? BabylonTexture.WRAP_ADDRESSMODE;
+ }
+
+ // Convert repeat to scale
+ if (texture.repeat && Array.isArray(texture.repeat)) {
+ babylonTexture.uScale = texture.repeat[0] || 1;
+ babylonTexture.vScale = texture.repeat[1] || 1;
+ }
+
+ // Convert offset
+ if (texture.offset && Array.isArray(texture.offset)) {
+ babylonTexture.uOffset = texture.offset[0] || 0;
+ babylonTexture.vOffset = texture.offset[1] || 0;
+ }
+
+ // Convert rotation
+ if (texture.rotation !== undefined) {
+ babylonTexture.uAng = texture.rotation;
+ }
+
+ // Convert channel
+ if (typeof texture.channel === "number") {
+ babylonTexture.coordinatesIndex = texture.channel;
+ }
+
+ // Convert sampling mode (Three.js filters → Babylon.js sampling mode)
+ if (texture.minFilter !== undefined) {
+ if (texture.minFilter === THREE_LINEAR_MIPMAP_NEAREST_FILTER || texture.minFilter === THREE_NEAREST_MIPMAP_LINEAR_FILTER) {
+ babylonTexture.samplingMode = BabylonTexture.TRILINEAR_SAMPLINGMODE;
+ } else if (texture.minFilter === THREE_NEAREST_MIPMAP_NEAREST_FILTER || texture.minFilter === THREE_LINEAR_FILTER) {
+ babylonTexture.samplingMode = BabylonTexture.BILINEAR_SAMPLINGMODE;
+ } else {
+ babylonTexture.samplingMode = BabylonTexture.NEAREST_SAMPLINGMODE;
+ }
+ } else if (texture.magFilter !== undefined) {
+ babylonTexture.samplingMode = texture.magFilter === THREE_LINEAR_FILTER ? BabylonTexture.BILINEAR_SAMPLINGMODE : BabylonTexture.NEAREST_SAMPLINGMODE;
+ } else {
+ babylonTexture.samplingMode = BabylonTexture.TRILINEAR_SAMPLINGMODE;
+ }
+
+ return babylonTexture;
+}
+
+/**
+ * Convert IQuarks images to images (normalize URLs)
+ */
+export function convertImage(image: IQuarksImage): IImage {
+ return {
+ uuid: image.uuid,
+ url: image.url || "",
+ };
+}
+
+/**
+ * Convert IQuarks geometries to geometries (convert to left-handed)
+ */
+export function convertGeometry(geometry: IQuarksGeometry): IGeometry {
+ if (geometry.type === "PlaneGeometry") {
+ // PlaneGeometry - simple properties
+ const planeGeometry = geometry as IQuarksGeometry & { width?: number; height?: number };
+ return {
+ uuid: geometry.uuid,
+ type: "PlaneGeometry" as const,
+ width: planeGeometry.width ?? 1,
+ height: planeGeometry.height ?? 1,
+ };
+ } else if (geometry.type === "BufferGeometry") {
+ // BufferGeometry - convert attributes to left-handed
+ const result: IGeometry = {
+ uuid: geometry.uuid,
+ type: "BufferGeometry",
+ };
+
+ if (geometry.data?.attributes) {
+ const attributes: IGeometryData["attributes"] = {};
+ const sourceAttrs = geometry.data.attributes;
+
+ // Convert position and normal (right-hand → left-hand: flip Z)
+ const positionAttr = convertAttribute(sourceAttrs.position, true);
+ if (positionAttr) {
+ attributes.position = positionAttr;
+ }
+
+ const normalAttr = convertAttribute(sourceAttrs.normal, true);
+ if (normalAttr) {
+ attributes.normal = normalAttr;
+ }
+
+ // UV and color - no conversion needed
+ const uvAttr = convertAttribute(sourceAttrs.uv, false);
+ if (uvAttr) {
+ attributes.uv = uvAttr;
+ }
+
+ const colorAttr = convertAttribute(sourceAttrs.color, false);
+ if (colorAttr) {
+ attributes.color = colorAttr;
+ }
+
+ result.data = {
+ attributes,
+ };
+
+ // Convert indices (reverse winding order for left-handed)
+ if (geometry.data.index) {
+ const indices = Array.from(geometry.data.index.array);
+ // Reverse winding: swap every 2nd and 3rd index in each triangle
+ for (let i = 0; i < indices.length; i += 3) {
+ const temp = indices[i + 1];
+ indices[i + 1] = indices[i + 2];
+ indices[i + 2] = temp;
+ }
+ result.data.index = {
+ array: indices,
+ };
+ }
+ }
+
+ return result;
+ }
+
+ // Unknown geometry type - return as-is
+ return {
+ uuid: geometry.uuid,
+ type: geometry.type as "PlaneGeometry" | "BufferGeometry",
+ };
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/quarks/transformConverter.ts b/editor/src/editor/windows/effect-editor/converters/quarks/transformConverter.ts
new file mode 100644
index 000000000..a5ab88d5e
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarks/transformConverter.ts
@@ -0,0 +1,86 @@
+import { Matrix, Vector3, Quaternion } from "@babylonjs/core/Maths/math.vector";
+import type { ITransform } from "babylonjs-editor-tools";
+
+/**
+ * Z-axis reflection matrix for RH → LH conversion
+ */
+const RH_TO_LH = Matrix.Scaling(1, 1, -1);
+
+/**
+ * Convert right-handed matrix to left-handed using:
+ * C * M * C
+ */
+function convertMatrixRHtoLH(sourceMatrix: Matrix): Matrix {
+ return RH_TO_LH.multiply(sourceMatrix).multiply(RH_TO_LH);
+}
+
+/**
+ * Convert transform from Three.js / Quarks (RH) to Babylon.js (LH)
+ * Matrix space conversion only.
+ */
+export function convertTransform(matrixArray?: number[], positionArray?: number[], rotationArray?: number[], scaleArray?: number[]): ITransform {
+ const position = Vector3.Zero();
+ const rotation = Quaternion.Identity();
+ const scale = Vector3.One();
+
+ let sourceMatrix: Matrix;
+
+ // =========================
+ // MATRIX PATH (Preferred)
+ // =========================
+ if (matrixArray && matrixArray.length >= 16) {
+ // IMPORTANT:
+ // Babylon Matrix.FromArray expects column-major already
+ sourceMatrix = Matrix.FromArray(matrixArray);
+ } else {
+ // =========================
+ // TRS PATH (Fallback)
+ // =========================
+
+ const tempPos = Vector3.Zero();
+ const tempRot = Quaternion.Identity();
+ const tempScale = Vector3.One();
+
+ if (positionArray?.length === 3) {
+ tempPos.set(positionArray[0] ?? 0, positionArray[1] ?? 0, positionArray[2] ?? 0);
+ }
+
+ if (rotationArray?.length === 3) {
+ // Three.js Euler is XYZ intrinsic
+ // Babylon FromEulerAngles expects same logical order
+ tempRot.copyFrom(Quaternion.FromEulerAngles(rotationArray[0] ?? 0, rotationArray[1] ?? 0, rotationArray[2] ?? 0));
+ }
+
+ if (scaleArray?.length === 3) {
+ tempScale.set(scaleArray[0] ?? 1, scaleArray[1] ?? 1, scaleArray[2] ?? 1);
+ }
+
+ sourceMatrix = Matrix.Compose(tempScale, tempRot, tempPos);
+ }
+
+ // =========================
+ // HANDEDNESS CONVERSION
+ // =========================
+
+ const convertedMatrix = convertMatrixRHtoLH(sourceMatrix);
+
+ // =========================
+ // SAFE DECOMPOSE
+ // =========================
+
+ const outPos = Vector3.Zero();
+ const outRot = Quaternion.Identity();
+ const outScale = Vector3.One();
+
+ convertedMatrix.decompose(outScale, outRot, outPos);
+
+ position.copyFrom(outPos);
+ scale.copyFrom(outScale);
+ rotation.copyFrom(outRot);
+
+ return {
+ position,
+ rotation,
+ scale,
+ };
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/quarks/types.ts b/editor/src/editor/windows/effect-editor/converters/quarks/types.ts
new file mode 100644
index 000000000..0ebc564f1
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarks/types.ts
@@ -0,0 +1,481 @@
+/**
+ * Type definitions for Quarks JSON structures
+ * These represent the incoming format from Quarks
+ */
+
+/**
+ * Common Bezier function structure used across multiple types
+ */
+export interface IQuarksBezierFunction {
+ p0: number;
+ p1: number;
+ p2: number;
+ p3: number;
+}
+
+export interface IQuarksBezierFunctionSegment {
+ function: IQuarksBezierFunction;
+ start: number;
+}
+
+/**
+ * Common RGBA color structure
+ */
+export interface IQuarksRGBA {
+ r: number;
+ g: number;
+ b: number;
+ a?: number;
+}
+
+/**
+ * Quarks value types
+ */
+export interface IQuarksConstantValue {
+ type: "ConstantValue";
+ value: number;
+}
+
+export interface IQuarksIntervalValue {
+ type: "IntervalValue";
+ a: number; // min
+ b: number; // max
+}
+
+export interface IQuarksPiecewiseBezier {
+ type: "PiecewiseBezier";
+ functions: IQuarksBezierFunctionSegment[];
+}
+
+export type IQuarksValue = IQuarksConstantValue | IQuarksIntervalValue | IQuarksPiecewiseBezier | number;
+
+/**
+ * Quarks color types
+ */
+export interface IQuarksConstantColor {
+ type: "ConstantColor";
+ color?: IQuarksRGBA;
+ value?: [number, number, number, number]; // RGBA array alternative
+}
+
+export type IQuarksColor = IQuarksConstantColor | [number, number, number, number] | string;
+
+/**
+ * Quarks rotation types
+ */
+export interface IQuarksEulerRotation {
+ type: "Euler";
+ angleX?: IQuarksValue;
+ angleY?: IQuarksValue;
+ angleZ?: IQuarksValue;
+ eulerOrder?: string;
+ functions?: IQuarksBezierFunctionSegment[];
+ a?: number;
+ b?: number;
+ value?: number;
+}
+
+export type IQuarksRotation = IQuarksEulerRotation | IQuarksValue;
+
+/**
+ * Quarks gradient key
+ */
+export interface IQuarksGradientKey {
+ time?: number;
+ value: number | [number, number, number, number] | IQuarksRGBA;
+ pos?: number;
+}
+
+/**
+ * Quarks shape configuration
+ */
+export interface IQuarksShape {
+ type: string;
+ radius?: number;
+ arc?: number;
+ thickness?: number;
+ angle?: number;
+ mode?: number;
+ spread?: number;
+ speed?: IQuarksValue;
+ size?: number[];
+ height?: number;
+}
+
+/**
+ * Quarks emission burst
+ */
+export interface IQuarksEmissionBurst {
+ time: IQuarksValue;
+ count: IQuarksValue;
+ cycle?: number;
+ interval?: number;
+ probability?: number;
+}
+
+/**
+ * Quarks behavior types
+ */
+export interface IQuarksCLinearFunction {
+ type: "CLinearFunction";
+ subType: "Color" | "Number";
+ keys: IQuarksGradientKey[];
+}
+
+export interface IQuarksGradientColor {
+ type: "Gradient";
+ color?: IQuarksCLinearFunction;
+ alpha?: IQuarksCLinearFunction;
+}
+
+export interface IQuarksConstantColorColor {
+ type: "ConstantColor";
+ color?: IQuarksRGBA;
+ value?: [number, number, number, number];
+}
+
+export interface IQuarksRandomColorBetweenGradient {
+ type: "RandomColorBetweenGradient";
+ gradient1?: IQuarksGradientColor;
+ gradient2?: IQuarksGradientColor;
+}
+
+export type IQuarksColorOverLifeColor = IQuarksGradientColor | IQuarksConstantColorColor | IQuarksRandomColorBetweenGradient;
+
+export interface IQuarksColorOverLifeBehavior {
+ type: "ColorOverLife";
+ color?: IQuarksColorOverLifeColor;
+}
+
+export interface IQuarksSizeOverLifeBehavior {
+ type: "SizeOverLife";
+ size?: {
+ keys?: IQuarksGradientKey[];
+ functions?: IQuarksBezierFunctionSegment[];
+ type?: string;
+ };
+}
+
+export interface IQuarksRotationOverLifeBehavior {
+ type: "RotationOverLife" | "Rotation3DOverLife";
+ angularVelocity?: IQuarksValue;
+}
+
+export interface IQuarksForceOverLifeBehavior {
+ type: "ForceOverLife" | "ApplyForce";
+ force?: {
+ x?: IQuarksValue;
+ y?: IQuarksValue;
+ z?: IQuarksValue;
+ };
+ x?: IQuarksValue;
+ y?: IQuarksValue;
+ z?: IQuarksValue;
+}
+
+export interface IQuarksGravityForceBehavior {
+ type: "GravityForce";
+ gravity?: IQuarksValue;
+}
+
+export interface IQuarksSpeedOverLifeBehavior {
+ type: "SpeedOverLife";
+ speed?:
+ | {
+ keys?: IQuarksGradientKey[];
+ functions?: Array<{
+ start: number;
+ function: {
+ p0?: number;
+ p3?: number;
+ };
+ }>;
+ }
+ | IQuarksValue;
+}
+
+export interface IQuarksFrameOverLifeBehavior {
+ type: "FrameOverLife";
+ frame?:
+ | {
+ keys?: IQuarksGradientKey[];
+ }
+ | IQuarksValue;
+}
+
+export interface IQuarksLimitSpeedOverLifeBehavior {
+ type: "LimitSpeedOverLife";
+ maxSpeed?: IQuarksValue;
+ speed?: IQuarksValue | { keys?: IQuarksGradientKey[] };
+ dampen?: IQuarksValue;
+}
+
+/**
+ * Base interface for speed-based behaviors
+ */
+interface IQuarksSpeedBasedBehavior {
+ minSpeed?: IQuarksValue;
+ maxSpeed?: IQuarksValue;
+}
+
+export interface IQuarksColorBySpeedBehavior extends IQuarksSpeedBasedBehavior {
+ type: "ColorBySpeed";
+ color?: {
+ keys: IQuarksGradientKey[];
+ };
+}
+
+export interface IQuarksSizeBySpeedBehavior extends IQuarksSpeedBasedBehavior {
+ type: "SizeBySpeed";
+ size?: {
+ keys: IQuarksGradientKey[];
+ };
+}
+
+export interface IQuarksRotationBySpeedBehavior extends IQuarksSpeedBasedBehavior {
+ type: "RotationBySpeed";
+ angularVelocity?: IQuarksValue;
+}
+
+export interface IQuarksOrbitOverLifeBehavior {
+ type: "OrbitOverLife";
+ center?: {
+ x?: number;
+ y?: number;
+ z?: number;
+ };
+ radius?: IQuarksValue;
+ speed?: IQuarksValue;
+}
+
+export interface IQuarksNoiseBehavior {
+ type: "Noise";
+ frequency?: IQuarksValue;
+ power?: IQuarksValue;
+ positionAmount?: IQuarksValue;
+ rotationAmount?: IQuarksValue;
+ x?: IQuarksValue;
+ y?: IQuarksValue;
+ z?: IQuarksValue;
+}
+
+export type IQuarksBehavior =
+ | IQuarksColorOverLifeBehavior
+ | IQuarksSizeOverLifeBehavior
+ | IQuarksRotationOverLifeBehavior
+ | IQuarksForceOverLifeBehavior
+ | IQuarksGravityForceBehavior
+ | IQuarksSpeedOverLifeBehavior
+ | IQuarksFrameOverLifeBehavior
+ | IQuarksLimitSpeedOverLifeBehavior
+ | IQuarksColorBySpeedBehavior
+ | IQuarksSizeBySpeedBehavior
+ | IQuarksRotationBySpeedBehavior
+ | IQuarksOrbitOverLifeBehavior
+ | IQuarksNoiseBehavior
+ | { type: string; [key: string]: unknown }; // Fallback for unknown behaviors
+
+/**
+ * Quarks start size with Vector3Function support
+ */
+export interface IQuarksVector3FunctionSize {
+ type: "Vector3Function";
+ x?: IQuarksValue;
+ y?: IQuarksValue;
+ z?: IQuarksValue;
+ functions?: IQuarksBezierFunctionSegment[];
+ a?: number;
+ b?: number;
+ value?: number;
+}
+
+export type IQuarksStartSize = IQuarksValue | IQuarksVector3FunctionSize;
+
+/**
+ * Quarks start color with Gradient and ColorRange support
+ */
+export interface IQuarksGradientStartColor {
+ type: "Gradient";
+ alpha?: IQuarksCLinearFunction;
+ color?: IQuarksCLinearFunction;
+}
+
+export interface IQuarksColorRangeStartColor {
+ type: "ColorRange";
+ a?: IQuarksRGBA;
+ b?: IQuarksRGBA;
+ color?: IQuarksCLinearFunction;
+ alpha?: IQuarksCLinearFunction;
+}
+
+export type IQuarksStartColor = IQuarksColor | IQuarksGradientStartColor | IQuarksColorRangeStartColor;
+
+/**
+ * Quarks particle emitter configuration
+ */
+export interface IQuarksParticleEmitterConfig {
+ version?: string;
+ autoDestroy?: boolean;
+ looping?: boolean;
+ prewarm?: boolean;
+ duration?: number;
+ shape?: IQuarksShape;
+ startLife?: IQuarksValue;
+ startSpeed?: IQuarksValue;
+ startRotation?: IQuarksRotation;
+ startSize?: IQuarksStartSize;
+ startColor?: IQuarksStartColor;
+ emissionOverTime?: IQuarksValue;
+ emissionOverDistance?: IQuarksValue;
+ emissionBursts?: IQuarksEmissionBurst[];
+ onlyUsedByOther?: boolean;
+ instancingGeometry?: string;
+ renderOrder?: number;
+ renderMode?: number;
+ rendererEmitterSettings?: Record;
+ material?: string;
+ layers?: number;
+ startTileIndex?: IQuarksValue;
+ uTileCount?: number;
+ vTileCount?: number;
+ blendTiles?: boolean;
+ softParticles?: boolean;
+ softFarFade?: number;
+ softNearFade?: number;
+ behaviors?: IQuarksBehavior[];
+ worldSpace?: boolean;
+}
+
+/**
+ * Base interface for Quarks objects with common transform properties
+ */
+interface IQuarksObjectBase {
+ uuid: string;
+ name: string;
+ matrix: number[];
+ layers: number;
+ up: number[];
+ children: IQuarksObject[];
+ position?: number[];
+ rotation?: number[];
+ scale?: number[];
+}
+
+/**
+ * Quarks object types
+ */
+export interface IQuarksGroup extends IQuarksObjectBase {
+ type: "Group";
+}
+
+export interface IQuarksParticleEmitter extends IQuarksObjectBase {
+ type: "ParticleEmitter";
+ ps: IQuarksParticleEmitterConfig;
+}
+
+export type IQuarksObject = IQuarksGroup | IQuarksParticleEmitter;
+
+/**
+ * Base interface for Quarks resources (materials, textures, images, geometries)
+ */
+interface IQuarksResource {
+ uuid: string;
+ name?: string;
+}
+
+/**
+ * Quarks material
+ */
+export interface IQuarksMaterial extends IQuarksResource {
+ type: string;
+ color?: number;
+ map?: string;
+ blending?: number;
+ blendColor?: number;
+ side?: number;
+ transparent?: boolean;
+ depthWrite?: boolean;
+ envMapRotation?: number[];
+ reflectivity?: number;
+ refractionRatio?: number;
+}
+
+/**
+ * Quarks texture
+ */
+export interface IQuarksTexture extends IQuarksResource {
+ image?: string;
+ mapping?: number;
+ wrap?: number[];
+ repeat?: number[];
+ offset?: number[];
+ center?: number[];
+ rotation?: number;
+ minFilter?: number;
+ magFilter?: number;
+ flipY?: boolean;
+ generateMipmaps?: boolean;
+ format?: number;
+ internalFormat?: number | null;
+ type?: number;
+ channel?: number;
+ anisotropy?: number;
+ colorSpace?: string;
+ premultiplyAlpha?: boolean;
+ unpackAlignment?: number;
+}
+
+/**
+ * Quarks image
+ */
+export interface IQuarksImage extends IQuarksResource {
+ url?: string;
+}
+
+/**
+ * Quarks geometry
+ */
+export interface IQuarksGeometry extends IQuarksResource {
+ type: string;
+ data?: {
+ attributes?: Record<
+ string,
+ {
+ itemSize: number;
+ type: string;
+ array: number[];
+ normalized?: boolean;
+ }
+ >;
+ index?: {
+ type: string;
+ array: number[];
+ };
+ };
+ // Geometry-specific properties (for different geometry types)
+ height?: number;
+ heightSegments?: number;
+ width?: number;
+ widthSegments?: number;
+ radius?: number;
+ phiLength?: number;
+ phiStart?: number;
+ thetaLength?: number;
+ thetaStart?: number;
+}
+
+/**
+ * Quarks JSON structure
+ */
+export interface IQuarksJSON {
+ metadata: {
+ version: number;
+ type: string;
+ generator: string;
+ };
+ geometries: IQuarksGeometry[];
+ materials: IQuarksMaterial[];
+ textures: IQuarksTexture[];
+ images: IQuarksImage[];
+ object: IQuarksObject;
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/quarks/valueConverter.ts b/editor/src/editor/windows/effect-editor/converters/quarks/valueConverter.ts
new file mode 100644
index 000000000..f386c7a4d
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarks/valueConverter.ts
@@ -0,0 +1,189 @@
+import type { IQuarksValue, IQuarksStartSize, IQuarksRotation } from "./types";
+import type { Value } from "babylonjs-editor-tools";
+
+/**
+ * Convert IQuarks value to Value
+ */
+export function convertValue(value: IQuarksValue): Value {
+ if (typeof value === "number") {
+ return value;
+ }
+ if (value.type === "ConstantValue") {
+ return {
+ type: "ConstantValue",
+ value: value.value,
+ };
+ }
+ if (value.type === "IntervalValue") {
+ return {
+ type: "IntervalValue",
+ min: value.a ?? 0,
+ max: value.b ?? 0,
+ };
+ }
+ if (value.type === "PiecewiseBezier") {
+ return {
+ type: "PiecewiseBezier",
+ functions: value.functions.map((f) => ({
+ function: f.function,
+ start: f.start,
+ })),
+ };
+ }
+ // Fallback: return as Value (should not happen with proper types)
+ return value as Value;
+}
+
+/**
+ * Helper: Convert optional IQuarksValue to optional Value
+ */
+export function convertOptionalValue(value: IQuarksValue | undefined): Value | undefined {
+ return value !== undefined ? convertValue(value) : undefined;
+}
+
+/**
+ * Evaluate bezier curve at time t
+ * Bezier format: { p0, p1, p2, p3 } for cubic bezier
+ */
+export function evaluateBezierAt(bezier: { p0: number; p1: number; p2: number; p3: number }, t: number): number {
+ const { p0, p1, p2, p3 } = bezier;
+ const t2 = t * t;
+ const t3 = t2 * t;
+ const mt = 1 - t;
+ const mt2 = mt * mt;
+ const mt3 = mt2 * mt;
+ return mt3 * p0 + 3 * mt2 * t * p1 + 3 * mt * t2 * p2 + t3 * p3;
+}
+
+/**
+ * Helper: Extract min/max from IQuarksValue
+ */
+export function extractMinMaxFromValue(value: IQuarksValue | undefined): { min: number; max: number } {
+ if (value === undefined) {
+ return { min: 0, max: 0 };
+ }
+ if (typeof value === "number") {
+ return { min: value, max: value };
+ }
+ if (value.type === "ConstantValue") {
+ return { min: value.value, max: value.value };
+ }
+ if (value.type === "IntervalValue") {
+ return { min: value.a ?? 0, max: value.b ?? 0 };
+ }
+ return { min: 0, max: 0 };
+}
+
+/**
+ * Convert IQuarks value to min/max (handles PiecewiseBezier gradients)
+ */
+export function convertValueToMinMax(value: IQuarksValue): {
+ min: number;
+ max: number;
+ gradients?: Array<{ gradient: number; factor: number; factor2?: number }>;
+} {
+ if (typeof value === "number") {
+ return { min: value, max: value };
+ }
+ if (value.type === "ConstantValue") {
+ return { min: value.value, max: value.value };
+ }
+ if (value.type === "IntervalValue") {
+ return { min: value.a ?? 0, max: value.b ?? 0 };
+ }
+ if (value.type === "PiecewiseBezier" && value.functions) {
+ // Convert PiecewiseBezier to gradients
+ const gradients: Array<{ gradient: number; factor: number; factor2?: number }> = [];
+ let minVal = Infinity;
+ let maxVal = -Infinity;
+
+ for (const func of value.functions) {
+ const startTime = func.start;
+ // Evaluate bezier at start and end points
+ const startValue = evaluateBezierAt(func.function, 0);
+ const endValue = evaluateBezierAt(func.function, 1);
+
+ gradients.push({ gradient: startTime, factor: startValue });
+
+ // Track min/max for fallback
+ minVal = Math.min(minVal, startValue, endValue);
+ maxVal = Math.max(maxVal, startValue, endValue);
+ }
+
+ // Add final point at gradient 1.0 if not present
+ if (gradients.length > 0 && gradients[gradients.length - 1].gradient < 1) {
+ const lastFunc = value.functions[value.functions.length - 1];
+ const endValue = evaluateBezierAt(lastFunc.function, 1);
+ gradients.push({ gradient: 1, factor: endValue });
+ }
+
+ return {
+ min: minVal === Infinity ? 1 : minVal,
+ max: maxVal === -Infinity ? 1 : maxVal,
+ gradients: gradients.length > 0 ? gradients : undefined,
+ };
+ }
+ return { min: 1, max: 1 };
+}
+
+/**
+ * Convert IQuarksStartSize to min/max (handles Vector3Function)
+ * - ConstantValue → min = max = value
+ * - IntervalValue → min = a, max = b
+ * - PiecewiseBezier → gradients array
+ */
+export function convertStartSizeToMinMax(startSize: IQuarksStartSize): {
+ min: number;
+ max: number;
+ gradients?: Array<{ gradient: number; factor: number; factor2?: number }>;
+} {
+ // Handle Vector3Function type
+ if (typeof startSize === "object" && startSize !== null && "type" in startSize && startSize.type === "Vector3Function") {
+ // For Vector3Function, use the main value or average of x, y, z
+ if (startSize.value !== undefined) {
+ return convertValueToMinMax(startSize.value);
+ }
+ // Fallback: use x value if available
+ if (startSize.x !== undefined) {
+ return convertValueToMinMax(startSize.x);
+ }
+ return { min: 1, max: 1 };
+ }
+ // Otherwise treat as IQuarksValue
+ return convertValueToMinMax(startSize as IQuarksValue);
+}
+
+/**
+ * Convert IQuarks rotation to native min/max radians
+ * Supports: number, ConstantValue, IntervalValue, Euler, AxisAngle, RandomQuat
+ */
+export function convertRotationToMinMax(rotation: IQuarksRotation): { min: number; max: number } {
+ if (typeof rotation === "number") {
+ return { min: rotation, max: rotation };
+ }
+
+ if (typeof rotation === "object" && rotation !== null && "type" in rotation) {
+ const rotationType = rotation.type;
+
+ if (rotationType === "ConstantValue") {
+ return extractMinMaxFromValue(rotation as IQuarksValue);
+ }
+
+ if (rotationType === "IntervalValue") {
+ return extractMinMaxFromValue(rotation as IQuarksValue);
+ }
+
+ // Handle Euler type - for 2D/billboard particles we use angleZ, fallback to angleX
+ if (rotationType === "Euler") {
+ const euler = rotation as { type: string; angleZ?: IQuarksValue; angleX?: IQuarksValue };
+ if (euler.angleZ !== undefined) {
+ return extractMinMaxFromValue(euler.angleZ);
+ }
+ if (euler.angleX !== undefined) {
+ return extractMinMaxFromValue(euler.angleX);
+ }
+ }
+ }
+
+ return { min: 0, max: 0 };
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/quarksConverter.ts b/editor/src/editor/windows/effect-editor/converters/quarksConverter.ts
new file mode 100644
index 000000000..1c67d72de
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarksConverter.ts
@@ -0,0 +1,102 @@
+import { Tools } from "@babylonjs/core/Misc/tools";
+import type { IQuarksJSON, IQuarksObject } from "./quarks/types";
+import type { IGroup, IEmitter, IData } from "babylonjs-editor-tools";
+import { convertTransform } from "./quarks/transformConverter";
+import { convertEmitterConfig } from "./quarks/emitterConfigConverter";
+import { convertMaterial, convertTexture, convertImage, convertGeometry } from "./quarks/resourceConverter";
+
+/**
+ * Converts Quarks Effect to Babylon.js Effect format
+ * All coordinate system conversions happen here, once
+ */
+export class QuarksConverter {
+ /**
+ * Convert Quarks Effect to Babylon.js Effect format
+ * Handles errors gracefully and returns partial data if conversion fails
+ */
+ public convert(data: IQuarksJSON): IData {
+ let root: IGroup | IEmitter | null = null;
+
+ try {
+ root = this._convertObject(data.object, null);
+ } catch (error) {
+ console.error(`Failed to convert root object: ${error instanceof Error ? error.message : String(error)}`);
+ }
+
+ // Convert all resources with error handling
+ const materials = this._convertResources(data.materials, (m) => convertMaterial(m), "materials");
+ const textures = this._convertResources(data.textures, (t) => convertTexture(t), "textures");
+ const images = this._convertResources(data.images, (i) => convertImage(i), "images");
+ const geometries = this._convertResources(data.geometries, (g) => convertGeometry(g), "geometries");
+
+ return {
+ root,
+ materials,
+ textures,
+ images,
+ geometries,
+ };
+ }
+
+ /**
+ * Helper: Convert resources array with error handling
+ */
+ private _convertResources(items: T[] | undefined, converter: (item: T) => R, resourceName: string): R[] {
+ try {
+ return (items || []).map(converter);
+ } catch (error) {
+ console.error(`Failed to convert ${resourceName}: ${error instanceof Error ? error.message : String(error)}`);
+ return [];
+ }
+ }
+
+ /**
+ * Convert a IQuarks object to Babylon.js format
+ */
+ private _convertObject(obj: IQuarksObject, parentUuid: string | null): IGroup | IEmitter | null {
+ if (!obj || typeof obj !== "object") {
+ return null;
+ }
+
+ const transform = convertTransform(obj.matrix, obj.position, obj.rotation, obj.scale);
+
+ if (obj.type === "Group") {
+ const group: IGroup = {
+ uuid: obj.uuid || Tools.RandomId(),
+ name: obj.name || "Group",
+ transform,
+ children: [],
+ };
+
+ // Convert children
+ if (obj.children && Array.isArray(obj.children)) {
+ for (const child of obj.children) {
+ const convertedChild = this._convertObject(child, group.uuid);
+ if (convertedChild) {
+ group.children.push(convertedChild);
+ }
+ }
+ }
+
+ return group;
+ } else if (obj.type === "ParticleEmitter" && obj.ps) {
+ // Convert emitter config from IQuarks to format
+ const config = convertEmitterConfig(obj.ps);
+
+ const emitter: IEmitter = {
+ uuid: obj.uuid || Tools.RandomId(),
+ name: obj.name || "ParticleEmitter",
+ transform,
+ config,
+ materialId: obj.ps.material,
+ parentUuid: parentUuid ?? undefined,
+ systemType: config.systemType, // systemType is set in convertEmitterConfig
+ matrix: obj.matrix, // Store original matrix for rotation extraction
+ };
+
+ return emitter;
+ }
+
+ return null;
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/unity/colorConverter.ts b/editor/src/editor/windows/effect-editor/converters/unity/colorConverter.ts
new file mode 100644
index 000000000..f20f59d6c
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/unity/colorConverter.ts
@@ -0,0 +1,110 @@
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+import type { IConstantColor, IGradientColor, IRandomColor, IRandomColorBetweenGradient } from "babylonjs-editor-tools/src/effect/types";
+
+/**
+ * Convert Unity Color to our Color4
+ */
+export function convertColor(unityColor: { r: string; g: string; b: string; a: string }): Color4 {
+ return new Color4(parseFloat(unityColor.r), parseFloat(unityColor.g), parseFloat(unityColor.b), parseFloat(unityColor.a));
+}
+
+/**
+ * Convert Unity Gradient to our Color
+ */
+export function convertGradient(gradient: any): IConstantColor | IGradientColor {
+ const colorKeys: Array<{ time: number; value: [number, number, number, number] }> = [];
+
+ // Parse color keys
+ for (let i = 0; i < gradient.m_NumColorKeys; i++) {
+ const key = gradient[`key${i}`];
+ const time = parseFloat(gradient[`ctime${i}`]) / 65535; // Unity stores time as 0-65535
+ colorKeys.push({
+ time,
+ value: [parseFloat(key.r), parseFloat(key.g), parseFloat(key.b), 1],
+ });
+ }
+
+ // Parse alpha keys
+ const alphaKeys: Array<{ time: number; value: number }> = [];
+ for (let i = 0; i < gradient.m_NumAlphaKeys; i++) {
+ const key = gradient[`key${i}`];
+ const time = parseFloat(gradient[`atime${i}`]) / 65535;
+ alphaKeys.push({
+ time,
+ value: parseFloat(key.a),
+ });
+ }
+
+ // If only one color key and one alpha key, return constant color
+ if (colorKeys.length === 1 && alphaKeys.length === 1) {
+ return {
+ type: "ConstantColor",
+ value: [...colorKeys[0].value.slice(0, 3), alphaKeys[0].value] as [number, number, number, number],
+ };
+ }
+
+ // Return gradient
+ return {
+ type: "Gradient",
+ colorKeys: colorKeys.map((k) => ({ time: k.time, value: k.value as [number, number, number, number] })),
+ alphaKeys: alphaKeys.map((k) => ({ time: k.time, value: k.value })),
+ };
+}
+
+/**
+ * Convert Unity MinMaxGradient to our Color
+ */
+export function convertMinMaxGradient(minMaxGradient: any): IConstantColor | IGradientColor | IRandomColor | IRandomColorBetweenGradient {
+ const minMaxState = minMaxGradient.minMaxState;
+
+ switch (minMaxState) {
+ case "0": // Constant color
+ return {
+ type: "ConstantColor",
+ value: [
+ parseFloat(minMaxGradient.maxColor.r),
+ parseFloat(minMaxGradient.maxColor.g),
+ parseFloat(minMaxGradient.maxColor.b),
+ parseFloat(minMaxGradient.maxColor.a),
+ ] as [number, number, number, number],
+ };
+ case "1": // Gradient
+ return convertGradient(minMaxGradient.maxGradient);
+ case "2": // Random between two colors
+ return {
+ type: "RandomColor",
+ colorA: [
+ parseFloat(minMaxGradient.minColor.r),
+ parseFloat(minMaxGradient.minColor.g),
+ parseFloat(minMaxGradient.minColor.b),
+ parseFloat(minMaxGradient.minColor.a),
+ ] as [number, number, number, number],
+ colorB: [
+ parseFloat(minMaxGradient.maxColor.r),
+ parseFloat(minMaxGradient.maxColor.g),
+ parseFloat(minMaxGradient.maxColor.b),
+ parseFloat(minMaxGradient.maxColor.a),
+ ] as [number, number, number, number],
+ };
+ case "3": // Random between two gradients
+ const grad1 = convertGradient(minMaxGradient.minGradient);
+ const grad2 = convertGradient(minMaxGradient.maxGradient);
+ if (grad1.type === "Gradient" && grad2.type === "Gradient") {
+ return {
+ type: "RandomColorBetweenGradient",
+ gradient1: {
+ colorKeys: grad1.colorKeys,
+ alphaKeys: grad1.alphaKeys,
+ },
+ gradient2: {
+ colorKeys: grad2.colorKeys,
+ alphaKeys: grad2.alphaKeys,
+ },
+ };
+ }
+ // Fallback to constant color if conversion failed
+ return { type: "ConstantColor", value: [1, 1, 1, 1] };
+ default:
+ return { type: "ConstantColor", value: [1, 1, 1, 1] };
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/unity/gameObjectConverter.ts b/editor/src/editor/windows/effect-editor/converters/unity/gameObjectConverter.ts
new file mode 100644
index 000000000..43780c6ef
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/unity/gameObjectConverter.ts
@@ -0,0 +1,176 @@
+import { Quaternion, Vector3 } from "@babylonjs/core/Maths/math.vector";
+import { Tools } from "@babylonjs/core/Misc/tools";
+import type { IGroup, IEmitter, IParticleSystemConfig } from "babylonjs-editor-tools/src/effect/types";
+import { getComponentByType, convertVector3 } from "./utils";
+import { convertParticleSystem } from "./particleSystemConverter";
+
+/**
+ * Intermediate format for convertGameObject (before conversion to IData format)
+ */
+export interface IIntermediateGameObject {
+ type: "emitter" | "group";
+ name: string;
+ position: [number, number, number];
+ scale: [number, number, number];
+ rotation: [number, number, number, number];
+ emitter?: IParticleSystemConfig;
+ renderMode?: number;
+ materialId?: string; // GUID of material from ParticleSystemRenderer
+ children?: IIntermediateGameObject[];
+}
+
+/**
+ * Convert Unity GameObject hierarchy to our IGroup/IEmitter structure
+ */
+export function convertGameObject(gameObject: any, components: Map): IIntermediateGameObject {
+ // Get Transform component
+ const transform = getComponentByType(gameObject, "Transform", components);
+
+ const position = transform ? convertVector3(transform.m_LocalPosition) : ([0, 0, 0] as [number, number, number]);
+ const scale = transform ? convertVector3(transform.m_LocalScale) : ([1, 1, 1] as [number, number, number]);
+ const rotation = transform
+ ? ([parseFloat(transform.m_LocalRotation.x), parseFloat(transform.m_LocalRotation.y), parseFloat(transform.m_LocalRotation.z), parseFloat(transform.m_LocalRotation.w)] as [
+ number,
+ number,
+ number,
+ number,
+ ])
+ : ([0, 0, 0, 1] as [number, number, number, number]);
+
+ // Check if this GameObject has a ParticleSystem component
+ const ps = getComponentByType(gameObject, "ParticleSystem", components);
+
+ if (ps) {
+ // It's a particle emitter
+ const renderer = getComponentByType(gameObject, "ParticleSystemRenderer", components);
+ const emitterConfig = convertParticleSystem(ps, renderer);
+
+ // Determine render mode from renderer
+ let renderMode = 0; // Default: BillBoard
+ let materialId: string | undefined;
+ if (renderer) {
+ const m_RenderMode = parseInt(renderer.m_RenderMode || "0");
+ switch (m_RenderMode) {
+ case 0:
+ renderMode = 0; // BillBoard
+ break;
+ case 1:
+ renderMode = 1; // StretchedBillBoard
+ break;
+ case 2:
+ renderMode = 2; // HorizontalBillBoard
+ break;
+ case 3:
+ renderMode = 3; // VerticalBillBoard
+ break;
+ case 4:
+ renderMode = 4; // Mesh
+ break;
+ }
+
+ // Extract material GUID from renderer
+ if (renderer.m_Materials && Array.isArray(renderer.m_Materials) && renderer.m_Materials.length > 0) {
+ const materialRef = renderer.m_Materials[0];
+ if (materialRef && materialRef.guid) {
+ materialId = materialRef.guid;
+ }
+ }
+ }
+
+ const emitter: IIntermediateGameObject = {
+ type: "emitter",
+ name: gameObject.m_Name || "ParticleSystem",
+ position,
+ scale,
+ rotation,
+ emitter: emitterConfig,
+ renderMode,
+ materialId,
+ };
+
+ return emitter;
+ }
+ const group: IIntermediateGameObject = {
+ type: "group",
+ name: gameObject.m_Name || "Group",
+ position,
+ scale,
+ rotation,
+ children: [],
+ };
+
+ // Recursively convert children
+ if (transform && transform.m_Children) {
+ for (const childRef of transform.m_Children) {
+ const childTransform = components.get(childRef.fileID);
+ if (childTransform && childTransform.Transform) {
+ const childGORef = childTransform.Transform.m_GameObject;
+ const childGOId = childGORef?.fileID || childGORef;
+ const childGO = components.get(childGOId);
+
+ if (childGO && childGO.GameObject) {
+ if (!group.children) {
+ group.children = [];
+ }
+ group.children.push(convertGameObject(childGO.GameObject, components));
+ }
+ }
+ }
+ }
+
+ return group;
+}
+
+/**
+ * Convert convertGameObject result to IGroup or IEmitter format
+ * Recursively processes children
+ */
+export function convertToIDataFormat(converted: IIntermediateGameObject): IGroup | IEmitter | null {
+ if (!converted) {
+ return null;
+ }
+
+ const uuid = Tools.RandomId();
+
+ if (converted.type === "group") {
+ // Convert children recursively
+ const children: (IGroup | IEmitter)[] = [];
+ if (converted.children && Array.isArray(converted.children)) {
+ for (const child of converted.children) {
+ const childConverted = convertToIDataFormat(child);
+ if (childConverted) {
+ children.push(childConverted);
+ }
+ }
+ }
+
+ const group: IGroup = {
+ uuid,
+ name: converted.name,
+ transform: {
+ position: new Vector3(converted.position[0], converted.position[1], converted.position[2]),
+ rotation: new Quaternion(converted.rotation[0], converted.rotation[1], converted.rotation[2], converted.rotation[3]),
+ scale: new Vector3(converted.scale[0], converted.scale[1], converted.scale[2]),
+ },
+ children: children,
+ };
+ return group;
+ }
+ if (!converted.emitter) {
+ console.warn("Emitter config is missing for", converted.name);
+ return null;
+ }
+ const emitter: IEmitter = {
+ uuid,
+ name: converted.name,
+ transform: {
+ position: new Vector3(converted.position[0], converted.position[1], converted.position[2]),
+ rotation: new Quaternion(converted.rotation[0], converted.rotation[1], converted.rotation[2], converted.rotation[3]),
+ scale: new Vector3(converted.scale[0], converted.scale[1], converted.scale[2]),
+ },
+ config: converted.emitter,
+ systemType: converted.renderMode === 4 ? "solid" : "base", // Mesh = solid, others = base
+ materialId: converted.materialId, // Link material to emitter
+ };
+ return emitter;
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/unity/particleSystemConverter.ts b/editor/src/editor/windows/effect-editor/converters/unity/particleSystemConverter.ts
new file mode 100644
index 000000000..6ed9e4f62
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/unity/particleSystemConverter.ts
@@ -0,0 +1,244 @@
+import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+import type { IParticleSystemConfig, Behavior } from "babylonjs-editor-tools/src/effect/types";
+import { convertColor, convertMinMaxGradient } from "./colorConverter";
+import { convertShape } from "./shapeConverter";
+import { convertMinMaxCurve } from "./valueConverter";
+
+/**
+ * Convert Unity ParticleSystem to our IParticleSystemConfig
+ */
+export function convertParticleSystem(unityPS: any, _renderer: any): IParticleSystemConfig {
+ const main = unityPS.InitialModule;
+
+ const config: IParticleSystemConfig = {
+ version: "2.0",
+ systemType: "base", // Unity uses GPU particles, similar to our base system
+
+ // Basic properties
+ minLifeTime: parseFloat(main.startLifetime?.minScalar || main.startLifetime?.scalar || "5"),
+ maxLifeTime: parseFloat(main.startLifetime?.scalar || "5"),
+ minSize: parseFloat(main.startSize?.minScalar || main.startSize?.scalar || "1"),
+ maxSize: parseFloat(main.startSize?.scalar || "1"),
+ minEmitPower: parseFloat(main.startSpeed?.minScalar || main.startSpeed?.scalar || "5"),
+ maxEmitPower: parseFloat(main.startSpeed?.scalar || "5"),
+ emitRate: parseFloat(unityPS.EmissionModule?.rateOverTime?.scalar || "10"),
+
+ // Duration and looping
+ targetStopDuration: main.looping === "1" ? 0 : parseFloat(main.duration?.scalar || "5"),
+ preWarmCycles: main.prewarm === "1" ? 100 : 0,
+ isLocal: main.simulationSpace === "0", // 0 = Local, 1 = World
+
+ // Color
+ color1: convertColor({
+ r: main.startColor?.maxColor?.r || "1",
+ g: main.startColor?.maxColor?.g || "1",
+ b: main.startColor?.maxColor?.b || "1",
+ a: main.startColor?.maxColor?.a || "1",
+ }),
+ color2: convertColor({
+ r: main.startColor?.maxColor?.r || "1",
+ g: main.startColor?.maxColor?.g || "1",
+ b: main.startColor?.maxColor?.b || "1",
+ a: main.startColor?.maxColor?.a || "1",
+ }),
+
+ // Rotation
+ minInitialRotation: parseFloat(main.startRotation?.minScalar || main.startRotation?.scalar || "0"),
+ maxInitialRotation: parseFloat(main.startRotation?.scalar || "0"),
+
+ // Gravity (if enabled)
+ gravity: main.gravityModifier?.scalar ? new Vector3(0, parseFloat(main.gravityModifier.scalar) * -9.81, 0) : undefined,
+
+ // Shape/Emitter
+ shape: convertShape(unityPS.ShapeModule),
+
+ // Behaviors
+ behaviors: [],
+ };
+
+ // Convert modules to behaviors
+ const behaviors: Behavior[] = [];
+
+ // ColorOverLife
+ if (unityPS.ColorModule && unityPS.ColorModule.enabled === "1") {
+ const colorGradient = convertMinMaxGradient(unityPS.ColorModule.gradient);
+
+ // Convert Color type to IColorFunction
+ let colorFunction: { colorFunctionType: string; data: any };
+ if (colorGradient.type === "ConstantColor") {
+ colorFunction = {
+ colorFunctionType: "ConstantColor",
+ data: {
+ color: {
+ r: colorGradient.value[0],
+ g: colorGradient.value[1],
+ b: colorGradient.value[2],
+ a: colorGradient.value[3],
+ },
+ },
+ };
+ } else if (colorGradient.type === "Gradient") {
+ colorFunction = {
+ colorFunctionType: "Gradient",
+ data: {
+ colorKeys: colorGradient.colorKeys,
+ alphaKeys: colorGradient.alphaKeys || [],
+ },
+ };
+ } else if (colorGradient.type === "RandomColor") {
+ colorFunction = {
+ colorFunctionType: "ColorRange",
+ data: {
+ colorA: colorGradient.colorA,
+ colorB: colorGradient.colorB,
+ },
+ };
+ } else if (colorGradient.type === "RandomColorBetweenGradient") {
+ colorFunction = {
+ colorFunctionType: "RandomColorBetweenGradient",
+ data: {
+ gradient1: {
+ colorKeys: colorGradient.gradient1.colorKeys,
+ alphaKeys: colorGradient.gradient1.alphaKeys || [],
+ },
+ gradient2: {
+ colorKeys: colorGradient.gradient2.colorKeys,
+ alphaKeys: colorGradient.gradient2.alphaKeys || [],
+ },
+ },
+ };
+ } else {
+ colorFunction = {
+ colorFunctionType: "ConstantColor",
+ data: { color: { r: 1, g: 1, b: 1, a: 1 } },
+ };
+ }
+
+ behaviors.push({
+ type: "ColorOverLife",
+ color: colorFunction,
+ });
+ }
+
+ // SizeOverLife
+ if (unityPS.SizeModule && unityPS.SizeModule.enabled === "1") {
+ const sizeValue = convertMinMaxCurve(unityPS.SizeModule.curve);
+ behaviors.push({
+ type: "SizeOverLife",
+ size: sizeValue,
+ });
+ }
+
+ // RotationOverLife
+ if (unityPS.RotationOverLifetimeModule && unityPS.RotationOverLifetimeModule.enabled === "1") {
+ const rotationZ = convertMinMaxCurve(unityPS.RotationOverLifetimeModule.z || unityPS.RotationOverLifetimeModule.curve);
+ behaviors.push({
+ type: "RotationOverLife",
+ angularVelocity: rotationZ,
+ });
+ }
+
+ // Rotation3DOverLife (if separate X, Y, Z)
+ if (unityPS.RotationOverLifetimeModule && unityPS.RotationOverLifetimeModule.enabled === "1" && unityPS.RotationOverLifetimeModule.separateAxes === "1") {
+ behaviors.push({
+ type: "Rotation3DOverLife",
+ angularVelocityX: convertMinMaxCurve(unityPS.RotationOverLifetimeModule.x),
+ angularVelocityY: convertMinMaxCurve(unityPS.RotationOverLifetimeModule.y),
+ angularVelocityZ: convertMinMaxCurve(unityPS.RotationOverLifetimeModule.z),
+ });
+ }
+
+ // VelocityOverLife (SpeedOverLife)
+ if (unityPS.VelocityModule && unityPS.VelocityModule.enabled === "1") {
+ const speedModifier = unityPS.VelocityModule.speedModifier || { minMaxState: "0", scalar: "1" };
+ behaviors.push({
+ type: "SpeedOverLife",
+ speed: convertMinMaxCurve(speedModifier),
+ });
+ }
+
+ // LimitVelocityOverLife
+ if (unityPS.ClampVelocityModule && unityPS.ClampVelocityModule.enabled === "1") {
+ behaviors.push({
+ type: "LimitSpeedOverLife",
+ limitVelocity: convertMinMaxCurve(unityPS.ClampVelocityModule.magnitude),
+ dampen: parseFloat(unityPS.ClampVelocityModule.dampen || "0.1"),
+ });
+ }
+
+ // ForceOverLife (from Unity's Force module or gravity)
+ if (unityPS.ForceModule && unityPS.ForceModule.enabled === "1") {
+ behaviors.push({
+ type: "ForceOverLife",
+ force: {
+ x: parseFloat(unityPS.ForceModule.x?.scalar || "0"),
+ y: parseFloat(unityPS.ForceModule.y?.scalar || "0"),
+ z: parseFloat(unityPS.ForceModule.z?.scalar || "0"),
+ },
+ });
+ }
+
+ // ColorBySpeed
+ if (unityPS.ColorBySpeedModule && unityPS.ColorBySpeedModule.enabled === "1") {
+ const range = unityPS.ColorBySpeedModule.range;
+ const colorGradient = convertMinMaxGradient(unityPS.ColorBySpeedModule.gradient);
+
+ let colorFunction: { colorFunctionType: string; data: any };
+ if (colorGradient.type === "Gradient") {
+ colorFunction = {
+ colorFunctionType: "Gradient",
+ data: {
+ colorKeys: colorGradient.colorKeys,
+ alphaKeys: colorGradient.alphaKeys || [],
+ },
+ };
+ } else {
+ colorFunction = {
+ colorFunctionType: "ConstantColor",
+ data: { color: { r: 1, g: 1, b: 1, a: 1 } },
+ };
+ }
+
+ behaviors.push({
+ type: "ColorBySpeed",
+ color: colorFunction,
+ minSpeed: { type: "ConstantValue", value: parseFloat(range?.x || "0") },
+ maxSpeed: { type: "ConstantValue", value: parseFloat(range?.y || "1") },
+ });
+ }
+
+ // SizeBySpeed
+ if (unityPS.SizeBySpeedModule && unityPS.SizeBySpeedModule.enabled === "1") {
+ const range = unityPS.SizeBySpeedModule.range;
+ behaviors.push({
+ type: "SizeBySpeed",
+ size: convertMinMaxCurve(unityPS.SizeBySpeedModule.curve),
+ minSpeed: { type: "ConstantValue", value: parseFloat(range?.x || "0") },
+ maxSpeed: { type: "ConstantValue", value: parseFloat(range?.y || "1") },
+ });
+ }
+
+ // RotationBySpeed
+ if (unityPS.RotationBySpeedModule && unityPS.RotationBySpeedModule.enabled === "1") {
+ const range = unityPS.RotationBySpeedModule.range;
+ behaviors.push({
+ type: "RotationBySpeed",
+ angularVelocity: convertMinMaxCurve(unityPS.RotationBySpeedModule.curve),
+ minSpeed: { type: "ConstantValue", value: parseFloat(range?.x || "0") },
+ maxSpeed: { type: "ConstantValue", value: parseFloat(range?.y || "1") },
+ });
+ }
+
+ // NoiseModule (approximation)
+ if (unityPS.NoiseModule && unityPS.NoiseModule.enabled === "1") {
+ config.noiseStrength = new Vector3(
+ parseFloat(unityPS.NoiseModule.strengthX?.scalar || "0"),
+ parseFloat(unityPS.NoiseModule.strengthY?.scalar || "0"),
+ parseFloat(unityPS.NoiseModule.strengthZ?.scalar || "0")
+ );
+ }
+
+ config.behaviors = behaviors;
+
+ return config;
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/unity/resourceConverter.ts b/editor/src/editor/windows/effect-editor/converters/unity/resourceConverter.ts
new file mode 100644
index 000000000..63430f129
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/unity/resourceConverter.ts
@@ -0,0 +1,168 @@
+import { Color3 } from "@babylonjs/core/Maths/math.color";
+import { Scene } from "@babylonjs/core/scene";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
+import { Mesh } from "@babylonjs/core/Meshes/mesh";
+import { VertexData } from "@babylonjs/core/Meshes/mesh.vertexData";
+import type { IMaterial, IGeometry } from "babylonjs-editor-tools/src/effect/types";
+import * as yaml from "js-yaml";
+
+/**
+ * Convert Unity model buffer to IGeometry using Babylon.js loaders
+ */
+export async function convertUnityModel(guid: string, buffer: Buffer, extension: string, scene: Scene): Promise {
+ try {
+ // Determine MIME type based on extension
+ let mimeType = "application/octet-stream";
+ if (extension === "obj") {
+ mimeType = "text/plain";
+ } else if (extension === "fbx") {
+ mimeType = "application/octet-stream";
+ }
+
+ // Create data URL from buffer
+ const dataUrl = `data:${mimeType};base64,${buffer.toString("base64")}`;
+
+ // Import mesh using Babylon.js SceneLoader
+ const result = await SceneLoader.ImportMeshAsync("", dataUrl, "", scene);
+
+ if (!result || !result.meshes || result.meshes.length === 0) {
+ return null;
+ }
+
+ // Find the first mesh
+ const mesh = result.meshes.find((m) => m instanceof Mesh) as Mesh | undefined;
+ if (!mesh || !mesh.geometry) {
+ return null;
+ }
+
+ // Extract vertex data
+ const vertexData = VertexData.ExtractFromMesh(mesh);
+ if (!vertexData) {
+ return null;
+ }
+
+ // Convert to IGeometry format
+ const geometry: IGeometry = {
+ uuid: guid,
+ type: "BufferGeometry",
+ data: {
+ attributes: {},
+ },
+ };
+
+ // Convert positions
+ if (vertexData.positions) {
+ geometry.data!.attributes.position = {
+ array: Array.from(vertexData.positions),
+ itemSize: 3,
+ };
+ }
+
+ // Convert normals
+ if (vertexData.normals) {
+ geometry.data!.attributes.normal = {
+ array: Array.from(vertexData.normals),
+ itemSize: 3,
+ };
+ }
+
+ // Convert UVs
+ if (vertexData.uvs) {
+ geometry.data!.attributes.uv = {
+ array: Array.from(vertexData.uvs),
+ itemSize: 2,
+ };
+ }
+
+ // Convert indices
+ if (vertexData.indices) {
+ geometry.data!.index = {
+ array: Array.from(vertexData.indices),
+ };
+ }
+
+ // Cleanup: dispose imported meshes
+ for (const m of result.meshes) {
+ m.dispose();
+ }
+
+ return geometry;
+ } catch (error) {
+ console.warn(`Failed to convert Unity model ${guid}:`, error);
+ return null;
+ }
+}
+
+/**
+ * Convert Unity Material YAML to IMaterial
+ */
+export function convertUnityMaterial(guid: string, yamlContent: string, dependencies: any): IMaterial | null {
+ try {
+ // Parse Unity material YAML
+ const parsed = yaml.load(yamlContent) as any;
+ if (!parsed || !parsed.Material) {
+ return null;
+ }
+
+ const unityMat = parsed.Material;
+ const material: IMaterial = {
+ uuid: guid,
+ };
+
+ // Extract color
+ if (unityMat.m_SavedProperties?.m_Colors) {
+ const colorProps = unityMat.m_SavedProperties.m_Colors;
+ for (const colorProp of colorProps) {
+ if (colorProp._Color) {
+ const r = parseFloat(colorProp._Color.r || "1");
+ const g = parseFloat(colorProp._Color.g || "1");
+ const b = parseFloat(colorProp._Color.b || "1");
+ material.color = new Color3(r, g, b);
+ break;
+ }
+ }
+ }
+
+ // Extract texture (MainTex)
+ if (unityMat.m_SavedProperties?.m_TexEnvs) {
+ for (const texEnv of unityMat.m_SavedProperties.m_TexEnvs) {
+ if (texEnv._MainTex && texEnv._MainTex.m_Texture) {
+ const texRef = texEnv._MainTex.m_Texture;
+ const textureGuid = texRef.guid || texRef.fileID;
+ if (textureGuid && dependencies.textures?.has(textureGuid)) {
+ material.map = textureGuid; // Reference to texture UUID
+ }
+ break;
+ }
+ }
+ }
+
+ // Extract transparency
+ if (unityMat.stringTagMap?.RenderType === "Transparent") {
+ material.transparent = true;
+ }
+
+ // Extract opacity
+ if (unityMat.m_SavedProperties?.m_Colors) {
+ for (const colorProp of unityMat.m_SavedProperties.m_Colors) {
+ if (colorProp._Color && colorProp._Color.a !== undefined) {
+ material.opacity = parseFloat(colorProp._Color.a || "1");
+ break;
+ }
+ }
+ }
+
+ // Extract blending mode from shader
+ const shaderFileID = unityMat.m_Shader?.fileID;
+ if (shaderFileID) {
+ // Unity shader IDs: 200 = Standard, 203 = Unlit, etc.
+ // For now, use default blending
+ material.blending = 0; // Normal blending
+ }
+
+ return material;
+ } catch (error) {
+ console.warn(`Failed to parse Unity material ${guid}:`, error);
+ return null;
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/unity/shapeConverter.ts b/editor/src/editor/windows/effect-editor/converters/unity/shapeConverter.ts
new file mode 100644
index 000000000..410bc4933
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/unity/shapeConverter.ts
@@ -0,0 +1,43 @@
+/**
+ * Convert Unity ParticleSystem shape to our emitter shape
+ */
+export function convertShape(shapeModule: any): any {
+ if (!shapeModule || shapeModule.enabled !== "1") {
+ return { type: "point" }; // Default to point emitter
+ }
+
+ const shapeType = shapeModule.type;
+
+ switch (shapeType) {
+ case "0": // Sphere
+ return {
+ type: "sphere",
+ radius: parseFloat(shapeModule.radius?.value || "1"),
+ arc: (parseFloat(shapeModule.arc?.value || "360") / 180) * Math.PI,
+ thickness: parseFloat(shapeModule.radiusThickness || "1"),
+ };
+ case "4": // Cone
+ return {
+ type: "cone",
+ radius: parseFloat(shapeModule.radius?.value || "1"),
+ arc: (parseFloat(shapeModule.arc?.value || "360") / 180) * Math.PI,
+ thickness: parseFloat(shapeModule.radiusThickness || "1"),
+ angle: (parseFloat(shapeModule.angle?.value || "25") / 180) * Math.PI,
+ };
+ case "5": // Box
+ return {
+ type: "box",
+ width: parseFloat(shapeModule.boxThickness?.x || "1"),
+ height: parseFloat(shapeModule.boxThickness?.y || "1"),
+ depth: parseFloat(shapeModule.boxThickness?.z || "1"),
+ };
+ case "10": // Circle
+ return {
+ type: "sphere", // Use sphere with arc for circle
+ radius: parseFloat(shapeModule.radius?.value || "1"),
+ arc: (parseFloat(shapeModule.arc?.value || "360") / 180) * Math.PI,
+ };
+ default:
+ return { type: "point" };
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/unity/utils.ts b/editor/src/editor/windows/effect-editor/converters/unity/utils.ts
new file mode 100644
index 000000000..f9c970753
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/unity/utils.ts
@@ -0,0 +1,105 @@
+/**
+ * Helper utilities for Unity converter
+ */
+
+/**
+ * Helper to get component by type from GameObject
+ */
+export function getComponentByType(gameObject: any, componentType: string, components: Map): any | null {
+ if (!gameObject.m_Component) {
+ return null;
+ }
+
+ for (const compRef of gameObject.m_Component) {
+ const compId = compRef.component?.fileID || compRef.component;
+ const comp = components.get(compId);
+ if (comp && comp[componentType]) {
+ return comp[componentType];
+ }
+ }
+
+ return null;
+}
+
+/**
+ * Find root GameObject in hierarchy (Transform with no parent)
+ * Based on original Unity converter logic
+ */
+export function findRootGameObject(components: Map): string | null {
+ // Look for Transform component with m_Father.fileID === "0"
+ let transformCount = 0;
+ let gameObjectCount = 0;
+
+ for (const [_id, comp] of components) {
+ if (comp.Transform) {
+ transformCount++;
+ }
+ if (comp.GameObject) {
+ gameObjectCount++;
+ }
+
+ // Check if this component is a Transform
+ if (comp.Transform) {
+ // Check if Transform has m_Father with fileID === "0" (no parent = root)
+ if (comp.Transform.m_Father !== undefined && comp.Transform.m_Father !== null) {
+ const fatherFileID = typeof comp.Transform.m_Father === "object" ? comp.Transform.m_Father.fileID : comp.Transform.m_Father;
+ const fatherFileIDStr = String(fatherFileID);
+
+ if (fatherFileIDStr === "0") {
+ // Found root Transform, get the GameObject it belongs to
+ const gameObjectRef = comp.Transform.m_GameObject;
+ if (gameObjectRef) {
+ const gameObjectFileID = typeof gameObjectRef === "object" ? gameObjectRef.fileID : gameObjectRef;
+ const gameObjectFileIDStr = String(gameObjectFileID);
+
+ // IMPORTANT: Return the component ID (key in Map) that contains this GameObject
+ // The gameObjectFileIDStr is the fileID reference, but we need to find the component with that ID
+ // Components are stored with their YAML anchor ID as the key (e.g., "195608")
+ const gameObjectComponent = components.get(gameObjectFileIDStr);
+ if (gameObjectComponent && gameObjectComponent.GameObject) {
+ return gameObjectFileIDStr; // This is the component ID/key
+ }
+ }
+ }
+ } else if (comp.Transform.m_GameObject) {
+ // If no m_Father, it might be root (check if it's the only Transform)
+ const gameObjectRef = comp.Transform.m_GameObject;
+ const gameObjectFileID = typeof gameObjectRef === "object" ? gameObjectRef.fileID : gameObjectRef;
+ // Try this as root if we don't find one with m_Father === "0"
+ const candidate = String(gameObjectFileID);
+ // But first check if there's a Transform with explicit m_Father === "0"
+ let hasExplicitRoot = false;
+ for (const [_id2, comp2] of components) {
+ if (comp2.Transform && comp2.Transform.m_Father !== undefined && comp2.Transform.m_Father !== null) {
+ const fatherFileID2 = typeof comp2.Transform.m_Father === "object" ? comp2.Transform.m_Father.fileID : comp2.Transform.m_Father;
+ if (String(fatherFileID2) === "0") {
+ hasExplicitRoot = true;
+ break;
+ }
+ }
+ }
+ if (!hasExplicitRoot) {
+ return candidate;
+ }
+ }
+ }
+ }
+
+ // Fallback: find first GameObject if no root Transform found
+ for (const [_id, comp] of components) {
+ if (comp.GameObject) {
+ return _id; // Use component ID as GameObject ID
+ }
+ }
+
+ return null;
+}
+
+/**
+ * Unity to Babylon.js coordinate system conversion
+ * Unity: Y-up, left-handed → Babylon.js: Y-up, left-handed (same!)
+ * But Quarks was Three.js (right-handed), so no conversion needed for us
+ */
+export function convertVector3(unityVec: { x: string; y: string; z: string }): [number, number, number] {
+ return [parseFloat(unityVec.x), parseFloat(unityVec.y), parseFloat(unityVec.z)];
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/unity/valueConverter.ts b/editor/src/editor/windows/effect-editor/converters/unity/valueConverter.ts
new file mode 100644
index 000000000..77831d8eb
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/unity/valueConverter.ts
@@ -0,0 +1,108 @@
+import type { Value } from "babylonjs-editor-tools";
+
+/**
+ * Convert Unity AnimationCurve to our PiecewiseBezier Value
+ */
+export function convertAnimationCurve(curve: any, scalar: number = 1): Value {
+ const m_Curve = curve.m_Curve;
+ if (!m_Curve || m_Curve.length === 0) {
+ return { type: "ConstantValue", value: 0 };
+ }
+
+ // If only one key, return constant
+ if (m_Curve.length === 1) {
+ return { type: "ConstantValue", value: parseFloat(m_Curve[0].value) * scalar };
+ }
+
+ // Convert to PiecewiseBezier
+ const functions: Array<{
+ function: {
+ p0: number;
+ p1: number;
+ p2: number;
+ p3: number;
+ };
+ start: number;
+ }> = [];
+
+ // Add initial key if curve doesn't start at 0
+ if (m_Curve.length >= 1 && parseFloat(m_Curve[0].time) > 0) {
+ const val = parseFloat(m_Curve[0].value) * scalar;
+ functions.push({
+ function: {
+ p0: val,
+ p1: val,
+ p2: val,
+ p3: val,
+ },
+ start: 0,
+ });
+ }
+
+ // Convert each segment
+ for (let i = 0; i < m_Curve.length - 1; i++) {
+ const curr = m_Curve[i];
+ const next = m_Curve[i + 1];
+ const segmentDuration = parseFloat(next.time) - parseFloat(curr.time);
+
+ const p0 = parseFloat(curr.value) * scalar;
+ const p1 = (parseFloat(curr.value) + (parseFloat(curr.outSlope) * segmentDuration) / 3) * scalar;
+ const p2 = (parseFloat(next.value) - (parseFloat(next.inSlope) * segmentDuration) / 3) * scalar;
+ const p3 = parseFloat(next.value) * scalar;
+
+ functions.push({
+ function: {
+ p0,
+ p1,
+ p2,
+ p3,
+ },
+ start: parseFloat(curr.time),
+ });
+ }
+
+ // Add final key if curve doesn't end at 1
+ if (m_Curve.length >= 2 && parseFloat(m_Curve[m_Curve.length - 1].time) < 1) {
+ const val = parseFloat(m_Curve[m_Curve.length - 1].value) * scalar;
+ functions.push({
+ function: {
+ p0: val,
+ p1: val,
+ p2: val,
+ p3: val,
+ },
+ start: parseFloat(m_Curve[m_Curve.length - 1].time),
+ });
+ }
+
+ return {
+ type: "PiecewiseBezier",
+ functions,
+ };
+}
+
+/**
+ * Convert Unity MinMaxCurve to our Value
+ */
+export function convertMinMaxCurve(minMaxCurve: any): Value {
+ const minMaxState = minMaxCurve.minMaxState;
+ const scalar = parseFloat(minMaxCurve.scalar || "1");
+
+ switch (minMaxState) {
+ case "0": // Constant
+ return { type: "ConstantValue", value: scalar };
+ case "1": // Curve
+ return convertAnimationCurve(minMaxCurve.maxCurve, scalar);
+ case "2": // Random between two constants
+ return {
+ type: "IntervalValue",
+ min: parseFloat(minMaxCurve.minScalar || "0") * scalar,
+ max: scalar,
+ };
+ case "3": // Random between two curves
+ // For now, just use max curve (proper implementation would need RandomColor equivalent for Value)
+ return convertAnimationCurve(minMaxCurve.maxCurve, scalar);
+ default:
+ return { type: "ConstantValue", value: scalar };
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/unityConverter.ts b/editor/src/editor/windows/effect-editor/converters/unityConverter.ts
new file mode 100644
index 000000000..046fb0abe
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/unityConverter.ts
@@ -0,0 +1,187 @@
+/**
+ * Unity Prefab → Babylon.js Effect Converter
+ *
+ * Converts Unity particle system prefabs directly to our Babylon.js effect format,
+ * bypassing the Quarks JSON intermediate step.
+ *
+ * Based on extracted Unity → Quarks converter logic, but outputs IData format.
+ */
+
+import { Scene } from "@babylonjs/core/scene";
+import type { IData, IEmitter, IGroup, IMaterial, ITexture, IImage, IGeometry } from "babylonjs-editor-tools/src/effect/types";
+import { findRootGameObject } from "./unity/utils";
+import { convertGameObject, convertToIDataFormat } from "./unity/gameObjectConverter";
+import { convertUnityModel, convertUnityMaterial } from "./unity/resourceConverter";
+
+/**
+ * Convert Unity prefab components to IData
+ *
+ * @param components - Already parsed Unity components Map (parsed in modal)
+ * @param dependencies - Optional dependencies (textures, materials, models, sounds)
+ * @param scene - Babylon.js Scene for loading models (required for model parsing)
+ * @returns IData structure ready for our Effect system
+ */
+export async function convertUnityPrefabToData(
+ components: Map,
+ dependencies?: {
+ textures?: Map;
+ materials?: Map;
+ models?: Map;
+ sounds?: Map;
+ meta?: Map;
+ },
+ scene?: Scene
+): Promise {
+ // Validate components is a Map
+ if (!(components instanceof Map)) {
+ console.error("convertUnityPrefabToData: components must be a Map, got:", typeof components, components);
+ throw new Error("components must be a Map");
+ }
+
+ let root: IGroup | IEmitter | null = null;
+
+ // Find root GameObject
+ const rootGameObjectId = findRootGameObject(components);
+ if (!rootGameObjectId) {
+ console.warn("No root GameObject found in Unity prefab");
+ return {
+ root: null,
+ materials: [],
+ textures: [],
+ images: [],
+ geometries: [],
+ };
+ }
+
+ const rootComponent = components.get(rootGameObjectId);
+ if (!rootComponent) {
+ return {
+ root: null,
+ materials: [],
+ textures: [],
+ images: [],
+ geometries: [],
+ };
+ }
+
+ // Get GameObject from component (could be rootComponent.GameObject or rootComponent itself)
+ const gameObject = rootComponent.GameObject || rootComponent;
+ if (!gameObject || (typeof gameObject === "object" && !gameObject.m_Name && !gameObject.m_Component)) {
+ // Try to find GameObject component directly
+ for (const [_id, comp] of components) {
+ if (comp.GameObject && comp.GameObject.m_Name) {
+ const foundGameObject = comp.GameObject;
+ if (foundGameObject.m_Component) {
+ const converted = convertGameObject(foundGameObject, components);
+ root = convertToIDataFormat(converted);
+ break;
+ }
+ }
+ }
+
+ if (!root) {
+ return {
+ root: null,
+ materials: [],
+ textures: [],
+ images: [],
+ geometries: [],
+ };
+ }
+ } else {
+ // Convert root GameObject and its hierarchy recursively
+ const converted = convertGameObject(gameObject, components);
+ root = convertToIDataFormat(converted);
+ }
+
+ // Process dependencies if provided
+ const materials: IMaterial[] = [];
+ const textures: ITexture[] = [];
+ const images: IImage[] = [];
+ const geometries: IGeometry[] = [];
+
+ if (dependencies) {
+ // Convert materials from YAML to IData format
+ if (dependencies.materials) {
+ for (const [guid, yamlContent] of dependencies.materials) {
+ try {
+ const material = convertUnityMaterial(guid, yamlContent, dependencies);
+ if (material) {
+ materials.push(material);
+ }
+ } catch (error) {
+ console.warn(`Failed to convert material ${guid}:`, error);
+ }
+ }
+ }
+
+ // Convert textures to IData format
+ if (dependencies.textures) {
+ for (const [guid, buffer] of dependencies.textures) {
+ // Create image entry for texture
+ const imageId = `image-${guid}`;
+ images.push({
+ uuid: imageId,
+ url: `data:image/png;base64,${buffer.toString("base64")}`, // Convert buffer to data URL
+ });
+
+ // Create texture entry
+ textures.push({
+ uuid: guid,
+ image: imageId,
+ wrapU: 0, // Repeat
+ wrapV: 0, // Repeat
+ generateMipmaps: true,
+ flipY: false,
+ });
+ }
+ }
+
+ // Convert models to IData format (for mesh particles)
+ // Parse models using Babylon.js loaders if Scene is provided
+ if (dependencies.models && scene) {
+ for (const [guid, buffer] of dependencies.models) {
+ // Determine file extension from meta
+ const meta = dependencies.meta?.get(guid);
+ const path = meta?.path || "";
+ const ext = path.split(".").pop()?.toLowerCase() || "fbx";
+
+ try {
+ const geometry = await convertUnityModel(guid, buffer, ext, scene);
+ if (geometry) {
+ geometries.push(geometry);
+ } else {
+ // Fallback: store placeholder if parsing failed
+ geometries.push({
+ uuid: guid,
+ type: "BufferGeometry",
+ });
+ }
+ } catch (error) {
+ console.warn(`Failed to parse model ${guid}:`, error);
+ // Fallback: store placeholder
+ geometries.push({
+ uuid: guid,
+ type: "BufferGeometry",
+ });
+ }
+ }
+ } else if (dependencies.models) {
+ // If no Scene provided, store placeholders (models will be loaded later)
+ for (const [guid] of dependencies.models) {
+ geometries.push({
+ uuid: guid,
+ type: "BufferGeometry",
+ });
+ }
+ }
+ }
+
+ return {
+ root,
+ materials,
+ textures,
+ images,
+ geometries,
+ };
+}
diff --git a/editor/src/editor/windows/effect-editor/editors/bezier.tsx b/editor/src/editor/windows/effect-editor/editors/bezier.tsx
new file mode 100644
index 000000000..104acf0f7
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/editors/bezier.tsx
@@ -0,0 +1,546 @@
+import { Component, ReactNode, MouseEvent } from "react";
+import { EditorInspectorNumberField } from "../../../layout/inspector/fields/number";
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../ui/shadcn/ui/dropdown-menu";
+import { HiOutlineArrowPath } from "react-icons/hi2";
+import { Button } from "../../../../ui/shadcn/ui/button";
+
+export interface IBezierCurve {
+ p0: number;
+ p1: number;
+ p2: number;
+ p3: number;
+ start: number;
+}
+
+export interface IBezierEditorProps {
+ value: any;
+ onChange: () => void;
+}
+
+export interface IBezierEditorState {
+ curve: IBezierCurve;
+ dragging: boolean;
+ dragPoint: "p0" | "p1" | "p2" | "p3" | null;
+ hoveredPoint: "p0" | "p1" | "p2" | "p3" | null;
+ width: number;
+ height: number;
+ showValues: boolean;
+}
+
+type CurvePreset = "linear" | "easeIn" | "easeOut" | "easeInOut" | "easeInBack" | "easeOutBack";
+
+const CURVE_PRESETS: Record = {
+ linear: { p0: 0, p1: 0, p2: 1, p3: 1, start: 0 },
+ easeIn: { p0: 0, p1: 0.42, p2: 1, p3: 1, start: 0 },
+ easeOut: { p0: 0, p1: 0, p2: 0.58, p3: 1, start: 0 },
+ easeInOut: { p0: 0, p1: 0.42, p2: 0.58, p3: 1, start: 0 },
+ easeInBack: { p0: 0, p1: -0.36, p2: 0.36, p3: 1, start: 0 },
+ easeOutBack: { p0: 0, p1: 0.64, p2: 1.36, p3: 1, start: 0 },
+};
+
+export class BezierEditor extends Component {
+ private _svgRef: SVGSVGElement | null = null;
+ private _containerRef: HTMLDivElement | null = null;
+
+ public constructor(props: IBezierEditorProps) {
+ super(props);
+ this.state = {
+ curve: this._getCurveFromValue(),
+ dragging: false,
+ dragPoint: null,
+ hoveredPoint: null,
+ width: 400,
+ height: 250,
+ showValues: false,
+ };
+ }
+
+ public componentDidMount(): void {
+ this._updateDimensions();
+ window.addEventListener("resize", this._updateDimensions);
+ }
+
+ public componentWillUnmount(): void {
+ window.removeEventListener("resize", this._updateDimensions);
+ }
+
+ private _updateDimensions = (): void => {
+ if (this._containerRef) {
+ const rect = this._containerRef.getBoundingClientRect();
+ this.setState({
+ width: Math.max(300, rect.width - 20),
+ height: 250,
+ });
+ }
+ };
+
+ private _getCurveFromValue(): IBezierCurve {
+ if (!this.props.value || !this.props.value.data) {
+ return CURVE_PRESETS.linear;
+ }
+
+ // Support both old format (array) and new format (direct object)
+ if (this.props.value.data.functions && Array.isArray(this.props.value.data.functions)) {
+ const firstFunction = this.props.value.data.functions[0];
+ if (firstFunction && firstFunction.function) {
+ return {
+ p0: firstFunction.function.p0 ?? 0,
+ p1: firstFunction.function.p1 ?? 1.0 / 3,
+ p2: firstFunction.function.p2 ?? (1.0 / 3) * 2,
+ p3: firstFunction.function.p3 ?? 1,
+ start: 0,
+ };
+ }
+ }
+
+ // New format: direct function object
+ if (this.props.value.data.function) {
+ return {
+ p0: this.props.value.data.function.p0 ?? 0,
+ p1: this.props.value.data.function.p1 ?? 1.0 / 3,
+ p2: this.props.value.data.function.p2 ?? (1.0 / 3) * 2,
+ p3: this.props.value.data.function.p3 ?? 1,
+ start: 0,
+ };
+ }
+
+ return CURVE_PRESETS.linear;
+ }
+
+ private _saveCurveToValue(): void {
+ if (!this.props.value) {
+ return;
+ }
+
+ if (!this.props.value.data) {
+ this.props.value.data = {};
+ }
+
+ // Save as direct function object (not array)
+ this.props.value.data.function = {
+ p0: Math.max(0, Math.min(1, this.state.curve.p0)),
+ p1: Math.max(0, Math.min(1, this.state.curve.p1)),
+ p2: Math.max(0, Math.min(1, this.state.curve.p2)),
+ p3: Math.max(0, Math.min(1, this.state.curve.p3)),
+ };
+ }
+
+ private _applyPreset(preset: CurvePreset): void {
+ const presetCurve = CURVE_PRESETS[preset];
+ this.setState({ curve: { ...presetCurve } }, () => {
+ this._saveCurveToValue();
+ this.props.onChange();
+ });
+ }
+
+ private _screenToSvg(clientX: number, clientY: number): { x: number; y: number } {
+ if (!this._svgRef) {
+ return { x: 0, y: 0 };
+ }
+
+ const rect = this._svgRef.getBoundingClientRect();
+ const vb = this._svgRef.viewBox?.baseVal;
+ if (!vb) {
+ return {
+ x: clientX - rect.left,
+ y: clientY - rect.top,
+ };
+ }
+
+ const scaleX = rect.width / vb.width;
+ const scaleY = rect.height / vb.height;
+ const useScale = Math.min(scaleX, scaleY);
+
+ const offsetX = (rect.width - vb.width * useScale) / 2;
+ const offsetY = (rect.height - vb.height * useScale) / 2;
+
+ return {
+ x: (clientX - rect.left - offsetX) / useScale,
+ y: (clientY - rect.top - offsetY) / useScale,
+ };
+ }
+
+ private _valueToSvgY(value: number): number {
+ // Map value from [0, 1] to SVG Y coordinate
+ // Center is at height/2, full range is height * 0.8 (40% above and below center)
+ const padding = this.state.height * 0.1;
+ const range = this.state.height * 0.8;
+ return padding + (1 - value) * range;
+ }
+
+ private _svgYToValue(svgY: number): number {
+ const padding = this.state.height * 0.1;
+ const range = this.state.height * 0.8;
+ return Math.max(0, Math.min(1, (this.state.height - svgY - padding) / range));
+ }
+
+ private _handleMouseDown = (ev: MouseEvent, point: "p0" | "p1" | "p2" | "p3"): void => {
+ ev.stopPropagation();
+ if (ev.button !== 0) {
+ return;
+ }
+
+ this.setState({
+ dragging: true,
+ dragPoint: point,
+ });
+
+ let mouseMoveListener: (event: globalThis.MouseEvent) => void;
+ let mouseUpListener: (event: globalThis.MouseEvent) => void;
+
+ mouseMoveListener = (ev: globalThis.MouseEvent) => {
+ if (!this.state.dragging || !this.state.dragPoint) {
+ return;
+ }
+
+ const svgPos = this._screenToSvg(ev.clientX, ev.clientY);
+ const value = this._svgYToValue(svgPos.y);
+
+ const curve = { ...this.state.curve };
+
+ if (this.state.dragPoint === "p0") {
+ curve.p0 = value;
+ } else if (this.state.dragPoint === "p1") {
+ curve.p1 = value;
+ } else if (this.state.dragPoint === "p2") {
+ curve.p2 = value;
+ } else if (this.state.dragPoint === "p3") {
+ curve.p3 = value;
+ }
+
+ this.setState({ curve });
+ };
+
+ mouseUpListener = () => {
+ document.body.removeEventListener("mousemove", mouseMoveListener);
+ document.body.removeEventListener("mouseup", mouseUpListener);
+ document.body.style.cursor = "";
+
+ this._saveCurveToValue();
+ this.props.onChange();
+
+ this.setState({
+ dragging: false,
+ dragPoint: null,
+ });
+ };
+
+ document.body.style.cursor = "move";
+ document.body.addEventListener("mousemove", mouseMoveListener);
+ document.body.addEventListener("mouseup", mouseUpListener);
+ };
+
+ private _bezierValue(t: number, p0: number, p1: number, p2: number, p3: number): number {
+ const t2 = t * t;
+ const t3 = t2 * t;
+ const mt = 1 - t;
+ const mt2 = mt * mt;
+ const mt3 = mt2 * mt;
+ return p0 * mt3 + p1 * mt2 * t * 3 + p2 * mt * t2 * 3 + p3 * t3;
+ }
+
+ private _renderCurve(curve: IBezierCurve): ReactNode {
+ const segments = 100;
+ const pathData: string[] = [];
+ const gradientId = `gradient-${Math.random().toString(36).substr(2, 9)}`;
+
+ // Calculate actual Bezier curve points
+ // For cubic Bezier: B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃
+ // But we're using p0, p1, p2, p3 as control values, not positions
+ // We need to map them to actual control points
+ const p0X = 0;
+ const p0Y = this._valueToSvgY(curve.p0);
+ const p1X = this.state.width / 3;
+ const p1Y = this._valueToSvgY(curve.p1);
+ const p2X = (this.state.width * 2) / 3;
+ const p2Y = this._valueToSvgY(curve.p2);
+ const p3X = this.state.width;
+ const p3Y = this._valueToSvgY(curve.p3);
+
+ // Generate curve path
+ for (let i = 0; i <= segments; i++) {
+ const t = i / segments;
+ const x = t * this.state.width;
+ const y = this._bezierValue(t, p0Y, p1Y, p2Y, p3Y);
+
+ if (i === 0) {
+ pathData.push(`M ${x} ${y}`);
+ } else {
+ pathData.push(`L ${x} ${y}`);
+ }
+ }
+
+ const isHovered = (point: "p0" | "p1" | "p2" | "p3") => this.state.hoveredPoint === point || this.state.dragPoint === point;
+ const getPointRadius = (point: "p0" | "p1" | "p2" | "p3") => {
+ if (point === "p0" || point === "p3") {
+ return isHovered(point) ? 7 : 5;
+ }
+ return isHovered(point) ? 6 : 4;
+ };
+ const getPointColor = (point: "p0" | "p1" | "p2" | "p3") => {
+ if (point === "p0" || point === "p3") {
+ return isHovered(point) ? "#3b82f6" : "#2563eb";
+ }
+ return isHovered(point) ? "#8b5cf6" : "#7c3aed";
+ };
+
+ return (
+
+
+
+
+
+
+ {/* Filled area under curve */}
+
+ {/* Outer glow when hovered */}
+ {isHovered(point) && this._handleMouseDown(ev, point)}
+ onMouseEnter={() => this.setState({ hoveredPoint: point, showValues: true })}
+ onMouseLeave={() => this.setState({ hoveredPoint: null, showValues: false })}
+ />
+ {/* Value label */}
+ {isHovered(point) && (
+
+ {value.toFixed(2)}
+
+ )}
+
+ );
+ })}
+
+ );
+ }
+
+ private _renderGrid(): ReactNode {
+ const gridLines: ReactNode[] = [];
+
+ // Horizontal grid lines (value markers)
+ for (let i = 0; i <= 10; i++) {
+ const value = i / 10;
+ const y = this._valueToSvgY(value);
+ const isMainLine = i % 5 === 0;
+
+ gridLines.push(
+
+
+ {value.toFixed(1)}
+
+ )}
+
+ );
+ }
+
+ // Vertical grid lines (time markers)
+ for (let i = 0; i <= 10; i++) {
+ const t = i / 10;
+ const x = t * this.state.width;
+ const isMainLine = i % 5 === 0;
+
+ gridLines.push(
+
+
+ {t.toFixed(1)}
+
+ )}
+
+ );
+ }
+
+ // Center line (value = 0.5)
+ gridLines.push(
+ {gridLines} ;
+ }
+
+ public render(): ReactNode {
+ return (
+ {
+ // Reset data when type changes and initialize defaults
+ const newType = value.colorFunctionType;
+ value.data = {};
+ if (newType === "ConstantColor") {
+ value.data.color = new Color4(1, 1, 1, 1);
+ } else if (newType === "ColorRange") {
+ value.data.colorA = new Color4(0, 0, 0, 1);
+ value.data.colorB = new Color4(1, 1, 1, 1);
+ } else if (newType === "Gradient") {
+ value.data.colorKeys = [
+ { pos: 0, value: [0, 0, 0, 1] },
+ { pos: 1, value: [1, 1, 1, 1] },
+ ];
+ value.data.alphaKeys = [
+ { pos: 0, value: 1 },
+ { pos: 1, value: 1 },
+ ];
+ } else if (newType === "RandomColor") {
+ value.data.colorA = new Color4(0, 0, 0, 1);
+ value.data.colorB = new Color4(1, 1, 1, 1);
+ } else if (newType === "RandomColorBetweenGradient") {
+ value.data.gradient1 = {
+ colorKeys: [
+ { pos: 0, value: [0, 0, 0, 1] },
+ { pos: 1, value: [1, 1, 1, 1] },
+ ],
+ alphaKeys: [
+ { pos: 0, value: 1 },
+ { pos: 1, value: 1 },
+ ],
+ };
+ value.data.gradient2 = {
+ colorKeys: [
+ { pos: 0, value: [1, 0, 0, 1] },
+ { pos: 1, value: [0, 1, 0, 1] },
+ ],
+ alphaKeys: [
+ { pos: 0, value: 1 },
+ { pos: 1, value: 1 },
+ ],
+ };
+ }
+ onChange();
+ }}
+ />
+
+ {functionType === "ConstantColor" && (
+ <>
+ {!value.data.color && (value.data.color = new Color4(1, 1, 1, 1))}
+ {
+ value.data.colorKeys = newColorKeys;
+ value.data.alphaKeys = newAlphaKeys;
+ onChange();
+ }}
+ />
+ );
+ })()}
+
+ {functionType === "RandomColor" && (
+ <>
+ {!value.data.colorA && (value.data.colorA = new Color4(0, 0, 0, 1))}
+ {!value.data.colorB && (value.data.colorB = new Color4(1, 1, 1, 1))}
+
+ {
+ value.data.gradient1.colorKeys = newColorKeys;
+ value.data.gradient1.alphaKeys = newAlphaKeys;
+ onChange();
+ }}
+ />
+
+
+ {
+ value.data.gradient2.colorKeys = newColorKeys;
+ value.data.gradient2.alphaKeys = newAlphaKeys;
+ onChange();
+ }}
+ />
+
+
+ );
+ })()}
+
+ );
+}
diff --git a/editor/src/editor/windows/effect-editor/editors/color.tsx b/editor/src/editor/windows/effect-editor/editors/color.tsx
new file mode 100644
index 000000000..3a412aa8f
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/editors/color.tsx
@@ -0,0 +1,325 @@
+import { ReactNode } from "react";
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+
+import { EditorInspectorColorField } from "../../../layout/inspector/fields/color";
+import { EditorInspectorColorGradientField } from "../../../layout/inspector/fields/gradient";
+import { EditorInspectorListField } from "../../../layout/inspector/fields/list";
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+
+import { type Color, parseConstantColor } from "babylonjs-editor-tools";
+
+export type EffectColorType = "ConstantColor" | "ColorRange" | "Gradient" | "RandomColor" | "RandomColorBetweenGradient";
+
+export interface IEffectColorEditorProps {
+ value: Color | undefined;
+ onChange: (newValue: Color) => void;
+ label?: string;
+}
+
+/**
+ * Editor for VEffectColor (ConstantColor, ColorRange, Gradient, RandomColor, RandomColorBetweenGradient)
+ * Works directly with VEffectColor types, not wrappers
+ */
+export function EffectColorEditor(props: IEffectColorEditorProps): ReactNode {
+ const { value, onChange, label } = props;
+
+ // Determine current type from value
+ let currentType: EffectColorType = "ConstantColor";
+ if (value) {
+ if (typeof value === "string" || Array.isArray(value)) {
+ currentType = "ConstantColor";
+ } else if ("type" in value) {
+ if (value.type === "ConstantColor") {
+ currentType = "ConstantColor";
+ } else if (value.type === "ColorRange") {
+ currentType = "ColorRange";
+ } else if (value.type === "Gradient") {
+ currentType = "Gradient";
+ } else if (value.type === "RandomColor") {
+ currentType = "RandomColor";
+ } else if (value.type === "RandomColorBetweenGradient") {
+ currentType = "RandomColorBetweenGradient";
+ }
+ }
+ }
+
+ const typeItems = [
+ { text: "Color", value: "ConstantColor" },
+ { text: "Color Range", value: "ColorRange" },
+ { text: "Gradient", value: "Gradient" },
+ { text: "Random Color", value: "RandomColor" },
+ { text: "Random Between Gradient", value: "RandomColorBetweenGradient" },
+ ];
+
+ // Wrapper object for EditorInspectorListField
+ const wrapper = {
+ get type() {
+ return currentType;
+ },
+ set type(newType: EffectColorType) {
+ currentType = newType;
+ // Convert value to new type
+ let newValue: Color;
+ const currentColor = value ? parseConstantColor(value) : new Color4(1, 1, 1, 1);
+ if (newType === "ConstantColor") {
+ newValue = { type: "ConstantColor", value: [currentColor.r, currentColor.g, currentColor.b, currentColor.a] };
+ } else if (newType === "ColorRange") {
+ newValue = {
+ type: "ColorRange",
+ colorA: [currentColor.r, currentColor.g, currentColor.b, currentColor.a],
+ colorB: [1, 1, 1, 1],
+ };
+ } else if (newType === "Gradient") {
+ newValue = {
+ type: "Gradient",
+ colorKeys: [
+ { pos: 0, value: [currentColor.r, currentColor.g, currentColor.b, currentColor.a] },
+ { pos: 1, value: [1, 1, 1, 1] },
+ ],
+ alphaKeys: [
+ { pos: 0, value: currentColor.a },
+ { pos: 1, value: 1 },
+ ],
+ };
+ } else if (newType === "RandomColor") {
+ newValue = {
+ type: "RandomColor",
+ colorA: [currentColor.r, currentColor.g, currentColor.b, currentColor.a],
+ colorB: [1, 1, 1, 1],
+ };
+ } else {
+ // RandomColorBetweenGradient
+ newValue = {
+ type: "RandomColorBetweenGradient",
+ gradient1: {
+ colorKeys: [
+ { pos: 0, value: [currentColor.r, currentColor.g, currentColor.b, currentColor.a] },
+ { pos: 1, value: [1, 1, 1, 1] },
+ ],
+ alphaKeys: [
+ { pos: 0, value: currentColor.a },
+ { pos: 1, value: 1 },
+ ],
+ },
+ gradient2: {
+ colorKeys: [
+ { pos: 0, value: [1, 0, 0, 1] },
+ { pos: 1, value: [0, 1, 0, 1] },
+ ],
+ alphaKeys: [
+ { pos: 0, value: 1 },
+ { pos: 1, value: 1 },
+ ],
+ },
+ };
+ }
+ onChange(newValue);
+ },
+ };
+
+ return (
+ <>
+ {
+ // Type change is handled by setter
+ }}
+ />
+
+ {currentType === "ConstantColor" && (
+ <>
+ {(() => {
+ const constantColor = value ? parseConstantColor(value) : new Color4(1, 1, 1, 1);
+ const wrapperColor = {
+ get color() {
+ return constantColor;
+ },
+ set color(newColor: Color4) {
+ onChange({ type: "ConstantColor", value: [newColor.r, newColor.g, newColor.b, newColor.a] });
+ },
+ };
+ return {}} />;
+ })()}
+
+ )}
+
+ {currentType === "ColorRange" && (
+ <>
+ {(() => {
+ const colorRange = value && typeof value === "object" && "type" in value && value.type === "ColorRange" ? value : null;
+ const colorA = colorRange ? new Color4(colorRange.colorA[0], colorRange.colorA[1], colorRange.colorA[2], colorRange.colorA[3]) : new Color4(0, 0, 0, 1);
+ const colorB = colorRange ? new Color4(colorRange.colorB[0], colorRange.colorB[1], colorRange.colorB[2], colorRange.colorB[3]) : new Color4(1, 1, 1, 1);
+ const wrapperRange = {
+ get colorA() {
+ return colorA;
+ },
+ set colorA(newColor: Color4) {
+ const currentB = colorRange ? colorRange.colorB : [1, 1, 1, 1];
+ onChange({ type: "ColorRange", colorA: [newColor.r, newColor.g, newColor.b, newColor.a], colorB: currentB as [number, number, number, number] });
+ },
+ get colorB() {
+ return colorB;
+ },
+ set colorB(newColor: Color4) {
+ const currentA = colorRange ? colorRange.colorA : [0, 0, 0, 1];
+ onChange({
+ type: "ColorRange",
+ colorA: currentA as [number, number, number, number],
+ colorB: [newColor.r, newColor.g, newColor.b, newColor.a] as [number, number, number, number],
+ });
+ },
+ };
+ return (
+ <>
+ {}} />
+ {}} />
+
+ );
+ })()}
+
+ )}
+
+ {currentType === "Gradient" &&
+ (() => {
+ const gradientValue = value && typeof value === "object" && "type" in value && value.type === "Gradient" ? value : null;
+ const defaultColorKeys = [
+ { pos: 0, value: [0, 0, 0, 1] },
+ { pos: 1, value: [1, 1, 1, 1] },
+ ];
+ const defaultAlphaKeys = [
+ { pos: 0, value: 1 },
+ { pos: 1, value: 1 },
+ ];
+ const wrapperGradient = {
+ colorKeys: gradientValue?.colorKeys || defaultColorKeys,
+ alphaKeys: gradientValue?.alphaKeys || defaultAlphaKeys,
+ };
+ return (
+ {
+ onChange({
+ type: "Gradient",
+ colorKeys: newColorKeys,
+ alphaKeys: newAlphaKeys,
+ });
+ }}
+ />
+ );
+ })()}
+
+ {currentType === "RandomColor" && (
+ <>
+ {(() => {
+ const randomColor = value && typeof value === "object" && "type" in value && value.type === "RandomColor" ? value : null;
+ const colorA = randomColor
+ ? new Color4(randomColor.colorA[0], randomColor.colorA[1], randomColor.colorA[2], randomColor.colorA[3])
+ : new Color4(0, 0, 0, 1);
+ const colorB = randomColor
+ ? new Color4(randomColor.colorB[0], randomColor.colorB[1], randomColor.colorB[2], randomColor.colorB[3])
+ : new Color4(1, 1, 1, 1);
+ const wrapperRandom = {
+ get colorA() {
+ return colorA;
+ },
+ set colorA(newColor: Color4) {
+ const currentB = randomColor ? randomColor.colorB : [1, 1, 1, 1];
+ onChange({ type: "RandomColor", colorA: [newColor.r, newColor.g, newColor.b, newColor.a], colorB: currentB as [number, number, number, number] });
+ },
+ get colorB() {
+ return colorB;
+ },
+ set colorB(newColor: Color4) {
+ const currentA = randomColor ? randomColor.colorA : [0, 0, 0, 1];
+ onChange({
+ type: "RandomColor",
+ colorA: currentA as [number, number, number, number],
+ colorB: [newColor.r, newColor.g, newColor.b, newColor.a] as [number, number, number, number],
+ });
+ },
+ };
+ return (
+ <>
+ {}} />
+ {}} />
+
+ );
+ })()}
+
+ )}
+
+ {currentType === "RandomColorBetweenGradient" &&
+ (() => {
+ const randomGradient = value && typeof value === "object" && "type" in value && value.type === "RandomColorBetweenGradient" ? value : null;
+ const defaultColorKeys = [
+ { pos: 0, value: [0, 0, 0, 1] },
+ { pos: 1, value: [1, 1, 1, 1] },
+ ];
+ const defaultAlphaKeys = [
+ { pos: 0, value: 1 },
+ { pos: 1, value: 1 },
+ ];
+
+ const wrapperGradient1 = {
+ colorKeys: randomGradient?.gradient1?.colorKeys || defaultColorKeys,
+ alphaKeys: randomGradient?.gradient1?.alphaKeys || defaultAlphaKeys,
+ };
+
+ const wrapperGradient2 = {
+ colorKeys: randomGradient?.gradient2?.colorKeys || defaultColorKeys,
+ alphaKeys: randomGradient?.gradient2?.alphaKeys || defaultAlphaKeys,
+ };
+
+ return (
+ <>
+
+ {
+ if (randomGradient) {
+ onChange({
+ type: "RandomColorBetweenGradient",
+ gradient1: {
+ colorKeys: newColorKeys,
+ alphaKeys: newAlphaKeys,
+ },
+ gradient2: randomGradient.gradient2,
+ });
+ }
+ }}
+ />
+
+
+ {
+ if (randomGradient) {
+ onChange({
+ type: "RandomColorBetweenGradient",
+ gradient1: randomGradient.gradient1,
+ gradient2: {
+ colorKeys: newColorKeys,
+ alphaKeys: newAlphaKeys,
+ },
+ });
+ }
+ }}
+ />
+
+
+ );
+ })()}
+
+ );
+}
diff --git a/editor/src/editor/windows/effect-editor/editors/function.tsx b/editor/src/editor/windows/effect-editor/editors/function.tsx
new file mode 100644
index 000000000..88acb9d27
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/editors/function.tsx
@@ -0,0 +1,130 @@
+import { ReactNode } from "react";
+
+import { EditorInspectorNumberField } from "../../../layout/inspector/fields/number";
+import { EditorInspectorListField } from "../../../layout/inspector/fields/list";
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+
+import { BezierEditor } from "./bezier";
+
+export type FunctionType = "ConstantValue" | "IntervalValue" | "PiecewiseBezier" | "Vector3Function";
+
+export interface IFunctionEditorProps {
+ value: any;
+ onChange: () => void;
+ availableTypes?: FunctionType[];
+ label: string;
+}
+
+export function FunctionEditor(props: IFunctionEditorProps): ReactNode {
+ const { value, onChange, availableTypes, label } = props;
+
+ // Default available types if not specified
+ const types = availableTypes || ["ConstantValue", "IntervalValue", "PiecewiseBezier", "Vector3Function"];
+
+ // Initialize function type if not set
+ if (!value || !value.functionType) {
+ value.functionType = types[0];
+ value.data = {};
+ }
+
+ const functionType = value.functionType as FunctionType;
+
+ // Ensure data object exists
+ if (!value.data) {
+ value.data = {};
+ }
+
+ const typeItems = types.map((type) => ({
+ text: type,
+ value: type,
+ }));
+
+ return (
+ <>
+ {
+ // Reset data when type changes and initialize defaults
+ const newType = value.functionType;
+ value.data = {};
+ if (newType === "ConstantValue") {
+ value.data.value = 1.0;
+ } else if (newType === "IntervalValue") {
+ value.data.min = 0;
+ value.data.max = 1;
+ } else if (newType === "PiecewiseBezier") {
+ value.data.function = { p0: 0, p1: 1.0 / 3, p2: (1.0 / 3) * 2, p3: 1 };
+ } else if (newType === "Vector3Function") {
+ value.data.x = { functionType: "ConstantValue", data: { value: 0 } };
+ value.data.y = { functionType: "ConstantValue", data: { value: 0 } };
+ value.data.z = { functionType: "ConstantValue", data: { value: 0 } };
+ }
+ onChange();
+ }}
+ />
+
+ {functionType === "ConstantValue" && (
+ <>
+ {value.data.value === undefined && (value.data.value = 1.0)}
+
+
+
+ )}
+
+ {functionType === "PiecewiseBezier" && (
+ <>
+ {!value.data.function && (value.data.function = { p0: 0, p1: 1.0 / 3, p2: (1.0 / 3) * 2, p3: 1 })}
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/editor/src/editor/windows/effect-editor/editors/index.ts b/editor/src/editor/windows/effect-editor/editors/index.ts
new file mode 100644
index 000000000..15478b643
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/editors/index.ts
@@ -0,0 +1,6 @@
+export * from "./value";
+export * from "./color";
+export * from "./rotation";
+export * from "./function";
+export * from "./color-function";
+export * from "./bezier";
diff --git a/editor/src/editor/windows/effect-editor/editors/rotation.tsx b/editor/src/editor/windows/effect-editor/editors/rotation.tsx
new file mode 100644
index 000000000..6593efadd
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/editors/rotation.tsx
@@ -0,0 +1,318 @@
+import { ReactNode } from "react";
+
+import { EditorInspectorListField } from "../../../layout/inspector/fields/list";
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+
+import { type Rotation, type IEulerRotation, type IAxisAngleRotation, type IRandomQuatRotation, parseConstantValue, type Value } from "babylonjs-editor-tools";
+import { EffectValueEditor } from "./value";
+
+export type EffectRotationType = IEulerRotation["type"] | IAxisAngleRotation["type"] | IRandomQuatRotation["type"];
+
+export interface IEffectRotationEditorProps {
+ value: Rotation | undefined;
+ onChange: (newValue: Rotation) => void;
+ label?: string;
+}
+
+/**
+ * Editor for VEffectRotation (Euler, AxisAngle, RandomQuat)
+ * Works directly with VEffectRotation types, not wrappers
+ */
+export function EffectRotationEditor(props: IEffectRotationEditorProps): ReactNode {
+ const { value, onChange, label } = props;
+
+ // Determine current type from value
+ let currentType: EffectRotationType = "Euler";
+ if (value) {
+ if (
+ typeof value === "number" ||
+ (typeof value === "object" && "type" in value && (value.type === "ConstantValue" || value.type === "IntervalValue" || value.type === "PiecewiseBezier"))
+ ) {
+ // Simple VEffectValue - convert to Euler
+ currentType = "Euler";
+ } else if (typeof value === "object" && "type" in value) {
+ if (value.type === "Euler") {
+ currentType = "Euler";
+ } else if (value.type === "AxisAngle") {
+ currentType = "AxisAngle";
+ } else if (value.type === "RandomQuat") {
+ currentType = "RandomQuat";
+ }
+ }
+ }
+
+ const typeItems = [
+ { text: "Euler", value: "Euler" },
+ { text: "Axis Angle", value: "AxisAngle" },
+ { text: "Random Quat", value: "RandomQuat" },
+ ];
+
+ // Wrapper object for EditorInspectorListField
+ const wrapper = {
+ get type() {
+ return currentType;
+ },
+ set type(newType: EffectRotationType) {
+ currentType = newType;
+ // Convert value to new type
+ let newValue: Rotation;
+ if (newType === "Euler") {
+ // Convert current value to Euler
+ if (value && typeof value === "object" && "type" in value && value.type === "Euler") {
+ newValue = value;
+ } else {
+ const angleZ = value ? (typeof value === "number" ? value : parseConstantValue(value as Value)) : 0;
+ newValue = {
+ type: "Euler",
+ angleZ: { type: "ConstantValue", value: angleZ },
+ order: "xyz",
+ };
+ }
+ } else if (newType === "AxisAngle") {
+ // Convert to AxisAngle
+ const angle = value ? (typeof value === "number" ? value : parseConstantValue(value as Value)) : 0;
+ newValue = {
+ type: "AxisAngle",
+ x: { type: "ConstantValue", value: 0 },
+ y: { type: "ConstantValue", value: 0 },
+ z: { type: "ConstantValue", value: 1 },
+ angle: { type: "ConstantValue", value: angle },
+ };
+ } else {
+ // RandomQuat
+ newValue = { type: "RandomQuat" };
+ }
+ onChange(newValue);
+ },
+ };
+
+ return (
+ <>
+ {
+ // Type change is handled by setter
+ }}
+ />
+
+ {currentType === "Euler" && (
+ <>
+ {(() => {
+ const eulerValue = value && typeof value === "object" && "type" in value && value.type === "Euler" ? value : null;
+ const angleX = eulerValue?.angleX || { type: "ConstantValue" as const, value: 0 };
+ const angleY = eulerValue?.angleY || { type: "ConstantValue" as const, value: 0 };
+ const angleZ = eulerValue?.angleZ || { type: "ConstantValue" as const, value: 0 };
+ const order = eulerValue?.order || "xyz";
+
+ const orderWrapper = {
+ get order() {
+ return order;
+ },
+ set order(newOrder: "xyz" | "zyx") {
+ if (eulerValue) {
+ onChange({ ...eulerValue, order: newOrder });
+ } else {
+ onChange({
+ type: "Euler",
+ angleX,
+ angleY,
+ angleZ,
+ order: newOrder,
+ });
+ }
+ },
+ };
+
+ return (
+ <>
+ {}}
+ />
+
+ {
+ if (eulerValue) {
+ onChange({ ...eulerValue, angleX: newAngleX as Value });
+ } else {
+ onChange({
+ type: "Euler",
+ angleX: newAngleX as Value,
+ angleY,
+ angleZ,
+ order,
+ });
+ }
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ step={0.1}
+ />
+
+
+ {
+ if (eulerValue) {
+ onChange({ ...eulerValue, angleY: newAngleY as Value });
+ } else {
+ onChange({
+ type: "Euler",
+ angleX,
+ angleY: newAngleY as Value,
+ angleZ,
+ order,
+ });
+ }
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ step={0.1}
+ />
+
+
+ {
+ if (eulerValue) {
+ onChange({ ...eulerValue, angleZ: newAngleZ as Value });
+ } else {
+ onChange({
+ type: "Euler",
+ angleX,
+ angleY,
+ angleZ: newAngleZ as Value,
+ order,
+ });
+ }
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ step={0.1}
+ />
+
+
+ );
+ })()}
+
+ )}
+
+ {currentType === "AxisAngle" && (
+ <>
+ {(() => {
+ const axisAngleValue = value && typeof value === "object" && "type" in value && value.type === "AxisAngle" ? value : null;
+ const x = axisAngleValue?.x || { type: "ConstantValue" as const, value: 0 };
+ const y = axisAngleValue?.y || { type: "ConstantValue" as const, value: 0 };
+ const z = axisAngleValue?.z || { type: "ConstantValue" as const, value: 1 };
+ const angle = axisAngleValue?.angle || { type: "ConstantValue" as const, value: 0 };
+
+ return (
+ <>
+
+ {
+ if (axisAngleValue) {
+ onChange({ ...axisAngleValue, x: newX as Value });
+ } else {
+ onChange({
+ type: "AxisAngle",
+ x: newX as Value,
+ y,
+ z,
+ angle,
+ });
+ }
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ step={0.1}
+ />
+
+
+ {
+ if (axisAngleValue) {
+ onChange({ ...axisAngleValue, y: newY as Value });
+ } else {
+ onChange({
+ type: "AxisAngle",
+ x,
+ y: newY as Value,
+ z,
+ angle,
+ });
+ }
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ step={0.1}
+ />
+
+
+ {
+ if (axisAngleValue) {
+ onChange({ ...axisAngleValue, z: newZ as Value });
+ } else {
+ onChange({
+ type: "AxisAngle",
+ x,
+ y,
+ z: newZ as Value,
+ angle,
+ });
+ }
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ step={0.1}
+ />
+
+
+ {
+ if (axisAngleValue) {
+ onChange({ ...axisAngleValue, angle: newAngle as Value });
+ } else {
+ onChange({
+ type: "AxisAngle",
+ x,
+ y,
+ z,
+ angle: newAngle as Value,
+ });
+ }
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ step={0.1}
+ />
+
+
+ );
+ })()}
+
+ )}
+
+ {currentType === "RandomQuat" && (
+ <>
+ ;
+import { BezierEditor } from "./bezier";
+
+// Vec3Function is a custom editor extension, not part of the core Value type
+export type EffectValueType = IConstantValue["type"] | IIntervalValue["type"] | PiecewiseBezier["type"] | "Vec3Function";
+
+export interface IVec3Function {
+ type: "Vec3Function";
+ x: Value;
+ y: Value;
+ z: Value;
+}
+
+export interface IEffectValueEditorProps {
+ value: Value | IVec3Function | undefined;
+ onChange: (newValue: Value | IVec3Function) => void;
+ label?: string;
+ availableTypes?: EffectValueType[];
+ min?: number;
+ step?: number;
+}
+
+/**
+ * Editor for VEffectValue (ConstantValue, IntervalValue, PiecewiseBezier, Vec3Function)
+ * Works directly with VEffectValue types, not wrappers
+ */
+export function EffectValueEditor(props: IEffectValueEditorProps): ReactNode {
+ const { value, onChange, label, availableTypes, min, step } = props;
+
+ const types = availableTypes || ["ConstantValue", "IntervalValue", "PiecewiseBezier"];
+
+ // Determine current type from value
+ let currentType: EffectValueType = "ConstantValue";
+ if (value) {
+ if (typeof value === "number") {
+ currentType = "ConstantValue";
+ } else if ("type" in value) {
+ if (value.type === "Vec3Function") {
+ currentType = "Vec3Function";
+ } else if (value.type === "ConstantValue") {
+ currentType = "ConstantValue";
+ } else if (value.type === "IntervalValue") {
+ currentType = "IntervalValue";
+ } else if (value.type === "PiecewiseBezier") {
+ currentType = "PiecewiseBezier";
+ }
+ }
+ }
+
+ const typeItems = types.map((type) => ({
+ text: type,
+ value: type,
+ }));
+
+ // Wrapper object for EditorInspectorListField
+ const wrapper = {
+ get type() {
+ return currentType;
+ },
+ set type(newType: EffectValueType) {
+ currentType = newType;
+ // Convert value to new type
+ let newValue: Value | IVec3Function;
+ if (newType === "ConstantValue") {
+ const currentValue =
+ value && typeof value !== "number" && "type" in value && value.type !== "Vec3Function"
+ ? parseConstantValue(value as Value)
+ : typeof value === "number"
+ ? value
+ : 1;
+ newValue = { type: "ConstantValue", value: currentValue };
+ } else if (newType === "IntervalValue") {
+ const interval = value && typeof value !== "number" && "type" in value && value.type !== "Vec3Function" ? parseIntervalValue(value as Value) : { min: 0, max: 1 };
+ newValue = { type: "IntervalValue", min: interval.min, max: interval.max };
+ } else if (newType === "Vec3Function") {
+ const currentValue =
+ value && typeof value !== "number" && "type" in value && value.type !== "Vec3Function"
+ ? parseConstantValue(value as Value)
+ : typeof value === "number"
+ ? value
+ : 1;
+ newValue = {
+ type: "Vec3Function",
+ x: { type: "ConstantValue", value: currentValue },
+ y: { type: "ConstantValue", value: currentValue },
+ z: { type: "ConstantValue", value: currentValue },
+ };
+ } else {
+ // PiecewiseBezier - convert from current value
+ const currentValue =
+ value && typeof value !== "number" && "type" in value && value.type !== "Vec3Function"
+ ? parseConstantValue(value as Value)
+ : typeof value === "number"
+ ? value
+ : 1;
+ newValue = {
+ type: "PiecewiseBezier",
+ functions: [
+ {
+ function: { p0: currentValue, p1: currentValue, p2: currentValue, p3: currentValue },
+ start: 0,
+ },
+ ],
+ };
+ }
+ onChange(newValue);
+ },
+ };
+
+ return (
+ <>
+ {
+ // Type change is handled by setter
+ }}
+ />
+
+ {currentType === "ConstantValue" && (
+ <>
+ {(() => {
+ const constantValue =
+ value && typeof value !== "number" && "type" in value && value.type !== "Vec3Function"
+ ? parseConstantValue(value as Value)
+ : typeof value === "number"
+ ? value
+ : 1;
+ const wrapperValue = {
+ get value() {
+ return constantValue;
+ },
+ set value(newVal: number) {
+ onChange({ type: "ConstantValue", value: newVal });
+ },
+ };
+ return (
+ {
+ // Value change is handled by setter
+ }}
+ />
+ );
+ })()}
+
+ )}
+
+ {currentType === "IntervalValue" && (
+ <>
+ {(() => {
+ const interval =
+ value && typeof value !== "number" && "type" in value && value.type !== "Vec3Function" ? parseIntervalValue(value as Value) : { min: 0, max: 1 };
+ const wrapperInterval = {
+ get min() {
+ return interval.min;
+ },
+ set min(newMin: number) {
+ const currentMax = value && typeof value !== "number" && "type" in value && value.type === "IntervalValue" ? value.max : interval.max;
+ onChange({ type: "IntervalValue", min: newMin, max: currentMax });
+ },
+ get max() {
+ return interval.max;
+ },
+ set max(newMax: number) {
+ const currentMin = value && typeof value !== "number" && "type" in value && value.type === "IntervalValue" ? value.min : interval.min;
+ onChange({ type: "IntervalValue", min: currentMin, max: newMax });
+ },
+ };
+ return (
+
+
+ );
+ })()}
+
+ )}
+
+ {currentType === "PiecewiseBezier" && (
+ <>
+ {(() => {
+ // Convert VEffectValue to wrapper format for BezierEditor
+ const bezierValue = value && typeof value !== "number" && "type" in value && value.type === "PiecewiseBezier" ? value : null;
+ const wrapperBezier = {
+ get functionType() {
+ return "PiecewiseBezier";
+ },
+ set functionType(_: string) {},
+ get data() {
+ if (!bezierValue || bezierValue.functions.length === 0) {
+ return {
+ function: { p0: 1, p1: 1.0 / 3, p2: (1.0 / 3) * 2, p3: 1 },
+ };
+ }
+ // Use first function for editing
+ return {
+ function: bezierValue.functions[0].function,
+ };
+ },
+ set data(newData: any) {
+ // Update first function or create new
+ if (!bezierValue) {
+ onChange({
+ type: "PiecewiseBezier",
+ functions: [
+ {
+ function: newData.function || { p0: 1, p1: 1.0 / 3, p2: (1.0 / 3) * 2, p3: 1 },
+ start: 0,
+ },
+ ],
+ });
+ } else {
+ const newFunctions = [...bezierValue.functions];
+ newFunctions[0] = {
+ ...newFunctions[0],
+ function: newData.function || newFunctions[0].function,
+ };
+ onChange({
+ type: "PiecewiseBezier",
+ functions: newFunctions,
+ });
+ }
+ },
+ };
+ return {}} />;
+ })()}
+
+ )}
+
+ {currentType === "Vec3Function" && (
+ <>
+ {(() => {
+ const vec3Value = value && typeof value !== "number" && "type" in value && value.type === "Vec3Function" ? value : null;
+ const currentX = vec3Value ? vec3Value.x : { type: "ConstantValue" as const, value: 1 };
+ const currentY = vec3Value ? vec3Value.y : { type: "ConstantValue" as const, value: 1 };
+ const currentZ = vec3Value ? vec3Value.z : { type: "ConstantValue" as const, value: 1 };
+ return (
+ <>
+
+ {
+ onChange({
+ type: "Vec3Function",
+ x: newX as Value,
+ y: currentY,
+ z: currentZ,
+ });
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ min={min}
+ step={step}
+ />
+
+
+ {
+ onChange({
+ type: "Vec3Function",
+ x: currentX,
+ y: newY as Value,
+ z: currentZ,
+ });
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ min={min}
+ step={step}
+ />
+
+
+ {
+ onChange({
+ type: "Vec3Function",
+ x: currentX,
+ y: currentY,
+ z: newZ as Value,
+ });
+ }}
+ availableTypes={["ConstantValue", "IntervalValue", "PiecewiseBezier"]}
+ min={min}
+ step={step}
+ />
+
+
+ );
+ })()}
+
+ )}
+
+ );
+}
diff --git a/editor/src/editor/windows/effect-editor/graph.tsx b/editor/src/editor/windows/effect-editor/graph.tsx
new file mode 100644
index 000000000..79f54d396
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/graph.tsx
@@ -0,0 +1,1034 @@
+import { Component, ReactNode } from "react";
+import { Tree, TreeNodeInfo } from "@blueprintjs/core";
+
+import { AiOutlinePlus, AiOutlineClose } from "react-icons/ai";
+import { IoSparklesSharp } from "react-icons/io5";
+import { HiOutlineFolder } from "react-icons/hi2";
+
+import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuTrigger,
+ ContextMenuSeparator,
+ ContextMenuSub,
+ ContextMenuSubTrigger,
+ ContextMenuSubContent,
+} from "../../../ui/shadcn/ui/context-menu";
+import { IEffectEditor } from ".";
+import { saveSingleFileDialog } from "../../../tools/dialog";
+import { readJSON, writeJSON } from "fs-extra";
+import { toast } from "sonner";
+import {
+ Effect,
+ type IEffectNode,
+ EffectSolidParticleSystem,
+ EffectParticleSystem,
+ type IData,
+ type IGroup,
+ type IEmitter,
+ type ITransform,
+ type IParticleSystemConfig,
+ deserializeData,
+} from "babylonjs-editor-tools";
+import { IQuarksJSON } from "./converters/quarks/types";
+import { QuarksConverter } from "./converters";
+import { basename, dirname } from "path";
+import { Quaternion } from "@babylonjs/core/Maths/math.vector";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+
+export interface IEffectEditorGraphProps {
+ filePath: string | null;
+ onNodeSelected?: (nodeId: string | number | null) => void;
+ editor: IEffectEditor;
+}
+
+export interface IEffectEditorGraphState {
+ nodes: TreeNodeInfo[];
+ selectedNodeId: string | number | null;
+}
+
+interface IEffectInfo {
+ id: string;
+ name: string;
+ effect: Effect;
+ data: IData; // Store full IData including resources for serialization
+}
+
+/**
+ * Effect file format with metadata and multiple effects
+ */
+export interface IEffectFile {
+ version: string;
+ effects: IEffectData[];
+}
+
+/**
+ * Single effect data in the file
+ */
+interface IEffectData {
+ id: string;
+ name: string;
+ data: IData;
+}
+
+export class EffectEditorGraph extends Component {
+ private _effects: Map = new Map();
+ /** Map of node instances to unique IDs for tree nodes */
+ private _nodeIdMap: Map = new Map();
+
+ public constructor(props: IEffectEditorGraphProps) {
+ super(props);
+
+ this.state = {
+ nodes: [],
+ selectedNodeId: null,
+ };
+ }
+
+ /**
+ * Get the first effect (for backward compatibility)
+ */
+ public getEffect(): Effect | null {
+ const firstEffect = this._effects.values().next().value;
+ return firstEffect ? firstEffect.effect : null;
+ }
+
+ /**
+ * Get all effects
+ */
+ public getAllEffects(): Effect[] {
+ return Array.from(this._effects.values()).map((info) => info.effect);
+ }
+
+ /**
+ * Get effect by ID
+ */
+ public getEffectById(id: string): Effect | null {
+ const info = this._effects.get(id);
+ return info ? info.effect : null;
+ }
+
+ /**
+ * Finds a node in the tree by ID
+ */
+ private _findNodeById(nodes: TreeNodeInfo[], nodeId: string | number): TreeNodeInfo | null {
+ for (const node of nodes) {
+ if (node.id === nodeId) {
+ return node;
+ }
+ if (node.childNodes) {
+ const found = this._findNodeById(node.childNodes, nodeId);
+ if (found) {
+ return found;
+ }
+ }
+ }
+ return null;
+ }
+
+ /**
+ * Gets node data by ID from tree
+ */
+ public getNodeData(nodeId: string | number): IEffectNode | null {
+ const node = this._findNodeById(this.state.nodes, nodeId);
+ return node?.nodeData || null;
+ }
+
+ public componentDidMount(): void {}
+
+ public componentDidUpdate(_prevProps: IEffectEditorGraphProps): void {}
+
+ /**
+ * Loads nodes from Quarks JSON file
+ */
+ public async loadFromQuarksFile(filePath: string): Promise {
+ try {
+ if (!this.props.editor.preview?.scene) {
+ console.error("Scene is not available");
+ return;
+ }
+
+ const dirnamePath = dirname(filePath);
+ const originalJsonData = await readJSON(filePath);
+
+ const parser = new QuarksConverter();
+ const parseResult = parser.convert(originalJsonData as IQuarksJSON);
+
+ const effect = new Effect(parseResult, this.props.editor.preview.scene, dirnamePath + "/");
+
+ const effectId = `effect-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+ const effectName = basename(filePath, ".json") || "Effect";
+
+ this._effects.set(effectId, {
+ id: effectId,
+ name: effectName,
+ effect: effect,
+ data: parseResult,
+ });
+
+ this._rebuildTree();
+
+ effect.start();
+
+ setTimeout(() => {
+ if (this.props.editor?.preview) {
+ (this.props.editor.preview as any).forceUpdate?.();
+ }
+ }, 100);
+ } catch (error) {
+ console.error("Failed to load Effect file:", error);
+ }
+ }
+ /**
+ * Loads nodes from JSON file
+ */
+ public async loadFromFile(filePath: string): Promise {
+ try {
+ if (!this.props.editor.preview?.scene) {
+ console.error("Scene is not available");
+ return;
+ }
+
+ const dirnamePath = dirname(filePath);
+ const fileData = await readJSON(filePath);
+
+ // Check if it's new format (IEffectFile) or old format (IData)
+ if (fileData.version && fileData.effects) {
+ // New format: IEffectFile
+ const effectFile = fileData as IEffectFile;
+ this._effects.clear();
+
+ for (const effectData of effectFile.effects) {
+ // Deserialize data to ensure proper Color4, Vector3, Quaternion instances
+ const deserializedData = deserializeData(effectData.data);
+ const effect = new Effect(deserializedData, this.props.editor.preview!.scene, dirnamePath + "/");
+ this._effects.set(effectData.id, {
+ id: effectData.id,
+ name: effectData.name,
+ effect: effect,
+ data: deserializedData,
+ });
+ effect.start();
+ }
+ } else {
+ // Old format: IData (backward compatibility)
+ // Deserialize data to ensure proper Color4, Vector3, Quaternion instances
+ const deserializedData = deserializeData(fileData as IData);
+ const effect = new Effect(deserializedData, this.props.editor.preview!.scene, dirnamePath + "/");
+
+ const effectId = `effect-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+ const fileName = basename(filePath);
+ const effectName = fileName.replace(/\.(fx|json)$/, "") || "Effect";
+
+ this._effects.set(effectId, {
+ id: effectId,
+ name: effectName,
+ effect: effect,
+ data: deserializedData,
+ });
+
+ effect.start();
+ }
+
+ this._rebuildTree();
+
+ setTimeout(() => {
+ if (this.props.editor?.preview) {
+ (this.props.editor.preview as any).forceUpdate?.();
+ }
+ }, 100);
+ } catch (error) {
+ console.error("Failed to load Effect file:", error);
+ toast.error(`Failed to load Effect file: ${error instanceof Error ? error.message : String(error)}`);
+ }
+ }
+
+ /**
+ * Load effect from Unity IData (converted from prefab)
+ */
+ public async loadFromUnityData(data: any, prefabName: string): Promise {
+ try {
+ if (!this.props.editor.preview?.scene) {
+ console.error("Scene is not available");
+ return;
+ }
+
+ // Create effect from IData
+ const effectName = prefabName.replace(".prefab", "").split("/").pop() || "Unity Effect";
+ const effect = new Effect(data, this.props.editor.preview.scene);
+
+ // Generate unique ID for effect
+ const effectId = `unity-effect-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+
+ // Store effect with data
+ this._effects.set(effectId, {
+ id: effectId,
+ name: effectName,
+ effect: effect,
+ data: data,
+ });
+
+ // Rebuild tree with all effects
+ this._rebuildTree();
+
+ // Start systems
+ effect.start();
+
+ // Notify preview to sync playing state
+ setTimeout(() => {
+ if (this.props.editor?.preview) {
+ (this.props.editor.preview as any).forceUpdate?.();
+ }
+ }, 100);
+ } catch (error) {
+ console.error("Failed to load Unity prefab:", error);
+ throw error;
+ }
+ }
+
+ /**
+ * Rebuild tree from all effects
+ */
+ private _rebuildTree(): void {
+ // Clear node ID map when rebuilding tree to ensure unique IDs
+ this._nodeIdMap.clear();
+
+ const nodes: TreeNodeInfo[] = [];
+
+ for (const [effectId, effectInfo] of this._effects.entries()) {
+ if (effectInfo.effect.root) {
+ // Use effect root directly as the tree node, but update its name to effect name
+ effectInfo.effect.root.name = effectInfo.name;
+ effectInfo.effect.root.uuid = effectId;
+
+ const treeNode = this._convertNodeToTreeNode(effectInfo.effect.root, true);
+ nodes.push(treeNode);
+ }
+ }
+
+ this.setState({ nodes });
+ }
+
+ /**
+ * Generate unique ID for a node
+ */
+ private _generateUniqueNodeId(Node: IEffectNode): string {
+ // Check if we already have an ID for this node instance
+ if (this._nodeIdMap.has(Node)) {
+ return this._nodeIdMap.get(Node)!;
+ }
+
+ // Generate unique ID
+ const uniqueId = `node-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+ this._nodeIdMap.set(Node, uniqueId);
+ return uniqueId;
+ }
+
+ /**
+ * Converts IEffectNode to TreeNodeInfo recursively
+ */
+ private _convertNodeToTreeNode(Node: IEffectNode, isEffectRoot: boolean = false): TreeNodeInfo {
+ // Always use unique ID instead of uuid or name
+ const nodeId = this._generateUniqueNodeId(Node);
+ const childNodes = Node.children.length > 0 ? Node.children.map((child) => this._convertNodeToTreeNode(child, false)) : undefined;
+
+ // Check if solid particle system
+ const isSolid = Node.data instanceof EffectSolidParticleSystem;
+
+ // Determine icon based on node type (sparkles for all particles, with color coding)
+ let icon: JSX.Element;
+ if (isEffectRoot) {
+ icon = []): TreeNodeInfo[] {
+ return nodes.map((n) => {
+ const nodeName = n.nodeData?.name || "Unknown";
+ const childNodes = n.childNodes ? this._updateAllNodeNames(n.childNodes) : undefined;
+ return {
+ ...n,
+ label: this._getNodeLabelComponent(n, nodeName),
+ childNodes,
+ };
+ });
+ }
+
+ public render(): ReactNode {
+ return (
+ ): void {
+ const nodeId = node.id;
+ const nodes = this._updateNodeExpanded(this.state.nodes, nodeId as string | number, true);
+ this.setState({ nodes });
+ }
+
+ private _handleNodeCollapsed(node: TreeNodeInfo): void {
+ const nodeId = node.id;
+ const nodes = this._updateNodeExpanded(this.state.nodes, nodeId as string | number, false);
+ this.setState({ nodes });
+ }
+
+ private _updateNodeExpanded(nodes: TreeNodeInfo[], nodeId: string | number, isExpanded: boolean): TreeNodeInfo[] {
+ return nodes.map((n) => {
+ const nodeName = n.nodeData?.name || "Unknown";
+ if (n.id === nodeId) {
+ return {
+ ...n,
+ label: this._getNodeLabelComponent(n, nodeName),
+ isExpanded,
+ childNodes: n.childNodes ? this._updateNodeExpanded(n.childNodes, nodeId, isExpanded) : undefined,
+ };
+ }
+ const childNodes = n.childNodes ? this._updateNodeExpanded(n.childNodes, nodeId, isExpanded) : undefined;
+ return {
+ ...n,
+ label: this._getNodeLabelComponent(n, nodeName),
+ childNodes,
+ };
+ });
+ }
+
+ private _handleNodeClicked(node: TreeNodeInfo): void {
+ const selectedId = node.id as string | number;
+ const nodes = this._updateNodeSelection(this.state.nodes, selectedId);
+ this.setState({ nodes, selectedNodeId: selectedId });
+ this.props.onNodeSelected?.(selectedId);
+ }
+
+ private _updateNodeSelection(nodes: TreeNodeInfo[], selectedId: string | number): TreeNodeInfo[] {
+ return nodes.map((n) => {
+ const nodeName = n.nodeData?.name || "Unknown";
+ const isSelected = n.id === selectedId;
+ const childNodes = n.childNodes ? this._updateNodeSelection(n.childNodes, selectedId) : undefined;
+ return {
+ ...n,
+ label: this._getNodeLabelComponent(n, nodeName),
+ isSelected,
+ childNodes,
+ };
+ });
+ }
+
+ private _getNodeLabelComponent(node: TreeNodeInfo, name: string): JSX.Element {
+ const label = (
+
+ {label}
+
+
+
+
+
+ {node.nodeData?.type === "group" && (
+ <>
+ {
+ ev.dataTransfer.setData("Effect-editor/create-item", "base-particle");
+ }}
+ onClick={() => this._handleAddParticleSystemToNode(node, "base")}
+ >
+
+ {
+ ev.dataTransfer.setData("Effect-editor/create-item", "solid-particle");
+ }}
+ onClick={() => this._handleAddParticleSystemToNode(node, "solid")}
+ >
+
+ {
+ ev.dataTransfer.setData("Effect-editor/create-item", "group");
+ }}
+ onClick={() => this._handleAddGroupToNode(node)}
+ >
+
+
+ )}
+
+
+ {this._isEffectRootNode(node) && (
+ <>
+ this._handleExportEffect(node)}>Export
+
+ )}
+ this._handleDeleteNode(node)}>
+
+
+
+ );
+ }
+
+ /**
+ * Check if node is an effect root node
+ */
+ private _isEffectRootNode(node: TreeNodeInfo): boolean {
+ const nodeData = node.nodeData;
+ if (!nodeData || !nodeData.uuid) {
+ return false;
+ }
+
+ // Check if this node is the root of any effect
+ return this._effects.has(nodeData.uuid);
+ }
+
+ /**
+ * Export effect to JSON file
+ */
+ private async _handleExportEffect(node: TreeNodeInfo): Promise {
+ const nodeData = node.nodeData;
+ if (!nodeData || !nodeData.uuid) {
+ return;
+ }
+
+ const effectInfo = this._effects.get(nodeData.uuid);
+ if (!effectInfo || !effectInfo.data) {
+ toast.error("Cannot export effect: data not available");
+ return;
+ }
+
+ const filePath = saveSingleFileDialog({
+ title: "Export Effect",
+ filters: [{ name: "Effect Files", extensions: ["effect"] }],
+ defaultPath: `${effectInfo.name}.effect`,
+ });
+
+ if (!filePath) {
+ return;
+ }
+
+ try {
+ // Serialize current state of the effect
+ const serializedData = this._serializeEffectToData(effectInfo);
+ await writeJSON(filePath, serializedData, {
+ spaces: "\t",
+ encoding: "utf-8",
+ });
+
+ toast.success(`Effect exported successfully to ${filePath}`);
+ } catch (error) {
+ console.error("Failed to export effect:", error);
+ toast.error(`Failed to export effect: ${error instanceof Error ? error.message : String(error)}`);
+ }
+ }
+
+ /**
+ * Serialize IEffectNode tree back to IData format
+ */
+ private _serializeNodeToData(node: IEffectNode): IGroup | IEmitter | null {
+ if (node.type === "group") {
+ const transformNode = node.data as TransformNode;
+ const transform: ITransform = {
+ position: transformNode.position.clone(),
+ rotation: transformNode.rotationQuaternion ? transformNode.rotationQuaternion.clone() : Quaternion.Identity(),
+ scale: transformNode.scaling.clone(),
+ };
+
+ const group: IGroup = {
+ uuid: node.uuid,
+ name: node.name,
+ transform,
+ children: node.children.map((child) => this._serializeNodeToData(child)).filter((child): child is IGroup | IEmitter => child !== null),
+ };
+
+ return group;
+ } else if (node.type === "particle") {
+ const system = node.data as EffectParticleSystem | EffectSolidParticleSystem;
+ const emitter = system.emitter as TransformNode;
+ const transform: ITransform = {
+ position: emitter.position.clone(),
+ rotation: emitter.rotationQuaternion ? emitter.rotationQuaternion.clone() : Quaternion.Identity(),
+ scale: emitter.scaling.clone(),
+ };
+
+ const config = this._serializeSystemToConfig(system);
+
+ const emitterData: IEmitter = {
+ uuid: node.uuid,
+ name: node.name,
+ transform,
+ config,
+ systemType: system instanceof EffectSolidParticleSystem ? "solid" : "base",
+ };
+
+ return emitterData;
+ }
+
+ return null;
+ }
+
+ /**
+ * Serialize particle system to IParticleSystemConfig
+ */
+ private _serializeSystemToConfig(system: EffectParticleSystem | EffectSolidParticleSystem): IParticleSystemConfig {
+ const config: IParticleSystemConfig = {
+ systemType: system instanceof EffectSolidParticleSystem ? "solid" : "base",
+ minSize: system.minSize,
+ maxSize: system.maxSize,
+ minLifeTime: system.minLifeTime,
+ maxLifeTime: system.maxLifeTime,
+ minEmitPower: system.minEmitPower,
+ maxEmitPower: system.maxEmitPower,
+ emitRate: system.emitRate,
+ targetStopDuration: system.targetStopDuration,
+ manualEmitCount: system.manualEmitCount,
+ preWarmCycles: system.preWarmCycles,
+ preWarmStepOffset: system.preWarmStepOffset,
+ color1: system.color1,
+ color2: system.color2,
+ colorDead: system.colorDead,
+ minInitialRotation: system.minInitialRotation,
+ maxInitialRotation: system.maxInitialRotation,
+ isLocal: system.isLocal,
+ disposeOnStop: system.disposeOnStop,
+ gravity: system.gravity,
+ noiseStrength: system.noiseStrength,
+ minAngularSpeed: system.minAngularSpeed,
+ maxAngularSpeed: system.maxAngularSpeed,
+ minScaleX: system.minScaleX,
+ maxScaleX: system.maxScaleX,
+ minScaleY: system.minScaleY,
+ maxScaleY: system.maxScaleY,
+ };
+
+ // Add behaviors
+ if (system.behaviorConfigs && system.behaviorConfigs.length > 0) {
+ config.behaviors = [...system.behaviorConfigs];
+ }
+
+ // Add gradients if available (would need to extract from gradient systems)
+ // For now, we'll rely on behaviors for gradient data
+
+ return config;
+ }
+
+ /**
+ * Serialize a single effect to IData format
+ */
+ private _serializeEffectToData(effectInfo: IEffectInfo): IData {
+ if (!effectInfo.effect.root) {
+ return {
+ root: null,
+ materials: effectInfo.data.materials || [],
+ textures: effectInfo.data.textures || [],
+ images: effectInfo.data.images || [],
+ geometries: effectInfo.data.geometries || [],
+ };
+ }
+
+ const rootData = this._serializeNodeToData(effectInfo.effect.root);
+ return {
+ root: rootData,
+ materials: effectInfo.data.materials || [],
+ textures: effectInfo.data.textures || [],
+ images: effectInfo.data.images || [],
+ geometries: effectInfo.data.geometries || [],
+ };
+ }
+
+ /**
+ * Serialize all effects to file format
+ */
+ public serializeToFileFormat(): IEffectFile {
+ const effects: IEffectData[] = [];
+
+ for (const [effectId, effectInfo] of this._effects.entries()) {
+ const effectData = this._serializeEffectToData(effectInfo);
+
+ effects.push({
+ id: effectId,
+ name: effectInfo.name,
+ data: effectData,
+ });
+
+ // Update stored data with serialized version
+ effectInfo.data = effectData;
+ }
+
+ return {
+ version: "1.0.0",
+ effects,
+ };
+ }
+
+ private _handleCreateEffect(): void {
+ if (!this.props.editor.preview?.scene) {
+ console.error("Scene is not available");
+ return;
+ }
+
+ // Create empty effect with empty IData
+ const emptyData: IData = {
+ root: null,
+ materials: [],
+ textures: [],
+ images: [],
+ geometries: [],
+ };
+ const effect = new Effect(emptyData, this.props.editor.preview.scene);
+
+ // Generate unique ID and name for effect
+ const effectId = `effect-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+ let effectName = "Effect";
+ let counter = 1;
+ while (Array.from(this._effects.values()).some((info) => info.name === effectName)) {
+ effectName = `Effect ${counter}`;
+ counter++;
+ }
+
+ // Store effect with the same empty data
+ this._effects.set(effectId, {
+ id: effectId,
+ name: effectName,
+ effect: effect,
+ data: emptyData,
+ });
+
+ // Rebuild tree with all effects
+ this._rebuildTree();
+ }
+
+ private _findEffectForNode(node: TreeNodeInfo): Effect | null {
+ // Find the effect that contains this node by traversing up the tree
+ const nodeData = node.nodeData;
+ if (!nodeData) {
+ return null;
+ }
+
+ // First check if this is an effect root node
+ if (nodeData.uuid) {
+ const effectInfo = this._effects.get(nodeData.uuid);
+ if (effectInfo) {
+ return effectInfo.effect;
+ }
+ }
+
+ // Find effect by checking if node is in any effect's hierarchy
+ for (const effectInfo of this._effects.values()) {
+ const effect = effectInfo.effect;
+ if (effect.root) {
+ // Check if node is part of this effect's hierarchy
+ const findNodeInHierarchy = (current: IEffectNode): boolean => {
+ // Use instance comparison and uuid for matching
+ if (current === nodeData || (current.uuid && nodeData.uuid && current.uuid === nodeData.uuid)) {
+ return true;
+ }
+ for (const child of current.children) {
+ if (findNodeInHierarchy(child)) {
+ return true;
+ }
+ }
+ return false;
+ };
+
+ if (findNodeInHierarchy(effect.root)) {
+ return effect;
+ }
+ }
+ }
+
+ return null;
+ }
+
+ private _handleAddParticleSystemToNode(node: TreeNodeInfo, systemType: "solid" | "base"): void {
+ const effect = this._findEffectForNode(node);
+ if (!effect) {
+ console.error("No effect found for node");
+ return;
+ }
+
+ const nodeData = node.nodeData;
+ if (!nodeData || nodeData.type !== "group") {
+ console.error("Cannot add particle system: parent is not a group");
+ return;
+ }
+
+ const newNode = effect.createParticleSystem(nodeData, systemType);
+ if (newNode) {
+ // Rebuild tree with all effects
+ this._rebuildTree();
+ }
+ }
+
+ private _handleAddGroupToNode(node: TreeNodeInfo): void {
+ const effect = this._findEffectForNode(node);
+ if (!effect) {
+ console.error("No effect found for node");
+ return;
+ }
+
+ const nodeData = node.nodeData;
+ if (!nodeData || nodeData.type !== "group") {
+ console.error("Cannot add group: parent is not a group");
+ return;
+ }
+
+ const newNode = effect.createGroup(nodeData);
+ if (newNode) {
+ // Rebuild tree with all effects
+ this._rebuildTree();
+ }
+ }
+
+ private _handleDropEmpty(ev: React.DragEvent): void {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ try {
+ const data = ev.dataTransfer.getData("Effect-editor/create-effect");
+ if (data === "effect") {
+ this._handleCreateEffect();
+ }
+ } catch (e) {
+ // Ignore errors
+ }
+ }
+
+ private _handleDropOnNode(node: TreeNodeInfo, ev: React.DragEvent): void {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ if (!node.nodeData || node.nodeData.type !== "group") {
+ return;
+ }
+
+ try {
+ const data = ev.dataTransfer.getData("Effect-editor/create-item");
+ if (data === "solid-particle") {
+ this._handleAddParticleSystemToNode(node, "solid");
+ } else if (data === "base-particle") {
+ this._handleAddParticleSystemToNode(node, "base");
+ } else if (data === "group") {
+ this._handleAddGroupToNode(node);
+ }
+ } catch (e) {
+ // Ignore errors
+ }
+ }
+
+ private _addNodeToParent(nodes: TreeNodeInfo[], parentId: string | number, newNode: TreeNodeInfo): TreeNodeInfo[] {
+ return nodes.map((n) => {
+ if (n.id === parentId) {
+ const childNodes = n.childNodes || [];
+ return {
+ ...n,
+ childNodes: [...childNodes, newNode],
+ hasCaret: true,
+ isExpanded: true,
+ };
+ }
+ if (n.childNodes) {
+ return {
+ ...n,
+ childNodes: this._addNodeToParent(n.childNodes, parentId, newNode),
+ };
+ }
+ return n;
+ });
+ }
+
+ private _handleDeleteNode(node: TreeNodeInfo): void {
+ const nodeData = node.nodeData;
+ if (!nodeData) {
+ return;
+ }
+
+ // Check if this is an effect root node (uuid matches an effect ID)
+ const effectId = nodeData.uuid;
+ if (effectId && this._effects.has(effectId)) {
+ // Delete entire effect
+ const effectInfo = this._effects.get(effectId);
+ if (effectInfo) {
+ effectInfo.effect.dispose();
+ this._effects.delete(effectId);
+ this._rebuildTree();
+ }
+ } else {
+ // Delete node from effect hierarchy
+ const effect = this._findEffectForNode(node);
+ if (!effect) {
+ return;
+ }
+
+ // Find and remove node from effect hierarchy using instance comparison
+ const removeNodeFromHierarchy = (current: IEffectNode): boolean => {
+ // Remove from children - use instance comparison primarily
+ const index = current.children.findIndex((child) => {
+ // Primary: instance comparison
+ if (child === nodeData) {
+ return true;
+ }
+ // Fallback: uuid comparison (if both have uuid)
+ if (child.uuid && nodeData.uuid && child.uuid === nodeData.uuid) {
+ return true;
+ }
+ return false;
+ });
+
+ if (index !== -1) {
+ const removedNode = current.children[index];
+ // Recursively dispose all children first
+ this._disposeNodeRecursive(removedNode);
+ current.children.splice(index, 1);
+ return true;
+ }
+
+ // Recursively search in children
+ for (const child of current.children) {
+ if (removeNodeFromHierarchy(child)) {
+ return true;
+ }
+ }
+ return false;
+ };
+
+ if (effect.root) {
+ removeNodeFromHierarchy(effect.root);
+ this._rebuildTree();
+ }
+ }
+
+ // Clear selection if deleted node was selected
+ if (this.state.selectedNodeId === node.id) {
+ this.setState({ selectedNodeId: null });
+ this.props.onNodeSelected?.(null);
+ }
+ }
+
+ /**
+ * Recursively dispose a node and all its children
+ */
+ private _disposeNodeRecursive(node: IEffectNode): void {
+ // First dispose all children
+ for (const child of node.children) {
+ this._disposeNodeRecursive(child);
+ }
+
+ // Dispose system if it's a particle system
+ if (node.data) {
+ node.data.dispose();
+ }
+ // Dispose group if it's a group
+ if (node.data) {
+ node.data.dispose();
+ }
+
+ // Clear the node ID from our map
+ this._nodeIdMap.delete(node);
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/index.tsx b/editor/src/editor/windows/effect-editor/index.tsx
new file mode 100644
index 000000000..a9fa8adb5
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/index.tsx
@@ -0,0 +1,235 @@
+import { ipcRenderer } from "electron";
+import { writeJSON } from "fs-extra";
+
+import { toast } from "sonner";
+
+import { Component, ReactNode } from "react";
+
+import { Toaster } from "../../../ui/shadcn/ui/sonner";
+
+import { EffectEditorLayout } from "./layout";
+import { EffectEditorToolbar } from "./toolbar";
+import { UnityImportModal } from "./modals/unity-import-modal";
+
+import { projectConfiguration, onProjectConfigurationChangedObservable, IProjectConfiguration } from "../../../project/configuration";
+import { EffectEditorAnimation } from "./animation";
+import { EffectEditorGraph } from "./graph";
+import { EffectEditorPreview } from "./preview";
+import { EffectEditorResources } from "./resources";
+import { convertUnityPrefabToData } from "./converters";
+
+export interface IEffectEditorWindowProps {
+ filePath?: string;
+ projectConfiguration?: IProjectConfiguration;
+}
+
+export interface IEffectEditorWindowState {
+ filePath: string | null;
+ isUnityImportModalOpen: boolean;
+}
+
+export interface IEffectEditor {
+ layout: EffectEditorLayout | null;
+ preview: EffectEditorPreview | null;
+ graph: EffectEditorGraph | null;
+ animation: EffectEditorAnimation | null;
+ resources: EffectEditorResources | null;
+}
+export default class EffectEditorWindow extends Component {
+ public editor: IEffectEditor = {
+ layout: null,
+ preview: null,
+ graph: null,
+ animation: null,
+ resources: null,
+ };
+
+ public constructor(props: IEffectEditorWindowProps) {
+ super(props);
+
+ this.state = {
+ filePath: props.filePath || null,
+ isUnityImportModalOpen: false,
+ };
+ }
+
+ public render(): ReactNode {
+ return (
+ <>
+ this.setState({ isUnityImportModalOpen: false })}
+ onImport={(contexts, prefabNames) => this.importUnityData(contexts, prefabNames)}
+ />
+
+ {
+ ipcRenderer.on("save", () => this.save());
+ ipcRenderer.on("editor:close-window", () => this.close());
+
+ // Set project configuration if provided
+ if (this.props.projectConfiguration) {
+ projectConfiguration.path = this.props.projectConfiguration.path;
+ projectConfiguration.compressedTexturesEnabled = this.props.projectConfiguration.compressedTexturesEnabled;
+ onProjectConfigurationChangedObservable.notifyObservers(projectConfiguration);
+ }
+
+ // Load file if filePath is provided (wait for graph to be ready)
+ if (this.props.filePath) {
+ // Wait a bit for graph component to mount
+ setTimeout(async () => {
+ if (this.editor.graph) {
+ await this.editor.graph.loadFromFile(this.props.filePath!);
+ }
+ }, 100);
+ }
+ }
+
+ public close(): void {
+ ipcRenderer.send("window:close");
+ }
+
+ public async loadFile(filePath: string): Promise {
+ this.setState({ filePath });
+ // TODO: Load file data into editor
+ }
+
+ public async save(): Promise {
+ if (!this.state.filePath || !this.editor.graph) {
+ return;
+ }
+
+ try {
+ const fileData = this.editor.graph.serializeToFileFormat();
+ await writeJSON(this.state.filePath, fileData, { spaces: "\t", encoding: "utf-8" });
+ toast.success("Effect saved");
+ ipcRenderer.send("editor:asset-updated", "Effect", fileData);
+ } catch (error) {
+ console.error("Failed to save Effect:", error);
+ toast.error("Failed to save Effect");
+ }
+ }
+
+ public async saveAs(filePath: string): Promise {
+ this.setState({ filePath });
+ await this.save();
+ }
+
+ public async importFile(filePath: string): Promise {
+ try {
+ if (this.editor.graph) {
+ await this.editor.graph.loadFromFile(filePath);
+ toast.success("Effect imported");
+ } else {
+ toast.error("Failed to import Effect: Graph not available");
+ }
+ } catch (error) {
+ console.error("Failed to import Effect:", error);
+ toast.error("Failed to import Effect");
+ }
+ }
+
+ public async importQuarksFile(filePath: string): Promise {
+ try {
+ if (this.editor.graph) {
+ await this.editor.graph.loadFromQuarksFile(filePath);
+ toast.success("Quarks file imported");
+ } else {
+ toast.error("Failed to import Quarks file: Graph not available");
+ }
+ } catch (error) {
+ console.error("Failed to import Quarks file:", error);
+ toast.error("Failed to import Quarks file");
+ }
+ }
+
+ /**
+ * Import Unity prefab data and create Effect
+ * @param contexts - Array of Unity asset contexts (parsed components + dependencies)
+ * @param prefabNames - Array of prefab names corresponding to contexts
+ */
+ public async importUnityData(contexts: any[], prefabNames: string[]): Promise {
+ try {
+ // Get Scene from preview for model loading
+ let scene = this.editor.preview?.scene || undefined;
+ if (!scene) {
+ // Try waiting a bit for preview to initialize
+ await new Promise((resolve) => setTimeout(resolve, 100));
+ scene = this.editor.preview?.scene || undefined;
+ }
+ if (!scene) {
+ console.warn("Scene not available for model loading, models will be placeholders");
+ }
+
+ // Convert each prefab with its dependencies
+ let successCount = 0;
+ for (let i = 0; i < contexts.length; i++) {
+ try {
+ const context = contexts[i];
+ const prefabName = prefabNames[i];
+
+ // Validate context structure
+ if (!context) {
+ console.error("Context is null/undefined:", context);
+ toast.error(`Invalid prefab data for ${prefabName}`);
+ continue;
+ }
+
+ if (!context.prefabComponents) {
+ console.error("prefabComponents is missing in context:", context);
+ toast.error(`Missing prefab components for ${prefabName}`);
+ continue;
+ }
+
+ if (!(context.prefabComponents instanceof Map)) {
+ console.error("prefabComponents is not a Map:", typeof context.prefabComponents, context.prefabComponents);
+ toast.error(`Invalid prefab components type for ${prefabName}`);
+ continue;
+ }
+
+ // Convert to IData (pass already parsed components, dependencies, and Scene for model parsing)
+ const data = await convertUnityPrefabToData(context.prefabComponents, context.dependencies, scene as any);
+
+ // Import into graph
+ if (this.editor.graph) {
+ await this.editor.graph.loadFromUnityData(data, prefabName);
+ successCount++;
+ } else {
+ toast.error(`Failed to import ${prefabName}: Graph not available`);
+ }
+ } catch (error) {
+ console.error(`Failed to import prefab ${prefabNames[i]}:`, error);
+ toast.error(`Failed to import ${prefabNames[i]}`);
+ }
+ }
+
+ if (successCount > 0) {
+ toast.success(`Successfully imported ${successCount} prefab${successCount > 1 ? "s" : ""}`);
+ }
+ } catch (error) {
+ console.error("Failed to import Unity prefabs:", error);
+ toast.error("Failed to import Unity prefabs");
+ throw error;
+ }
+ }
+
+ /**
+ * Open Unity import modal
+ */
+ public openUnityImportModal(): void {
+ this.setState({ isUnityImportModalOpen: true });
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/layout.tsx b/editor/src/editor/windows/effect-editor/layout.tsx
new file mode 100644
index 000000000..c762da8b8
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/layout.tsx
@@ -0,0 +1,306 @@
+import { Component, ReactNode } from "react";
+import { IJsonModel, Layout, Model, TabNode } from "flexlayout-react";
+
+import { waitNextAnimationFrame } from "../../../tools/tools";
+
+import { EffectEditorPreview } from "./preview";
+import { EffectEditorGraph } from "./graph";
+import { EffectEditorAnimation } from "./animation";
+import { EffectEditorPropertiesTab } from "./properties/tab";
+import { EffectEditorResources } from "./resources";
+import { IEffectEditor } from ".";
+
+const layoutModel: IJsonModel = {
+ global: {
+ tabSetEnableMaximize: true,
+ tabEnableRename: false,
+ tabSetMinHeight: 50,
+ tabSetMinWidth: 240,
+ enableEdgeDock: false,
+ },
+ layout: {
+ type: "row",
+ width: 100,
+ height: 100,
+ children: [
+ {
+ type: "row",
+ weight: 75,
+ children: [
+ {
+ type: "tabset",
+ weight: 75,
+ children: [
+ {
+ type: "tab",
+ id: "preview",
+ name: "Preview",
+ component: "preview",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ ],
+ },
+ {
+ type: "tabset",
+ weight: 25,
+ children: [
+ {
+ type: "tab",
+ id: "animation",
+ name: "Animation",
+ component: "animation",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: "row",
+ weight: 25,
+ children: [
+ {
+ type: "tabset",
+ weight: 40,
+ children: [
+ {
+ type: "tab",
+ id: "graph",
+ name: "Particles",
+ component: "graph",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ {
+ type: "tab",
+ id: "resources",
+ name: "Resources",
+ component: "resources",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ ],
+ },
+ {
+ type: "tabset",
+ weight: 60,
+ children: [
+ {
+ type: "tab",
+ id: "properties-object",
+ name: "Object",
+ component: "properties-object",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ {
+ type: "tab",
+ id: "properties-emission",
+ name: "Emission",
+ component: "properties-emission",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ {
+ type: "tab",
+ id: "properties-renderer",
+ name: "Renderer",
+ component: "properties-renderer",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ {
+ type: "tab",
+ id: "properties-initialization",
+ name: "Initialization",
+ component: "properties-initialization",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ {
+ type: "tab",
+ id: "properties-behaviors",
+ name: "Behaviors",
+ component: "properties-behaviors",
+ enableClose: false,
+ enableRenderOnDemand: false,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+};
+
+export interface IEffectEditorLayoutProps {
+ filePath: string | null;
+ editor: IEffectEditor;
+}
+
+export interface IEffectEditorLayoutState {
+ selectedNodeId: string | number | null;
+ resources: any[];
+ propertiesKey: number;
+}
+
+export class EffectEditorLayout extends Component {
+ private _model: Model = Model.fromJson(layoutModel as any);
+
+ private _components: Record = {};
+
+ public constructor(props: IEffectEditorLayoutProps) {
+ super(props);
+
+ this.state = {
+ selectedNodeId: null,
+ resources: [],
+ propertiesKey: 0,
+ };
+ }
+
+ public componentDidMount(): void {
+ this._updateComponents();
+ }
+
+ public componentDidUpdate(): void {
+ this._updateComponents();
+ }
+
+ private _handleNodeSelected = (nodeId: string | number | null): void => {
+ this.setState(
+ (prevState) => ({
+ selectedNodeId: nodeId,
+ propertiesKey: prevState.propertiesKey + 1, // Increment key to force component recreation
+ }),
+ () => {
+ // Update components immediately after state change
+ this._updateComponents();
+ // Force update layout to ensure flexlayout-react sees the new component
+ this.forceUpdate();
+ }
+ );
+ };
+
+ private _updateComponents(): void {
+ this._components = {
+ preview: (
+ (this.props.editor.preview = r!)}
+ filePath={this.props.filePath}
+ editor={this.props.editor}
+ selectedNodeId={this.state.selectedNodeId}
+ onSceneReady={() => {
+ // Update graph when scene is ready
+ if (this.props.editor.graph) {
+ this.props.editor.graph.forceUpdate();
+ }
+ }}
+ />
+ ),
+ graph: (
+ (this.props.editor.graph = r!)}
+ filePath={this.props.filePath}
+ onNodeSelected={this._handleNodeSelected}
+ editor={this.props.editor}
+ // onResourcesLoaded={(resources) => {
+ // this.setState({ resources });
+ // }}
+ />
+ ),
+ resources: (this.props.editor.resources = r!)} resources={this.state.resources} />,
+ animation: (this.props.editor.animation = r!)} filePath={this.props.filePath} editor={this.props.editor} />,
+ "properties-object": (
+ {
+ // Update graph node names when name changes
+ if (this.props.editor.graph) {
+ this.props.editor.graph.updateNodeNames();
+ }
+ }}
+ getNodeData={(nodeId) => this.props.editor.graph?.getNodeData(nodeId) || null}
+ />
+ ),
+ "properties-renderer": (
+ this.props.editor.graph?.getNodeData(nodeId) || null}
+ />
+ ),
+ "properties-emission": (
+ this.props.editor.graph?.getNodeData(nodeId) || null}
+ />
+ ),
+ "properties-initialization": (
+ this.props.editor.graph?.getNodeData(nodeId) || null}
+ />
+ ),
+ "properties-behaviors": (
+ this.props.editor.graph?.getNodeData(nodeId) || null}
+ />
+ ),
+ };
+ }
+
+ public render(): ReactNode {
+ return (
+ {
+ // Validate input
+ if (typeof yamlContent !== "string") {
+ console.error("parseUnityYAML: yamlContent must be a string, got:", typeof yamlContent, yamlContent);
+ throw new Error("parseUnityYAML: yamlContent must be a string");
+ }
+
+ const components = new Map();
+ const documents = yamlContent.split(/^---\s+/gm).filter(Boolean);
+
+ for (const doc of documents) {
+ const match = doc.match(/^!u!(\d+)\s+&(\d+)/);
+ if (!match) {
+ continue;
+ }
+
+ const [, componentType, componentId] = match;
+ const yamlWithoutTag = doc.replace(/^!u!(\d+)\s+&(\d+)\s*\n/, "");
+
+ try {
+ const parsed = yaml.load(yamlWithoutTag, {
+ schema: yaml.DEFAULT_SCHEMA,
+ }) as any;
+
+ if (!parsed || typeof parsed !== "object") {
+ continue;
+ }
+
+ const processed = processUnityInlineObjects(parsed);
+
+ const component: any = {
+ id: componentId,
+ __type: componentType,
+ ...processed,
+ };
+
+ components.set(componentId, component);
+
+ const mainKey = Object.keys(processed).find((k) => k !== "id" && k !== "__type");
+ if (mainKey && processed[mainKey] && typeof processed[mainKey] === "object") {
+ processed[mainKey].__id = componentId;
+ }
+ } catch (error) {
+ console.warn(`Failed to parse Unity YAML component ${componentId}:`, error);
+ continue;
+ }
+ }
+
+ return components;
+}
+
+export interface IUnityPrefabNode {
+ name: string;
+ path: string;
+ type: "prefab" | "folder";
+ children?: IUnityPrefabNode[];
+}
+
+export interface IUnityAssetContext {
+ prefabComponents: Map; // Already parsed Unity components
+ dependencies: {
+ textures: Map; // GUID -> file data
+ materials: Map; // GUID -> YAML content
+ models: Map; // GUID -> file data
+ sounds: Map; // GUID -> file data
+ meta: Map; // GUID -> meta data
+ };
+}
+
+export interface IUnityImportModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onImport: (contexts: IUnityAssetContext[], prefabNames: string[]) => void;
+}
+
+export interface IUnityImportModalState {
+ isDragging: boolean;
+ zipFile: File | null;
+ treeNodes: TreeNodeInfo[];
+ selectedPrefabs: Set;
+ isProcessing: boolean;
+ searchQuery: string;
+}
+
+/**
+ * Modal for importing Unity prefabs from ZIP archives
+ */
+export class UnityImportModal extends Component {
+ private _dropZoneRef: HTMLDivElement | null = null;
+
+ constructor(props: IUnityImportModalProps) {
+ super(props);
+
+ this.state = {
+ isDragging: false,
+ zipFile: null,
+ treeNodes: [],
+ selectedPrefabs: new Set(),
+ isProcessing: false,
+ searchQuery: "",
+ };
+ }
+
+ public render(): ReactNode {
+ const { isOpen } = this.props;
+ const { isDragging, zipFile, treeNodes, selectedPrefabs, isProcessing } = this.state;
+
+ const { searchQuery } = this.state;
+ const filteredTreeNodes = this._filterTreeNodes(treeNodes, searchQuery);
+
+ return (
+
+ );
+ }
+
+ /**
+ * Build tree structure from ZIP file paths
+ */
+ private _buildTreeFromPaths(prefabPaths: string[]): IUnityPrefabNode[] {
+ // Build folder tree structure
+ const folderMap = new Map();
+
+ // Helper to get or create folder node
+ const getOrCreateFolder = (folderPath: string, folderName: string): IUnityPrefabNode => {
+ if (!folderMap.has(folderPath)) {
+ folderMap.set(folderPath, {
+ name: folderName,
+ path: folderPath,
+ type: "folder",
+ children: [],
+ });
+ }
+ return folderMap.get(folderPath)!;
+ };
+
+ // Process each prefab path
+ for (const path of prefabPaths) {
+ const parts = path.split("/").filter(Boolean);
+ const fileName = parts.pop() || path;
+ const folderParts = parts;
+
+ // Build folder hierarchy
+ let currentPath = "";
+ let parentNode: IUnityPrefabNode | null = null;
+
+ for (let i = 0; i < folderParts.length; i++) {
+ const folderName = folderParts[i];
+ currentPath = currentPath ? `${currentPath}/${folderName}` : folderName;
+
+ const folderNode = getOrCreateFolder(currentPath, folderName);
+ if (parentNode && parentNode.children) {
+ // Check if already added
+ if (!parentNode.children.some((c) => c.path === currentPath)) {
+ parentNode.children.push(folderNode);
+ }
+ }
+ parentNode = folderNode;
+ }
+
+ // Add prefab to parent folder (or root)
+ const prefabNode: IUnityPrefabNode = {
+ name: fileName.replace(".prefab", ""),
+ path: path,
+ type: "prefab",
+ };
+
+ if (parentNode) {
+ if (!parentNode.children) {
+ parentNode.children = [];
+ }
+ parentNode.children.push(prefabNode);
+ } else {
+ // Root level prefab - add to root
+ if (!folderMap.has("")) {
+ folderMap.set("", {
+ name: "",
+ path: "",
+ type: "folder",
+ children: [],
+ });
+ }
+ folderMap.get("")!.children!.push(prefabNode);
+ }
+ }
+
+ // Get root folders (those without parent in map)
+ const rootNodes: IUnityPrefabNode[] = [];
+ for (const [path, node] of folderMap) {
+ if (path === "" || !folderMap.has(path.split("/").slice(0, -1).join("/"))) {
+ rootNodes.push(node);
+ }
+ }
+
+ // Sort: folders first, then prefabs, alphabetically
+ const sortNode = (node: IUnityPrefabNode): void => {
+ if (node.children) {
+ node.children.sort((a, b) => {
+ if (a.type === "folder" && b.type === "prefab") {
+ return -1;
+ }
+ if (a.type === "prefab" && b.type === "folder") {
+ return 1;
+ }
+ return a.name.localeCompare(b.name);
+ });
+ node.children.forEach(sortNode);
+ }
+ };
+
+ rootNodes.forEach(sortNode);
+ rootNodes.sort((a, b) => a.name.localeCompare(b.name));
+
+ return rootNodes;
+ }
+
+ /**
+ * Convert IUnityPrefabNode to TreeNodeInfo
+ */
+ private _convertToTreeNode(node: IUnityPrefabNode): TreeNodeInfo {
+ const isSelected = this.state.selectedPrefabs.has(node.path);
+ const childNodes = node.children ? node.children.map((child) => this._convertToTreeNode(child)) : undefined;
+
+ const label = (
+ ): void => {
+ // Toggle checkbox for prefab nodes
+ if (nodeData.nodeData?.type === "prefab") {
+ const isSelected = this.state.selectedPrefabs.has(nodeData.nodeData.path);
+ this._handleTogglePrefab(nodeData.nodeData.path, !isSelected);
+ }
+ };
+
+ /**
+ * Handle node expand
+ */
+ private _handleNodeExpand = (nodeData: TreeNodeInfo): void => {
+ // Update tree to reflect expansion
+ const updateNodes = (nodes: TreeNodeInfo[]): TreeNodeInfo[] => {
+ return nodes.map((n) => {
+ if (n.id === nodeData.id) {
+ return { ...n, isExpanded: true };
+ }
+ if (n.childNodes) {
+ return { ...n, childNodes: updateNodes(n.childNodes) };
+ }
+ return n;
+ });
+ };
+ this.setState({ treeNodes: updateNodes(this.state.treeNodes) });
+ };
+
+ /**
+ * Handle node collapse
+ */
+ private _handleNodeCollapse = (nodeData: TreeNodeInfo): void => {
+ // Update tree to reflect collapse
+ const updateNodes = (nodes: TreeNodeInfo[]): TreeNodeInfo[] => {
+ return nodes.map((n) => {
+ if (n.id === nodeData.id) {
+ return { ...n, isExpanded: false };
+ }
+ if (n.childNodes) {
+ return { ...n, childNodes: updateNodes(n.childNodes) };
+ }
+ return n;
+ });
+ };
+ this.setState({ treeNodes: updateNodes(this.state.treeNodes) });
+ };
+
+ /**
+ * Handle drag over
+ */
+ private _handleDragOver(e: React.DragEvent): void {
+ e.preventDefault();
+ e.stopPropagation();
+ this.setState({ isDragging: true });
+ }
+
+ /**
+ * Handle drag leave
+ */
+ private _handleDragLeave(e: React.DragEvent): void {
+ e.preventDefault();
+ e.stopPropagation();
+ if (e.currentTarget === this._dropZoneRef) {
+ this.setState({ isDragging: false });
+ }
+ }
+
+ /**
+ * Handle drop
+ */
+ private async _handleDrop(e: React.DragEvent): Promise {
+ e.preventDefault();
+ e.stopPropagation();
+ this.setState({ isDragging: false });
+
+ const files = Array.from(e.dataTransfer.files);
+ const zipFile = files.find((f) => f.name.endsWith(".zip"));
+
+ if (!zipFile) {
+ toast.error("Please drop a ZIP archive");
+ return;
+ }
+
+ await this._processZipFile(zipFile);
+ }
+
+ /**
+ * Handle click upload
+ */
+ private _handleClickUpload(): void {
+ const input = document.createElement("input");
+ input.type = "file";
+ input.accept = ".zip";
+ input.onchange = async (e) => {
+ const file = (e.target as HTMLInputElement).files?.[0];
+ if (file) {
+ await this._processZipFile(file);
+ }
+ };
+ input.click();
+ }
+
+ /**
+ * Process ZIP file and extract prefab list with folder structure
+ */
+ private async _processZipFile(file: File): Promise {
+ this.setState({ zipFile: file, isProcessing: true });
+
+ try {
+ // Convert File to Buffer for adm-zip (Electron-compatible)
+ const arrayBuffer = await file.arrayBuffer();
+ const buffer = Buffer.from(arrayBuffer);
+
+ // Use adm-zip for Electron (better than jszip for Node.js/Electron)
+ const AdmZip = (await import("adm-zip")).default;
+ const zip = new AdmZip(buffer);
+
+ const prefabPaths: string[] = [];
+
+ // Get all entries from ZIP
+ const zipEntries = zip.getEntries();
+
+ // Find all .prefab files (ignore .meta files and directories)
+ for (const entry of zipEntries) {
+ if (entry.entryName.endsWith(".prefab") && !entry.isDirectory && !entry.entryName.endsWith(".meta")) {
+ prefabPaths.push(entry.entryName);
+ }
+ }
+
+ if (prefabPaths.length === 0) {
+ toast.error("No .prefab files found in ZIP archive");
+ this.setState({ isProcessing: false, zipFile: null });
+ return;
+ }
+
+ // Build tree structure from paths
+ const treeStructure = this._buildTreeFromPaths(prefabPaths);
+
+ // Convert to TreeNodeInfo
+ const treeNodes = treeStructure.map((node) => this._convertToTreeNode(node));
+
+ this.setState({
+ treeNodes,
+ isProcessing: false,
+ });
+
+ toast.success(`Found ${prefabPaths.length} prefab${prefabPaths.length > 1 ? "s" : ""} in archive`);
+ } catch (error) {
+ console.error("Failed to process ZIP:", error);
+ toast.error("Failed to process ZIP archive");
+ this.setState({ isProcessing: false, zipFile: null });
+ }
+ }
+
+ /**
+ * Handle toggle prefab selection
+ */
+ private _handleTogglePrefab(path: string, checked: boolean): void {
+ const selectedPrefabs = new Set(this.state.selectedPrefabs);
+ if (checked) {
+ selectedPrefabs.add(path);
+ } else {
+ selectedPrefabs.delete(path);
+ }
+
+ // Update tree nodes to reflect checkbox state
+ const updateNodes = (nodes: TreeNodeInfo[]): TreeNodeInfo[] => {
+ return nodes.map((n) => {
+ if (n.nodeData?.path === path) {
+ // Update label with new checkbox state
+ const node = n.nodeData;
+ const label = (
+ []): TreeNodeInfo[] => {
+ return nodes.map((n) => {
+ if (n.nodeData?.type === "prefab") {
+ const node = n.nodeData;
+ const label = (
+ []): TreeNodeInfo[] => {
+ return nodes.map((n) => {
+ if (n.nodeData?.type === "prefab") {
+ const node = n.nodeData;
+ const label = (
+ []): string[] {
+ const paths: string[] = [];
+ for (const node of nodes) {
+ if (node.nodeData?.type === "prefab") {
+ paths.push(node.nodeData.path);
+ }
+ if (node.childNodes) {
+ paths.push(...this._collectAllPaths(node.childNodes));
+ }
+ }
+ return paths;
+ }
+
+ /**
+ * Count total prefabs in tree
+ */
+ private _countPrefabs(nodes: TreeNodeInfo[]): number {
+ let count = 0;
+ for (const node of nodes) {
+ if (node.nodeData?.type === "prefab") {
+ count++;
+ }
+ if (node.childNodes) {
+ count += this._countPrefabs(node.childNodes);
+ }
+ }
+ return count;
+ }
+
+ /**
+ * Filter tree nodes by search query
+ */
+ private _filterTreeNodes(nodes: TreeNodeInfo[], query: string): TreeNodeInfo[] {
+ if (!query.trim()) {
+ return nodes;
+ }
+
+ const lowerQuery = query.toLowerCase();
+
+ const filterNode = (node: TreeNodeInfo): TreeNodeInfo | null => {
+ const nodeName = node.nodeData?.name?.toLowerCase() || "";
+ const matchesQuery = nodeName.includes(lowerQuery);
+
+ // Filter children first
+ let filteredChildren: TreeNodeInfo[] | undefined;
+ if (node.childNodes) {
+ filteredChildren = node.childNodes.map(filterNode).filter((n) => n !== null) as TreeNodeInfo[];
+ }
+
+ // If this node matches or has matching children, include it
+ if (matchesQuery || (filteredChildren && filteredChildren.length > 0)) {
+ return {
+ ...node,
+ childNodes: filteredChildren && filteredChildren.length > 0 ? filteredChildren : undefined,
+ isExpanded: matchesQuery || (filteredChildren && filteredChildren.length > 0) ? true : node.isExpanded,
+ };
+ }
+
+ return null;
+ };
+
+ return nodes.map(filterNode).filter((n) => n !== null) as TreeNodeInfo[];
+ }
+
+ /**
+ * Handle remove file
+ */
+ private _handleRemoveFile(): void {
+ this.setState({
+ zipFile: null,
+ treeNodes: [],
+ selectedPrefabs: new Set(),
+ searchQuery: "",
+ });
+ }
+
+ /**
+ * Collect all fileID references from parsed YAML object
+ */
+ private _collectFileIDs(obj: any, fileIDs: Set): void {
+ if (typeof obj !== "object" || obj === null) {
+ return;
+ }
+
+ if (Array.isArray(obj)) {
+ for (const item of obj) {
+ this._collectFileIDs(item, fileIDs);
+ }
+ return;
+ }
+
+ // Check for Unity fileID references: {fileID: "123"} or {fileID: 123}
+ if (obj.fileID !== undefined) {
+ const fileID = String(obj.fileID);
+ if (fileID !== "0" && fileID !== "4294967295") {
+ // 0 = null, 4294967295 = missing
+ fileIDs.add(fileID);
+ }
+ }
+
+ // Recursively check all properties
+ for (const value of Object.values(obj)) {
+ this._collectFileIDs(value, fileIDs);
+ }
+ }
+
+ /**
+ * Parse Unity .meta file to extract GUID and fileID mappings
+ */
+ private _parseMetaFile(metaContent: string): { guid: string; fileIDToGUID: Map } | null {
+ try {
+ const parsed = yaml.load(metaContent) as any;
+ if (!parsed || !parsed.guid) {
+ return null;
+ }
+
+ const fileIDToGUID = new Map();
+ const guid = parsed.guid;
+
+ // Unity stores fileID -> GUID mappings in the meta file
+ // Look for external references in the meta file
+ if (parsed.ExternalObjects) {
+ for (const [key, value] of Object.entries(parsed.ExternalObjects)) {
+ if (value && typeof value === "object" && (value as any).guid) {
+ fileIDToGUID.set(key, (value as any).guid);
+ }
+ }
+ }
+
+ // Also check for fileIDToRecycleName which maps fileID to GUID
+ if (parsed.fileIDToRecycleName) {
+ for (const [fileID, guidOrName] of Object.entries(parsed.fileIDToRecycleName)) {
+ // Sometimes it's a GUID directly, sometimes it needs lookup
+ if (typeof guidOrName === "string") {
+ fileIDToGUID.set(fileID, guidOrName);
+ }
+ }
+ }
+
+ return {
+ guid,
+ fileIDToGUID,
+ };
+ } catch (error) {
+ console.warn("Failed to parse meta file:", error);
+ return null;
+ }
+ }
+
+ /**
+ * Collect all dependencies for a prefab
+ */
+ private async _collectDependencies(zip: any, prefabPath: string, allEntries: any[]): Promise {
+ const dependencies: IUnityAssetContext["dependencies"] = {
+ textures: new Map(),
+ materials: new Map(),
+ models: new Map(),
+ sounds: new Map(),
+ meta: new Map(),
+ };
+
+ // Read prefab YAML
+ const prefabEntry = zip.getEntry(prefabPath);
+ if (!prefabEntry) {
+ return dependencies;
+ }
+
+ const prefabYaml = prefabEntry.getData().toString("utf8");
+
+ // Parse Unity YAML to find fileID references
+ const components = parseUnityYAML(prefabYaml);
+
+ // Build fileID -> GUID mapping from all .meta files FIRST
+ const fileIDToGUID = new Map();
+ const guidToPath = new Map();
+ const guidToMeta = new Map();
+
+ // First pass: collect all meta files and build GUID -> path mapping
+ for (const entry of allEntries) {
+ if (entry.entryName.endsWith(".meta") && !entry.isDirectory) {
+ try {
+ const metaContent = entry.getData().toString("utf8");
+ const meta = this._parseMetaFile(metaContent);
+ if (meta) {
+ const assetPath = entry.entryName.replace(/\.meta$/, "");
+ guidToPath.set(meta.guid, assetPath);
+ guidToMeta.set(meta.guid, meta);
+
+ // Map fileID -> GUID from this meta file
+ for (const [fileID, guid] of meta.fileIDToGUID) {
+ fileIDToGUID.set(fileID, guid);
+ }
+ }
+ } catch (error) {
+ console.warn(`Failed to parse meta file ${entry.entryName}:`, error);
+ }
+ }
+ }
+
+ // Collect component IDs (internal references within prefab)
+ const componentIDs = new Set(components.keys());
+
+ // Collect all fileID references from components
+ const allFileIDs = new Set();
+ for (const [_id, component] of components) {
+ this._collectFileIDs(component, allFileIDs);
+ }
+
+ // Find external fileID references (those that are NOT component IDs but have GUID mappings)
+ // These are references to external assets (textures, materials, models, etc.)
+ const externalFileIDs = new Set();
+ for (const fileID of allFileIDs) {
+ // If fileID is not a component ID (internal) and has a GUID mapping, it's an external asset reference
+ if (!componentIDs.has(fileID) && fileIDToGUID.has(fileID)) {
+ externalFileIDs.add(fileID);
+ }
+ }
+
+ // Also check for direct GUID references in components (m_Texture, m_Material, etc.)
+ const referencedGUIDs = new Set();
+ for (const [_id, component] of components) {
+ this._collectGUIDReferences(component, referencedGUIDs);
+ }
+
+ // Collect all assets that are referenced
+ const collectedGUIDs = new Set();
+ for (const fileID of externalFileIDs) {
+ const guid = fileIDToGUID.get(fileID);
+ if (guid) {
+ collectedGUIDs.add(guid);
+ }
+ }
+ for (const guid of referencedGUIDs) {
+ collectedGUIDs.add(guid);
+ }
+
+ // Collect dependencies by GUID (ONLY those that are actually referenced)
+ for (const guid of collectedGUIDs) {
+ const assetPath = guidToPath.get(guid);
+ if (!assetPath) {
+ continue;
+ }
+
+ const assetEntry = zip.getEntry(assetPath);
+ if (!assetEntry || assetEntry.isDirectory) {
+ continue;
+ }
+
+ const ext = assetPath.split(".").pop()?.toLowerCase();
+ const meta = guidToMeta.get(guid);
+
+ if (meta) {
+ dependencies.meta.set(guid, { path: assetPath, guid });
+
+ // Categorize by extension
+ if (ext === "png" || ext === "jpg" || ext === "jpeg" || ext === "tga" || ext === "tiff" || ext === "dds") {
+ dependencies.textures.set(guid, assetEntry.getData());
+ } else if (ext === "mat") {
+ const matContent = assetEntry.getData().toString("utf8");
+ dependencies.materials.set(guid, matContent);
+ } else if (ext === "fbx" || ext === "obj" || ext === "dae" || ext === "mesh") {
+ dependencies.models.set(guid, assetEntry.getData());
+ } else if (ext === "wav" || ext === "mp3" || ext === "ogg" || ext === "aac") {
+ dependencies.sounds.set(guid, assetEntry.getData());
+ }
+ }
+ }
+
+ return dependencies;
+ }
+
+ /**
+ * Collect GUID references from Unity component (m_Texture, m_Material, etc.)
+ */
+ private _collectGUIDReferences(obj: any, guids: Set): void {
+ if (typeof obj !== "object" || obj === null) {
+ return;
+ }
+
+ if (Array.isArray(obj)) {
+ for (const item of obj) {
+ this._collectGUIDReferences(item, guids);
+ }
+ return;
+ }
+
+ // Check for GUID fields (Unity uses guid field in some references)
+ if (obj.guid && typeof obj.guid === "string") {
+ guids.add(obj.guid);
+ }
+
+ // Check for common Unity asset reference patterns
+ if (obj.m_Texture && obj.m_Texture.guid) {
+ guids.add(obj.m_Texture.guid);
+ }
+ if (obj.m_Material && obj.m_Material.guid) {
+ guids.add(obj.m_Material.guid);
+ }
+ if (obj.m_Mesh && obj.m_Mesh.guid) {
+ guids.add(obj.m_Mesh.guid);
+ }
+
+ // Recursively check all properties
+ for (const value of Object.values(obj)) {
+ this._collectGUIDReferences(value, guids);
+ }
+ }
+
+ /**
+ * Handle import - collect all dependencies and pass to converter
+ */
+ private async _handleImport(): Promise {
+ const { zipFile, selectedPrefabs } = this.state;
+ if (!zipFile || selectedPrefabs.size === 0) {
+ toast.error("No prefabs selected");
+ return;
+ }
+
+ this.setState({ isProcessing: true });
+
+ try {
+ // Convert File to Buffer
+ const arrayBuffer = await zipFile.arrayBuffer();
+ const buffer = Buffer.from(arrayBuffer);
+
+ // Load ZIP
+ const AdmZip = (await import("adm-zip")).default;
+ const zip = new AdmZip(buffer);
+ const allEntries = zip.getEntries();
+
+ // Process each selected prefab
+ const contexts: IUnityAssetContext[] = [];
+ const prefabNames: string[] = [];
+
+ for (const prefabPath of Array.from(selectedPrefabs)) {
+ try {
+ // Read prefab YAML
+ const prefabEntry = zip.getEntry(prefabPath);
+ if (!prefabEntry || prefabEntry.isDirectory) {
+ continue;
+ }
+
+ const prefabYaml = prefabEntry.getData().toString("utf8");
+
+ // Validate YAML content
+ if (typeof prefabYaml !== "string" || !prefabYaml.trim()) {
+ console.error(`Invalid prefab YAML for ${prefabPath}`);
+ toast.error(`Invalid prefab file: ${prefabPath.split("/").pop()}`);
+ continue;
+ }
+
+ // Parse Unity YAML here (already done in _collectDependencies, but we need it here too)
+ const prefabComponents = parseUnityYAML(prefabYaml);
+
+ // Validate parsed components
+ if (!(prefabComponents instanceof Map)) {
+ console.error(`Failed to parse prefab components for ${prefabPath}, got:`, typeof prefabComponents);
+ toast.error(`Failed to parse prefab: ${prefabPath.split("/").pop()}`);
+ continue;
+ }
+
+ // Collect all dependencies
+ const dependencies = await this._collectDependencies(zip, prefabPath, allEntries);
+
+ contexts.push({
+ prefabComponents,
+ dependencies,
+ });
+
+ prefabNames.push(prefabPath.split("/").pop()?.replace(".prefab", "") || prefabPath);
+ } catch (error) {
+ console.error(`Failed to process prefab ${prefabPath}:`, error);
+ toast.error(`Failed to process ${prefabPath.split("/").pop()}`);
+ }
+ }
+
+ if (contexts.length > 0) {
+ this.props.onImport(contexts, prefabNames);
+ this._handleClose();
+ } else {
+ toast.error("No valid prefabs to import");
+ }
+ } catch (error) {
+ console.error("Failed to import Unity prefabs:", error);
+ toast.error("Failed to import Unity prefabs");
+ } finally {
+ this.setState({ isProcessing: false });
+ }
+ }
+
+ /**
+ * Handle close
+ */
+ private _handleClose(): void {
+ this.setState({
+ isDragging: false,
+ zipFile: null,
+ treeNodes: [],
+ selectedPrefabs: new Set(),
+ isProcessing: false,
+ searchQuery: "",
+ });
+ this.props.onClose();
+ }
+
+ /**
+ * Format file size
+ */
+ private _formatFileSize(bytes: number): string {
+ if (bytes < 1024) {
+ return `${bytes} B`;
+ }
+ if (bytes < 1024 * 1024) {
+ return `${(bytes / 1024).toFixed(1)} KB`;
+ }
+ return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/preview.tsx b/editor/src/editor/windows/effect-editor/preview.tsx
new file mode 100644
index 000000000..29055e602
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/preview.tsx
@@ -0,0 +1,347 @@
+import { Component, ReactNode } from "react";
+
+import { Scene } from "@babylonjs/core/scene";
+import { Engine } from "@babylonjs/core/Engines/engine";
+import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
+import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
+import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+import { GridMaterial } from "@babylonjs/materials";
+
+import { Button } from "../../../ui/shadcn/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../ui/shadcn/ui/tooltip";
+
+import { IoPlay, IoStop, IoRefresh } from "react-icons/io5";
+import type { IEffectEditor } from ".";
+import { Effect, type IEffectNode } from "babylonjs-editor-tools";
+
+// don't like because it's not a good practice, but it's the only way to load the shaders
+import "@babylonjs/core/Particles/particleSystemComponent";
+import "@babylonjs/core/Shaders/particles.vertex";
+import "@babylonjs/core/Shaders/particles.fragment";
+import "@babylonjs/core/Shaders/rgbdDecode.fragment";
+
+export interface IEffectEditorPreviewProps {
+ filePath: string | null;
+ onSceneReady?: (scene: Scene) => void;
+ editor?: IEffectEditor;
+ selectedNodeId?: string | number | null;
+}
+
+export interface IEffectEditorPreviewState {
+ playing: boolean;
+}
+
+export class EffectEditorPreview extends Component {
+ public engine: Engine | null = null;
+ public scene: Scene | null = null;
+ public camera: ArcRotateCamera | null = null;
+
+ private _canvasRef: HTMLCanvasElement | null = null;
+ private _renderLoopId: number = -1;
+
+ public constructor(props: IEffectEditorPreviewProps) {
+ super(props);
+
+ this.state = {
+ playing: false,
+ };
+ }
+
+ public render(): ReactNode {
+ return (
+ {
+ if (!canvas || this.engine) {
+ return;
+ }
+
+ this._canvasRef = canvas;
+
+ this.engine = new Engine(this._canvasRef, true, {
+ antialias: true,
+ adaptToDeviceRatio: true,
+ });
+
+ this.scene = new Scene(this.engine);
+
+ // Scene settings
+ this.scene.clearColor = new Color4(0.1, 0.1, 0.1, 1.0);
+ this.scene.ambientColor = new Color3(1, 1, 1);
+
+ // Camera
+ this.camera = new ArcRotateCamera("Camera", 0, 0.8, 4, Vector3.Zero(), this.scene);
+ this.camera.doNotSerialize = true;
+ this.camera.lowerRadiusLimit = 3;
+ this.camera.upperRadiusLimit = 10;
+ this.camera.wheelPrecision = 20;
+ this.camera.minZ = 0.001;
+ this.camera.attachControl(canvas, true);
+ this.camera.useFramingBehavior = true;
+ this.camera.wheelDeltaPercentage = 0.01;
+ this.camera.pinchDeltaPercentage = 0.01;
+
+ // Directional light (sun)
+ const sunLight = new DirectionalLight("sun", new Vector3(-1, -1, -1), this.scene);
+ sunLight.intensity = 1.0;
+ sunLight.diffuse = new Color3(1, 1, 1);
+ sunLight.specular = new Color3(1, 1, 1);
+
+ // Ground with grid material
+ const groundMaterial = new GridMaterial("groundMaterial", this.scene);
+ groundMaterial.majorUnitFrequency = 2;
+ groundMaterial.minorUnitVisibility = 0.1;
+ groundMaterial.gridRatio = 0.5;
+ groundMaterial.backFaceCulling = false;
+ groundMaterial.mainColor = new Color3(1, 1, 1);
+ groundMaterial.lineColor = new Color3(1.0, 1.0, 1.0);
+ groundMaterial.opacity = 0.5;
+
+ const ground = MeshBuilder.CreateGround("ground", { width: 100, height: 100 }, this.scene);
+ ground.material = groundMaterial;
+
+ // Render loop
+ this.engine.runRenderLoop(() => {
+ if (this.scene) {
+ this.scene.render();
+ }
+ });
+
+ // Handle resize
+ window.addEventListener("resize", () => {
+ this.engine?.resize();
+ });
+
+ // Notify parent that scene is ready
+ this.props.onSceneReady?.(this.scene);
+
+ this.forceUpdate();
+ }
+
+ private _handlePlayStop(): void {
+ if (!this.props.selectedNodeId) {
+ return;
+ }
+
+ const nodeData = this.props.editor?.graph?.getNodeData(this.props.selectedNodeId);
+ if (!nodeData) {
+ return;
+ }
+
+ const effect = this._findEffectForNode(nodeData);
+ if (!effect) {
+ return;
+ }
+
+ // Check if this is an effect root node
+ const isEffectRoot = this._isEffectRootNode(nodeData);
+ if (isEffectRoot) {
+ // For effect root, manage entire effect
+ if (effect.isStarted()) {
+ effect.stop();
+ } else {
+ effect.start();
+ }
+ } else if (effect.isNodeStarted(nodeData)) {
+ // For group or system, manage only this node
+ effect.stopNode(nodeData);
+ } else {
+ effect.startNode(nodeData);
+ }
+
+ this._syncPlayingState();
+ }
+
+ private _handleRestart(): void {
+ if (!this.props.selectedNodeId) {
+ return;
+ }
+
+ const nodeData = this.props.editor?.graph?.getNodeData(this.props.selectedNodeId);
+ if (!nodeData) {
+ return;
+ }
+
+ const effect = this._findEffectForNode(nodeData);
+ if (!effect) {
+ return;
+ }
+
+ // Check if this is an effect root node
+ const isEffectRoot = this._isEffectRootNode(nodeData);
+ if (isEffectRoot) {
+ // For effect root, restart entire effect
+ effect.reset();
+ effect.start();
+ } else {
+ // For group or system, restart only this node
+ effect.resetNode(nodeData);
+ effect.startNode(nodeData);
+ }
+
+ this.setState({ playing: true });
+ }
+
+ public componentDidUpdate(prevProps: IEffectEditorPreviewProps): void {
+ // Sync playing state when selected node changes or when props change
+ if (prevProps.selectedNodeId !== this.props.selectedNodeId) {
+ this._syncPlayingState();
+ } else {
+ // Update playing state based on actual node state
+ this._syncPlayingState();
+ }
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/properties/behaviors.tsx b/editor/src/editor/windows/effect-editor/properties/behaviors.tsx
new file mode 100644
index 000000000..bfe10c176
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/properties/behaviors.tsx
@@ -0,0 +1,555 @@
+import { ReactNode } from "react";
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+
+import { EditorInspectorNumberField } from "../../../layout/inspector/fields/number";
+import { EditorInspectorVectorField } from "../../../layout/inspector/fields/vector";
+import { EditorInspectorColorField } from "../../../layout/inspector/fields/color";
+import { EditorInspectorSwitchField } from "../../../layout/inspector/fields/switch";
+import { EditorInspectorStringField } from "../../../layout/inspector/fields/string";
+import { EditorInspectorListField } from "../../../layout/inspector/fields/list";
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+import { EditorInspectorSectionField } from "../../../layout/inspector/fields/section";
+
+import { Button } from "../../../../ui/shadcn/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../ui/shadcn/ui/dropdown-menu";
+import { HiOutlineTrash } from "react-icons/hi2";
+import { IoAddSharp } from "react-icons/io5";
+
+import { type IEffectNode, EffectParticleSystem, EffectSolidParticleSystem } from "babylonjs-editor-tools";
+import { FunctionEditor, ColorFunctionEditor } from "../editors";
+
+// Types
+export type FunctionType = "ConstantValue" | "IntervalValue" | "PiecewiseBezier" | "Vector3Function";
+export type ColorFunctionType = "ConstantColor" | "ColorRange" | "Gradient" | "RandomColor" | "RandomColorBetweenGradient";
+
+export interface IBehaviorProperty {
+ name: string;
+ type: "vector3" | "number" | "color" | "range" | "boolean" | "string" | "function" | "enum" | "colorFunction";
+ label: string;
+ default?: any;
+ enumItems?: Array<{ text: string; value: any }>;
+ functionTypes?: FunctionType[];
+ colorFunctionTypes?: ColorFunctionType[];
+}
+
+export interface IBehaviorDefinition {
+ type: string;
+ label: string;
+ properties: IBehaviorProperty[];
+}
+
+// Behavior Registry
+export const BehaviorRegistry: { [key: string]: IBehaviorDefinition } = {
+ ApplyForce: {
+ type: "ApplyForce",
+ label: "Apply Force",
+ properties: [
+ { name: "direction", type: "vector3", label: "Direction", default: { x: 0, y: 1, z: 0 } },
+ {
+ name: "magnitude",
+ type: "function",
+ label: "Magnitude",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue"],
+ },
+ ],
+ },
+ Noise: {
+ type: "Noise",
+ label: "Noise",
+ properties: [
+ {
+ name: "frequency",
+ type: "function",
+ label: "Frequency",
+ default: 1.0,
+ functionTypes: ["ConstantValue", "IntervalValue"],
+ },
+ {
+ name: "power",
+ type: "function",
+ label: "Power",
+ default: 1.0,
+ functionTypes: ["ConstantValue", "IntervalValue"],
+ },
+ {
+ name: "positionAmount",
+ type: "function",
+ label: "Position Amount",
+ default: 1.0,
+ functionTypes: ["ConstantValue", "IntervalValue"],
+ },
+ {
+ name: "rotationAmount",
+ type: "function",
+ label: "Rotation Amount",
+ default: 0.0,
+ functionTypes: ["ConstantValue", "IntervalValue"],
+ },
+ ],
+ },
+ TurbulenceField: {
+ type: "TurbulenceField",
+ label: "Turbulence Field",
+ properties: [
+ { name: "scale", type: "vector3", label: "Scale", default: { x: 1, y: 1, z: 1 } },
+ { name: "octaves", type: "number", label: "Octaves", default: 1 },
+ { name: "velocityMultiplier", type: "vector3", label: "Velocity Multiplier", default: { x: 1, y: 1, z: 1 } },
+ { name: "timeScale", type: "vector3", label: "Time Scale", default: { x: 1, y: 1, z: 1 } },
+ ],
+ },
+ GravityForce: {
+ type: "GravityForce",
+ label: "Gravity Force",
+ properties: [
+ { name: "center", type: "vector3", label: "Center", default: { x: 0, y: 0, z: 0 } },
+ { name: "magnitude", type: "number", label: "Magnitude", default: 1.0 },
+ ],
+ },
+ ColorOverLife: {
+ type: "ColorOverLife",
+ label: "Color Over Life",
+ properties: [
+ {
+ name: "color",
+ type: "colorFunction",
+ label: "Color",
+ default: null,
+ colorFunctionTypes: ["ConstantColor", "ColorRange", "Gradient", "RandomColorBetweenGradient"],
+ },
+ ],
+ },
+ RotationOverLife: {
+ type: "RotationOverLife",
+ label: "Rotation Over Life",
+ properties: [
+ {
+ name: "angularVelocity",
+ type: "function",
+ label: "Angular Velocity",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ ],
+ },
+ Rotation3DOverLife: {
+ type: "Rotation3DOverLife",
+ label: "Rotation 3D Over Life",
+ properties: [
+ {
+ name: "angularVelocity",
+ type: "function",
+ label: "Angular Velocity",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ ],
+ },
+ SizeOverLife: {
+ type: "SizeOverLife",
+ label: "Size Over Life",
+ properties: [
+ {
+ name: "size",
+ type: "function",
+ label: "Size",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier", "Vector3Function"],
+ },
+ ],
+ },
+ ColorBySpeed: {
+ type: "ColorBySpeed",
+ label: "Color By Speed",
+ properties: [
+ {
+ name: "color",
+ type: "colorFunction",
+ label: "Color",
+ default: null,
+ colorFunctionTypes: ["ConstantColor", "ColorRange", "Gradient", "RandomColorBetweenGradient"],
+ },
+ { name: "speedRange", type: "range", label: "Speed Range", default: { min: 0, max: 10 } },
+ ],
+ },
+ RotationBySpeed: {
+ type: "RotationBySpeed",
+ label: "Rotation By Speed",
+ properties: [
+ {
+ name: "angularVelocity",
+ type: "function",
+ label: "Angular Velocity",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ { name: "speedRange", type: "range", label: "Speed Range", default: { min: 0, max: 10 } },
+ ],
+ },
+ SizeBySpeed: {
+ type: "SizeBySpeed",
+ label: "Size By Speed",
+ properties: [
+ {
+ name: "size",
+ type: "function",
+ label: "Size",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier", "Vector3Function"],
+ },
+ { name: "speedRange", type: "range", label: "Speed Range", default: { min: 0, max: 10 } },
+ ],
+ },
+ SpeedOverLife: {
+ type: "SpeedOverLife",
+ label: "Speed Over Life",
+ properties: [
+ {
+ name: "speed",
+ type: "function",
+ label: "Speed",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ ],
+ },
+ FrameOverLife: {
+ type: "FrameOverLife",
+ label: "Frame Over Life",
+ properties: [
+ {
+ name: "frame",
+ type: "function",
+ label: "Frame",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ ],
+ },
+ ForceOverLife: {
+ type: "ForceOverLife",
+ label: "Force Over Life",
+ properties: [
+ {
+ name: "x",
+ type: "function",
+ label: "X",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ {
+ name: "y",
+ type: "function",
+ label: "Y",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ {
+ name: "z",
+ type: "function",
+ label: "Z",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ ],
+ },
+ OrbitOverLife: {
+ type: "OrbitOverLife",
+ label: "Orbit Over Life",
+ properties: [
+ {
+ name: "orbitSpeed",
+ type: "function",
+ label: "Orbit Speed",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ { name: "axis", type: "vector3", label: "Axis", default: { x: 0, y: 1, z: 0 } },
+ ],
+ },
+ WidthOverLength: {
+ type: "WidthOverLength",
+ label: "Width Over Length",
+ properties: [
+ {
+ name: "width",
+ type: "function",
+ label: "Width",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ ],
+ },
+ ChangeEmitDirection: {
+ type: "ChangeEmitDirection",
+ label: "Change Emit Direction",
+ properties: [
+ {
+ name: "angle",
+ type: "function",
+ label: "Angle",
+ default: 0.0,
+ functionTypes: ["ConstantValue", "IntervalValue"],
+ },
+ ],
+ },
+ EmitSubParticleSystem: {
+ type: "EmitSubParticleSystem",
+ label: "Emit Sub Particle System",
+ properties: [
+ { name: "subParticleSystem", type: "string", label: "Sub Particle System", default: "" },
+ { name: "useVelocityAsBasis", type: "boolean", label: "Use Velocity As Basis", default: false },
+ {
+ name: "mode",
+ type: "enum",
+ label: "Mode",
+ default: 0,
+ enumItems: [
+ { text: "Death", value: 0 },
+ { text: "Birth", value: 1 },
+ { text: "Frame", value: 2 },
+ ],
+ },
+ { name: "emitProbability", type: "number", label: "Emit Probability", default: 1.0 },
+ ],
+ },
+ LimitSpeedOverLife: {
+ type: "LimitSpeedOverLife",
+ label: "Limit Speed Over Life",
+ properties: [
+ {
+ name: "speed",
+ type: "function",
+ label: "Speed",
+ default: null,
+ functionTypes: ["ConstantValue", "IntervalValue", "PiecewiseBezier"],
+ },
+ { name: "dampen", type: "number", label: "Dampen", default: 0.0 },
+ ],
+ },
+};
+
+// Utility functions
+export function getBehaviorDefinition(type: string): IBehaviorDefinition | undefined {
+ return BehaviorRegistry[type];
+}
+
+export function createDefaultBehaviorData(type: string): any {
+ const definition = BehaviorRegistry[type];
+ if (!definition) {
+ return { type };
+ }
+
+ const data: any = { type };
+ for (const prop of definition.properties) {
+ if (prop.type === "function") {
+ data[prop.name] = {
+ functionType: prop.functionTypes?.[0] || "ConstantValue",
+ data: {},
+ };
+ if (data[prop.name].functionType === "ConstantValue") {
+ data[prop.name].data.value = prop.default !== undefined ? prop.default : 1.0;
+ } else if (data[prop.name].functionType === "IntervalValue") {
+ data[prop.name].data.min = 0;
+ data[prop.name].data.max = 1;
+ }
+ } else if (prop.type === "colorFunction") {
+ data[prop.name] = {
+ colorFunctionType: prop.colorFunctionTypes?.[0] || "ConstantColor",
+ data: {},
+ };
+ } else if (prop.default !== undefined) {
+ if (prop.type === "vector3") {
+ data[prop.name] = { x: prop.default.x, y: prop.default.y, z: prop.default.z };
+ } else if (prop.type === "range") {
+ data[prop.name] = { min: prop.default.min, max: prop.default.max };
+ } else {
+ data[prop.name] = prop.default;
+ }
+ }
+ }
+ return data;
+}
+
+// Helper function to render a single property
+function renderProperty(prop: IBehaviorProperty, behavior: any, onChange: () => void): ReactNode {
+ switch (prop.type) {
+ case "vector3":
+ if (!behavior[prop.name]) {
+ const defaultVal = prop.default || { x: 0, y: 0, z: 0 };
+ behavior[prop.name] = new Vector3(defaultVal.x, defaultVal.y, defaultVal.z);
+ } else if (!(behavior[prop.name] instanceof Vector3)) {
+ const obj = behavior[prop.name];
+ behavior[prop.name] = new Vector3(obj.x || 0, obj.y || 0, obj.z || 0);
+ }
+ return
+
+ );
+
+ case "boolean":
+ if (behavior[prop.name] === undefined) {
+ behavior[prop.name] = prop.default !== undefined ? prop.default : false;
+ }
+ return
+ {title}
+
+
+ }
+ >
+
+
+ );
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/index.ts b/editor/src/editor/windows/effect-editor/converters/index.ts
new file mode 100644
index 000000000..76a222ac3
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/index.ts
@@ -0,0 +1,2 @@
+export * from "./quarksConverter";
+export * from "./unityConverter";
diff --git a/editor/src/editor/windows/effect-editor/converters/quarks/behaviorConverter.ts b/editor/src/editor/windows/effect-editor/converters/quarks/behaviorConverter.ts
new file mode 100644
index 000000000..bd53059d3
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarks/behaviorConverter.ts
@@ -0,0 +1,295 @@
+import type {
+ IQuarksBehavior,
+ IQuarksColorOverLifeBehavior,
+ IQuarksSizeOverLifeBehavior,
+ IQuarksRotationOverLifeBehavior,
+ IQuarksForceOverLifeBehavior,
+ IQuarksGravityForceBehavior,
+ IQuarksSpeedOverLifeBehavior,
+ IQuarksFrameOverLifeBehavior,
+ IQuarksLimitSpeedOverLifeBehavior,
+ IQuarksColorBySpeedBehavior,
+ IQuarksSizeBySpeedBehavior,
+ IQuarksRotationBySpeedBehavior,
+ IQuarksOrbitOverLifeBehavior,
+ IQuarksGradientColor,
+ IQuarksConstantColorColor,
+ IQuarksRandomColorBetweenGradient,
+ IQuarksGradientKey,
+} from "./types";
+import type { Behavior, IColorFunction, IForceOverLifeBehavior, ISpeedOverLifeBehavior, ILimitSpeedOverLifeBehavior, ISizeBySpeedBehavior } from "babylonjs-editor-tools";
+import { convertOptionalValue } from "./valueConverter";
+import { convertGradientKeys, convertSpeedOrFrameValue } from "./resourceConverter";
+import { extractConstantColor } from "./colorConverter";
+
+/**
+ * Convert IQuarks behavior to behavior
+ */
+export function convertBehavior(behavior: IQuarksBehavior): Behavior {
+ switch (behavior.type) {
+ case "ColorOverLife":
+ return convertColorOverLifeBehavior(behavior as IQuarksColorOverLifeBehavior);
+ case "SizeOverLife":
+ return convertSizeOverLifeBehavior(behavior as IQuarksSizeOverLifeBehavior);
+ case "RotationOverLife":
+ case "Rotation3DOverLife":
+ return convertRotationOverLifeBehavior(behavior as IQuarksRotationOverLifeBehavior);
+ case "ForceOverLife":
+ case "ApplyForce":
+ return convertForceOverLifeBehavior(behavior as IQuarksForceOverLifeBehavior);
+ case "GravityForce":
+ return convertGravityForceBehavior(behavior as IQuarksGravityForceBehavior);
+ case "SpeedOverLife":
+ return convertSpeedOverLifeBehavior(behavior as IQuarksSpeedOverLifeBehavior);
+ case "FrameOverLife":
+ return convertFrameOverLifeBehavior(behavior as IQuarksFrameOverLifeBehavior);
+ case "LimitSpeedOverLife":
+ return convertLimitSpeedOverLifeBehavior(behavior as IQuarksLimitSpeedOverLifeBehavior);
+ case "ColorBySpeed":
+ return convertColorBySpeedBehavior(behavior as IQuarksColorBySpeedBehavior);
+ case "SizeBySpeed":
+ return convertSizeBySpeedBehavior(behavior as IQuarksSizeBySpeedBehavior);
+ case "RotationBySpeed":
+ return convertRotationBySpeedBehavior(behavior as IQuarksRotationBySpeedBehavior);
+ case "OrbitOverLife":
+ return convertOrbitOverLifeBehavior(behavior as IQuarksOrbitOverLifeBehavior);
+ default:
+ // Fallback for unknown behaviors - copy as-is
+ return behavior as Behavior;
+ }
+}
+
+/**
+ * Convert ColorOverLife behavior
+ */
+function convertColorOverLifeBehavior(behavior: IQuarksColorOverLifeBehavior): Behavior {
+ if (!behavior.color) {
+ return {
+ type: "ColorOverLife",
+ color: {
+ colorFunctionType: "ConstantColor",
+ data: {},
+ },
+ };
+ }
+
+ const colorType = behavior.color.type;
+ let colorFunction: IColorFunction;
+
+ if (colorType === "Gradient") {
+ const gradientColor = behavior.color as IQuarksGradientColor;
+ colorFunction = {
+ colorFunctionType: "Gradient",
+ data: {
+ colorKeys: convertGradientKeys(gradientColor.color?.keys),
+ alphaKeys: convertGradientKeys(gradientColor.alpha?.keys),
+ },
+ };
+ } else if (colorType === "ConstantColor") {
+ const constantColor = behavior.color as IQuarksConstantColorColor;
+ const color = extractConstantColor(constantColor);
+ colorFunction = {
+ colorFunctionType: "ConstantColor",
+ data: {
+ color: {
+ r: color.r ?? 1,
+ g: color.g ?? 1,
+ b: color.b ?? 1,
+ a: color.a !== undefined ? color.a : 1,
+ },
+ },
+ };
+ } else if (colorType === "RandomColorBetweenGradient") {
+ const randomColor = behavior.color as IQuarksRandomColorBetweenGradient;
+ colorFunction = {
+ colorFunctionType: "RandomColorBetweenGradient",
+ data: {
+ gradient1: {
+ colorKeys: convertGradientKeys(randomColor.gradient1?.color?.keys),
+ alphaKeys: convertGradientKeys(randomColor.gradient1?.alpha?.keys),
+ },
+ gradient2: {
+ colorKeys: convertGradientKeys(randomColor.gradient2?.color?.keys),
+ alphaKeys: convertGradientKeys(randomColor.gradient2?.alpha?.keys),
+ },
+ },
+ };
+ } else {
+ // Fallback: try to detect format from keys
+ const colorData = behavior.color as {
+ color?: { keys?: IQuarksGradientKey[] };
+ alpha?: { keys?: IQuarksGradientKey[] };
+ keys?: IQuarksGradientKey[];
+ };
+ const hasColorKeys = colorData.color?.keys && colorData.color.keys.length > 0;
+ const hasAlphaKeys = colorData.alpha?.keys && colorData.alpha.keys.length > 0;
+ const hasKeys = colorData.keys && colorData.keys.length > 0;
+
+ if (hasColorKeys || hasAlphaKeys || hasKeys) {
+ const colorKeys = hasColorKeys ? convertGradientKeys(colorData.color?.keys) : hasKeys ? convertGradientKeys(colorData.keys) : [];
+ const alphaKeys = hasAlphaKeys ? convertGradientKeys(colorData.alpha?.keys) : [];
+ colorFunction = {
+ colorFunctionType: "Gradient",
+ data: {
+ colorKeys,
+ alphaKeys,
+ },
+ };
+ } else {
+ // Default to ConstantColor
+ colorFunction = {
+ colorFunctionType: "ConstantColor",
+ data: {},
+ };
+ }
+ }
+
+ return {
+ type: "ColorOverLife",
+ color: colorFunction,
+ };
+}
+
+/**
+ * Convert SizeOverLife behavior
+ */
+function convertSizeOverLifeBehavior(behavior: IQuarksSizeOverLifeBehavior): Behavior {
+ if (!behavior.size) {
+ return { type: "SizeOverLife" };
+ }
+ return {
+ type: "SizeOverLife",
+ size: {
+ ...(behavior.size.keys && { keys: convertGradientKeys(behavior.size.keys) }),
+ ...(behavior.size.functions && { functions: behavior.size.functions }),
+ },
+ };
+}
+
+/**
+ * Convert RotationOverLife behavior
+ */
+function convertRotationOverLifeBehavior(behavior: IQuarksRotationOverLifeBehavior): Behavior {
+ return {
+ type: behavior.type,
+ angularVelocity: convertOptionalValue(behavior.angularVelocity),
+ };
+}
+
+/**
+ * Convert ForceOverLife behavior
+ */
+function convertForceOverLifeBehavior(behavior: IQuarksForceOverLifeBehavior): Behavior {
+ const result: IForceOverLifeBehavior = { type: behavior.type };
+ if (behavior.force) {
+ result.force = {
+ x: convertOptionalValue(behavior.force.x),
+ y: convertOptionalValue(behavior.force.y),
+ z: convertOptionalValue(behavior.force.z),
+ };
+ }
+ result.x = convertOptionalValue(behavior.x);
+ result.y = convertOptionalValue(behavior.y);
+ result.z = convertOptionalValue(behavior.z);
+ return result;
+}
+
+/**
+ * Convert GravityForce behavior
+ */
+function convertGravityForceBehavior(behavior: IQuarksGravityForceBehavior): Behavior {
+ return {
+ type: "GravityForce",
+ gravity: convertOptionalValue(behavior.gravity),
+ } as Behavior;
+}
+
+/**
+ * Convert SpeedOverLife behavior
+ */
+function convertSpeedOverLifeBehavior(behavior: IQuarksSpeedOverLifeBehavior): Behavior {
+ const speed = convertSpeedOrFrameValue(behavior.speed);
+ return { type: "SpeedOverLife", ...(speed !== undefined && { speed }) } as ISpeedOverLifeBehavior;
+}
+
+/**
+ * Convert FrameOverLife behavior
+ */
+function convertFrameOverLifeBehavior(behavior: IQuarksFrameOverLifeBehavior): Behavior {
+ const frame = convertSpeedOrFrameValue(behavior.frame);
+ return { type: "FrameOverLife", ...(frame !== undefined && { frame }) } as Behavior;
+}
+
+/**
+ * Convert LimitSpeedOverLife behavior
+ */
+function convertLimitSpeedOverLifeBehavior(behavior: IQuarksLimitSpeedOverLifeBehavior): Behavior {
+ const speed = convertSpeedOrFrameValue(behavior.speed);
+ return {
+ type: "LimitSpeedOverLife",
+ maxSpeed: convertOptionalValue(behavior.maxSpeed),
+ ...(speed !== undefined && { speed }),
+ dampen: convertOptionalValue(behavior.dampen),
+ } as ILimitSpeedOverLifeBehavior;
+}
+
+/**
+ * Convert ColorBySpeed behavior
+ */
+function convertColorBySpeedBehavior(behavior: IQuarksColorBySpeedBehavior): Behavior {
+ const colorFunction: IColorFunction = behavior.color?.keys
+ ? {
+ colorFunctionType: "Gradient",
+ data: {
+ colorKeys: convertGradientKeys(behavior.color.keys),
+ alphaKeys: [],
+ },
+ }
+ : {
+ colorFunctionType: "ConstantColor",
+ data: {},
+ };
+
+ return {
+ type: "ColorBySpeed",
+ color: colorFunction,
+ minSpeed: convertOptionalValue(behavior.minSpeed),
+ maxSpeed: convertOptionalValue(behavior.maxSpeed),
+ };
+}
+
+/**
+ * Convert SizeBySpeed behavior
+ */
+function convertSizeBySpeedBehavior(behavior: IQuarksSizeBySpeedBehavior): Behavior {
+ return {
+ type: "SizeBySpeed",
+ minSpeed: convertOptionalValue(behavior.minSpeed),
+ maxSpeed: convertOptionalValue(behavior.maxSpeed),
+ ...(behavior.size?.keys && { size: { keys: convertGradientKeys(behavior.size.keys) } }),
+ } as ISizeBySpeedBehavior;
+}
+
+/**
+ * Convert RotationBySpeed behavior
+ */
+function convertRotationBySpeedBehavior(behavior: IQuarksRotationBySpeedBehavior): Behavior {
+ return {
+ type: "RotationBySpeed",
+ angularVelocity: convertOptionalValue(behavior.angularVelocity),
+ minSpeed: convertOptionalValue(behavior.minSpeed),
+ maxSpeed: convertOptionalValue(behavior.maxSpeed),
+ } as Behavior;
+}
+
+/**
+ * Convert OrbitOverLife behavior
+ */
+function convertOrbitOverLifeBehavior(behavior: IQuarksOrbitOverLifeBehavior): Behavior {
+ return {
+ type: "OrbitOverLife",
+ center: behavior.center,
+ radius: convertOptionalValue(behavior.radius),
+ speed: convertOptionalValue(behavior.speed),
+ } as Behavior;
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/quarks/colorConverter.ts b/editor/src/editor/windows/effect-editor/converters/quarks/colorConverter.ts
new file mode 100644
index 000000000..adafbd332
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarks/colorConverter.ts
@@ -0,0 +1,139 @@
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+import type { IQuarksColor, IQuarksStartColor, IQuarksGradientKey, IQuarksGradientColor, IQuarksConstantColorColor } from "./types";
+import type { IGradientKey } from "babylonjs-editor-tools";
+import { DEFAULT_COLOR } from "./constants";
+
+/**
+ * Helper: Create Color4 from RGBA with fallbacks
+ */
+export function createColor4(r: number | undefined, g: number | undefined, b: number | undefined, a: number | undefined = 1): Color4 {
+ return new Color4(r ?? 1, g ?? 1, b ?? 1, a ?? 1);
+}
+
+/**
+ * Helper: Create Color4 from array
+ */
+export function createColor4FromArray(arr: [number, number, number, number] | undefined): Color4 {
+ return createColor4(arr?.[0], arr?.[1], arr?.[2], arr?.[3]);
+}
+
+/**
+ * Helper: Create Color4 from RGBA object
+ */
+export function createColor4FromRGBA(rgba: { r: number; g: number; b: number; a?: number } | undefined): Color4 {
+ return rgba ? createColor4(rgba.r, rgba.g, rgba.b, rgba.a) : createColor4(1, 1, 1, 1);
+}
+
+/**
+ * Extract color from ConstantColor behavior
+ */
+export function extractConstantColor(constantColor: IQuarksConstantColorColor): { r: number; g: number; b: number; a: number } {
+ if (constantColor.color) {
+ return {
+ r: constantColor.color.r,
+ g: constantColor.color.g,
+ b: constantColor.color.b,
+ a: constantColor.color.a ?? 1,
+ };
+ }
+ if (constantColor.value && Array.isArray(constantColor.value) && constantColor.value.length >= 4) {
+ return {
+ r: constantColor.value[0],
+ g: constantColor.value[1],
+ b: constantColor.value[2],
+ a: constantColor.value[3],
+ };
+ }
+ return DEFAULT_COLOR;
+}
+
+/**
+ * Extract Color4 from gradient key value
+ */
+export function extractColorFromGradientKey(key: IQuarksGradientKey): Color4 {
+ if (Array.isArray(key.value)) {
+ return createColor4FromArray(key.value as [number, number, number, number]);
+ }
+ if (typeof key.value === "object" && key.value !== null && "r" in key.value) {
+ return createColor4FromRGBA(key.value as { r: number; g: number; b: number; a?: number });
+ }
+ return createColor4(1, 1, 1, 1);
+}
+
+/**
+ * Convert IQuarks gradient key to gradient key
+ */
+export function convertGradientKey(key: IQuarksGradientKey): IGradientKey {
+ return {
+ time: key.time,
+ value: key.value,
+ pos: key.pos,
+ };
+}
+
+/**
+ * Convert IQuarks color to native Babylon.js Color4 (color1, color2)
+ */
+export function convertColorToColor4(color: IQuarksColor): { color1: Color4; color2: Color4 } {
+ if (Array.isArray(color)) {
+ const c = createColor4FromArray(color as [number, number, number, number]);
+ return { color1: c, color2: c };
+ }
+
+ if (typeof color === "object" && color !== null && "type" in color) {
+ if (color.type === "ConstantColor") {
+ const constColor = color as IQuarksConstantColorColor;
+ if (constColor.value && Array.isArray(constColor.value)) {
+ const c = createColor4FromArray(constColor.value);
+ return { color1: c, color2: c };
+ }
+ if (constColor.color) {
+ const c = createColor4FromRGBA(constColor.color);
+ return { color1: c, color2: c };
+ }
+ }
+ // Handle RandomColor (interpolation between two colors)
+ const randomColor = color as { type: string; a?: [number, number, number, number]; b?: [number, number, number, number] };
+ if (randomColor.type === "RandomColor" && randomColor.a && randomColor.b) {
+ const color1 = createColor4FromArray(randomColor.a);
+ const color2 = createColor4FromArray(randomColor.b);
+ return { color1, color2 };
+ }
+ }
+
+ const white = createColor4(1, 1, 1, 1);
+ return { color1: white, color2: white };
+}
+
+/**
+ * Convert IQuarksStartColor to native Babylon.js Color4 (color1, color2)
+ */
+export function convertStartColorToColor4(startColor: IQuarksStartColor): { color1: Color4; color2: Color4 } {
+ // Handle Gradient type
+ if (typeof startColor === "object" && startColor !== null && "type" in startColor) {
+ if (startColor.type === "Gradient") {
+ // For Gradient, extract color from CLinearFunction if available
+ const gradientColor = startColor as IQuarksGradientColor;
+ if (gradientColor.color?.keys && gradientColor.color.keys.length > 0) {
+ const firstKey = gradientColor.color.keys[0];
+ const lastKey = gradientColor.color.keys[gradientColor.color.keys.length - 1];
+ const color1 = extractColorFromGradientKey(firstKey);
+ const color2 = extractColorFromGradientKey(lastKey);
+ return { color1, color2 };
+ }
+ }
+ if (startColor.type === "ColorRange") {
+ // For ColorRange, use a and b colors
+ const colorRange = startColor as {
+ type: string;
+ a?: { r: number; g: number; b: number; a?: number };
+ b?: { r: number; g: number; b: number; a?: number };
+ };
+ const color1 = createColor4FromRGBA(colorRange.a);
+ const color2 = createColor4FromRGBA(colorRange.b);
+ return { color1, color2 };
+ }
+ }
+ // Otherwise treat as IQuarksColor
+ return convertColorToColor4(startColor as IQuarksColor);
+}
diff --git a/editor/src/editor/windows/effect-editor/converters/quarks/constants.ts b/editor/src/editor/windows/effect-editor/converters/quarks/constants.ts
new file mode 100644
index 000000000..b6b1951aa
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarks/constants.ts
@@ -0,0 +1,17 @@
+/**
+ * Constants used in Quarks converter
+ */
+export const DEFAULT_DURATION = 5;
+export const DEFAULT_COLOR = { r: 1, g: 1, b: 1, a: 1 };
+export const DEFAULT_COLOR_HEX = 0xffffff;
+export const PREWARM_FPS = 60;
+export const DEFAULT_PREWARM_STEP_OFFSET = 1 / PREWARM_FPS;
+
+// Three.js constants
+export const THREE_REPEAT_WRAPPING = 1000;
+export const THREE_CLAMP_TO_EDGE_WRAPPING = 1001;
+export const THREE_MIRRORED_REPEAT_WRAPPING = 1002;
+export const THREE_LINEAR_FILTER = 1006;
+export const THREE_NEAREST_MIPMAP_NEAREST_FILTER = 1007;
+export const THREE_LINEAR_MIPMAP_NEAREST_FILTER = 1008;
+export const THREE_NEAREST_MIPMAP_LINEAR_FILTER = 1009;
diff --git a/editor/src/editor/windows/effect-editor/converters/quarks/emitterConfigConverter.ts b/editor/src/editor/windows/effect-editor/converters/quarks/emitterConfigConverter.ts
new file mode 100644
index 000000000..4ff92a2e9
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/converters/quarks/emitterConfigConverter.ts
@@ -0,0 +1,173 @@
+import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
+import type { IQuarksParticleEmitterConfig } from "./types";
+import type { IParticleSystemConfig } from "babylonjs-editor-tools";
+import { DEFAULT_DURATION, DEFAULT_PREWARM_STEP_OFFSET, PREWARM_FPS } from "./constants";
+import { convertValue, convertValueToMinMax, convertStartSizeToMinMax, convertRotationToMinMax } from "./valueConverter";
+import { convertStartColorToColor4 } from "./colorConverter";
+import { convertShape } from "./resourceConverter";
+import { convertBehavior } from "./behaviorConverter";
+
+/**
+ * Convert emitter config from IQuarks to format
+ */
+export function convertEmitterConfig(config: IQuarksParticleEmitterConfig): IParticleSystemConfig {
+ const result = convertBasicEmitterConfig(config);
+ convertLifeProperties(config, result);
+ convertEmissionProperties(config, result);
+ convertVisualProperties(config, result);
+ convertBehaviorsAndShape(config, result);
+ convertBillboardConfig(config, result);
+ return result;
+}
+
+/**
+ * Convert basic emitter configuration (system type, duration, prewarm, etc.)
+ */
+function convertBasicEmitterConfig(config: IQuarksParticleEmitterConfig): IParticleSystemConfig {
+ const systemType: "solid" | "base" = config.renderMode === 2 ? "solid" : "base";
+ const duration = config.duration ?? DEFAULT_DURATION;
+ const targetStopDuration = config.looping ? 0 : duration;
+
+ // Convert prewarm to native preWarmCycles
+ let preWarmCycles = 0;
+ let preWarmStepOffset = DEFAULT_PREWARM_STEP_OFFSET;
+ if (config.prewarm) {
+ preWarmCycles = Math.ceil(duration * PREWARM_FPS);
+ preWarmStepOffset = DEFAULT_PREWARM_STEP_OFFSET;
+ }
+
+ const isLocal = config.worldSpace === undefined ? false : !config.worldSpace;
+ const disposeOnStop = config.autoDestroy ?? false;
+
+ return {
+ version: config.version,
+ systemType,
+ targetStopDuration,
+ preWarmCycles,
+ preWarmStepOffset,
+ isLocal,
+ disposeOnStop,
+ instancingGeometry: config.instancingGeometry,
+ renderOrder: config.renderOrder,
+ layers: config.layers,
+ uTileCount: config.uTileCount,
+ vTileCount: config.vTileCount,
+ };
+}
+
+/**
+ * Convert life-related properties (lifeTime, size, rotation, color)
+ */
+function convertLifeProperties(config: IQuarksParticleEmitterConfig, result: IParticleSystemConfig): void {
+ if (config.startLife !== undefined) {
+ const lifeResult = convertValueToMinMax(config.startLife);
+ result.minLifeTime = lifeResult.min;
+ result.maxLifeTime = lifeResult.max;
+ if (lifeResult.gradients) {
+ result.lifeTimeGradients = lifeResult.gradients;
+ }
+ }
+
+ if (config.startSize !== undefined) {
+ const sizeResult = convertStartSizeToMinMax(config.startSize);
+ result.minSize = sizeResult.min;
+ result.maxSize = sizeResult.max;
+ if (sizeResult.gradients) {
+ result.startSizeGradients = sizeResult.gradients;
+ }
+ }
+
+ if (config.startRotation !== undefined) {
+ const rotResult = convertRotationToMinMax(config.startRotation);
+ result.minInitialRotation = rotResult.min;
+ result.maxInitialRotation = rotResult.max;
+ }
+
+ if (config.startColor !== undefined) {
+ const colorResult = convertStartColorToColor4(config.startColor);
+ result.color1 = colorResult.color1;
+ result.color2 = colorResult.color2;
+ }
+}
+
+/**
+ * Convert emission-related properties (speed, rate, bursts)
+ */
+function convertEmissionProperties(config: IQuarksParticleEmitterConfig, result: IParticleSystemConfig): void {
+ if (config.startSpeed !== undefined) {
+ const speedResult = convertValueToMinMax(config.startSpeed);
+ result.minEmitPower = speedResult.min;
+ result.maxEmitPower = speedResult.max;
+ }
+
+ if (config.emissionOverTime !== undefined) {
+ const emitResult = convertValueToMinMax(config.emissionOverTime);
+ result.emitRate = emitResult.min;
+ if (emitResult.gradients) {
+ result.emitRateGradients = emitResult.gradients;
+ }
+ }
+
+ if (config.emissionOverDistance !== undefined) {
+ result.emissionOverDistance = convertValue(config.emissionOverDistance);
+ }
+
+ if (config.emissionBursts !== undefined && Array.isArray(config.emissionBursts)) {
+ result.emissionBursts = config.emissionBursts.map((burst) => ({
+ time: convertValue(burst.time),
+ count: convertValue(burst.count),
+ }));
+ }
+}
+
+/**
+ * Convert visual properties (sprite animation, shape)
+ */
+function convertVisualProperties(config: IQuarksParticleEmitterConfig, result: IParticleSystemConfig): void {
+ if (config.startTileIndex !== undefined) {
+ result.startTileIndex = convertValue(config.startTileIndex);
+ }
+
+ if (config.shape !== undefined) {
+ result.shape = convertShape(config.shape);
+ }
+}
+
+/**
+ * Convert behaviors and shape
+ */
+function convertBehaviorsAndShape(config: IQuarksParticleEmitterConfig, result: IParticleSystemConfig): void {
+ if (config.behaviors !== undefined && Array.isArray(config.behaviors)) {
+ result.behaviors = config.behaviors.map((behavior) => convertBehavior(behavior));
+ }
+}
+
+/**
+ * Convert billboard configuration from renderMode
+ */
+function convertBillboardConfig(config: IQuarksParticleEmitterConfig, result: IParticleSystemConfig): void {
+ const billboardConfig = convertRenderMode(config.renderMode);
+ result.isBillboardBased = billboardConfig.isBillboardBased;
+ if (billboardConfig.billboardMode !== undefined) {
+ result.billboardMode = billboardConfig.billboardMode;
+ }
+}
+
+/**
+ * Helper: Convert renderMode to billboard config
+ */
+function convertRenderMode(renderMode: number | undefined): { isBillboardBased: boolean; billboardMode?: number } {
+ const renderModeMap: RecordAnimation Panel
+ Animation timeline will be displayed here
+ (this._containerRef = ref)} className="flex flex-col gap-3 w-full">
+ {/* Toolbar */}
+
+
+
+ );
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/editors/color-function.tsx b/editor/src/editor/windows/effect-editor/editors/color-function.tsx
new file mode 100644
index 000000000..f177aaa75
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/editors/color-function.tsx
@@ -0,0 +1,356 @@
+import { ReactNode } from "react";
+import { Color4 } from "@babylonjs/core/Maths/math.color";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector";
+
+import { EditorInspectorColorField } from "../../../layout/inspector/fields/color";
+import { EditorInspectorColorGradientField } from "../../../layout/inspector/fields/gradient";
+import { EditorInspectorListField } from "../../../layout/inspector/fields/list";
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+import type { IGradientKey } from "../../../../ui/gradient-picker";
+
+export type ColorFunctionType = "ConstantColor" | "ColorRange" | "Gradient" | "RandomColor" | "RandomColorBetweenGradient";
+
+export interface IColorFunctionEditorProps {
+ value: any;
+ onChange: () => void;
+ label: string;
+}
+
+export function ColorFunctionEditor(props: IColorFunctionEditorProps): ReactNode {
+ const { value, onChange, label } = props;
+
+ // Convert from Quarks format to UI format if needed
+ // Quarks format: { color: { type: "Gradient" | "ConstantColor" | "RandomColorBetweenGradient", ... } }
+ // UI format: { colorFunctionType: "Gradient" | "ConstantColor" | "RandomColorBetweenGradient", data: {...} }
+ if (value && !value.colorFunctionType) {
+ // Check if this is Quarks format
+ if (value.color && typeof value.color === "object" && "type" in value.color) {
+ const colorType = value.color.type;
+
+ if (colorType === "Gradient") {
+ // Convert Gradient format
+ value.colorFunctionType = "Gradient";
+ value.data = {
+ colorKeys: value.color.color?.keys || [],
+ alphaKeys: value.color.alpha?.keys || [],
+ };
+ delete value.color;
+ } else if (colorType === "ConstantColor") {
+ // Convert ConstantColor format
+ value.colorFunctionType = "ConstantColor";
+ const color =
+ value.color.color ||
+ (value.color.value ? { r: value.color.value[0], g: value.color.value[1], b: value.color.value[2], a: value.color.value[3] } : { r: 1, g: 1, b: 1, a: 1 });
+ value.data = {
+ color: {
+ r: color.r ?? 1,
+ g: color.g ?? 1,
+ b: color.b ?? 1,
+ a: color.a !== undefined ? color.a : 1,
+ },
+ };
+ delete value.color;
+ } else if (colorType === "RandomColorBetweenGradient") {
+ // Convert RandomColorBetweenGradient format
+ value.colorFunctionType = "RandomColorBetweenGradient";
+ value.data = {
+ gradient1: {
+ colorKeys: value.color.gradient1?.color?.keys || [],
+ alphaKeys: value.color.gradient1?.alpha?.keys || [],
+ },
+ gradient2: {
+ colorKeys: value.color.gradient2?.color?.keys || [],
+ alphaKeys: value.color.gradient2?.alpha?.keys || [],
+ },
+ };
+ delete value.color;
+ } else {
+ // Fallback: try old format
+ const hasColorKeys = value.color.color?.keys && value.color.color.keys.length > 0;
+ const hasAlphaKeys = value.color.alpha?.keys && value.color.alpha.keys.length > 0;
+ const hasKeys = value.color.keys && value.color.keys.length > 0;
+
+ if (hasColorKeys || hasAlphaKeys || hasKeys) {
+ value.colorFunctionType = "Gradient";
+ value.data = {
+ colorKeys: hasColorKeys ? value.color.color.keys : hasKeys ? value.color.keys : [],
+ alphaKeys: hasAlphaKeys ? value.color.alpha.keys : [],
+ };
+ delete value.color;
+ } else {
+ value.colorFunctionType = "ConstantColor";
+ value.data = {};
+ }
+ }
+ } else if (value.color) {
+ // Old Quarks format without type
+ const hasColorKeys = value.color.color?.keys && value.color.color.keys.length > 0;
+ const hasAlphaKeys = value.color.alpha?.keys && value.color.alpha.keys.length > 0;
+ const hasKeys = value.color.keys && value.color.keys.length > 0;
+
+ if (hasColorKeys || hasAlphaKeys || hasKeys) {
+ value.colorFunctionType = "Gradient";
+ value.data = {
+ colorKeys: hasColorKeys ? value.color.color.keys : hasKeys ? value.color.keys : [],
+ alphaKeys: hasAlphaKeys ? value.color.alpha.keys : [],
+ };
+ delete value.color;
+ } else {
+ value.colorFunctionType = "ConstantColor";
+ value.data = {};
+ }
+ } else {
+ // Initialize color function type if not set
+ value.colorFunctionType = "ConstantColor";
+ value.data = {};
+ }
+ }
+
+ const functionType = value.colorFunctionType as ColorFunctionType;
+
+ // Ensure data object exists
+ if (!value.data) {
+ value.data = {};
+ }
+
+ const typeItems = [
+ { text: "Color", value: "ConstantColor" },
+ { text: "Color Range", value: "ColorRange" },
+ { text: "Gradient", value: "Gradient" },
+ { text: "Random Color", value: "RandomColor" },
+ { text: "Random Between Gradient", value: "RandomColorBetweenGradient" },
+ ];
+
+ return (
+ <>
+
+
+
+ {/* SVG Canvas */}
+
+ Curve Editor
+
+
+
+
+
+
+
+ this._applyPreset("linear")}>Linear
+ this._applyPreset("easeIn")}>Ease In
+ this._applyPreset("easeOut")}>Ease Out
+ this._applyPreset("easeInOut")}>Ease In-Out
+ this._applyPreset("easeInBack")}>Ease In Back
+ this._applyPreset("easeOutBack")}>Ease Out Back
+
+
+
+
+
+
+
+ {/* Axis labels */}
+
+
+ {/* Value inputs */}
+ Time
+ Value
+
+
+
+
+ {
+ this.setState({ curve: { ...this.state.curve } });
+ this._saveCurveToValue();
+ this.props.onChange();
+ }}
+ />
+
+
+
+ {
+ this.setState({ curve: { ...this.state.curve } });
+ this._saveCurveToValue();
+ this.props.onChange();
+ }}
+ />
+
+
+
+ {
+ this.setState({ curve: { ...this.state.curve } });
+ this._saveCurveToValue();
+ this.props.onChange();
+ }}
+ />
+
+
+
+ {
+ this.setState({ curve: { ...this.state.curve } });
+ this._saveCurveToValue();
+ this.props.onChange();
+ }}
+ />
+
+ Gradient 1
+ Gradient 2
+ Gradient 1
+ Gradient 2
+ {label ? "Range" : ""}
+
+
+ X
+ Y
+ Z
+ Angle X
+ Angle Y
+ Angle Z
+ Axis X
+ Axis Y
+ Axis Z
+ Angle
+ Random quaternion rotation will be applied to each particle
+
+ )}
+
+ );
+}
diff --git a/editor/src/editor/windows/effect-editor/editors/value.tsx b/editor/src/editor/windows/effect-editor/editors/value.tsx
new file mode 100644
index 000000000..e84d2a201
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/editors/value.tsx
@@ -0,0 +1,335 @@
+import { ReactNode } from "react";
+
+import { EditorInspectorNumberField } from "../../../layout/inspector/fields/number";
+import { EditorInspectorListField } from "../../../layout/inspector/fields/list";
+import { EditorInspectorBlockField } from "../../../layout/inspector/fields/block";
+
+import { type Value, type IConstantValue, type IIntervalValue, parseConstantValue, parseIntervalValue } from "babylonjs-editor-tools";
+
+type PiecewiseBezier = Extract{label ? "Range" : ""}
+
+ {
+ // Value change is handled by setter
+ }}
+ />
+ {
+ // Value change is handled by setter
+ }}
+ />
+
+ X
+ Y
+ Z
+
+ {this.state.nodes.length > 0 && (
+
+ );
+ }
+
+ private _handleNodeExpanded(node: TreeNodeInfo
+ this._handleNodeExpanded(n)}
+ onNodeCollapse={(n) => this._handleNodeCollapsed(n)}
+ onNodeClick={(n) => this._handleNodeClicked(n)}
+ />
+
+ )}
+
+ {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "copy";
+ }}
+ onDrop={(ev) => this._handleDropEmpty(ev)}
+ >
+
+
+
+
+
+
+
+
+ {
+ ev.dataTransfer.setData("Effect-editor/create-effect", "effect");
+ }}
+ onClick={() => this._handleCreateEffect()}
+ >
+
+
+
+
+
+
+
+ {this.state.nodes.length === 0 &&
+ No particles. Right-click to add.
}
+ {
+ if (node.nodeData?.type === "group") {
+ ev.preventDefault();
+ ev.stopPropagation();
+ ev.dataTransfer.dropEffect = "copy";
+ }
+ }}
+ onDrop={(ev) => {
+ if (node.nodeData?.type === "group") {
+ ev.preventDefault();
+ ev.stopPropagation();
+ this._handleDropOnNode(node, ev);
+ }
+ }}
+ >
+ {name}
+
+ );
+
+ return (
+
+
+
+ {/* Unity Import Modal */}
+
+ (this.editor.layout = r)} filePath={this.state.filePath || ""} editor={this.editor} />
+
+
+ this._layoutFactory(n)} />
+
+ );
+ }
+
+ private _layoutFactory(node: TabNode): ReactNode {
+ const componentName = node.getComponent();
+ if (!componentName) {
+ return Error, see console...
;
+ }
+
+ // Always update components before returning, especially for properties tabs
+ // This ensures flexlayout-react gets the latest component with updated props
+ if (componentName.startsWith("properties-")) {
+ this._updateComponents();
+ }
+
+ const component = this._components[componentName];
+ if (!component) {
+ return Error, see console...
;
+ }
+
+ node.setEventListener("resize", () => {
+ waitNextAnimationFrame().then(() => this.props.editor.preview?.resize());
+ });
+
+ return component;
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/modals/unity-import-modal.tsx b/editor/src/editor/windows/effect-editor/modals/unity-import-modal.tsx
new file mode 100644
index 000000000..c1e079127
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/modals/unity-import-modal.tsx
@@ -0,0 +1,1115 @@
+/**
+ * Unity Asset Import Modal
+ * Allows importing Unity Particle System prefabs from ZIP archives
+ */
+
+import { Component, ReactNode } from "react";
+import { Tree, TreeNodeInfo } from "@blueprintjs/core";
+import { Button } from "../../../../ui/shadcn/ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../../../../ui/shadcn/ui/dialog";
+import { Checkbox } from "../../../../ui/shadcn/ui/checkbox";
+import { Upload, FileArchive, Search } from "lucide-react";
+import { HiOutlineFolder } from "react-icons/hi2";
+import { toast } from "sonner";
+import * as yaml from "js-yaml";
+import { Input } from "../../../../ui/shadcn/ui/input";
+import { ScrollArea } from "../../../../ui/shadcn/ui/scroll-area";
+
+/**
+ * Recursively process Unity inline objects like {fileID: 123}
+ */
+function processUnityInlineObjects(obj: any): any {
+ if (typeof obj === "string") {
+ const inlineMatch = obj.match(/^\s*\{([^}]+)\}\s*$/);
+ if (inlineMatch) {
+ const pairs = inlineMatch[1].split(",");
+ const result: any = {};
+ for (const pair of pairs) {
+ const [key, value] = pair.split(":").map((s) => s.trim());
+ if (key && value !== undefined) {
+ if (value === "true") {
+ result[key] = true;
+ } else if (value === "false") {
+ result[key] = false;
+ } else if (/^-?\d+$/.test(value)) {
+ result[key] = parseInt(value, 10);
+ } else if (/^-?\d*\.\d+$/.test(value)) {
+ result[key] = parseFloat(value);
+ } else {
+ result[key] = value.replace(/^["']|["']$/g, "");
+ }
+ }
+ }
+ return result;
+ }
+ return obj;
+ }
+
+ if (Array.isArray(obj)) {
+ return obj.map((item) => processUnityInlineObjects(item));
+ }
+
+ if (obj && typeof obj === "object") {
+ const result: any = {};
+ for (const [key, value] of Object.entries(obj)) {
+ result[key] = processUnityInlineObjects(value);
+ }
+ return result;
+ }
+
+ return obj;
+}
+
+/**
+ * Parse Unity YAML string into component map (same logic as in converter)
+ */
+function parseUnityYAML(yamlContent: string): Map
+ {node.type === "prefab" && (
+ this._handleTogglePrefab(node.path, checked as boolean)} onClick={(e) => e.stopPropagation()} />
+ )}
+ {node.name || "Root"}
+
+ );
+
+ return {
+ id: node.path,
+ label,
+ icon: node.type === "folder" ?
+ {node.type === "prefab" && (
+ this._handleTogglePrefab(path, c as boolean)} onClick={(e) => e.stopPropagation()} />
+ )}
+ {node.name || "Root"}
+
+ );
+ return { ...n, label };
+ }
+ if (n.childNodes) {
+ return { ...n, childNodes: updateNodes(n.childNodes) };
+ }
+ return n;
+ });
+ };
+
+ this.setState({
+ selectedPrefabs,
+ treeNodes: updateNodes(this.state.treeNodes),
+ });
+ }
+
+ /**
+ * Handle select all prefabs
+ */
+ private _handleSelectAll(): void {
+ const allPaths = this._collectAllPaths(this.state.treeNodes);
+ this.setState({ selectedPrefabs: new Set(allPaths) });
+
+ // Update tree to reflect all selected
+ const updateNodes = (nodes: TreeNodeInfo
+ this._handleTogglePrefab(node.path, c as boolean)} onClick={(e) => e.stopPropagation()} />
+ {node.name}
+
+ );
+ return { ...n, label };
+ }
+ if (n.childNodes) {
+ return { ...n, childNodes: updateNodes(n.childNodes) };
+ }
+ return n;
+ });
+ };
+ this.setState({ treeNodes: updateNodes(this.state.treeNodes) });
+ }
+
+ /**
+ * Handle select none
+ */
+ private _handleSelectNone(): void {
+ this.setState({ selectedPrefabs: new Set() });
+
+ // Update tree to reflect none selected
+ const updateNodes = (nodes: TreeNodeInfo
+ this._handleTogglePrefab(node.path, c as boolean)} onClick={(e) => e.stopPropagation()} />
+ {node.name}
+
+ );
+ return { ...n, label };
+ }
+ if (n.childNodes) {
+ return { ...n, childNodes: updateNodes(n.childNodes) };
+ }
+ return n;
+ });
+ };
+ this.setState({ treeNodes: updateNodes(this.state.treeNodes) });
+ }
+
+ /**
+ * Collect all prefab paths recursively from tree nodes
+ */
+ private _collectAllPaths(nodes: TreeNodeInfo
+
+ );
+ }
+
+ public componentDidMount(): void {
+ // Canvas ref will be set in render, _onGotCanvasRef will be called automatically
+ // Sync playing state with effect state
+ this._syncPlayingState();
+ }
+
+ private _syncPlayingState(): void {
+ if (!this.props.selectedNodeId) {
+ // No node selected, hide buttons
+ if (this.state.playing) {
+ this.setState({ playing: false });
+ }
+ return;
+ }
+
+ const nodeData = this.props.editor?.graph?.getNodeData(this.props.selectedNodeId);
+ if (!nodeData) {
+ if (this.state.playing) {
+ this.setState({ playing: false });
+ }
+ return;
+ }
+
+ // Find the effect that contains this node
+ const effect = this._findEffectForNode(nodeData);
+ if (!effect) {
+ if (this.state.playing) {
+ this.setState({ playing: false });
+ }
+ return;
+ }
+
+ // Check if this is an effect root node
+ const isEffectRoot = this._isEffectRootNode(nodeData);
+ if (isEffectRoot) {
+ // For effect root, check if entire effect is started
+ const isStarted = effect.isStarted();
+ if (this.state.playing !== isStarted) {
+ this.setState({ playing: isStarted });
+ }
+ } else {
+ // For group or system, check if node is started
+ const isStarted = effect.isNodeStarted(nodeData);
+ if (this.state.playing !== isStarted) {
+ this.setState({ playing: isStarted });
+ }
+ }
+ }
+
+ /**
+ * Find the effect that contains the given node
+ */
+ private _findEffectForNode(node: IEffectNode): Effect | null {
+ const effects = this.props.editor?.graph?.getAllEffects() || [];
+ for (const effect of effects) {
+ // Check if node is part of this effect's hierarchy
+ if (this._isNodeInEffect(node, effect)) {
+ return effect;
+ }
+ }
+ return null;
+ }
+
+ /**
+ * Check if node is part of effect's hierarchy
+ */
+ private _isNodeInEffect(node: IEffectNode, effect: Effect): boolean {
+ if (!effect.root) {
+ return false;
+ }
+
+ const findNode = (current: IEffectNode): boolean => {
+ if (current === node || current.uuid === node.uuid || current.name === node.name) {
+ return true;
+ }
+ for (const child of current.children) {
+ if (findNode(child)) {
+ return true;
+ }
+ }
+ return false;
+ };
+
+ return findNode(effect.root);
+ }
+
+ /**
+ * Check if node is an effect root node
+ */
+ private _isEffectRootNode(node: IEffectNode): boolean {
+ if (!node.uuid) {
+ return false;
+ }
+
+ // Check if this node's UUID matches an effect ID (effect root has effect ID as uuid)
+ const effects = this.props.editor?.graph?.getAllEffects() || [];
+ for (const effect of effects) {
+ if (effect.root && effect.root.uuid === node.uuid) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ public componentWillUnmount(): void {
+ if (this._renderLoopId !== -1) {
+ cancelAnimationFrame(this._renderLoopId);
+ }
+
+ this.scene?.dispose();
+ this.engine?.dispose();
+ }
+
+ /**
+ * Resizes the engine.
+ */
+ public resize(): void {
+ this.engine?.resize();
+ }
+
+ private async _onGotCanvasRef(canvas: HTMLCanvasElement | null): Promise{prop.label}
+
+
+ No behaviors. Click "Add Behavior" to add one.
}
+ {behaviorConfigs.map((behavior, index) => {
+ const definition = getBehaviorDefinition(behavior.type);
+ const title = definition?.label || behavior.type || `Behavior ${index + 1}`;
+
+ return (
+ Direction
+ Emit Box
+ No emitter found.
;
+ }
+
+ const emitterType = emitter.getClassName();
+ const emitterTypeMap: RecordDirection
+ Emit Box
+ Direction
+ Direction
+ Direction
+ Direction
+
+ {bursts.map((burst, idx) => (
+
+
+
+ ))}
+
+
+
+ Burst #{idx + 1}
+
+
+ {
+ burst.time = val as Value;
+ onChange();
+ }}
+ />
+ {
+ burst.count = val as Value;
+ onChange();
+ }}
+ />
+
+ Start Life
+ Start Size
+ Scale X
+ Scale Y
+ Start Speed
+ Start Color
+ Start Rotation
+ {(() => {
+ // Both systems use native minInitialRotation/maxInitialRotation
+ const rotation = getStartRotation();
+ const angleZ =
+ rotation && typeof rotation === "object" && "type" in rotation && rotation.type === "Euler" && rotation.angleZ
+ ? rotation.angleZ
+ : { type: "IntervalValue" as const, min: 0, max: 0 };
+ return (
+ Angular Speed
+ Data not available
+
+ );
+ }
+
+ const object = isSystem(nodeData.data) ? nodeData.data.emitter : nodeData.data;
+
+ const GetRotationInspector = (object: TransformNode | AbstractMesh, onFinishChange?: () => void): ReactNode => {
+ if (object.rotationQuaternion) {
+ const valueRef = object.rotationQuaternion.toEulerAngles();
+
+ const proxy = new Proxy(valueRef, {
+ get(target, prop) {
+ return target[prop];
+ },
+ set(obj, prop, value) {
+ obj[prop] = value;
+ object.rotationQuaternion?.copyFrom(obj.toQuaternion());
+
+ return true;
+ },
+ });
+
+ const o = { proxy };
+
+ return (
+ System Mode: {systemType === "solid" ? "Mesh (Solid)" : "Billboard (Base)"}
+
+ {/* Billboard Mode - только для base */}
+ {isEffectParticleSystem && (
+ <>
+
+
+ );
+ }
+
+ const nodeData = getNodeData(selectedNodeId);
+
+ if (!nodeData) {
+ return (
+ {tabType === "object" ? "No node selected" : "No particle selected"}
+
+
+ );
+ }
+
+ // For groups, only show object properties
+ if (nodeData.type === "group" && tabType !== "object") {
+ return (
+ Node not found
+
+
+ );
+ }
+
+ // For particles, check if system exists
+ if (nodeData.type === "particle" && !nodeData.data && tabType !== "object") {
+ return (
+ Select a particle system
+
+
+ );
+ }
+
+ const commonProps = {
+ nodeData,
+ onChange: () => {
+ this.forceUpdate();
+ onNameChanged?.();
+ },
+ };
+
+ switch (tabType) {
+ case "object":
+ return (
+ Select a particle system
+
+
+ );
+ case "emission":
+ return (
+
+
+ );
+ case "renderer":
+ return (
+
+
+ );
+ case "initialization":
+ return (
+
+
+ );
+ case "behaviors":
+ return (
+
+
+ );
+ default:
+ return null;
+ }
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/resources.tsx b/editor/src/editor/windows/effect-editor/resources.tsx
new file mode 100644
index 000000000..5be69723e
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/resources.tsx
@@ -0,0 +1,78 @@
+import { Component, ReactNode } from "react";
+import { Tree, TreeNodeInfo } from "@blueprintjs/core";
+
+import { IoImageOutline, IoCubeOutline } from "react-icons/io5";
+
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "../../../ui/shadcn/ui/context-menu";
+
+export interface IEffectEditorResourcesProps {
+ resources: any[];
+}
+
+export interface IEffectEditorResourcesState {
+ nodes: TreeNodeInfo[];
+}
+
+export class EffectEditorResources extends Component{resource.name}
+
+
+ );
+ }
+
+ return (
+ No resources
+
+
+ );
+ }
+}
diff --git a/editor/src/editor/windows/effect-editor/toolbar.tsx b/editor/src/editor/windows/effect-editor/toolbar.tsx
new file mode 100644
index 000000000..e9742a6da
--- /dev/null
+++ b/editor/src/editor/windows/effect-editor/toolbar.tsx
@@ -0,0 +1,160 @@
+import { Component, ReactNode } from "react";
+
+import {
+ Menubar,
+ MenubarContent,
+ MenubarItem,
+ MenubarMenu,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarTrigger,
+} from "../../../ui/shadcn/ui/menubar";
+
+import { openSingleFileDialog, saveSingleFileDialog } from "../../../tools/dialog";
+import { ToolbarComponent } from "../../../ui/toolbar";
+
+import IEffectEditor from "./index";
+
+export interface IEffectEditorToolbarProps {
+ editor: IEffectEditor;
+}
+
+export interface IEffectEditorToolbarState {
+ // No state needed - modal is managed by editor
+}
+
+export class EffectEditorToolbar extends Component
+
+ 
+
+ {/* File */}
+
+
+
+ Effect Editor
+ {this.props.editor.state.filePath && (
+
+ (...{this.props.editor.state.filePath.substring(this.props.editor.state.filePath.length - 30)})
+ )}
+
+ {/* Color Gradient Bar */}
+
+ );
+}
diff --git a/editor/src/ui/shadcn/ui/scroll-area.tsx b/editor/src/ui/shadcn/ui/scroll-area.tsx
new file mode 100644
index 000000000..541bed078
--- /dev/null
+++ b/editor/src/ui/shadcn/ui/scroll-area.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "../../utils";
+
+const ScrollArea = React.forwardRef
+
+
+ {/* Alpha Gradient Bar */}
+ Color Gradient
+ handleGradientClick(e, false)}
+ >
+ {sortedColorKeys.map((key, index) => {
+ const pos = (key.pos || 0) * 100;
+ const color = getColorFromKey(key);
+ const isSelected = selectedKeyIndex === index;
+ return (
+
+
+ {/* Color Picker for Selected Key */}
+ {selectedKeyIndex !== null && (
+ handleKeyMouseDown(e, index, false)}
+ >
+
+
+ );
+ })}
+
+
+ )}
+
+ handleColorChange(new Color4(color.r, color.g, color.b, color.a))}
+ onFinish={(color) => {
+ handleColorChange(new Color4(color.r, color.g, color.b, color.a));
+ if (onFinish) {
+ onFinish(colorKeys, alphaKeys);
+ }
+ }}
+ />
+
+
+
+
+ Alpha Gradient
+ handleGradientClick(e, true)}
+ >
+ {sortedAlphaKeys.map((key, index) => {
+ const pos = (key.pos || 0) * 100;
+ const alphaValue = typeof key.value === "number" ? key.value : Array.isArray(key.value) ? key.value[3] || 1 : 1;
+ const isSelected = selectedAlphaIndex === index;
+ return (
+
+
+ {/* Alpha Slider for Selected Key */}
+ {selectedAlphaIndex !== null && (
+ handleKeyMouseDown(e, index, true)}
+ >
+
+
+ );
+ })}
+
+
+ )}
+
+ handleAlphaChange(parseFloat(e.target.value))}
+ className="w-full"
+ />
+
+
+