@kiberon-labs/behave-graph-scene 1.0.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@kiberon-labs/behave-graph-scene",
+  "version": "1.0.0",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "source": "./src/index.ts",
+  "scripts": {
+    "build": "tsdown",
+    "check": "oxfmt --check",
+    "format": "oxfmt",
+    "test": "vitest",
+    "dev": "tsdown --watch src",
+    "lint": "oxlint",
+    "typecheck": "tsc"
+  },
+  "devDependencies": {
+    "@types/glob": "^8.0.0",
+    "@types/node": "^24.10.1",
+    "@types/offscreencanvas": "^2019.7.0",
+    "@types/three": "0.152.1",
+    "oxfmt": "^0.14.0",
+    "oxlint": "^1.29.0",
+    "tsdown": "^0.16.5",
+    "vitest": "^4.0.10"
+  },
+  "dependencies": {},
+  "license": "ISC",
+  "peerDependencies": {
+    "@kiberon-labs/behave-graph": "*",
+    "three": "0.152.2",
+    "three-stdlib": "^2.22.4"
+  }
+}

package/src/Abstractions/Drivers/DummyScene.ts

@@ -0,0 +1,79 @@
+import {
+  BooleanValue,
+  EventEmitter,
+  FloatValue,
+  IntegerValue,
+  StringValue,
+  type ValueType
+} from '@kiberon-labs/behave-graph';
+
+import { ColorValue } from '../../Values/ColorValue.js';
+import { EulerValue } from '../../Values/EulerValue.js';
+import { QuatValue } from '../../Values/QuatValue.js';
+import { Vec2Value } from '../../Values/Vec2Value.js';
+import { Vec3Value } from '../../Values/Vec3Value.js';
+import { Vec4Value } from '../../Values/Vec4Value.js';
+import type { IScene } from '../IScene.js';
+
+export class DummyScene implements IScene {
+  public onSceneChanged = new EventEmitter<void>();
+
+  private valueRegistry: Record<string, ValueType>;
+
+  constructor() {
+    this.valueRegistry = Object.fromEntries(
+      [
+        BooleanValue,
+        StringValue,
+        IntegerValue,
+        FloatValue,
+        Vec2Value,
+        Vec3Value,
+        Vec4Value,
+        ColorValue,
+        EulerValue,
+        QuatValue
+      ].map((valueType) => [valueType.name, valueType])
+    );
+    // pull in value type nodes
+  }
+
+  getProperty(jsonPath: string, valueTypeName: string): any {
+    return this.valueRegistry[valueTypeName]?.creator();
+  }
+  setProperty(): void {
+    this.onSceneChanged.emit();
+  }
+  addOnClickedListener(
+    jsonPath: string,
+    callback: (jsonPath: string) => void
+  ): void {
+    console.log('added on clicked listener');
+  }
+  removeOnClickedListener(
+    jsonPath: string,
+    callback: (jsonPath: string) => void
+  ): void {
+    console.log('removed on clicked listener');
+  }
+
+  getQueryableProperties() {
+    return [];
+  }
+
+  getRaycastableProperties() {
+    return [];
+  }
+
+  getProperties() {
+    return [];
+  }
+
+  addOnSceneChangedListener() {
+    console.log('added on scene changed listener');
+  }
+
+  removeOnSceneChangedListener(): void {
+    console.log('removed on scene changed listener');
+  }
+}

package/src/Abstractions/IScene.ts

@@ -0,0 +1,18 @@
+import type { Choices } from '@kiberon-labs/behave-graph';
+
+export interface IScene {
+  getProperty(jsonPath: string, valueTypeName: string): any;
+  setProperty(jsonPath: string, valueTypeName: string, value: any): void;
+  addOnClickedListener(
+    jsonPath: string,
+    callback: (jsonPath: string) => void
+  ): void;
+  removeOnClickedListener(
+    jsonPath: string,
+    callback: (jsonPath: string) => void
+  ): void;
+  getRaycastableProperties: () => Choices;
+  getProperties: () => Choices;
+  addOnSceneChangedListener(listener: () => void): void;
+  removeOnSceneChangedListener(listener: () => void): void;
+}

