ohzi-core 5.13.2 → 5.14.2

package/src/components/UIElement.js

@@ -0,0 +1,208 @@
+
+import Screen from '../Screen';
+
+import UIElementMaterial from '../materials/UIElementMaterial';
+
+import ScreenSpacePosition from '../ui/ui_element_position/ScreenSpacePosition';
+import WorldSpacePosition from '../ui/ui_element_position/WorldSpacePosition';
+
+import OnIdle from '../ui/ui_element_state/OnIdle';
+import OnMouseEnter from '../ui/ui_element_state/OnMouseEnter';
+import OnMouseExit from '../ui/ui_element_state/OnMouseExit';
+import OnMouseHover from '../ui/ui_element_state/OnMouseHover';
+
+import { Mesh } from 'three';
+import { PlaneGeometry } from 'three';
+import { Vector2 } from 'three';
+import { Vector3 } from 'three';
+import { NearestFilter } from 'three';
+import { Box2 } from 'three';
+
+export default class UIElement extends Mesh
+{
+  constructor(vert, frag)
+  {
+    super(new PlaneGeometry(1, 1), new UIElementMaterial());
+
+    this.is_clickable = false;
+
+    this.position_strategy = new WorldSpacePosition();
+    this.current_state = new OnIdle();
+
+    this._position = new Vector3();
+
+    this._on_idle_state = new OnIdle();
+    this._on_enter_state = new OnMouseEnter();
+    this._on_exit_state = new OnMouseExit();
+    this._on_hover_state = new OnMouseHover();
+
+    this.on_enter = undefined;
+    this.on_exit = undefined;
+    this.on_hover = undefined;
+
+    this.mouse_pos_tmp = new Vector2();
+    this.cached_NDC_position = new Vector2();
+    this.screen_pos_tmp = new Vector2();
+
+    this.texture_size = new Vector2(1, 1);
+
+    this.frustumCulled = false;
+    this.matrixAutoUpdate = false;
+    this.renderOrder = 0;
+
+    this.size = 1;
+    this.pixel_offset = new Vector2();
+  }
+
+  set_render_order(value)
+  {
+    this.renderOrder = value;
+  }
+
+  get pivot_point()
+  {
+    return this.material.uniforms._PivotPoint.value;
+  }
+
+  set_pixel_offset(offset)
+  {
+    this.pixel_offset.copy(offset);
+    this.material.uniforms._PixelOffset.value.copy(offset);
+  }
+
+  set_state(new_state)
+  {
+    this.current_state.on_exit(this);
+    this.current_state = new_state;
+    this.current_state.on_enter(this);
+  }
+
+  get position()
+  {
+    return this._position;
+  }
+
+  set use_depth(boolean)
+  {
+    this.material.depthTest = boolean;
+  }
+
+  get use_depth()
+  {
+    return this.material.depthTest;
+  }
+
+  set depth_offset(value)
+  {
+    this.material.uniforms._DepthOffset.value = value;
+  }
+
+  get depth_offset()
+  {
+    return this.material.uniforms._DepthOffset.value;
+  }
+
+  clear_state()
+  {
+    this.visible = false;
+  }
+
+  set_world_space_coordinate_system()
+  {
+    this.position_strategy = new WorldSpacePosition();
+  }
+
+  set_screen_space_coordinate_system()
+  {
+    this.position_strategy = new ScreenSpacePosition();
+  }
+
+  set_texture(texture)
+  {
+    texture.minFilter = NearestFilter;
+    texture.magFilter = NearestFilter;
+    texture.needsUpdate = true;
+
+    this.texture_size.set(texture.image.width, texture.image.height);
+
+    this.material.uniforms._MainTex.value = texture;
+    this.get_size(this.material.uniforms._TextureSize.value);
+    this.visible = true;
+  }
+
+  update_state(normalized_mouse_pos)
+  {
+    this.material.uniforms._ScreenSize.value.set(Screen.width, Screen.height);
+    this.get_size(this.material.uniforms._TextureSize.value);
+
+    this.cached_NDC_position.copy(this.position_strategy.get_pos_NDC(this.position));
+    this.material.uniforms._NDC.value.copy(this.position);
+    this.current_state.update(this, normalized_mouse_pos);
+  }
+
+  is_mouse_over(normalized_mouse_pos)
+  {
+    this.screen_pos_tmp.copy(this.cached_NDC_position);
+    this.to_screen_position(this.screen_pos_tmp);
+    this.screen_pos_tmp.x += this.pixel_offset.x;
+    this.screen_pos_tmp.y += this.pixel_offset.y;
+
+    let rect = new Box2().setFromCenterAndSize(this.screen_pos_tmp, this.get_size());
+
+    this.mouse_pos_tmp.copy(normalized_mouse_pos);
+    this.to_screen_position(this.mouse_pos_tmp);
+
+    return rect.containsPoint(this.mouse_pos_tmp);
+  }
+
+  to_screen_position(projected_pos)
+  {
+    projected_pos.x = (projected_pos.x * 0.5 + 0.5) * Screen.width  + this.pixel_offset.x;
+    projected_pos.y = (projected_pos.y * 0.5 + 0.5) * Screen.height + this.pixel_offset.y;
+  }
+
+  get_screen_space_position()
+  {
+    let pos = this.cached_NDC_position.clone();
+    this.to_screen_position(pos);
+    return pos;
+  }
+
+  set_screen_space_position(screen_pos)
+  {
+    this.position.x = (screen_pos.x / Screen.width) * 2 - 1;
+    this.position.y = (screen_pos.y / Screen.height) * 2 - 1;
+  }
+
+  dispose()
+  {
+    if (this.material.uniforms._MainTex.value)
+    {
+      this.material.uniforms._MainTex.value.dispose();
+    }
+    Screen.remove_screen_material(this.material);
+    this.geometry.dispose();
+    this.material.dispose();
+  }
+
+  get_size(vector2)
+  {
+    if (vector2)
+    {
+      return vector2.copy(this.texture_size).multiplyScalar(this.size / Screen.dpr);
+    }
+    else
+    {
+      return new Vector2().copy(this.texture_size).multiplyScalar(this.size / Screen.dpr);
+    }
+  }
+
+  on_mouse_enter()
+  {}
+
+  on_mouse_exit()
+  {}
+
+  on_mouse_hover()
+  {}
+}

