ohzi-core 12.2.0 → 12.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ohzi-core",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "description": "OHZI Interactive Core Library",
   "source": "src/index.js",
   "module": "build/index.mjs",
@@ -53,6 +53,7 @@
     ]
   },
   "devDependencies": {
+    "@types/three": "0.166.0",
     "rollup": "^2.44.0",
     "rollup-plugin-glslify": "^1.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",

package/src/BaseApplication.js

@@ -1,12 +1,21 @@
+import { RenderLoop } from './RenderLoop'; // eslint-disable-line no-unused-vars
+
+// @ts-check
 class BaseApplication
 {
   on_post_start()
   {}
 
-  on_enter()
+  /**
+    * @param {RenderLoop} [loop]
+   */
+  on_enter(loop) // eslint-disable-line no-unused-vars
   {}
 
-  on_exit()
+  /**
+    * @param {RenderLoop} [loop]
+   */
+  on_exit(loop) // eslint-disable-line no-unused-vars
   {}
 
   before_update()

package/src/Browser.js

@@ -1,4 +1,4 @@
-
+// @ts-check
 class Browser
 {
   async init()
@@ -17,9 +17,11 @@ class Browser
     case this.agent.indexOf('edg') > -1:
       this.browser_name = 'edge_chromium';
       break;
+    // @ts-ignore
     case this.agent.indexOf('opr') > -1 && !!window.opr:
       this.browser_name = 'opera';
       break;
+    // @ts-ignore
     case this.agent.indexOf('chrome') > -1 && !!window.chrome:
       this.browser_name = 'chrome';
       break;
@@ -55,6 +57,11 @@ class Browser
     return this.browser_name === 'chrome';
   }
 
+  get is_firefox()
+  {
+    return this.browser_name === 'firefox';
+  }
+
   get is_edge()
   {
     return this.browser_name === 'edge_ie';
@@ -83,8 +90,8 @@ class Browser
   get_version()
   {
     const ua = navigator.userAgent;
-    let tem = '';
-    let version = 0;
+    let tem = [];
+    let version = '0';
 
     let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
 

package/src/CameraManager.js

@@ -1,3 +1,6 @@
+// @ts-check
+import { PerspectiveCamera } from './PerspectiveCamera'; // eslint-disable-line no-unused-vars
+
 class CameraManager
 {
   init()
@@ -12,6 +15,7 @@ class CameraManager
     this._current = camera;
   }
 
+  /** @type {PerspectiveCamera} */
   get current()
   {
     return this._current;
@@ -22,6 +26,7 @@ class CameraManager
     this._spectator = camera;
   }
 
+  /** @type {PerspectiveCamera} */
   get spectator()
   {
     return this._spectator;

package/src/Capabilities.js

@@ -1,3 +1,4 @@
+// @ts-check
 class Capabilities
 {
   init()

package/src/CustomBezierCurve.js

@@ -1,7 +1,11 @@
+// @ts-check
 import { Vector3 } from 'three';
 
 class CustomBezierCurve
 {
+  /**
+   * @param {Vector3[]} points
+   */
   constructor(points)
   {
     this.original_points = [];
@@ -13,6 +17,10 @@ class CustomBezierCurve
     }
   }
 
+  /**
+   * @param {number} point_amount
+   * @returns {Vector3[]}
+   */
   build(point_amount)
   {
     const curve = [];
@@ -23,6 +31,10 @@ class CustomBezierCurve
     return curve;
   }
 
+  /**
+   * @param {number} t
+   * @returns {Vector3}
+   */
   get_point_at(t)
   {
     for (let i = 0; i < this.original_points.length; i++)

package/src/Debug.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { AxisHelper } from './components/AxisHelper';
 
 import { SceneManager } from './SceneManager';
@@ -5,10 +6,11 @@ import { Cube } from './primitives/Cube';
 import { Sphere } from './primitives/Sphere';
 import { Arrow } from './primitives/Arrow';
 import { OScreen } from './OScreen';
+import { Graphics } from './Graphics'; // eslint-disable-line no-unused-vars
 import { ScreenSpaceTextureMaterial } from './materials/ScreenSpaceTextureMaterial';
 import { PerspectiveCamera } from './PerspectiveCamera';
 
-import { Vector3 } from 'three';
+import { RenderTarget, Texture, Vector2, Vector3, WebGLRenderer } from 'three'; // eslint-disable-line no-unused-vars
 import { LineBasicMaterial } from 'three';
 import { BufferGeometry } from 'three';
 import { Line } from 'three';
@@ -22,8 +24,9 @@ import { Scene } from 'three';
 import { CatmullRomCurve3 } from 'three';
 import { SphereGeometry } from 'three';
 import { MeshBasicMaterial } from 'three';
-
+// @ts-ignore
 import basic_color_vert from './shaders/basic_color/basic_color.vert';
+// @ts-ignore
 import basic_color_frag from './shaders/basic_color/basic_color.frag';
 import { CameraManager } from './CameraManager';
 
@@ -35,6 +38,7 @@ class Debug
     this.Vector3_zero = new Vector3(0, 0, 0);
     this.canvas_renderer = undefined;
 
+    /** @type { Mesh<PlaneGeometry, ScreenSpaceTextureMaterial>[] } */
     this.display_texture_meshes = [];
 
     this.ctx = undefined;
@@ -43,6 +47,12 @@ class Debug
     this.camera.clear_alpha = 0;
   }
 
+  /**
+   * @param {Vector3} origin
+   * @param {Vector3} dir
+   * @param {number | string} color
+   * @returns {Arrow}
+   */
   draw_arrow(origin, dir, color = 0xff0000)
   {
     const arrow = new Arrow(color, dir.length(), dir.clone().normalize());
@@ -58,11 +68,20 @@ class Debug
     return axis;
   }
 
+  /**
+   * @param {RenderTarget} RT
+   */
   set_debug_RT(RT)
   {
     this.rt_debug = RT;
   }
 
+  /**
+   * @param {Vector2 | Vector3} position_2d
+   * @param {number} width
+   * @param {number} height
+   * @param {number | string} color
+   */
   draw_rectangle(position_2d, width, height, color)
   {
     width  = width || 100;
@@ -80,6 +99,11 @@ class Debug
     }
   }
 
+  /**
+   * @param {Vector3 | Vector2} from
+   * @param {Vector3 | Vector2} to
+   * @param {number | string} color
+   */
   draw_line_2D(from, to, color)
   {
     this.ctx.strokeStyle =  color || 'rgba(255, 0, 0, 1)';
@@ -90,6 +114,11 @@ class Debug
     this.ctx.stroke();
   }
 
+  /**
+   * @param {Vector3[]} points
+   * @param {number | string} color
+   * @returns {Line}
+   */
   draw_line(points, color = 0xff0000)
   {
     const material = new LineBasicMaterial({
@@ -104,6 +133,12 @@ class Debug
     return line;
   }
 
+  /**
+   * @param {Vector3} pos
+   * @param {number} size
+   * @param {number | string} color
+   * @returns {Cube}
+   */
   draw_cube(pos, size, color)
   {
     size = size || 1;
@@ -116,6 +151,14 @@ class Debug
     return cube;
   }
 
+  /**
+   * @param {Vector3} from
+   * @param {Vector3} to
+   * @param {number} height
+   * @param {number | string} color
+   * @param {number} depth
+   * @returns {Cube}
+   */
   draw_oriented_cube(from, to, height = 1, color = '#FF0000', depth = 0.1)
   {
     const size = from.distanceTo(to);
@@ -138,7 +181,14 @@ class Debug
     return cube;
   }
 
-  draw_plane(width, height, color)
+  /**
+   *
+   * @param {number} [width]
+   * @param {number} [height]
+   * @param {number | string} [color]
+   * @returns
+   */
+  draw_plane(width, height, color) // eslint-disable-line no-unused-vars
   {
     const geometry = new PlaneGeometry(width, height);
     const material = new ShaderMaterial({
@@ -157,6 +207,12 @@ class Debug
     return plane;
   }
 
+  /**
+   * @param {Vector3} pos
+   * @param {number} size
+   * @param {number | string} color
+   * @returns {Box3Helper}
+   */
   draw_empty_cube(pos, size, color)
   {
     size = size || 1;
@@ -168,6 +224,12 @@ class Debug
     return helper;
   }
 
+  /**
+   * @param {Vector3} pos
+   * @param {number} size
+   * @param {number | string} color
+   * @returns {Sphere}
+   */
   draw_sphere(pos, size, color)
   {
     size = size || 1;
@@ -180,7 +242,14 @@ class Debug
     return sphere;
   }
 
-  draw_point_array(input_points, open = false, color = 0xff0000)
+  /**
+   *
+   * @param {Vector3[]} input_points
+   * @param {boolean} open
+   * @param {number | string} color
+   * @returns {Line}
+   */
+  draw_point_array(input_points, open = false, color = 0xff0000) // eslint-disable-line no-unused-vars
   {
     const catmull = new CatmullRomCurve3(input_points, open);
     catmull.updateArcLengths();
@@ -190,6 +259,11 @@ class Debug
     return line_helper;
   }
 
+  /**
+   * @param {Sphere} sphere
+   * @param {number | string} color
+   * @returns {Mesh}
+   */
   draw_sphere_helper(sphere, color)
   {
     color = color || 0xff0000;
@@ -201,6 +275,9 @@ class Debug
     return sphere_mesh;
   }
 
+  /**
+   * @param {Sphere} sphere
+   */
   draw_math_sphere(sphere)
   {
     const geometry = new SphereGeometry(sphere.radius, 32, 32);
@@ -218,12 +295,20 @@ class Debug
     SceneManager.current.add(sphere1);
   }
 
+  /**
+   * @param {Box3} bb
+   */
   draw_bounding_box(bb)
   {
     const helper = new Box3Helper(bb, 0xffff00);
     SceneManager.current.add(helper);
   }
 
+  /**
+   * @param {Vector3[]} curve
+   * @param {object} options
+   * @param {number} options.offset
+   */
   draw_curve(curve, options)
   {
     const offset = new Vector3(0, 0, 0);
@@ -234,10 +319,16 @@ class Debug
 
     for (let i = 0; i < curve.length - 1; i++)
     {
-      this.draw_line(curve[i].clone().add(offset), curve[i + 1].clone().add(offset));
+      this.draw_line([curve[i].clone().add(offset), curve[i + 1].clone().add(offset)]);
     }
   }
 
+  /**
+   * @param {Texture} tex
+   * @param {number} w
+   * @param {number} h
+   * @returns {Mesh}
+   */
   draw_texture(tex, w, h)
   {
     const mesh = new Mesh(new PlaneGeometry(1, 1), new ScreenSpaceTextureMaterial());
@@ -248,6 +339,9 @@ class Debug
     return mesh;
   }
 
+  /**
+   * @param {Graphics} graphics
+   */
   render(graphics)
   {
     for (let i = 0; i < this.display_texture_meshes.length; i++)

package/src/Graphics.js

@@ -1,6 +1,10 @@
+// @ts-check
+import { BaseApplication } from './BaseApplication'; // eslint-disable-line no-unused-vars
 import { CameraManager } from './CameraManager';
 import { Capabilities } from './Capabilities';
 import { OScreen } from './OScreen';
+import { OrthographicCamera } from './OrthographicCamera'; // eslint-disable-line no-unused-vars
+import { PerspectiveCamera } from './PerspectiveCamera'; // eslint-disable-line no-unused-vars
 import { SceneManager } from './SceneManager';
 
 import { BaseRender } from './render_mode/BaseRender';
@@ -15,13 +19,22 @@ import {
   NoBlending,
   RGBAFormat,
   ShaderMaterial,
-  WebGLRenderTarget
+  WebGLRenderTarget,
+  Material, Object3D, Scene // eslint-disable-line no-unused-vars
 } from 'three';
 
 import { WebGLRenderer } from 'three';
 
 class Graphics
 {
+  /**
+   * @param {Object} options
+   * @param {HTMLCanvasElement} options.canvas
+   * @param {Record<string, any>} options.core_attributes
+   * @param {Record<string, any>} options.context_attributes
+   * @param {Record<string, any>} options.threejs_attributes
+   * @param {number} options.dpr
+   */
   init({ canvas, core_attributes, context_attributes, threejs_attributes, dpr })
   {
     this._renderer = undefined;
@@ -53,6 +66,7 @@ class Graphics
       stencil: false
     };
 
+    /** @type {Record<string, any>} */
     this.threejs_attributes = {
       logarithmicDepthBuffer: false
     };
@@ -128,6 +142,9 @@ class Graphics
     return this.depth_and_normals_renderer.render_target;
   }
 
+  /**
+   * @param {BaseRender} new_state
+   */
   set_state(new_state)
   {
     // console.log('VIEWAPI - map render mode switch to: ' + new_state.constructor.name);
@@ -165,6 +182,12 @@ class Graphics
     }
   }
 
+  /**
+   * @param {Scene} [scene]
+   * @param {PerspectiveCamera | OrthographicCamera} [camera]
+   * @param {WebGLRenderTarget} [RT]
+   * @param {Material} [override_mat]
+   */
   render(scene, camera, RT, override_mat)
   {
     this.__apply_override_material(scene, override_mat);
@@ -176,6 +199,12 @@ class Graphics
     this.__apply_override_material(scene, undefined);
   }
 
+  /**
+   * @param {Scene} scene
+   * @param {PerspectiveCamera} camera
+   * @param {WebGLRenderTarget} RT
+   * @param {Material} override_mat
+   */
   compile(scene, camera, RT, override_mat)
   {
     this.__apply_override_material(scene, override_mat);
@@ -187,6 +216,14 @@ class Graphics
     this.__apply_override_material(scene, undefined);
   }
 
+  /**
+   * @param {Scene} scene
+   * @param {PerspectiveCamera} camera
+   * @param {WebGLRenderTarget} RT
+   * @param {Material} override_mat
+   * @param {Scene} target_scene
+   * @returns {Promise<Object3D>}
+   */
   async compile_async(scene, camera, RT, override_mat, target_scene)
   {
     this.__apply_override_material(scene, override_mat);
@@ -200,28 +237,36 @@ class Graphics
     return promise;
   }
 
+  /**
+   * @param {BaseApplication | Scene | {render:()=>void}} scene
+   */
   render_scene(scene)
   {
-    if (scene.on_pre_render)
+    if ('on_pre_render' in scene)
     {
       scene.on_pre_render();
     }
 
-    if (scene.render)
+    if ('render' in scene)
     {
       scene.render();
     }
     else
     {
+      // @ts-ignore
       this.render(scene, undefined);
     }
 
-    if (scene.on_post_render)
+    if ('on_post_render' in scene)
     {
       scene.on_post_render();
     }
   }
 
+  /**
+   * @param {Scene} scene
+   * @param {Material} mat
+   */
   __apply_override_material(scene, mat)
   {
     mat = mat === undefined ? null : mat;
@@ -235,11 +280,21 @@ class Graphics
     }
   }
 
+  /**
+   * @param {WebGLRenderTarget} RT
+   * @param {import('three').TypedArray} buffer
+   */
   readback_RT(RT, buffer)
   {
     this._renderer.readRenderTargetPixels(RT, 0, 0, RT.width, RT.height, buffer);
   }
 
+  /**
+   * @param {WebGLRenderTarget} RT
+   * @param {PerspectiveCamera} camera
+   * @param {boolean} clear_depth
+   * @param {boolean} clear_stencil
+   */
   clear(RT, camera, clear_depth, clear_stencil)
   {
     this._renderer.setRenderTarget(RT === undefined ? null : RT);
@@ -254,6 +309,10 @@ class Graphics
       !!clear_stencil);
   }
 
+  /**
+   * @param {ResizeObserverEntry[]} entries
+   * @param {number} dpr
+   */
   on_resize(entries, dpr)
   {
     for (const entry of entries)
@@ -273,11 +332,20 @@ class Graphics
     }
   }
 
+  /**
+   * @param {Material} mat
+   * @param {WebGLRenderTarget} dst
+   */
   material_pass(mat, dst)
   {
     this.blitter.material_pass(mat, dst);
   }
 
+  /**
+   * @param {WebGLRenderTarget} src_RT
+   * @param {WebGLRenderTarget} dst_RT
+   * @param {Material} mat
+   */
   blit(src_RT, dst_RT, mat)
   {
     if (mat)
@@ -290,11 +358,20 @@ class Graphics
     }
   }
 
+  /**
+   * @param {WebGLRenderTarget} dst_RT
+   * @param {Material} mat
+   */
   blit_clear_with_material(dst_RT, mat)
   {
     this.blitter.blit_clear_with_material(dst_RT, mat);
   }
 
+  /**
+   * @param {BlobCallback} blob_callback
+   * @param {number} width
+   * @param {number} height
+   */
   take_screenshot(blob_callback, width = OScreen.width, height = OScreen.height)
   {
     // const ctx = this;
@@ -308,8 +385,8 @@ class Graphics
     const tile_width = 1024;
     const tile_height = 1024;
 
-    const divisions_x = parseInt(Math.ceil(new_width / tile_width));
-    const divisions_y = parseInt(Math.ceil(new_height / tile_height));
+    const divisions_x = Math.ceil(new_width / tile_width);
+    const divisions_y = Math.ceil(new_height / tile_height);
 
     OScreen.update_size(tile_width, tile_height);
     const old_dpr = this._renderer.getPixelRatio();
@@ -355,6 +432,9 @@ class Graphics
     CameraManager.current.updateMatrixWorld(true);
   }
 
+  /**
+   * @param {Blob} blob
+   */
   download_screenshot(blob)
   {
     const link = document.createElement('a');

package/src/Initializer.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { Browser } from './Browser';
 import { CameraManager } from './CameraManager';
 import { Capabilities } from './Capabilities';
@@ -12,6 +13,7 @@ import { GeometryBatcher } from './static_batcher/GeometryBatcher';
 import { Time } from './Time';
 import { UI } from './UI';
 import { CameraUtilities } from './utilities/CameraUtilities';
+import { RenderLoop } from './index'; // eslint-disable-line no-unused-vars
 
 class Initializer
 {
@@ -38,6 +40,9 @@ class Initializer
     Debug.init();
   }
 
+  /**
+   * @param {RenderLoop} render_loop
+   */
   dispose(render_loop)
   {
     Graphics.dispose();