package/src/GLTFJson.ts

@@ -0,0 +1,34 @@
+export type GLTFAssetJson = {
+  generator: string;
+  version: string;
+};
+
+export type GLTFSceneJson = {
+  name: string;
+  nodes: number[];
+};
+
+export type GLTFNodeJson = {
+  name?: string;
+  mesh?: number;
+  translation?: number[];
+  children?: number[];
+};
+
+export type GLTFMaterialJson = {
+  name?: string;
+  doubleSided?: boolean;
+};
+
+export type GLTFMeshJson = {
+  name?: string;
+};
+
+export type GLTFJson = {
+  asset: GLTFAssetJson;
+  scene: number;
+  scenes: GLTFSceneJson[];
+  nodes: GLTFNodeJson[];
+  materials: GLTFMaterialJson[];
+  meshes: GLTFMeshJson[];
+};

package/src/Nodes/Actions/EaseSceneProperty.ts

@@ -0,0 +1,162 @@
+import {
+  AsyncNode,
+  type Easing,
+  EasingFunctions,
+  EasingModes,
+  Engine,
+  type IGraph,
+  type ILifecycleEventEmitter,
+  NodeDescription,
+  Socket,
+  toCamelCase
+} from '@kiberon-labs/behave-graph';
+
+import type { IScene } from '../../Abstractions/IScene.js';
+
+export class EaseSceneProperty extends AsyncNode {
+  public static GetDescriptions(
+    scene: IScene,
+    lifecycleEventEmitter: ILifecycleEventEmitter,
+    ...valueTypeNames: string[]
+  ) {
+    return valueTypeNames.map(
+      (valueTypeName) =>
+        new NodeDescription(
+          `scene/ease/${valueTypeName}`,
+          'Action',
+          `Ease Scene ${toCamelCase(valueTypeName)}`,
+          (description, graph, config, id) =>
+            new EaseSceneProperty(
+              description,
+              graph,
+              valueTypeName,
+              scene,
+              lifecycleEventEmitter,
+              id
+            )
+        )
+    );
+  }
+
+  public readonly valueTypeName: string;
+  private readonly scene: IScene;
+  private readonly lifecycleEventEmitter: ILifecycleEventEmitter;
+
+  constructor(
+    description: NodeDescription,
+    graph: IGraph,
+    valueTypeName: string,
+    scene: IScene,
+    lifecycleEventEmitter: ILifecycleEventEmitter,
+    id: string
+  ) {
+    super(
+      description,
+      graph,
+      [
+        new Socket('flow', 'flow'),
+        new Socket('string', 'jsonPath'),
+        new Socket(valueTypeName, 'value'),
+        new Socket(
+          'string',
+          'easingFunction',
+          'linear',
+          undefined,
+          Object.keys(EasingFunctions)
+        ),
+        new Socket(
+          'string',
+          'easingMode',
+          'inOut',
+          undefined,
+          Object.keys(EasingModes)
+        ),
+        new Socket('float', 'easeDuration'),
+        new Socket('flow', 'cancel')
+      ],
+      [new Socket('flow', 'flow')],
+      {},
+      id
+    );
+    this.valueTypeName = valueTypeName;
+    this.scene = scene;
+    this.lifecycleEventEmitter = lifecycleEventEmitter;
+  }
+
+  private initialValue: any = undefined;
+  private targetValue: any = undefined;
+  private duration = 0;
+  private elapsedDuration = 0;
+  private easing: Easing = EasingFunctions['linear'];
+  private startTime = 0;
+  private onTick: (() => void) | undefined = undefined;
+
+  override triggered(
+    engine: Engine,
+    triggeringSocketName: string,
+    finished: () => void
+  ) {
+    if (triggeringSocketName === 'cancel') {
+      this.dispose();
+      finished();
+      return;
+    }
+
+    // if existing ease in progress, do nothing
+    if (this.elapsedDuration >= this.duration) {
+      return;
+    }
+
+    this.initialValue = this.scene.getProperty(
+      this.readInput('jsonPath'),
+      this.valueTypeName
+    );
+    this.targetValue = this.readInput('value');
+    this.duration = this.readInput<number>('duration');
+    this.elapsedDuration = 0;
+    this.startTime = Date.now();
+
+    const easingFunction =
+      EasingFunctions[
+        this.readInput('easingFunction') as keyof typeof EasingFunctions
+      ];
+    const easingMode =
+      EasingModes[this.readInput('easingMode') as keyof typeof EasingModes];
+    this.easing = easingMode(easingFunction);
+
+    const updateOnTick = () => {
+      const valueType = this.graph.values[this.valueTypeName]!;
+      this.elapsedDuration = (Date.now() - this.startTime) / 1000;
+
+      const t = Math.min(this.elapsedDuration / this.duration, 1);
+      const easedValue = valueType.lerp(
+        this.initialValue,
+        this.targetValue,
+        this.easing(t)
+      );
+
+      this.scene.setProperty(
+        this.readInput('jsonPath'),
+        this.valueTypeName,
+        easedValue
+      );
+
+      if (this.elapsedDuration >= this.duration) {
+        this.dispose();
+        engine.commitToNewFiber(this, 'flow');
+        finished();
+      }
+    };
+
+    this.onTick = updateOnTick;
+    this.lifecycleEventEmitter.tickEvent.addListener(this.onTick);
+  }
+
+  override dispose() {
+    this.elapsedDuration = this.duration = 0;
+    if (this.onTick !== undefined) {
+      this.lifecycleEventEmitter.tickEvent.removeListener(this.onTick);
+      this.onTick = undefined;
+    }
+  }
+}

