ohzi-core 5.13.2 → 5.14.2

package/src/canvas_drawer/CanvasDrawer.js

@@ -0,0 +1,111 @@
+import { CanvasTexture } from 'three';
+import { Vector2 } from 'three';
+import { UVMapping } from 'three';
+import { ClampToEdgeWrapping } from 'three';
+import { NearestFilter } from 'three';
+
+export default class CanvasDrawer
+{
+  constructor(uses_dynamic_font)
+  {
+    this.uses_dynamic_font = uses_dynamic_font;
+    this.__textHeight = null;
+
+    this.canvas = document.createElement('canvas');
+    this.ctx = this.canvas.getContext('2d');
+  }
+
+  getFontHeight(fontStyle = 'Arial')
+  {
+    if (this.__textHeight == null || this.uses_dynamic_font)
+    {
+      let body = document.getElementsByTagName('body')[0];
+      let dummy = document.createElement('div');
+      let dummyText = document.createTextNode('MÉqgOLAKTAL');
+      dummy.appendChild(dummyText);
+      dummy.setAttribute('style', `font:${fontStyle};position:absolute;top:0;left:0`);
+      body.appendChild(dummy);
+      this.__textHeight = dummy.offsetHeight;
+      body.removeChild(dummy);
+    }
+    return this.__textHeight;
+  }
+
+  get_text_size(text, font = '24px Arial')
+  {
+    let size = new Vector2();
+    this.ctx.font = font;
+    size.x = Math.ceil(this.ctx.measureText(text).width);
+    size.y = Math.ceil(this.getFontHeight(font));
+    return size;
+  }
+
+  draw_canvas(text, ctxOptions = {})
+  {
+    ctxOptions.font = ctxOptions.font || '24px Arial';
+    ctxOptions.font_color = ctxOptions.font_color || '#000000';
+
+    this.__draw(text, ctxOptions, this.canvas, this.ctx);
+    return this.canvas;
+  }
+
+  draw_on_texture(text, ctxOptions)
+  {
+    let canvas = this.draw_canvas(text, ctxOptions);
+    let canvas_texture = new CanvasTexture(canvas, UVMapping,
+      ClampToEdgeWrapping,
+      ClampToEdgeWrapping,
+      NearestFilter,
+      NearestFilter);
+    canvas_texture.generateMipMaps = false;
+    canvas_texture.needsUpdate = true;
+
+    return canvas_texture;
+  }
+
+  __draw(text, ctxOptions)
+  {}
+
+  roundRect(ctx, x, y, width, height, radius, fill, stroke)
+  {
+    if (typeof stroke === 'undefined')
+    {
+      stroke = true;
+    }
+    if (typeof radius === 'undefined')
+    {
+      radius = 5;
+    }
+    if (typeof radius === 'number')
+    {
+      radius = { tl: radius, tr: radius, br: radius, bl: radius };
+    }
+    else
+    {
+      let defaultRadius = { tl: 0, tr: 0, br: 0, bl: 0 };
+      for (let side in defaultRadius)
+      {
+        radius[side] = radius[side] || defaultRadius[side];
+      }
+    }
+    ctx.beginPath();
+    ctx.moveTo(x + radius.tl, y);
+    ctx.lineTo(x + width - radius.tr, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
+    ctx.lineTo(x + width, y + height - radius.br);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
+    ctx.lineTo(x + radius.bl, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
+    ctx.lineTo(x, y + radius.tl);
+    ctx.quadraticCurveTo(x, y, x + radius.tl, y);
+    ctx.closePath();
+    if (fill)
+    {
+      ctx.fill();
+    }
+    if (stroke)
+    {
+      ctx.stroke();
+    }
+  }
+}

package/src/canvas_drawer/MultiLineTextDrawer.js

@@ -0,0 +1,49 @@
+import CanvasDrawer from './CanvasDrawer';
+
+import { Vector2 } from 'three';
+
+export default class MultiLineTextDrawer extends CanvasDrawer
+{
+  constructor()
+  {
+    super();
+    this.text_margin = new Vector2(2, 0);
+  }
+
+  __draw(text_array, ctxOptions, canvas, ctx)
+  {
+    ctx.font = ctxOptions.font;
+    let text_size = new Vector2();
+    for (let i = 0; i < text_array.length; i++)
+    {
+      let new_size = this.get_text_size(text_array[i], ctxOptions.font);
+      console.log(new_size.clone());
+      text_size.x = Math.max(text_size.x, new_size.x);
+      text_size.y += Math.max(text_size.y, new_size.y);
+    }
+
+    console.log('end draw', text_array.length);
+
+    canvas.width = Math.ceil(text_size.x + this.text_margin.x * 2);
+    canvas.height = Math.ceil(text_size.y / 2 + this.text_margin.y * 2);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.globalAlpha = 0.2;
+    ctx.fillStyle = '#FF0000';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.globalAlpha = 1;
+
+    ctx.font = ctxOptions.font;
+    ctx.fillStyle = ctxOptions.font_color;
+    ctx.textBaseline = 'middle';
+    ctx.textAlignment = 'left';
+
+    let word_height = canvas.height / text_array.length;
+    for (let i = 0; i < text_array.length; i++)
+    {
+      // let height = i / (text_array.length);
+      ctx.fillText(text_array[i], this.text_margin.x / 2, word_height * i + word_height / 2);
+    }
+  }
+}

package/src/canvas_drawer/SimpleTextDrawer.js

@@ -0,0 +1,47 @@
+
+import CanvasDrawer from './CanvasDrawer';
+
+import { Vector2 } from 'three';
+
+export default class SimpleTextDrawer extends CanvasDrawer
+{
+  constructor()
+  {
+    super();
+    this.text_margin = new Vector2(2, 0);
+  }
+
+  __draw(text, ctxOptions, canvas, ctx)
+  {
+    ctx.font = ctxOptions.font;
+
+    let text_size = this.get_text_size(text, ctxOptions.font);
+    // canvas.width = Math.ceilPowerOfTwo(text_size.x+this.text_margin.x*2);
+    // canvas.height = Math.ceilPowerOfTwo(text_size.y+ this.text_margin.y*2);
+    canvas.width = Math.ceil(text_size.x + this.text_margin.x * 2);
+    canvas.height = Math.ceil(text_size.y + this.text_margin.y * 2);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // turn this on for debugging
+    ctx.globalAlpha = 0.0;
+    ctx.fillStyle = ctxOptions.font_color || '#000000';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.globalAlpha = 1;
+
+    ctx.globalAlpha = 1;
+
+    ctx.font = ctxOptions.font;
+    ctx.fillStyle = ctxOptions.font_color || '#000000';
+    ctx.textBaseline = 'middle';
+
+    ctx.textAlign = ctxOptions.textAlign || 'center';
+    if (ctx.textAlign === 'center')
+    {
+      ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+    }
+    else
+    {
+      ctx.fillText(text, 0, canvas.height / 2);
+    }
+  }
+}

package/src/components/AudioClip.js

@@ -0,0 +1,41 @@
+import { Audio as THREEAudio } from 'three';
+
+export default class AudioClip
+{
+  constructor(buffer, loop = true, volume = 1)
+  {
+    this.buffer = buffer;
+    this.loop = loop;
+    this.volume = volume;
+
+    this.audio = undefined;
+  }
+
+  init(audio_listener)
+  {
+    this.audio = new THREEAudio(audio_listener);
+    this.audio.setBuffer(this.buffer);
+    this.audio.setLoop(this.loop);
+    this.audio.setVolume(this.volume);
+  }
+
+  play()
+  {
+    this.audio.play();
+  }
+
+  pause()
+  {
+    this.audio.pause();
+  }
+
+  stop()
+  {
+    this.audio.stop();
+  }
+
+  get is_playing()
+  {
+    return this.audio.isPlaying;
+  }
+}

package/src/components/AxisHelper.js

@@ -0,0 +1,58 @@
+
+import { Object3D } from 'three';
+import { LineBasicMaterial } from 'three';
+import { AlwaysDepth } from 'three';
+import { BufferGeometry } from 'three';
+import { Vector3 } from 'three';
+import { Line } from 'three';
+
+export default class AxisHelper extends Object3D
+{
+  constructor(scale = 1.0)
+  {
+    super();
+
+    const blue_points = [];
+    blue_points.push(new Vector3(0, 0, 0));
+    blue_points.push(new Vector3(0, 0, 1000));
+
+    const blue_axis_mat = new LineBasicMaterial({ color: 0x4444ff, depthFunc: AlwaysDepth });
+    const blue_axis_geo = new BufferGeometry().setFromPoints(blue_points);
+    const blue_axis_line = new Line(blue_axis_geo, blue_axis_mat);
+    blue_axis_line.renderOrder = 50000;
+
+    const green_points = [];
+    green_points.push(new Vector3(0, 0, 0));
+    green_points.push(new Vector3(0, 1000, 0));
+
+    const green_axis_mat = new LineBasicMaterial({ color: 0x44ff44, depthFunc: AlwaysDepth });
+    const green_axis_geo = new BufferGeometry().setFromPoints(green_points);
+    const green_axis_line = new Line(green_axis_geo, green_axis_mat);
+    green_axis_line.renderOrder = 50000;
+
+    const red_points = [];
+    red_points.push(new Vector3(0, 0, 0));
+    red_points.push(new Vector3(1000, 0, 0));
+
+    const red_axis_mat = new LineBasicMaterial({ color: 0xff4444, depthFunc: AlwaysDepth });
+    const red_axis_geo = new BufferGeometry().setFromPoints(red_points);
+    const red_axis_line = new Line(red_axis_geo, red_axis_mat);
+    red_axis_line.renderOrder = 50000;
+
+    this.renderOrder = 100000;
+
+    this.add(blue_axis_line);
+    this.add(green_axis_line);
+    this.add(red_axis_line);
+
+    this.scale.set(scale, scale, scale);
+  }
+
+  update()
+  {
+  }
+
+  dispose()
+  {
+  }
+}

package/src/components/BaseObject.js

@@ -0,0 +1,45 @@
+
+import { Object3D } from 'three';
+import { Vector3 } from 'three';
+
+export default class BaseObject extends Object3D
+{
+  constructor()
+  {
+    super();
+    this.___temp_w_pos = new Vector3();
+  }
+
+  get_world_pos()
+  {
+    this.getWorldPosition(this.___temp_w_pos);
+    return this.___temp_w_pos;
+  }
+
+  deep_dispose(obj)
+  {
+    if (obj !== null)
+    {
+      for (let i = 0; i < obj.children.length; i++)
+      {
+        this.deep_dispose(obj.children[i]);
+      }
+      if (obj.geometry)
+      {
+        obj.geometry.dispose();
+      }
+      if (obj.material)
+      {
+        if (obj.material.map)
+        {
+          obj.material.map.dispose();
+        }
+        obj.material.dispose();
+      }
+    }
+    if (obj.parent)
+    {
+      obj.parent.remove(obj);
+    }
+  }
+}

package/src/components/EdgeMesh.js

@@ -0,0 +1,151 @@
+import edge_line_vert from '../shaders/edges/edges.vert';
+import edge_line_frag from '../shaders/edges/edges.frag';
+import corners_vert from '../shaders/edges/corners.vert';
+import corners_frag from '../shaders/edges/corners.frag';
+
+import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+
+import { Object3D } from 'three';
+import { ShaderMaterial } from 'three';
+import { Color } from 'three';
+import { Mesh } from 'three';
+import { EdgesGeometry } from 'three';
+import { LineSegments } from 'three';
+import { LineBasicMaterial } from 'three';
+import { Vector3 } from 'three';
+import { PlaneBufferGeometry } from 'three';
+import { BufferAttribute } from 'three';
+
+export default class EdgeMesh extends Object3D
+{
+  constructor(buffer_geometry, thickness, color)
+  {
+    super();
+    thickness = thickness || 0.1;
+    color = color || '#555555';
+    this.edges_material = new ShaderMaterial({
+      uniforms: {
+        _Thickness: { value: thickness },
+        _Color: { value: new Color(color) }
+      },
+      vertexShader: edge_line_vert,
+      fragmentShader: edge_line_frag,
+      transparent: true,
+      depthWrite: false
+    });
+
+    this.corners_material = new ShaderMaterial({
+      uniforms: {
+        _Thickness: { value: thickness },
+        _Color: { value: new Color(color) }
+      },
+      vertexShader: corners_vert,
+      fragmentShader: corners_frag,
+      transparent: true,
+      depthWrite: false
+    });
+
+    let edges_geometry    = this.__get_edges_geometry(this.__get_edges(buffer_geometry));
+    let corners_geometry  = this.__get_corners_geometry(buffer_geometry.getAttribute('position'));
+
+    this.edges_mesh   = new Mesh(edges_geometry, this.edges_material);
+    this.corners_mesh = new Mesh(corners_geometry, this.corners_material);
+
+    this.edges_mesh.frustumCulled = false;
+    this.corners_mesh.frustumCulled = false;
+    this.add(this.edges_mesh);
+    this.add(this.corners_mesh);
+  }
+
+  __get_edges(cube_geometry)
+  {
+    let edges = new EdgesGeometry(cube_geometry);
+    let line = new LineSegments(edges, new LineBasicMaterial());
+    let points_array = line.geometry.attributes.position.array;
+
+    let points = [];
+    for (let i = 0; i < points_array.length; i += 3)
+    {
+      points.push(new Vector3(points_array[i], points_array[i + 1], points_array[i + 2]));
+    }
+    return points;
+  }
+
+  update(TIME)
+  {
+
+  }
+
+  __get_edges_geometry(points)
+  {
+    let buffer_geometries = [];
+    for (let i = 0; i < points.length; i += 2)
+    {
+      let dir = points[i + 1].clone().sub(points[i]).normalize();
+      let geometry = new PlaneBufferGeometry(1, 1);
+      let vertices = geometry.getAttribute('position');
+      // top right
+      vertices.array[0] = points[i].x;
+      vertices.array[1] = points[i].y;
+      vertices.array[2] = points[i].z;
+      // top left
+      vertices.array[3] = points[i].x;
+      vertices.array[4] = points[i].y;
+      vertices.array[5] = points[i].z;
+
+      // bottom right
+      vertices.array[6] = points[i + 1].x;
+      vertices.array[7] = points[i + 1].y;
+      vertices.array[8] = points[i + 1].z;
+      // bottom left
+      vertices.array[9] = points[i + 1].x;
+      vertices.array[10] = points[i + 1].y;
+      vertices.array[11] = points[i + 1].z;
+
+      let dirs = [];
+      for (let d = 0; d < vertices.count; d++)
+      {
+        dirs.push(dir.x);
+        dirs.push(dir.y);
+        dirs.push(dir.z);
+      }
+      let dir_array = new Float32Array(dirs);
+      geometry.setAttribute('tangent', new BufferAttribute(dir_array, 3));
+      buffer_geometries.push(geometry);
+    }
+
+    return BufferGeometryUtils.mergeBufferGeometries(buffer_geometries);
+  }
+
+  __get_corners_geometry(geometry_vertices)
+  {
+    let circle_buffer_geometries = [];
+    for (let i = 0; i < geometry_vertices.count; i++)
+    {
+      let plane_geometry = new PlaneBufferGeometry(1, 1);
+      let plane_vertices = plane_geometry.getAttribute('position');
+      let w_pos = [];
+      for (let d = 0; d < plane_vertices.count; d++)
+      {
+        w_pos.push(geometry_vertices.array[i * 3 + 0]);
+        w_pos.push(geometry_vertices.array[i * 3 + 1]);
+        w_pos.push(geometry_vertices.array[i * 3 + 2]);
+      }
+      let pos_array = new Float32Array(w_pos);
+      plane_geometry.setAttribute('w_pos', new BufferAttribute(pos_array, 3));
+      circle_buffer_geometries.push(plane_geometry);
+    }
+    return BufferGeometryUtils.mergeBufferGeometries(circle_buffer_geometries);
+  }
+
+  set_visible(boolean)
+  {
+    this.edges_mesh.visible = boolean;
+    this.corners_mesh.visible = boolean;
+  }
+
+  dispose()
+  {
+
+  }
+}

package/src/components/GeometryEdgeVisualizer.js

@@ -0,0 +1,45 @@
+import edge_visualizer_frag from '../shaders/edge_visualizer/edge_visualizer.frag';
+import edge_visualizer_vert from '../shaders/edge_visualizer/edge_visualizer.vert';
+import GeometryUtilities from '../utilities/GeometryUtilities';
+
+import { Mesh } from 'three';
+import { Color } from 'three';
+import { ShaderMaterial } from 'three';
+
+export default class GeometryEdgeVisualizer extends Mesh
+{
+  constructor(geometry, line_color)
+  {
+    line_color = line_color || '#91EE91';
+
+    let material = new ShaderMaterial({
+      uniforms: {
+        _Color: { value: new Color('#CC3333') },
+        _LineColor: { value: new Color(line_color) },
+        _Alpha: { value: 1 },
+        _DepthOffset: { value: 0.001 },
+        _Thickness: { value: 2.5 }
+      },
+      vertexShader: edge_visualizer_vert,
+      fragmentShader: edge_visualizer_frag,
+      extensions: { derivatives: true },
+      transparent: true,
+      depthWrite: false
+    });
+
+    let non_indexed_geometry = geometry;
+    if (non_indexed_geometry.index)
+    {
+      non_indexed_geometry = GeometryUtilities.convert_to_non_indexed_geometry(geometry);
+    }
+
+    GeometryUtilities.add_barycentric_attribute(non_indexed_geometry);
+
+    super(non_indexed_geometry, material);
+  }
+
+  hide_faces()
+  {
+    this.material.uniforms._Alpha.value = 0;
+  }
+}

package/src/components/Grid.js

@@ -0,0 +1,33 @@
+import grid_frag from '../shaders/grid/grid.frag';
+import grid_vert from '../shaders/grid/grid.vert';
+import GeometryUtilities from '../utilities/GeometryUtilities';
+
+import { Mesh } from 'three';
+import { ShaderMaterial } from 'three';
+import { Color } from 'three';
+import { PlaneBufferGeometry } from 'three';
+
+export default class Grid extends Mesh
+{
+  constructor()
+  {
+    let material = new ShaderMaterial({
+      uniforms: {
+        _Color: { value: new Color('#919191') }
+      },
+      vertexShader: grid_vert,
+      fragmentShader: grid_frag,
+      extensions: { derivatives: true },
+      transparent: true,
+      depthWrite: false
+    });
+
+    let plane_geometry = new PlaneBufferGeometry(100, 100, 100, 100);
+
+    let non_indexed_geometry = GeometryUtilities.convert_to_non_indexed_geometry(plane_geometry);
+
+    super(non_indexed_geometry, material);
+
+    this.rotation.x = -3.14 / 2;
+  }
+}