ohzi-core 5.18.2 → 5.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ohzi-core",
-  "version": "5.18.2",
+  "version": "5.21.0",
   "description": "OHZI Core Library",
   "module": "build/index.module.js",
   "source": "src/index.js",
@@ -40,7 +40,7 @@
   },
   "homepage": "https://github.com/ohzinteractive/core#readme",
   "dependencies": {
-    "pit-js": "1.5.2",
+    "pit-js": "1.7.0",
     "three": "^0.134.0"
   },
   "devDependencies": {

package/src/BaseApplication.js

@@ -17,4 +17,7 @@ export default class BaseApplication
 
   on_pre_render()
   {}
+
+  on_frame_end()
+  {}
 }

package/src/Graphics.js

@@ -32,7 +32,7 @@ class Graphics
       stencil: false,
       antialias: false,
       premultipliedAlpha: true,
-      preserveDrawingBuffer: true,
+      preserveDrawingBuffer: false,
       powerPreference: 'high-performance',
       logarithmicDepthBuffer: false
     };
@@ -51,7 +51,7 @@ class Graphics
 
     this.is_webgl2 = this.canvas_context.constructor.name === 'WebGL2RenderingContext';
 
-    console.log(`Using WebGL ${this.is_webgl2 ? 2 : 1}`);
+    // console.log(`Using WebGL ${this.is_webgl2 ? 2 : 1}`);
 
     this._renderer = new WebGLRenderer({
       canvas: canvas,
@@ -82,6 +82,9 @@ class Graphics
     this.generateDepthNormalTexture = false;
 
     this.depth_and_normals_renderer = new DepthAndNormalsRenderer();
+
+    this.resize_observer = new ResizeObserver(this.on_resize.bind(this));
+    this.resize_observer.observe(this.canvas);
   }
 
   get dom_element()
@@ -105,8 +108,6 @@ class Graphics
 
   update()
   {
-    this.check_for_resize();
-
     if (this.generateDepthNormalTexture)
     {
       this.depth_and_normals_renderer.render(this);
@@ -196,22 +197,13 @@ class Graphics
       !!clear_stencil);
   }
 
-  check_for_resize()
+  on_resize(entries)
   {
-    let current_width   = this.canvas.clientWidth;
-    let current_height  = this.canvas.clientHeight;
-
-    if (
-      current_width  !== Screen.width  ||
-      current_height !== Screen.height ||
-      Configuration.dpr !== Screen.dpr
-    )
+    for (let entry of entries)
     {
-      let canvas_rect = this.canvas.getBoundingClientRect();
-
       Screen.dpr = Configuration.dpr;
-      Screen.update_position(canvas_rect.x, canvas_rect.y);
-      Screen.update_size(current_width, current_height);
+      Screen.update_position(entry.contentRect.x, entry.contentRect.y);
+      Screen.update_size(entry.contentRect.width, entry.contentRect.height);
 
       this.canvas.width  = Screen.render_width;
       this.canvas.height = Screen.render_height;
@@ -222,11 +214,6 @@ class Graphics
     }
   }
 
-  on_resize()
-  {
-    console.error('Graphics.on_resize call no longer needed.');
-  }
-
   material_pass(mat, dst)
   {
     this.blitter.material_pass(mat, dst);

package/src/OS.js

@@ -10,6 +10,15 @@ class OS
       MAC: 'mac',
       WINDOWS: 'windows'
     };
+
+    this.is_mobile = !!(navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/));
+    this.is_ipad = !!(navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
+    this.is_ios = !!navigator.userAgent.match(/(iPhone|iPod|iPad)/) || this.is_ipad;
+
+    this.is_android = this.get_os() === this.operating_systems.ANDROID;
+    this.is_linux = this.get_os() === this.operating_systems.LINUX;
+    this.is_mac = this.get_os() === this.operating_systems.MAC;
+    this.is_windows = this.get_os() === this.operating_systems.WINDOWS;
   }
 
   get_os()
@@ -44,41 +53,6 @@ class OS
 
     return os;
   }