package/src/components/UpdatableMaterialMesh.js

@@ -0,0 +1,16 @@
+import { Mesh } from 'three';
+
+export default class UpdatableMaterialMesh extends Mesh
+{
+  constructor(geometry, material)
+  {
+    super(geometry, material);
+
+    let self = this;
+
+    this.onBeforeRender = () =>
+    {
+      self.material.update();
+    };
+  }
+}

package/src/components/WorldImage.js

@@ -0,0 +1,91 @@
+import basic_texture_vert from '../shaders/basic_texture/basic_texture.vert';
+import basic_texture_frag from '../shaders/basic_texture/basic_texture.frag';
+
+import { Mesh } from 'three';
+import { Vector2 } from 'three';
+import { ShaderMaterial } from 'three';
+import { DoubleSide } from 'three';
+import { PlaneGeometry } from 'three';
+import { Vector3 } from 'three';
+
+export default class WorldImage extends Mesh
+{
+  constructor(texture, pivot)
+  {
+    pivot = pivot || new Vector2(0, 0);
+    let material = new ShaderMaterial({
+      uniforms: {
+        _MainTex: { value: texture },
+        _ScreenAligned: { value: 0 },
+        _Scale: { value: 1 },
+        _Opacity: { value: 1 }
+      },
+      vertexShader: basic_texture_vert,
+      fragmentShader: basic_texture_frag,
+      transparent: true,
+      depthWrite: false,
+      side: DoubleSide
+    });
+    let geometry = new PlaneGeometry(1, 1, 1);
+    geometry.translate(-pivot.x / 2, -pivot.y / 2, 0);
+    let current_scale = texture.image.width / texture.image.height;
+    geometry.scale(current_scale, 1, 1);
+    super(geometry, material);
+    this.current_scale = current_scale;
+    this.geometry.computeBoundingBox();
+
+    this.tmp_bb_size = new Vector3();
+    this.geometry.boundingBox.getSize(this.tmp_bb_size);
+  }
+
+  update_texture()
+  {
+    this.material.uniforms._MainTex.value.needsUpdate = true;
+    let img = this.material.uniforms._MainTex.value.image;
+
+    this.geometry.scale(1 / this.current_scale, 1, 1);
+    this.current_scale = img.width / img.height;
+    this.geometry.scale(this.current_scale, 1, 1);
+    this.geometry.computeBoundingBox();
+    this.geometry.boundingBox.getSize(this.tmp_bb_size);
+  }
+
+  get size()
+  {
+    return this.tmp_bb_size.clone().multiplyScalar(this.scale.x);
+  }
+
+  set size(value)
+  {
+    this.scale.set(value, value, value);
+    this.material.uniforms._Scale.value = value;
+  }
+
+  set screen_aligned(boolean)
+  {
+    this.material.uniforms._ScreenAligned.value = boolean === true ? 1 : 0;
+  }
+
+  get screen_aligned()
+  {
+    return this.material.uniforms._ScreenAligned.value === 1;
+  }
+
+  set opacity(opacity)
+  {
+    this.material.uniforms._Opacity.value = opacity;
+  }
+
+  get opacity()
+  {
+    return this.material.uniforms._Opacity.value;
+  }
+
+  dispose()
+  {
+    this.geometry.dispose();
+    this.parent.remove(this);
+    this.material.uniforms._MainTex.value.dispose();
+    this.material.dispose();
+  }
+}

