@kiberon-labs/behave-graph-scene 1.0.0

package/src/Values/Mat4Value.ts

@@ -0,0 +1,20 @@
+import type { ValueType } from '@kiberon-labs/behave-graph';
+
+import {
+  Mat4,
+  mat4Equals,
+  type Mat4JSON,
+  mat4Mix,
+  mat4Parse
+} from './Internal/Mat4.js';
+
+export const Mat4Value: ValueType = {
+  name: 'mat4',
+  creator: () => new Mat4(),
+  deserialize: (value: string | Mat4JSON) =>
+    typeof value === 'string' ? mat4Parse(value) : new Mat4(value),
+  serialize: (value) => value.elements as Mat4JSON,
+  lerp: (start: Mat4, end: Mat4, t: number) => mat4Mix(start, end, t),
+  equals: (a: Mat4, b: Mat4) => mat4Equals(a, b),
+  clone: (value: Mat4) => value.clone()
+};

package/src/Values/QuatValue.ts

@@ -0,0 +1,22 @@
+import type { ValueType } from '@kiberon-labs/behave-graph';
+
+import {
+  quatSlerp,
+  Vec4,
+  vec4Equals,
+  type Vec4JSON,
+  vec4Parse
+} from './Internal/Vec4.js';
+
+export const QuatValue: ValueType = {
+  name: 'quat',
+  creator: () => new Vec4(),
+  deserialize: (value: string | Vec4JSON) =>
+    typeof value === 'string'
+      ? vec4Parse(value)
+      : new Vec4(value[0], value[1], value[2], value[3]),
+  serialize: (value) => [value.x, value.y, value.z, value.w] as Vec4JSON,
+  lerp: (start: Vec4, end: Vec4, t: number) => quatSlerp(start, end, t),
+  equals: (a: Vec4, b: Vec4) => vec4Equals(a, b),
+  clone: (value: Vec4) => value.clone()
+};

package/src/Values/Vec2Value.ts

@@ -0,0 +1,14 @@
+import type { ValueType } from '@kiberon-labs/behave-graph';
+
+import { Vec2, type Vec2JSON, vec2Mix, vec2Parse } from './Internal/Vec2.js';
+
+export const Vec2Value: ValueType = {
+  name: 'vec2',
+  creator: () => new Vec2(),
+  deserialize: (value: string | Vec2JSON) =>
+    typeof value === 'string' ? vec2Parse(value) : new Vec2(value[0], value[1]),
+  serialize: (value) => [value.x, value.y] as Vec2JSON,
+  lerp: (start: Vec2, end: Vec2, t: number) => vec2Mix(start, end, t),
+  equals: (a: Vec2, b: Vec2) => a.x === b.x && a.y === b.y,
+  clone: (value: Vec2) => value.clone()
+};

package/src/Values/Vec3Value.ts

@@ -0,0 +1,22 @@
+import type { ValueType } from '@kiberon-labs/behave-graph';
+
+import {
+  Vec3,
+  vec3Equals,
+  type Vec3JSON,
+  vec3Mix,
+  vec3Parse
+} from './Internal/Vec3.js';
+
+export const Vec3Value: ValueType = {
+  name: 'vec3',
+  creator: () => new Vec3(),
+  deserialize: (value: string | Vec3JSON) =>
+    typeof value === 'string'
+      ? vec3Parse(value)
+      : new Vec3(value[0], value[1], value[2]),
+  serialize: (value) => [value.x, value.y, value.z] as Vec3JSON,
+  lerp: (start: Vec3, end: Vec3, t: number) => vec3Mix(start, end, t),
+  equals: (a: Vec3, b: Vec3) => vec3Equals(a, b),
+  clone: (value: Vec3) => value.clone()
+};

package/src/Values/Vec4Value.ts

@@ -0,0 +1,21 @@
+import type { ValueType } from '@kiberon-labs/behave-graph';
+
+import {
+  Vec4,
+  vec4Equals,
+  type Vec4JSON,
+  vec4Mix,
+  vec4Parse
+} from './Internal/Vec4.js';
+export const Vec4Value: ValueType = {
+  name: 'vec4',
+  creator: () => new Vec4(),
+  deserialize: (value: string | Vec4JSON) =>
+    typeof value === 'string'
+      ? vec4Parse(value)
+      : new Vec4(value[0], value[1], value[2], value[3]),
+  serialize: (value) => [value.x, value.y, value.z, value.w] as Vec4JSON,
+  lerp: (start: Vec4, end: Vec4, t: number) => vec4Mix(start, end, t),
+  equals: (a: Vec4, b: Vec4) => vec4Equals(a, b),
+  clone: (value: Vec4) => value.clone()
+};