-
-  get is_android()
-  {
-    return this.get_os() === this.operating_systems.ANDROID;
-  }
-
-  get is_ios()
-  {
-    return navigator.userAgent.match(/(iPhone|iPod|iPad)/) || this.is_ipad;
-  }
-
-  get is_ipad()
-  {
-    return (navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
-  }
-
-  get is_mobile()
-  {
-    return !!(navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/));
-  }
-
-  get is_linux()
-  {
-    return this.get_os() === this.operating_systems.LINUX;
-  }
-
-  get is_mac()
-  {
-    return this.get_os() === this.operating_systems.MAC;
-  }
-
-  get is_windows()
-  {
-    return this.get_os() === this.operating_systems.WINDOWS;
-  }
 }
 
 export default new OS();

package/src/RenderLoop.js

@@ -49,20 +49,20 @@ export default class RenderLoop
     Debug.render(this.graphics);             // render debug layer
 
     // ###### END  CYCLE #######
-    Input.clear();
-    UI.clear();
-    Debug.clear();
 
     this._frame_id = requestAnimationFrame(this.update.bind(this));
+    this.target_application.on_frame_end();
     this.frames_passed++;
+
+    Input.clear();
+    UI.clear();
+    Debug.clear();
   }
 
   start()
   {
     if (this.is_running) return; // sanity check
 
-    this.graphics.check_for_resize();
-
     if (this.frames_passed === 0)
     {
       this.target_application.on_enter();

package/src/action_sequencer/ActionSequencer.js

@@ -6,7 +6,7 @@ export default class ActionSequencer
   constructor(context)
   {
     this.elapsed_time = -0.00001;
-
+    this.playback_speed = 1;
     this.playing = false;
 
     this.action_events = [];
@@ -52,8 +52,8 @@ export default class ActionSequencer
   {
     if (this.playing)
     {
-      this.__play_clips(this.elapsed_time, this.elapsed_time + delta_time);
-      this.elapsed_time = this.elapsed_time + delta_time;
+      this.__play_clips(this.elapsed_time, this.elapsed_time + delta_time * this.playback_speed);
+      this.elapsed_time = this.elapsed_time + delta_time * this.playback_speed;
     }
   }
 

package/src/components/AudioClip.js

@@ -1,22 +1,36 @@
-import { Audio as THREEAudio } from 'three';
+import { Audio as TAudio } from 'three';
+import { PositionalAudio as TPositionalAudio } from 'three';
 
 export default class AudioClip
 {
-  constructor(buffer, loop = true, volume = 1)
+  constructor(buffer, loop = true, volume = 1, positional = false)
   {
     this.buffer = buffer;
     this.loop = loop;
     this.volume = volume;
+    this.positional = positional;
 
     this.audio = undefined;
   }
 
   init(audio_listener)
   {
-    this.audio = new THREEAudio(audio_listener);
+    if (this.positional)
+    {
+      this.audio = new TPositionalAudio(audio_listener);
+    }
+    else
+    {
+      this.audio = new TAudio(audio_listener);
+    }
+
     this.audio.setBuffer(this.buffer);
     this.audio.setLoop(this.loop);
-    this.audio.setVolume(this.volume);
+
+    // This prevents undesired volume at the beginning of playing
+    this.audio.gain.gain.value = 0;
+
+    this.audio.setVolume(this.loop ? 0 : this.volume);
   }
 
   play()

package/src/resource_loader/AudioLoader.js

@@ -1,42 +1,47 @@
 import AbstractLoader from './AbstractLoader';
 
 import AudioClip from '../components/AudioClip';
-import { AudioLoader as THREEAudioLoader } from 'three';
+
+import { AudioContext } from 'three';
 
 export default class AudioLoader extends AbstractLoader
 {
-  constructor(resource_id, url, loop = true, volume = 1, size)
+  constructor(resource_id, url, loop = true, volume = 0, size, positional = false)
   {
     super(resource_id, url, size);
-    this.loader = new THREEAudioLoader();
     this.loop = loop;
     this.volume = volume;
+    this.positional = positional;
   }
 
-  on_preloaded_finished(resource_container)
+  on_preloaded_finished(resource_container, response)
   {
-    let ctx = this;
-
-    this.loader.load(this.url, (buffer) =>
+    if (!window.user_interaction_for_audio)
     {
-      resource_container.set_resource(ctx.resource_id, ctx.url, new AudioClip(buffer, this.loop, this.volume));
-
-      ctx.__update_downloaded_bytes(1, 1);
-      ctx.__loading_ended();
-    },
-    (xhr) =>
+      setTimeout(this.on_preloaded_finished.bind(this, resource_container, response), 100);
+    }
+    else
     {
-      // if (xhr)
-      // {
-      //   let total = xhr.total || this.total_bytes;
+      this.instantiate_audio(resource_container, response);
+    }
+  }
 
-      //   ctx.__update_downloaded_bytes(xhr.loaded, total);
-      // }
-    },
-    (error) =>
+  instantiate_audio(resource_container, response)
+  {
+    response.arrayBuffer().then((array_buffer) =>
     {
-      ctx.__set_error('Audio could not be loaded. Maybe wrong name or path, I don\'t know' + '¯\\_(ツ)_/¯', error);
-      ctx.__loading_ended();
+      const context = AudioContext.getContext();
+      context.decodeAudioData(array_buffer, (audio_buffer) =>
+      {
+        resource_container.set_resource(
+          this.resource_id,
+          this.url,
+          new AudioClip(audio_buffer, this.loop, this.volume, this.positional)
+        );
+
+        this.__update_downloaded_bytes(1, 1);
+        this.__loading_ended();
+      });
     });
   }
 }

package/src/resource_loader/ResourceBatch.js

@@ -69,9 +69,9 @@ export default class ResourceBatch
     this.resource_loaders.push(new CubemapLoader(resource_id, url, size));
   }
 
-  add_audio(resource_id, url, loop, volume, size)
+  add_audio(resource_id, url, loop, volume, size, positional)
   {
-    this.resource_loaders.push(new AudioLoader(resource_id, url, loop, volume, size));
+    this.resource_loaders.push(new AudioLoader(resource_id, url, loop, volume, size, positional));
   }
 
   add_video(resource_id, url, size)

package/src/utilities/MeshSampler.js

@@ -1,3 +1,4 @@
+import { Vector3 } from 'three';
 class MeshSampler
 {
   constructor()
@@ -5,25 +6,80 @@ class MeshSampler
 
   }
 
-  sample(geometry, sample_count)
+  sample(buffer_geometry, sample_count)
   {
     let face_areas = [];
 
     let min_area = 99999999;
-    for (let i = 0; i < geometry.faces.length; i++)
+
+    let vertices = buffer_geometry.getAttribute('position');
+    let normals = buffer_geometry.getAttribute('normal');
+    let indices  = buffer_geometry.index;
+
+    let faces = [];
+
+    for (let i = 0; i < indices.count; i += 3)
     {
-      let area = this.get_face_area(geometry.faces[i], geometry.vertices);
+      let index_0 = indices.array[i + 0];
+      let index_1 = indices.array[i + 1];
+      let index_2 = indices.array[i + 2];
+
+      let v1 = new Vector3();
+      v1.x = vertices.getX(index_0);
+      v1.y = vertices.getY(index_0);
+      v1.z = vertices.getZ(index_0);
+
+      let v2 = new Vector3();
+      v2.x = vertices.getX(index_1);
+      v2.y = vertices.getY(index_1);
+      v2.z = vertices.getZ(index_1);
+
+      let v3 = new Vector3();
+      v3.x = vertices.getX(index_2);
+      v3.y = vertices.getY(index_2);
+      v3.z = vertices.getZ(index_2);
+
+      let face = {
+        a: v1,
+        b: v2,
+        c: v3
+      };
+
+      if (normals)
+      {
+        let n1 = new Vector3();
+        n1.x = normals.getX(index_0);
+        n1.y = normals.getY(index_0);
+        n1.z = normals.getZ(index_0);
+
+        let n2 = new Vector3();
+        n2.x = normals.getX(index_1);
+        n2.y = normals.getY(index_1);
+        n2.z = normals.getZ(index_1);
+
+        let n3 = new Vector3();
+        n3.x = normals.getX(index_2);
+        n3.y = normals.getY(index_2);
+        n3.z = normals.getZ(index_2);
+
+        let normal = n1.clone().add(n2).add(n3).normalize();
+        face.normal = normal;
+      }
+
+      faces.push(face);
+
+      let area = this.get_face_area(face);
       min_area = Math.min(area, min_area);
       face_areas.push(area);
     }
 
-    let normalized_faces_array = this.get_uniform_face_distribution(face_areas, min_area, geometry.faces);
+    let normalized_faces_array = this.get_uniform_face_distribution(face_areas, min_area, faces);
     let selected_faces = this.select_random_faces(normalized_faces_array, sample_count);
-    let sampled_data = this.sample_data_from_faces(selected_faces, geometry.vertices);
+    let sampled_data = this.sample_data_from_faces(selected_faces);
     return sampled_data;
   }
 
-  sample_data_from_faces(faces, vertices)
+  sample_data_from_faces(faces)
   {
     let sampled_points = [];
     let sampled_normals = [];
@@ -34,8 +90,8 @@ class MeshSampler
       let w1 = Math.random();
       let w2 = Math.random();
 
-      sampled_points.push(this.sample_point_in_face(w1, w2, vertices[face.a], vertices[face.b], vertices[face.c]).clone());
-      if (sampled_normals && face.normal)
+      sampled_points.push(this.sample_point_in_face(w1, w2, face.a, face.b, face.c).clone());
+      if (face.normal)
       {
         sampled_normals.push(face.normal.clone());
       }
@@ -48,7 +104,7 @@ class MeshSampler
     let selected_faces = [];
     for (let i = 0; i < amount; i++)
     {
-      let random = parseInt(Math.random() * (faces.length - 1));
+      let random = Math.floor(Math.random() * faces.length);
       let selected_face = faces[random];
 
       selected_faces.push(selected_face);
@@ -63,7 +119,7 @@ class MeshSampler
     for (let i = 0; i < face_areas.length; i++)
     {
       face_areas[i] /= minimum_area;
-      let repetitions_needed = parseInt(Math.round(face_areas[i]));
+      let repetitions_needed = Math.floor(Math.round(face_areas[i]));
       for (let j = 0; j < repetitions_needed; j++)
       {
         extended_triangle_indices.push(faces[i]);
@@ -72,14 +128,10 @@ class MeshSampler
     return extended_triangle_indices;
   }
 
-  get_face_area(face, vertices)
+  get_face_area(face)
   {
-    let v1 = vertices[face.a].clone();
-    let v2 = vertices[face.b].clone();
-    let v3 = vertices[face.c].clone();
-
-    let vec1 = v2.clone().sub(v1);
-    let vec2 = v3.clone().sub(v1);
+    let vec1 = face.b.clone().sub(face.a);
+    let vec2 = face.c.clone().sub(face.a);
     return vec1.cross(vec2).length() / 2;
   }
 

package/types/Graphics.d.ts

@@ -21,7 +21,6 @@ export class Graphics {
     static __apply_override_material(scene: any, mat: any): void;
     static readback_RT(RT: any, buffer: any): void;
     static clear(RT: any, camera: any, clear_depth: any, clear_stencil: any): void;
-    static check_for_resize(): void;
     static on_resize(): void;
     static material_pass(mat: any, dst: any): void;
     static blit(src_RT: any, dst_RT: any, mat: any): void;

package/types/index.d.ts

@@ -45,7 +45,7 @@ export * from './utilities/EasingFunctions';
 export * from './utilities/FrustumPointFitter';
 export * from './utilities/GeometryUtilities';
 export * from './utilities/ImageUtilities';
-export * from './utilities/MathUtilities';
+export * from './utilities/OMath';
 export * from './utilities/MeshSampler';
 export * from './utilities/ModelUtilities';
 export * from './utilities/ObjectUtilities';

package/types/utilities/{MathUtilities.d.ts → OMath.d.ts}

@@ -1,4 +1,4 @@
-export class MathUtilities {
+export class OMath {
     static linear_map(value: any, from_range_start_value: any, from_range_end_value: any, to_range_start_value: any, to_range_end_value: any): any;
     static between(value: any, min: any, max: any): boolean;
     static mod(number: any, divisor: any): number;
@@ -6,7 +6,16 @@ export class MathUtilities {
     static project_points_on_plane(points: any, plane: any): any[];
     static matrix4_lerp(from: any, to: any, target: any, t: any): void;
     static equals(x1: any, x2: any): boolean;
+    static lerp(x: number, y: number, t: number): number;
+    static clamp(value: number, min: number, max: number): number;
+    static euclideanModulo(n: number, m: number): number;
+    static pingpong(x: number, length: number): number;
+    static degToRad(degrees: number): number;
+    static deg_to_rad(degrees: number): number;
+    static radToDeg(radians: number): number;
+    static rad_to_deg(radians: number): number;
     static perspective_divide(v: any): any;
     static points_average(points: any): any;
     static get_random_color(): string;
+    static saturate(x: number): number;
 }