package/src/Nodes/Actions/SetSceneProperty.ts

@@ -0,0 +1,35 @@
+import {
+  makeFlowNodeDefinition,
+  NodeCategory
+} from '@kiberon-labs/behave-graph';
+
+import type { IScene } from '../../Abstractions/IScene.js';
+
+export const SetSceneProperty = (valueTypeNames: string[]) =>
+  valueTypeNames.map((valueTypeName) =>
+    makeFlowNodeDefinition({
+      typeName: `scene/set/${valueTypeName}`,
+      category: NodeCategory.Effect,
+      label: `Set Scene ${valueTypeName}`,
+      in: {
+        jsonPath: (_, graphApi) => {
+          const scene = graphApi.getDependency<IScene>('IScene');
+          return {
+            valueType: 'string',
+            choices: scene?.getProperties()
+          };
+        },
+        value: valueTypeName,
+        flow: 'flow'
+      },
+      out: {
+        flow: 'flow'
+      },
+      initialState: undefined,
+      triggered: ({ commit, read, graph }) => {
+        const scene = graph.getDependency<IScene>('IScene');
+        scene?.setProperty(read('jsonPath'), valueTypeName, read('value'));
+        commit('flow');
+      }
+    })
+  );

package/src/Nodes/Events/OnSceneNodeClick.ts

@@ -0,0 +1,66 @@
+import {
+  Assert,
+  makeEventNodeDefinition,
+  NodeCategory
+} from '@kiberon-labs/behave-graph';
+
+import type { IScene } from '../../Abstractions/IScene.js';
+
+type State = {
+  jsonPath?: string | undefined;
+  handleNodeClick?: ((jsonPath: string) => void) | undefined;
+};
+
+const initialState = (): State => ({});
+
+// very 3D specific.
+export const OnSceneNodeClick = makeEventNodeDefinition({
+  typeName: 'scene/nodeClick',
+  category: NodeCategory.Event,
+  label: 'On Scene Node Click',
+  in: {
+    jsonPath: (_, graphApi) => {
+      const scene = graphApi.getDependency<IScene>('IScene');
+
+      return {
+        valueType: 'string',
+        choices: scene?.getRaycastableProperties()
+      };
+    }
+  },
+  out: {
+    flow: 'flow'
+  },
+  initialState: initialState(),
+  init: ({ read, commit, graph }) => {
+    const handleNodeClick = () => {
+      commit('flow');
+    };
+
+    const jsonPath = read<string>('jsonPath');
+
+    const scene = graph.getDependency<IScene>('IScene');
+    scene?.addOnClickedListener(jsonPath, handleNodeClick);
+
+    const state: State = {
+      handleNodeClick,
+      jsonPath
+    };
+
+    return state;
+  },
+  dispose: ({
+    state: { handleNodeClick, jsonPath },
+    graph: { getDependency }
+  }) => {
+    Assert.mustBeTrue(handleNodeClick !== undefined);
+    Assert.mustBeTrue(jsonPath !== undefined);
+
+    if (!jsonPath || !handleNodeClick) return {};
+
+    const scene = getDependency<IScene>('scene');
+    scene?.removeOnClickedListener(jsonPath, handleNodeClick);
+
+    return {};
+  }
+});