package/src/buildScene.ts

@@ -0,0 +1,479 @@
+import { type Choices, EventEmitter } from '@kiberon-labs/behave-graph';
+import {
+  type Event,
+  Material,
+  MeshBasicMaterial,
+  Object3D,
+  Quaternion,
+  Vector3,
+  Vector4
+} from 'three';
+import type { GLTF } from 'three-stdlib';
+
+import type { IScene } from './Abstractions/IScene.js';
+import type { GLTFJson } from './GLTFJson.js';
+import { Vec3 } from './Values/Internal/Vec3.js';
+import { Vec4 } from './Values/Internal/Vec4.js';
+
+const Resource = {
+  nodes: 'nodes',
+  materials: 'materials',
+  animations: 'animations'
+} as const;
+
+type Resource = (typeof Resource)[keyof typeof Resource];
+
+function toVec3(value: Vector3): Vec3 {
+  return new Vec3(value.x, value.y, value.z);
+}
+function toVec4(value: Vector4 | Quaternion): Vec4 {
+  return new Vec4(value.x, value.y, value.z, value.w);
+}
+
+export declare type ObjectMap = {
+  nodes: {
+    [name: string]: Object3D;
+  };
+  materials: {
+    [name: string]: Material;
+  };
+};
+
+const shortPathRegEx = /^\/?(?<resource>[^/]+)\/(?<index>\d+)$/;
+const jsonPathRegEx =
+  /^\/?(?<resource>[^/]+)\/(?<index>\d+)\/(?<property>[^/]+)$/;
+
+export type Optional<T> = {
+  [K in keyof T]: T[K] | undefined;
+};
+
+export type Path = {
+  resource: Resource;
+  index: number;
+  property: string;
+};
+
+export function toJsonPathString(
+  { index, property, resource: resourceType }: Optional<Path>,
+  short: boolean
+) {
+  if (short) {
+    if (!resourceType || index === undefined) return;
+    return `${resourceType}/${index}`;
+  } else {
+    if (!resourceType || index === undefined || !property) return;
+    return `${resourceType}/${index}/${property}`;
+  }
+}
+
+export function parseJsonPath(jsonPath: string, short = false): Path {
+  // hack = for now we see if there are 2 segments to know if its short
+  const regex = short ? shortPathRegEx : jsonPathRegEx;
+  const matches = regex.exec(jsonPath);
+  if (matches === null) throw new Error(`can not parse jsonPath: ${jsonPath}`);
+  if (matches.groups === undefined)
+    throw new Error(`can not parse jsonPath (no groups): ${jsonPath}`);
+  return {
+    resource: matches.groups.resource as Resource,
+    index: +matches.groups.index!,
+    property: matches.groups.property!
+  };
+}
+
+export function applyPropertyToModel(
+  { resource, index, property }: Path,
+  gltf: GLTF & ObjectMap,
+  value: any,
+  properties: Properties,
+  setActiveAnimations:
+    | ((animation: string, active: boolean) => void)
+    | undefined
+) {
+  const nodeName = getResourceName({ resource, index }, properties);
+  if (!nodeName) throw new Error(`could not get node at index ${index}`);
+  if (resource === Resource.nodes) {
+    const node = gltf.nodes[nodeName] as unknown as Object3D | undefined;
+
+    if (!node) {
+      console.error(`no node at path ${nodeName}`);
+      return;
+    }
+
+    applyNodeModifier(property, node, value);
+
+    return;
+  }
+  if (resource === Resource.materials) {
+    const node = gltf.materials[nodeName] as unknown as Material | undefined;
+
+    if (!node) {
+      console.error(`no node at path ${nodeName}`);
+      return;
+    }
+
+    applyMaterialModifier(property, node, value);
+
+    return;
+  }
+
+  if (resource === Resource.animations) {
+    if (!setActiveAnimations) {
+      console.error(
+        'cannot apply animation property without setActiveAnimations'
+      );
+      return;
+    }
+
+    setActiveAnimations(nodeName, value as boolean);
+    return;
+  }
+
+  console.error(`unknown resource type ${resource}`);
+}
+
+const getResourceName = (
+  { resource, index }: Pick<Path, 'resource' | 'index'>,
+  properties: Properties
+) => {
+  return properties[resource]?.options[index]?.name;
+};
+
+const getPropertyFromModel = (
+  { resource, index, property }: Path,
+  gltf: GLTF & ObjectMap,
+  properties: Properties
+) => {
+  if (resource === Resource.nodes) {
+    const nodeName = getResourceName({ resource, index }, properties);
+    if (!nodeName) throw new Error(`could not get node at index ${index}`);
+    const node = gltf.nodes[nodeName] as unknown as Object3D | undefined;
+
+    if (!node) {
+      console.error(`no node at path ${nodeName}`);
+      return;
+    }
+
+    getPropertyValue(property, node);
+
+    return;
+  }
+};
+
+function applyNodeModifier(property: string, objectRef: Object3D, value: any) {
+  switch (property) {
+    case 'visible': {
+      objectRef.visible = value as boolean;
+      break;
+    }
+    case 'translation': {
+      const v = value as Vec3;
+      objectRef.position.set(v.x, v.y, v.z);
+      break;
+    }
+    case 'scale': {
+      const v = value as Vec3;
+      console.log(v.x);
+      objectRef.scale.set(v.x, v.y, v.z);
+      break;
+    }
+    case 'rotation': {
+      const v = value as Vec4;
+      objectRef.quaternion.set(v.x, v.y, v.z, v.w);
+      break;
+    }
+  }
+}
+
+function applyMaterialModifier(
+  property: string,
+  materialRef: Material,
+  value: any
+) {
+  switch (property) {
+    case 'color': {
+      const basic = materialRef as MeshBasicMaterial;
+
+      if (basic.color) {
+        const v = value as Vec3;
+        basic.color.setRGB(v.x, v.y, v.z);
+        basic.needsUpdate = true;
+      }
+      break;
+    }
+  }
+}
+
+function getPropertyValue(property: string, objectRef: Object3D<Event>) {
+  switch (property) {
+    case 'visible': {
+      return objectRef.visible;
+    }
+    case 'translation': {
+      return toVec3(objectRef.position);
+    }
+    case 'scale': {
+      return toVec3(objectRef.scale);
+    }
+    case 'rotation': {
+      return toVec4(objectRef.quaternion);
+    }
+    default:
+      throw new Error(`unrecognized property: ${property}`);
+  }
+}
+
+export type ResourceOption = {
+  name: string;
+  index: number;
+};
+
+export type ResourceProperties = {
+  options: ResourceOption[];
+  properties: string[];
+};
+
+type Properties = {
+  [key in Resource]?: ResourceProperties;
+};
+
+export type ParsableScene = GLTF &
+  ObjectMap & {
+    json?: GLTFJson;
+  };
+
+export const extractProperties = (gltf: ParsableScene): Properties => {
+  const nodeProperties = [
+    'visible',
+    'translation',
+    'scale',
+    'rotation',
+    'color'
+  ];
+  const animationProperties = ['playing'];
+  const materialProperties = ['color'];
+
+  const gltfJson = gltf.parser.json as GLTFJson;
+
+  const nodeOptions = gltfJson.nodes?.map(({ name }, index) => ({
+    name: name || index.toString(),
+    index
+  }));
+  const materialOptions = gltfJson.materials?.map(({ name }, index) => ({
+    name: name || index.toString(),
+    index
+  }));
+  const animationOptions = gltf.animations?.map(({ name }, index) => ({
+    name: name || index.toString(),
+    index
+  }));
+
+  const properties: Properties = {};
+
+  properties.nodes = { options: nodeOptions, properties: nodeProperties };
+
+  if (materialOptions) {
+    properties.materials = {
+      options: materialOptions,
+      properties: materialProperties
+    };
+  }
+
+  if (animationOptions) {
+    properties.animations = {
+      options: animationOptions,
+      properties: animationProperties
+    };
+  }
+
+  return properties;
+};
+
+function createPropertyChoice(
+  resource: string,
+  name: string,
+  property: string,
+  index: number
+): { text: string; value: any } {
+  return {
+    text: `${resource}/${name}/${property}`,
+    value: `${resource}/${index}/${property}`
+  };
+}
+
+function generateChoicesForProperty(
+  property: ResourceProperties | undefined,
+  resource: Resource
+) {
+  if (!property) return [];
+  const choices: { text: string; value: any }[] = [];
+
+  property.options.forEach(({ index, name }) => {
+    property.properties.forEach((property) => {
+      choices.push(createPropertyChoice(resource, name, property, index));
+    });
+  });
+
+  return choices;
+}
+
+export function generateSettableChoices(properties: Properties): Choices {
+  const choices: { text: string; value: any }[] = [
+    ...generateChoicesForProperty(properties.nodes, Resource.nodes),
+    ...generateChoicesForProperty(properties.materials, Resource.materials),
+    ...generateChoicesForProperty(properties.animations, Resource.animations)
+  ];
+
+  return choices;
+}
+
+export function generateRaycastableChoices(properties: Properties): Choices {
+  const choices: { text: string; value: any }[] = [];
+
+  properties.nodes?.options.forEach(({ index, name }) => {
+    choices.push({
+      text: `nodes/${name}`,
+      value: `nodes/${index}`
+    });
+  });
+
+  return choices;
+}
+
+export type OnClickCallback = (jsonPath: string) => void;
+
+export type OnClickListener = {
+  path: Path;
+  elementName: string;
+  callbacks: OnClickCallback[];
+};
+
+export type OnClickListeners = {
+  [jsonPath: string]: OnClickListener;
+};
+
+export const buildScene = ({
+  gltf,
+  setOnClickListeners,
+  setActiveAnimations
+}: {
+  gltf: GLTF & ObjectMap;
+  setOnClickListeners:
+    | ((cb: (existing: OnClickListeners) => OnClickListeners) => void)
+    | undefined;
+  setActiveAnimations:
+    | ((animation: string, active: boolean) => void)
+    | undefined;
+}) => {
+  const properties = extractProperties(gltf);
+
+  const onSceneChanged = new EventEmitter<void>();
+
+  const addOnClickedListener = (
+    jsonPath: string,
+    callback: (jsonPath: string) => void
+  ) => {
+    if (!setOnClickListeners) return;
+    const path = parseJsonPath(jsonPath, true);
+
+    setOnClickListeners((existing) => {
+      const listenersForPath = existing[jsonPath] || {
+        path,
+        elementName: getResourceName(
+          { resource: path.resource, index: path.index },
+          properties
+        )!,
+        callbacks: []
+      };
+
+      const updatedListeners: OnClickListener = {
+        ...listenersForPath,
+        callbacks: [...listenersForPath.callbacks, callback]
+      };
+
+      const result: OnClickListeners = {
+        ...existing,
+        [jsonPath]: updatedListeners
+      };
+
+      return result;
+    });
+  };
+
+  const removeOnClickedListener = (
+    jsonPath: string,
+    callback: (jsonPath: string) => void
+  ) => {
+    if (!setOnClickListeners) return;
+    setOnClickListeners((existing) => {
+      const listenersForPath = existing[jsonPath];
+
+      if (!listenersForPath) return existing;
+
+      const updatedCallbacks = listenersForPath.callbacks.filter(
+        (x) => x !== callback
+      );
+
+      if (updatedCallbacks.length > 0) {
+        const updatedListeners = {
+          ...listenersForPath,
+          callback: updatedCallbacks
+        };
+
+        return {
+          ...existing,
+          [jsonPath]: updatedListeners
+        };
+      }
+
+      const result = {
+        ...existing
+      };
+
+      delete result[jsonPath];
+
+      return result;
+    });
+  };
+
+  const getProperty = (jsonPath: string, _valueTypeName: string) => {
+    const path = parseJsonPath(jsonPath);
+
+    return getPropertyFromModel(path, gltf, properties);
+  };
+
+  const setProperty = (jsonPath: string, valueTypeName: string, value: any) => {
+    const path = parseJsonPath(jsonPath);
+
+    applyPropertyToModel(path, gltf, value, properties, setActiveAnimations);
+
+    onSceneChanged.emit();
+  };
+
+  const settableChoices = generateSettableChoices(properties);
+  const raycastableChoices = generateRaycastableChoices(properties);
+
+  const addOnSceneChangedListener: IScene['addOnSceneChangedListener'] = (
+    listener
+  ) => {
+    onSceneChanged.addListener(listener);
+  };
+
+  const removeOnSceneChangedListener: IScene['removeOnSceneChangedListener'] = (
+    listener
+  ) => {
+    onSceneChanged.removeListener(listener);
+  };
+
+  const scene: IScene = {
+    getProperty,
+    setProperty,
+    getProperties: () => settableChoices,
+    getRaycastableProperties: () => raycastableChoices,
+    addOnClickedListener,
+    removeOnClickedListener,
+    addOnSceneChangedListener,
+    removeOnSceneChangedListener
+  };
+
+  return scene;
+};