package/src/components/mouse_interactors/ObjectRotator.js

@@ -0,0 +1,61 @@
+import RaycastResolver from '../../raycast/RaycastResolver';
+import GroupRaycaster from '../../raycast/GroupRaycaster';
+import Input from '../../Input';
+
+import { Vector3 } from 'three';
+import { Quaternion } from 'three';
+
+export default class ObjectRotator extends RaycastResolver
+{
+  constructor(object)
+  {
+    super();
+
+    this.is_mouse_over = false;
+    this.rotation_active = false;
+
+    this.object = object;
+    this.group_raycaster = new GroupRaycaster([object], this);
+  }
+
+  on_enter(intersected_object)
+  {
+    this.is_mouse_over = true;
+  }
+
+  on_exit()
+  {
+    this.is_mouse_over = false;
+  }
+
+  is_active()
+  {
+    return this.rotation_active;
+  }
+
+  update()
+  {
+    this.group_raycaster.update();
+
+    if (this.is_mouse_over && Input.left_mouse_button_down)
+    {
+      this.rotation_active = true;
+    }
+
+    // left button no longer being pressed
+    if (!Input.left_mouse_button_down)
+    {
+      this.rotation_active = false;
+    }
+
+    if (this.rotation_active)
+    {
+      let rot_x = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), Input.NDC_delta.x);
+      let rot_y = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), Input.NDC_delta.y);
+
+      this.object.quaternion.multiply(rot_x);
+      rot_y.multiply(this.object.quaternion);
+      this.object.quaternion.copy(rot_y);
+    }
+  }
+}

package/src/components/sdf_text/SDFText.js