package/src/Nodes/Logic/ColorNodes.ts

@@ -0,0 +1,121 @@
+import { makeInNOutFunctionDesc } from '@kiberon-labs/behave-graph';
+
+import {
+  hexToRGB,
+  hslToRGB,
+  rgbToHex,
+  rgbToHSL,
+  Vec3,
+  vec3Add,
+  vec3Equals,
+  vec3Mix,
+  vec3MultiplyByScalar,
+  vec3Negate,
+  vec3Subtract
+} from '../../Values/Internal/Vec3.js';
+
+export const Constant = makeInNOutFunctionDesc({
+  name: 'math/color',
+  label: 'Color',
+  in: ['color'],
+  out: 'color',
+  exec: (a: Vec3) => a
+});
+
+export const Create = makeInNOutFunctionDesc({
+  name: 'math/toColor/rgb',
+  label: 'RGB To Color',
+  in: [{ r: 'float' }, { g: 'float' }, { b: 'float' }],
+  out: 'color',
+  exec: (r: number, g: number, b: number) => new Vec3(r, g, b)
+});
+
+export const Elements = makeInNOutFunctionDesc({
+  name: 'math/toRgb/color',
+  label: 'Color to RGB',
+  in: ['color'],
+  out: [{ r: 'float' }, { g: 'float' }, { b: 'float' }],
+  exec: (a: Vec3) => {
+    return { r: a.x, g: a.y, b: a.z };
+  }
+});
+
+export const Add = makeInNOutFunctionDesc({
+  name: 'math/add/color',
+  label: '+',
+  in: ['color', 'color'],
+  out: 'color',
+  exec: vec3Add
+});
+
+export const Subtract = makeInNOutFunctionDesc({
+  name: 'math/subtract/color',
+  label: '-',
+  in: ['color', 'color'],
+  out: 'color',
+  exec: vec3Subtract
+});
+
+export const Negate = makeInNOutFunctionDesc({
+  name: 'math/negate/color',
+  label: '-',
+  in: ['color'],
+  out: 'color',
+  exec: vec3Negate
+});
+
+export const Scale = makeInNOutFunctionDesc({
+  name: 'math/scale/color',
+  label: '×',
+  in: ['color', 'float'],
+  out: 'color',
+  exec: vec3MultiplyByScalar
+});
+
+export const Mix = makeInNOutFunctionDesc({
+  name: 'math/mix/color',
+  label: '÷',
+  in: [{ a: 'color' }, { b: 'color' }, { t: 'float' }],
+  out: 'color',
+  exec: vec3Mix
+});
+
+export const HslToColor = makeInNOutFunctionDesc({
+  name: 'math/ToColor/hsl',
+  label: 'HSL to Color',
+  in: ['vec3'],
+  out: 'color',
+  exec: hslToRGB
+});
+
+export const ColorToHsl = makeInNOutFunctionDesc({
+  name: 'math/toHsl/color',
+  label: 'Color to HSL',
+  in: ['color'],
+  out: 'vec3',
+  exec: rgbToHSL
+});
+
+export const HexToColor = makeInNOutFunctionDesc({
+  name: 'math/toColor/hex',
+  label: 'HEX to Color',
+  in: ['float'],
+  out: 'color',
+  exec: hexToRGB
+});
+
+export const ColorToHex = makeInNOutFunctionDesc({
+  name: 'math/toHex/color',
+  label: 'Color to HEX',
+  in: ['color'],
+  out: 'float',
+  exec: rgbToHex
+});
+
+export const Equal = makeInNOutFunctionDesc({
+  name: 'math/equal/color',
+  label: '=',
+  in: [{ a: 'color' }, { b: 'color' }, { tolerance: 'float' }],
+  out: 'boolean',
+  exec: vec3Equals
+});