package/src/index.ts

@@ -0,0 +1,38 @@
+// scene profile
+export * from './Abstractions/IScene.js';
+export * from './Abstractions/Drivers/DummyScene.js';
+
+export * from './Values/Internal/Mat3.js';
+export * from './Values/Internal/Mat4.js';
+export * from './Values/Internal/Vec2.js';
+export * from './Values/Internal/Vec3.js';
+export * from './Values/Internal/Vec4.js';
+
+export * from './Values/ColorValue.js';
+export * from './Values/EulerValue.js';
+export * from './Values/Mat3Value.js';
+export * from './Values/Mat4Value.js';
+export * from './Values/Vec2Value.js';
+export * from './Values/Vec3Value.js';
+export * from './Values/Vec4Value.js';
+export * from './Values/QuatValue.js';
+
+export * from './Nodes/Actions/SetSceneProperty.js';
+export * from './Nodes/Actions/EaseSceneProperty.js';
+
+export * from './Nodes/Events/OnSceneNodeClick.js';
+
+export * as ColorNodes from './Nodes/Logic/ColorNodes.js';
+export * as EulerNodes from './Nodes/Logic/EulerNodes.js';
+export * as Mat3Nodes from './Nodes/Logic/Mat3Nodes.js';
+export * as Mat4Nodes from './Nodes/Logic/Mat4Nodes.js';
+export * as Vec2Nodes from './Nodes/Logic/Vec2Nodes.js';
+export * as Vec3Nodes from './Nodes/Logic/Vec3Nodes.js';
+export * as Vec4Nodes from './Nodes/Logic/Vec4Nodes.js';
+export * as QuatNodes from './Nodes/Logic/QuatNodes.js';
+export * from './Nodes/Logic/VecElements.js';
+
+export * from './Nodes/Queries/GetSceneProperty.js';
+
+export * from './registerSceneProfile.js';
+export * from './buildScene.js';

