ohzi-core 6.9.0 → 6.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ohzi-core",
-  "version": "6.9.0",
+  "version": "6.12.0",
   "description": "OHZI Core Library",
   "source": "src/index.js",
   "module": "build/index.module.js",
@@ -36,7 +36,7 @@
   },
   "homepage": "https://github.com/ohzinteractive/core",
   "dependencies": {
-    "pit-js": "1.8.6",
+    "pit-js": "1.9.0",
     "three": "^0.137.0"
   },
   "devDependencies": {

package/src/Graphics.js

@@ -34,12 +34,14 @@ class Graphics
       premultipliedAlpha: true,
       preserveDrawingBuffer: true,
       powerPreference: 'high-performance',
-      logarithmicDepthBuffer: false
+      logarithmicDepthBuffer: false,
+      force_webgl2: true,
+      xr_enabled: false
     };
 
     Object.assign(this.context_attributes, context_attributes);
 
-    if (context_attributes.force_webgl2)
+    if (this.context_attributes.force_webgl2)
     {
       this.canvas_context = canvas.getContext('webgl2', this.context_attributes) ||
                             canvas.getContext('webgl', this.context_attributes) ||
@@ -60,6 +62,11 @@ class Graphics
       context: this.canvas_context
     });
 
+    if (this.context_attributes.xr_enabled)
+    {
+      this._renderer.xr.enabled = true;
+    }
+
     this._renderer.autoClear = false;
 
     this._renderer.setPixelRatio(1);

package/src/Input.js

@@ -7,8 +7,9 @@ class Input extends InputController
   {
     super();
 
-    this.left_mouse_button_clicked = false;
+    this.clicked = false;
     this.captured_NDC = { x: 0, y: 0 };
+    this.current_NDC_delta = { x: 0, y: 0 };
 
     this.keyboard = new KeyboardInput();
   }
@@ -27,11 +28,36 @@ class Input extends InputController
     this.keyboard.dispose();
   }
 
+  update()
+  {
+    if (this.left_mouse_button_pressed)
+    {
+      this.captured_NDC.x = this.NDC.x;
+      this.captured_NDC.y = this.NDC.y;
+    }
+
+    if (this.left_mouse_button_down)
+    {
+      this.current_NDC_delta.x += Math.abs(this.NDC_delta.x);
+      this.current_NDC_delta.y += Math.abs(this.NDC_delta.y);
+    }
+
+    if (this.left_mouse_button_released)
+    {
+      if (this.current_NDC_delta.x < 0.001 || this.current_NDC_delta.y < 0.001)
+      {
+        this.clicked = true;
+      }
+
+      this.current_NDC_delta = { x: 0, y: 0 };
+    }
+  }
+
   clear()
   {
     super.clear();
 
-    this.left_mouse_button_clicked = false;
+    this.clicked = false;
 
     this.keyboard.clear();
   }

package/src/RenderLoop.js

@@ -12,8 +12,6 @@ export default class RenderLoop
   {
     target_application = target_application || new BaseApplication();
 
-    this._frame_id = -1;
-
     this.target_application = target_application;
     this.graphics = graphics;
 
@@ -35,6 +33,8 @@ export default class RenderLoop
       this.target_application.on_post_start();
     }
 
+    Input.update();
+
     this.target_application.update();
     ViewManager.update();
     ViewComponentManager.update();
@@ -50,7 +50,6 @@ export default class RenderLoop
 
     // ###### END  CYCLE #######
 
-    this._frame_id = requestAnimationFrame(this.update.bind(this));
     this.target_application.on_frame_end();
     this.frames_passed++;
 
@@ -69,7 +68,8 @@ export default class RenderLoop
     }
 
     this.is_running = true;
-    this.update();
+
+    this.graphics._renderer.setAnimationLoop(this.update.bind(this));
   }
 
   stop()
@@ -79,7 +79,7 @@ export default class RenderLoop
     this.is_running = false;
     this.target_application.on_exit();
 
-    cancelAnimationFrame(this._frame_id);
+    this.graphics._renderer.setAnimationLoop(null);
   }
 
   set_state(new_state)

package/src/view_components/ApplicationView.js

@@ -57,6 +57,36 @@ export default class ApplicationView extends ViewState
     this.container.classList.remove('before_exit');
   }
 