package/src/Nodes/Logic/EulerNodes.ts

@@ -0,0 +1,115 @@
+import { makeInNOutFunctionDesc } from '@kiberon-labs/behave-graph';
+
+import {
+  mat3ToEuler,
+  mat4ToEuler,
+  quatToEuler,
+  Vec3,
+  vec3Add,
+  vec3Equals,
+  vec3Mix,
+  vec3MultiplyByScalar,
+  vec3Negate,
+  vec3Subtract
+} from '../../Values/Internal/Vec3.js';
+
+export const Constant = makeInNOutFunctionDesc({
+  name: 'math/euler',
+  label: 'Euler',
+  in: ['euler'],
+  out: 'euler',
+  exec: (a: Vec3) => a
+});
+
+export const Create = makeInNOutFunctionDesc({
+  name: 'math/toEuler/float',
+  label: 'Float to Euler',
+  in: [{ x: 'float' }, { y: 'float' }, { z: 'float' }],
+  out: 'euler',
+  exec: (x: number, y: number, z: number) => new Vec3(x, y, z)
+});
+
+export const Elements = makeInNOutFunctionDesc({
+  name: 'math/toFloat/euler',
+  label: 'Euler to Float',
+  in: ['euler'],
+  out: [{ x: 'float' }, { y: 'float' }, { z: 'float' }],
+  exec: (a: Vec3) => {
+    return { x: a.x, y: a.y, z: a.z };
+  }
+});
+
+export const Add = makeInNOutFunctionDesc({
+  name: 'math/add/euler',
+  label: '+',
+  in: ['euler', 'euler'],
+  out: 'euler',
+  exec: vec3Add
+});
+
+export const Subtract = makeInNOutFunctionDesc({
+  name: 'math/subtract/euler',
+  label: '-',
+  in: ['euler', 'euler'],
+  out: 'euler',
+  exec: vec3Subtract
+});
+
+export const Negate = makeInNOutFunctionDesc({
+  name: 'math/negate/euler',
+  label: '-',
+  in: ['euler'],
+  out: 'euler',
+  exec: vec3Negate
+});
+
+export const Scale = makeInNOutFunctionDesc({
+  name: 'math/scale/euler',
+  label: '×',
+  in: ['euler', 'float'],
+  out: 'euler',
+  exec: vec3MultiplyByScalar
+});
+
+export const Mix = makeInNOutFunctionDesc({
+  name: 'math/mix/euler',
+  label: '÷',
+  in: [{ a: 'euler' }, { b: 'euler' }, { t: 'float' }],
+  out: 'euler',
+  exec: (a: Vec3, b: Vec3, t: number) => {
+    console.warn('TODO: this is not shortest path');
+    return vec3Mix(a, b, t);
+  }
+});
+
+export const Mat3ToEuler = makeInNOutFunctionDesc({
+  name: 'math/toEuler/mat3',
+  label: 'To Euler',
+  in: ['mat3'],
+  out: 'euler',
+  exec: mat3ToEuler
+});
+
+export const Mat4ToEuler = makeInNOutFunctionDesc({
+  name: 'math/toEuler/mat4',
+  label: 'To Euler',
+  in: ['mat4'],
+  out: 'euler',
+  exec: mat4ToEuler
+});
+
+export const QuatToEuler = makeInNOutFunctionDesc({
+  name: 'math/toEuler/quat',
+  label: 'To Euler',
+  in: ['quat'],
+  out: 'euler',
+  exec: quatToEuler
+});
+
+export const Equal = makeInNOutFunctionDesc({
+  name: 'math/equal/euler',
+  label: '=',
+  in: [{ a: 'euler' }, { b: 'euler' }, { tolerance: 'float' }],
+  out: 'boolean',
+  exec: vec3Equals
+});