@@ -0,0 +1,154 @@
+import { Vector3, Quaternion, Matrix4, Color, Box2, Vector2 } from 'three';
+import TextGlyph from './TextGlyph';
+
+export default class SDFText
+{
+  constructor(glyph_layout, text = '')
+  {
+    this.glyph_layout = glyph_layout;
+
+    this.glyphs = [];
+
+    this.glyph_is_dirty  = true;
+    this.matrix_is_dirty = true;
+    this.color_is_dirty  = true;
+
+    this.position = new Vector3();
+    this.quaternion = new Quaternion();
+    this.scale = new Vector3(1, 1, 1);
+    this.matrix = new Matrix4();
+
+    this.color = new Color('#FFFFFF');
+
+    this.pivot_point = new Vector2();
+    this.__opacity = 1;
+
+    this.__text   = text;
+
+    this.__generate_glyphs(text);
+  }
+
+  set text(value)
+  {
+    this.__text = value;
+    this.__generate_glyphs(value);
+    this.matrix_is_dirty = true;
+  }
+
+  get text()
+  {
+    return this.__text;
+  }
+
+  update_matrix()
+  {
+    this.matrix.compose(this.position, this.quaternion, this.scale);
+    this.matrix_is_dirty = false;
+    this.glyph_is_dirty = true;
+  }
+
+  clear_glyph_dirty()
+  {
+    this.glyph_is_dirty = false;
+  }
+
+  clear_color_dirty()
+  {
+    this.color_is_dirty = false;
+  }
+
+  set_rotation(orientation = 0, tilt = 0) // 0..360, -90..0..90
+  {
+    let new_orientation = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), (orientation / 360) * Math.PI * 2);
+    let new_tilt = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), (-tilt / 360) * Math.PI * 2);
+
+    this.quaternion.copy(new_orientation.multiply(new_tilt));
+    this.matrix_is_dirty = true;
+  }
+
+  set_position(pos)
+  {
+    this.position.copy(pos);
+    this.matrix_is_dirty = true;
+  }
+
+  set_size(size)
+  {
+    this.scale.set(size, size, size);
+    this.matrix_is_dirty = true;
+  }
+
+  set_color(col)
+  {
+    this.color.set(col);
+    this.color_is_dirty = true;
+  }
+
+  set_pivot(pivot)
+  {
+    this.pivot_point.copy(pivot);
+    this.update_glyphs();
+  }
+
+  set opacity(op)
+  {
+    this.__opacity = op;
+    this.color_is_dirty = true;
+  }
+
+  get opacity()
+  {
+    return this.__opacity;
+  }
+
+  update_glyphs()
+  {
+    this.__generate_glyphs(this.text);
+  }
+
+  __generate_glyphs(text)
+  {
+    let cursor = 0;
+
+    this.glyphs.length = 0;
+
+    for (let i = 0; i < text.length; i++)
+    {
+      let unicode = text.charCodeAt(i);
+      let glyph = this.glyph_layout.find(element => element.unicode === unicode);
+      if (glyph)
+      {
+        if (glyph.planeBounds)
+        {
+          let text_glyph = new TextGlyph(cursor, glyph.planeBounds, glyph.atlasBounds);
+          this.glyphs.push(text_glyph);
+        }
+        cursor += glyph.advance;
+      }
+    }
+
+    let box2 = new Box2();
+    let first_glyph = this.glyphs[0];
+    box2.setFromCenterAndSize(first_glyph.position.clone().add(new Vector2(first_glyph.scale.x / 2, first_glyph.scale.y / 2)), first_glyph.scale);
+
+    for (let i = 1; i < this.glyphs.length; i++)
+    {
+      let g = this.glyphs[i];
+      let box = new Box2().setFromCenterAndSize(g.position.clone().add(new Vector2(g.scale.x / 2, g.scale.y / 2)), g.scale);
+      box2.union(box);
+    }
+
+    let box2_size = new Vector2();
+    box2.getSize(box2_size);
+    for (let i = 0; i < this.glyphs.length; i++)
+    {
+      this.glyphs[i].position.x -= box2_size.x / 2;
+      this.glyphs[i].position.y -= box2_size.y / 2;
+
+      this.glyphs[i].position.x += (box2_size.x / 2) * this.pivot_point.x;
+      this.glyphs[i].position.y += (box2_size.y / 2) * this.pivot_point.y;
+    }
+
+    this.glyph_is_dirty = true;
+  }
+}