ohzi-core 5.16.9 → 5.16.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ohzi-core",
-  "version": "5.16.9",
+  "version": "5.16.13",
   "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.3",
+    "pit-js": "1.6.0",
     "three": "^0.128.0"
   },
   "devDependencies": {

package/src/Graphics.js

@@ -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/RenderLoop.js

@@ -61,8 +61,6 @@ export default class RenderLoop
   {
     if (this.is_running) return; // sanity check
 
-    this.graphics.check_for_resize();
-
     if (this.frames_passed === 0)
     {
       this.target_application.on_enter();

package/src/components/AudioClip.js

@@ -1,21 +1,35 @@
-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 prevents undesired volume at the beginning of playing
+    this.audio.gain.gain.value = 0;
+
     this.audio.setVolume(this.loop ? 0 : this.volume);
   }
 

package/src/resource_loader/AudioLoader.js

@@ -1,54 +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)
   {
     if (!window.user_interaction_for_audio)
     {
-      setTimeout(this.on_preloaded_finished.bind(this, resource_container), 100);
+      setTimeout(this.on_preloaded_finished.bind(this, resource_container, response), 100);
     }
     else
     {
-      this.load_with_three_loader(resource_container);
+      this.instantiate_audio(resource_container, response);
     }
   }
 
-  load_with_three_loader(resource_container)
+  instantiate_audio(resource_container, response)
   {
-    let ctx = this;
-
-    this.loader.load(this.url, (buffer) =>
+    response.arrayBuffer().then((array_buffer) =>
     {
-      resource_container.set_resource(ctx.resource_id, ctx.url, new AudioClip(buffer, this.loop, this.volume));
+      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)
+        );
 
-      ctx.__update_downloaded_bytes(1, 1);
-      ctx.__loading_ended();
-    },
-    (xhr) =>
-    {
-      // if (xhr)
-      // {
-      //   let total = xhr.total || this.total_bytes;
-
-      //   ctx.__update_downloaded_bytes(xhr.loaded, total);
-      // }
-    },
-    (error) =>
-    {
-      ctx.__set_error('Audio could not be loaded. Maybe wrong name or path, I don\'t know' + '¯\\_(ツ)_/¯', error);
-      ctx.__loading_ended();
+        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/resource_loader/TextureLoader.js

@@ -19,16 +19,17 @@ export default class TextureLoader extends AbstractLoader
 
       const image = new Image();
       image.src = url;
+
       image.onload = () =>
       {
         texture.image = image;
         texture.needsUpdate = true;
-      };
 
-      resource_container.set_resource(this.resource_id, this.url, texture);
+        resource_container.set_resource(this.resource_id, this.url, texture);
 
-      this.__update_downloaded_bytes(1, 1);
-      this.__loading_ended();
+        this.__update_downloaded_bytes(1, 1);
+        this.__loading_ended();
+      };
     });
   }
 }

package/src/view_components/ApplicationView.js

@@ -55,6 +55,10 @@ export default class ApplicationView extends ViewState
 
   set_opacity(current_state_data)
   {
-    this.container.style.opacity = current_state_data[`${this.name}_opacity`];
+    if (this.container.style.opacity > current_state_data[`${this.name}_opacity`] ||
+        this.container.style.opacity < current_state_data[`${this.name}_opacity`])
+    {
+      this.container.style.opacity = current_state_data[`${this.name}_opacity`];
+    }
   }
 }

package/src/view_components/ViewManager.js

@@ -13,9 +13,9 @@ class ViewManager
 
   update()
   {
-    this.transition_handler.update();
-
     this.__set_views_opacities();
+
+    this.transition_handler.update();
   }
 
   go_to_view(view_name, change_url = true, skip = false)

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;