ohzi-core 5.13.2 → 5.14.2

package/src/RenderLoop.js

@@ -0,0 +1,97 @@
+import Time from './Time';
+import Input from './Input';
+import UI from './UI';
+import Debug from './Debug';
+import BaseApplication from './BaseApplication';
+import ViewManager from './view_components/ViewManager';
+import ViewComponentManager from './view_components/ViewComponentManager';
+
+export default class RenderLoop
+{
+  constructor(target_application, graphics)
+  {
+    target_application = target_application || new BaseApplication();
+
+    this._frame_id = -1;
+
+    this.target_application = target_application;
+    this.graphics = graphics;
+
+    this.is_running = false;
+    this.frames_passed = 0;
+  }
+
+  update()
+  {
+    if (!this.is_running)
+    {
+      return;
+    }
+    Time.__update();
+
+    // ###### START CYCLE ######
+    if (this.frames_passed === 1)
+    {
+      this.target_application.on_post_start();
+    }
+
+    this.target_application.update();
+    ViewManager.update();
+    ViewComponentManager.update();
+
+    this.target_application.on_pre_render();
+
+    this.graphics.update();     // render scene
+    UI.update();                // update after new camera matrix has been calculated
+    UI.render(this.graphics);   // render ui layer on top
+    this.target_application.on_post_render();
+
+    Debug.render(this.graphics);             // render debug layer
+
+    // ###### END  CYCLE #######
+    Input.clear();
+    UI.clear();
+    Debug.clear();
+
+    this._frame_id = requestAnimationFrame(this.update.bind(this));
+    this.frames_passed++;
+  }
+
+  start()
+  {
+    if (this.is_running) return; // sanity check
+
+    this.graphics.check_for_resize();
+
+    if (this.frames_passed === 0)
+    {
+      this.target_application.on_enter();
+    }
+
+    this.is_running = true;
+    this.update();
+  }
+
+  stop()
+  {
+    if (this.is_running === false) return; // sanity check
+
+    this.is_running = false;
+    this.target_application.on_exit();
+
+    cancelAnimationFrame(this._frame_id);
+  }
+
+  set_state(new_state)
+  {
+    this.target_application.on_exit(this);
+    this.target_application = new_state;
+    this.target_application.on_enter(this);
+  }
+
+  dispose()
+  {
+    this.stop();
+    this.frames_passed = 0;
+  }
+}

package/src/RenderOrder.js

@@ -0,0 +1,38 @@
+
+export default class RenderOrder
+{
+  constructor()
+  {
+
+  }
+
+  static get kiosk()
+  {
+    return 1000;
+  }
+
+  static get kiosk_circle()
+  {
+    return 999;
+  }
+
+  static get placeholder_image()
+  {
+    return 998;
+  }
+
+  static get step_icon()
+  {
+    return 991;
+  }
+
+  static get line()
+  {
+    return 990;
+  }
+
+  static get placeholder_text()
+  {
+    return 900;
+  }
+}

package/src/ResourceContainer.js

@@ -0,0 +1,39 @@
+import EventManager from './EventManager';
+
+class ResourceContainer
+{
+  init()
+  {
+    this.resources = {};
+    this.resources_by_url = {};
+  }
+
+  set_resource(name, url, resource)
+  {
+    const urls = Object.keys(this.resources_by_url);
+
+    if (urls.includes(url))
+    {
+      this.resources[name] = this.resources_by_url[url];
+    }
+    else
+    {
+      this.resources[name] = resource;
+      this.resources_by_url[url] = resource;
+    }
+
+    EventManager.fire_resource_loaded({ name: name, value: resource });
+  }
+
+  get_resource(name)
+  {
+    return this.resources[name];
+  }
+
+  get(name)
+  {
+    return this.resources[name];
+  }
+}
+
+export default new ResourceContainer();

package/src/SceneManager.js

@@ -0,0 +1,44 @@
+import { Scene } from 'three';
+
+class SceneManager
+{
+  init()
+  {
+    this._current = new Scene();
+    this._current.name = 'default_scene';
+  }
+
+  add_scene(name)
+  {
+
+  }
+
+  get current()
+  {
+    return this._current;
+  }
+
+  set current(scene)
+  {
+    this._current = scene;
+  }
+
+  dispose()
+  {
+    this.current.traverse(child =>
+    {
+      if (child.geometry)
+      {
+        child.geometry.dispose();
+        child.material.dispose();
+      }
+    });
+
+    while (this.current.children.length > 0)
+    {
+      this.current.remove(this.current.children[0]);
+    }
+  }
+}
+
+export default new SceneManager();