+  load_html_images()
+  {
+    const images = this.container.querySelectorAll('img');
+
+    for (let i = 0; i < images.length; i++)
+    {
+      const image = images[i];
+
+      if (image.dataset.src)
+      {
+        image.src = image.dataset.src;
+      }
+    }
+  }
+
+  load_html_videos()
+  {
+    const videos = this.container.querySelectorAll('video');
+
+    for (let i = 0; i < videos.length; i++)
+    {
+      const video = videos[i];
+
+      if (video.dataset.src)
+      {
+        video.src = video.dataset.src;
+      }
+    }
+  }
+
   set_opacity(current_state_data)
   {
     this.container.style.opacity = current_state_data[`${this.name}_opacity`];

package/types/Input.d.ts

@@ -1,8 +1,170 @@
+import { Vector2 } from "three";
+
  export class Input {
-    static left_mouse_button_clicked: boolean;
+    /**
+     * Works for left mouse button or first touch on the screen (primary touch).
+    */
+    static left_mouse_button_pressed: boolean;
+    /**
+     * Works for left mouse button or first touch on the screen (primary touch).
+    */
+    static left_mouse_button_down: boolean;
+    /**
+     * Works for left mouse button or first touch on the screen (primary touch).
+    */
+    static left_mouse_button_released: boolean;
+
+    /**
+     * Mouse only.
+    */
+    static middle_mouse_button_pressed: boolean;
+    /**
+     * Mouse only.
+    */
+    static middle_mouse_button_down: boolean;
+    /**
+     * Mouse only.
+    */
+    static middle_mouse_button_released: boolean;
+
+    /**
+     * Mouse only.
+    */
+    static right_mouse_button_pressed: boolean;
+    /**
+     * Mouse only.
+    */
+    static right_mouse_button_down: boolean;
+    /**
+     * Mouse only.
+    */
+    static right_mouse_button_released: boolean;
+
+    /**
+     * Mouse and primary touch.
+    */
+    static clicked: boolean;
+
+    /**
+     * Screen coordinates of the mouse (or primary touch) position.
+    */
+    static pointer_pos: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * Difference between previous position and current position.
+    */
+    static pointer_pos_delta: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * Screen coordinates of the mouse (or primary touch) position, where the origin is in the upper left corner (browser coordinates).
+    */
+    static html_pointer_pos: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * The center of all active touches. If using mouse, this is the same as pointer_pos.
+    */
+    static pointer_center: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * The center of all active touches. If using mouse, this is the same as pointer_pos.
+    */
+    static pointer_center_delta: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * [-1..1] the center of all active touches. If using mouse, this is the same as pointer_pos.
+    */
+    static pointer_center_NDC: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * [-1..1] difference between previous normalized center and current one.
+    */
+    static pointer_center_NDC_delta: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * Normalized [-1..1] device coordinates for mouse or primary touch.
+    */
+    static NDC: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * [-1..1] difference between previous normalized position and current normalized position.
+    */
+    static NDC_delta: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * Normalized [-1..1] device coordinates for mouse or primary touch, but in browser space (upper left corner maps to <-1,-1>).
+    */
+    static html_NDC: {
+        x: number;
+        y: number;
+    };
+
+    /**
+     * Normalized [-1..1] device coordinates for mouse or primary touch (captured then left click is pressed), but in browser space (upper left corner maps to <-1,-1>).
+    */
     static captured_NDC: {
         x: number;
         y: number;
     };
+
+    /**
+     * This is equivalent to the mouse wheel (-1, 0, 1) or dragging with one finger [-x..x] measured in pixels.
+    */
+    static scroll_delta: float;
+
+    /**
+     * This is equivalent to the mouse wheel (-1, 0, 1) or pinching with two fingers [-x..x] measured in pixels.
+    */
+    static zoom_delta: float;
+
+    /**
+     * Returns 1 if any mouse button is down, or return the amount of active touches.
+    */
+    static pointer_count: integer;
+
+    /**
+     * True if the mouse or primary touch is contained within the bounds of the subregion
+    */
+    static pointer_is_within_bounds: boolean;
+
+    /**
+     * True if the pointer is over an html element
+    */
+    static pointer_is_over_element(html_element: any): boolean;
+
+     /**
+     * Call this at the beginning of the current frame.
+    */
+    static update(): void;
+
+    /**
+     * Call this at the end of the current frame.
+    */
     static clear(): void;
 }

package/types/RenderLoop.d.ts

@@ -1,6 +1,5 @@
 export class RenderLoop {
     constructor(target_application: any, graphics: any);
-    _frame_id: number;
     target_application: any;
     graphics: any;
     is_running: boolean;