package/src/loadScene.ts

@@ -0,0 +1,81 @@
+import { Group } from 'three';
+import { DRACOLoader, type GLTF, GLTFLoader } from 'three-stdlib';
+
+import type { IScene } from './Abstractions/IScene.js';
+import { buildScene, type ObjectMap } from './buildScene.js';
+
+// Taken from react-three-fiber
+// Collects nodes and materials from a THREE.Object3D
+export function buildGraph(object: Group) {
+  const data: ObjectMap = { nodes: {}, materials: {} };
+  if (object) {
+    object.traverse((obj: any) => {
+      if (obj.name) data.nodes[obj.name] = obj;
+      if (obj.material && !data.materials[obj.material.name])
+        data.materials[obj.material.name] = obj.material;
+    });
+  }
+  return data;
+}
+
+type ThreeSceneReturn = {
+  scene: IScene;
+  gltf: GLTF & ObjectMap;
+};
+
+/**
+ * Loads a gltf, and corresponding IScene from a url
+ * @param url
+ * @param onProgress invoked on progress of loading the gltf
+ * @returns
+ */
+export const loadGltfAndBuildScene = (
+  url: string,
+  onProgress?: (progress: number) => void
+): Promise<ThreeSceneReturn> => {
+  const loader = new GLTFLoader();
+
+  // Optional: Provide a DRACOLoader instance to decode compressed mesh data
+  const dracoLoader = new DRACOLoader();
+  dracoLoader.setDecoderPath(
+    'https://www.gstatic.com/draco/versioned/decoders/1.4.3/'
+  );
+  loader.setDRACOLoader(dracoLoader);
+
+  // Load a glTF resource
+
+  // eslint-disable-next-line promise/avoid-new
+  const result = new Promise<ThreeSceneReturn>((resolve, reject) => {
+    loader.load(
+      // resource URL
+      url,
+      // called when the resource is loaded
+      function (gltf) {
+        Object.assign(gltf, buildGraph(gltf.scene));
+        const asObjectMap = gltf as GLTF & ObjectMap;
+
+        const scene = buildScene({
+          gltf: asObjectMap,
+          setOnClickListeners: undefined,
+          setActiveAnimations: undefined
+        });
+
+        resolve({
+          scene,
+          gltf: asObjectMap
+        });
+      },
+      // called while loading is progressing
+      function (xhr) {
+        const progress = (xhr.loaded / xhr.total) * 100;
+        if (onProgress) onProgress(progress);
+      },
+      // called when loading has errors
+      function (error) {
+        reject(error);
+      }
+    );
+  });
+
+  return result;
+};