package/src/Screen.js

@@ -0,0 +1,62 @@
+import { Vector2 } from 'three';
+
+class Screen
+{
+  init()
+  {
+    this.width = 1;
+    this.height = 1;
+
+    this.position = new Vector2();
+
+    this.render_width = 1;
+    this.render_height = 1;
+    this.width_height = new Vector2(this.width, this.height);
+
+    this.dpr = 1;
+    this.pixel_size = new Vector2(1 / this.width, 1 / this.height);
+  }
+
+  update_position(x, y)
+  {
+    this.position.set(x, y);
+  }
+
+  update_size(width, height)
+  {
+    this.width = width;
+    this.height = height;
+
+    this.pixel_size = new Vector2(1 / this.width, 1 / this.height);
+
+    this.width_height.x = width;
+    this.width_height.y = height;
+
+    this.render_width = width * this.dpr;
+    this.render_height = height * this.dpr;
+  }
+
+  apply_pixel_density_v2(vector2)
+  {
+    vector2.multiplyScalar(1 / this.dpr);
+
+    return vector2;
+  }
+
+  apply_pixel_density(value)
+  {
+    return value * (1 / this.dpr);
+  }
+
+  get_pixel_size()
+  {
+    return this.pixel_size;
+  }
+
+  get aspect_ratio()
+  {
+    return this.width / this.height;
+  }
+}
+
+export default new Screen();

package/src/Time.js

@@ -0,0 +1,38 @@
+import { Vector2 } from 'three';
+import { Clock } from 'three';
+
+class Time
+{
+  init()
+  {
+    this.___time = new Clock();
+    this.__delta_time = 0;
+    this.__elapsed_time = 0;
+    this.__allocated_time = new Vector2(0, 0);
+  }
+
+  get delta_time()
+  {
+    return this.__delta_time < 0.4 ? this.__delta_time : 0.016;
+  }
+
+  get elapsed_time()
+  {
+    return this.__elapsed_time;
+  }
+
+  get shader_time()
+  {
+    this.__allocated_time.x = this.delta_time;
+    this.__allocated_time.y = this.elapsed_time;
+    return  this.__allocated_time;
+  }
+
+  __update()
+  {
+    this.__delta_time = this.___time.getDelta();
+    this.__elapsed_time = this.___time.getElapsedTime();
+  }
+}
+
+export default new Time();

package/src/UI.js

@@ -0,0 +1,90 @@
+import Input from './Input';
+import CameraManager from './CameraManager';
+import Graphics from './Graphics';
+
+import { Vector2 } from 'three';
+import { Scene } from 'three';
+import { OrthographicCamera } from 'three';
+
+class UI
+{
+  init()
+  {
+    this.ui_elements = [];
+    this._tmp_normalized_pos = new Vector2();
+    this.ss_scene = new Scene();
+    this.ss_scene.autoUpdate = false;
+    this.ss_scene.frustumCulled = false;
+
+    this.ws_scene = new Scene();
+    this.ws_scene.autoUpdate = false;
+    this.ws_scene.frustumCulled = false;
+
+    this.ss_camera = new OrthographicCamera(-1, 1, 1, -1, -100, 100);
+  }
+
+  delete_element(elem)
+  {
+    let index = this.ui_elements.indexOf(elem);
+    if (index > -1)
+    {
+      this.ui_elements.splice(index, 1);
+    }
+
+    this.ss_scene.remove(elem);
+    this.ws_scene.remove(elem);
+
+    elem.dispose();
+  }
+
+  add_screen_space_element(elem)
+  {
+    this.ui_elements.push(elem);
+    this.ss_scene.add(elem);
+
+    elem.set_screen_space_coordinate_system();
+  }
+
+  add_world_space_element(elem)
+  {
+    this.ui_elements.push(elem);
+    this.ws_scene.add(elem);
+
+    elem.set_world_space_coordinate_system();
+  }
+
+  update()
+  {
+    // this.ss_camera.left     = -Screen.width / 2;
+    // this.ss_camera.right    = Screen.width / 2;
+    // this.ss_camera.top      = Screen.top / 2;
+    // this.ss_camera.right    = -Screen.bottom / 2;
+    this.ss_camera.updateProjectionMatrix();
+
+    this._tmp_normalized_pos.copy(Input.NDC);
+    for (let i = 0; i < this.ui_elements.length; i++)
+    {
+      this.ui_elements[i].update_state(this._tmp_normalized_pos);
+    }
+  }
+
+  render(renderer)
+  {
+    // renderer.render_ui(this.scene);
+    if (this.ss_scene.children.length > 0)
+    {
+      Graphics.render(this.ss_scene, this.ss_camera);
+    }
+    if (this.ws_scene.children.length > 0)
+    {
+      Graphics.render(this.ws_scene, CameraManager.current);
+    }
+  }
+
+  clear()
+  {
+    this.current_clicked_element = undefined;
+  }
+}
+
+export default new UI();

package/src/action_sequencer/ActionEvent.js

@@ -0,0 +1,15 @@
+import ViewContext from '../view_components/ViewContext';
+
+export default class ActionEvent
+{
+  constructor(name, method)
+  {
+    this.name = name;
+    this.method = method;
+  }
+
+  trigger()
+  {
+    ViewContext.app[this.name][this.method]();
+  }
+}

package/src/action_sequencer/ActionInterpolator.js

@@ -0,0 +1,23 @@
+import EasingFunctions from '../utilities/EasingFunctions';
+
+export default class ActionInterpolator
+{
+  constructor(easing_function = 'linear')
+  {
+    this.easing_function = undefined;
+
+    if (typeof easing_function === 'string')
+    {
+      this.easing_function = EasingFunctions[easing_function];
+    }
+    else
+    {
+      this.easing_function = easing_function;
+    }
+  }
+
+  update(context, t)
+  {
+
+  }
+}

package/src/action_sequencer/ActionSequencer.js

@@ -0,0 +1,195 @@
+
+import { Math as TMath } from 'three';
+
+export default class ActionSequencer
+{
+  constructor(context)
+  {
+    this.elapsed_time = -0.00001;
+
+    this.playing = false;
+
+    this.action_events = [];
+    this.context = context;
+
+    this.initial_context = JSON.parse(JSON.stringify(context));
+
+    this.tmp_t = 0;
+
+    this.channels = {};
+
+    let channel_names = Object.keys(context);
+    for (let i = 0; i < channel_names.length; i++)
+    {
+      this.channels[channel_names[i]] = [];
+    }
+
+    this.duration = 0;
+  }
+
+  play()
+  {
+    this.playing = true;
+  }
+
+  stop()
+  {
+    this.playing = false;
+  }
+
+  reset()
+  {
+    this.elapsed_time = -0.00001;
+  }
+
+  skip()
+  {
+    this.elapsed_time = this.get_duration();
+    this.__play_clips(this.elapsed_time, this.elapsed_time + 0.01);
+  }
+
+  update(delta_time)
+  {
+    if (this.playing)
+    {
+      this.__play_clips(this.elapsed_time, this.elapsed_time + delta_time);
+      this.elapsed_time = this.elapsed_time + delta_time;
+    }
+  }
+
+  set_progress(time)
+  {
+    this.elapsed_time = TMath.clamp(time, 0, this.duration);
+    this.__play_clips(this.elapsed_time, this.elapsed_time);
+  }
+
+  set_normalized_progress(t)
+  {
+    this.elapsed_time = TMath.clamp(t, 0, 1) * this.duration;
+    this.__play_clips(this.elapsed_time, this.elapsed_time);
+  }
+
+  get_progress()
+  {
+    return TMath.clamp(this.elapsed_time / this.get_duration(), 0, 1);
+  }
+
+  is_finished()
+  {
+    return this.elapsed_time > this.get_duration();
+  }
+
+  add_action_event(trigger_time, action)
+  {
+    this.action_events.push({
+      trigger_time: trigger_time,
+      action: action
+    });
+
+    this.duration = Math.max(this.duration, trigger_time);
+  }
+
+  add_action_interpolator(from, to, interpolator, use_dynamic_from_value = false)
+  {
+    if (use_dynamic_from_value)
+    {
+      let keyframes = this.channels[interpolator.attribute_name];
+
+      if (keyframes === undefined)
+      {
+        console.error(`${interpolator.attribute_name} missing in initial state data.`);
+      }
+
+      if (keyframes.length === 0)
+      {
+        interpolator.from = this.initial_context[interpolator.attribute_name];
+      }
+      else
+      {
+        interpolator.from = keyframes[keyframes.length - 1].interpolator.to;
+      }
+    }
+
+    let keyframe = {
+      from: from,
+      to: to,
+      interpolator: interpolator
+    };
+
+    this.duration = Math.max(this.duration, to);
+    this.channels[interpolator.attribute_name].push(keyframe);
+  }
+
+  get_property_target_value(name)
+  {
+    let keyframe = this.__get_nearest_keyframe(name, this.elapsed_time);
+
+    if (this.elapsed_time < keyframe.from)
+    {
+      return keyframe.interpolator.evaluate(0);
+    }
+
+    return keyframe.interpolator.evaluate(1);
+  }
+
+  get_duration()
+  {
+    return this.duration;
+  }
+
+  __play_clips(from, to)
+  {
+    for (let i = 0; i < this.action_events.length; i++)
+    {
+      if (this.action_events[i].trigger_time >= from &&
+          this.action_events[i].trigger_time < to)
+      {
+        // console.log("Play event: " + this.action_events[i].action.constructor.name + " at "+  this.action_events[i].trigger_time);
+        this.action_events[i].action.trigger();
+      }
+    }
+    let channel_names = Object.keys(this.initial_context);
+
+    for (let i = 0; i < channel_names.length; i++)
+    {
+      let name = channel_names[i];
+      let keyframe = this.__get_nearest_keyframe(name, from);
+      this.context[name] = this.evaluate_keyframe(keyframe, from);
+    }
+  }
+
+  evaluate_keyframe(keyframe, time)
+  {
+    this.tmp_t = this.__linear_map_01(time, keyframe.from, keyframe.to);
+    return keyframe.interpolator.evaluate(TMath.clamp(this.tmp_t, 0, 1));
+  }
+
+  __linear_map_01(value,
+    from_range_start_value,
+    from_range_end_value)
+  {
+    return ((value - from_range_start_value) / (from_range_end_value - from_range_start_value)) * (1 - 0) + 0;
+  }
+
+  __get_nearest_keyframe(channel_name, time)
+  {
+    let closest = undefined;
+    let min_time = 9999999;
+    let keyframes = this.channels[channel_name];
+    for (let i = 0; i < keyframes.length; i++)
+    {
+      let keyframe = keyframes[i];
+      let difference = Math.min(
+        Math.abs(keyframe.from - time),
+        Math.abs(keyframe.to - time)
+      );
+
+      if (difference < min_time)
+      {
+        min_time = difference;
+        closest = keyframe;
+      }
+    }
+    return closest;
+  }
+}

package/src/action_sequencer/NumberInterpolator.js

@@ -0,0 +1,24 @@
+import ActionInterpolator from './ActionInterpolator';
+import { Math as TMath } from 'three';
+
+export default class NumberInterpolator extends ActionInterpolator
+{
+  constructor(attribute_name, from = 0, to = 1, easing_function = 'linear')
+  {
+    super(easing_function);
+
+    this.attribute_name = attribute_name;
+    this.from = from;
+    this.to = to;
+  }
+
+  update(context, t)
+  {
+    context[this.attribute_name] = TMath.lerp(this.from, this.to, this.easing_function(t));
+  }
+
+  evaluate(t)
+  {
+    return TMath.lerp(this.from, this.to, this.easing_function(t));
+  }
+}

package/src/action_sequencer/VectorInterpolator.js

@@ -0,0 +1,20 @@
+import ActionInterpolator from './ActionInterpolator';
+
+export default class VectorInterpolator extends ActionInterpolator
+{
+  constructor(attribute_name, from = 0, to = 1, easing_function = 'linear')
+  {
+    super(easing_function);
+
+    this.attribute_name = attribute_name;
+    this.from = from;
+    this.to = to;
+  }
+
+  update(context, t)
+  {
+    let tmp = this.from.clone();
+    tmp.lerp(this.to, this.easing_function(t));
+    context[this.attribute_name].copy(tmp);
+  }
+}

package/src/blitter_index.js

@@ -0,0 +1,13 @@
+import MedianFilter from './render_utilities/MedianFilter';
+import GaussianBlurrer from './render_utilities/GaussianBlurrer';
+import Blurrer from './render_utilities/Blurrer';
+import Blitter from './render_utilities/Blitter';
+
+import DualFilteringBlurMaterial from './materials/DualFilteringBlurMaterial';
+export {
+  MedianFilter,
+  GaussianBlurrer,
+  Blurrer,
+  Blitter,
+  DualFilteringBlurMaterial
+};