ohzi-core 5.13.2 → 5.14.2

package/src/components/sdf_text/SDFTextBatch.js

@@ -0,0 +1,193 @@
+import SDFText from './SDFText';
+import SDFTextMaterial from '../../materials/SDFTextMaterial';
+import ArrayUtilities from '../../utilities/ArrayUtilities';
+
+import {
+  PlaneBufferGeometry,
+  Mesh,
+  Vector2,
+  InstancedBufferGeometry,
+  InstancedBufferAttribute,
+  Float32BufferAttribute,
+  DynamicDrawUsage
+} from 'three';
+
+export default class SDFTextBatch extends Mesh
+{
+  constructor(font_layout, atlas_texture)
+  {
+    let max_allocations = 2000;
+
+    let instanced_geometry = new InstancedBufferGeometry();
+    instanced_geometry.instanceCount = 0;
+
+    let geometry = new PlaneBufferGeometry(1, 1);
+    geometry.translate(0.5, 0.5, 0);
+    instanced_geometry.setAttribute('position',  new Float32BufferAttribute(geometry.getAttribute('position').array, 3));
+    instanced_geometry.setAttribute('uv',        new Float32BufferAttribute(geometry.getAttribute('uv').array, 2));
+    instanced_geometry.index = geometry.index;
+
+    let transformsCol0 = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
+    let transformsCol1 = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
+    let transformsCol2 = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
+    let transformsCol3 = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
+
+    let glyph_bounds = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
+    let plane_bounds = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
+
+    let color = new InstancedBufferAttribute(new Float32Array(max_allocations * 4), 4, false);
+
+    transformsCol0.usage  = DynamicDrawUsage;
+    transformsCol1.usage  = DynamicDrawUsage;
+    transformsCol2.usage  = DynamicDrawUsage;
+    transformsCol3.usage  = DynamicDrawUsage;
+    glyph_bounds.usage    = DynamicDrawUsage;
+    plane_bounds.usage    = DynamicDrawUsage;
+    color.usage           = DynamicDrawUsage;
+
+    instanced_geometry.setAttribute('transformsCol0', transformsCol0);
+    instanced_geometry.setAttribute('transformsCol1', transformsCol1);
+    instanced_geometry.setAttribute('transformsCol2', transformsCol2);
+    instanced_geometry.setAttribute('transformsCol3', transformsCol3);
+
+    instanced_geometry.setAttribute('glyph_bounds', glyph_bounds);
+    instanced_geometry.setAttribute('plane_bounds', plane_bounds);
+    instanced_geometry.setAttribute('color',        color);
+
+    super(instanced_geometry, new SDFTextMaterial(atlas_texture));
+
+    this.text_elements = [];
+    this.font_layout = font_layout;
+
+    this.material.set_atlas_size(new Vector2(font_layout.atlas.width, font_layout.atlas.height));
+
+    this.frustumCulled = false;
+  }
+
+  set_boldness(value)
+  {
+    this.material.set_boldness(value);
+  }
+
+  add_text(text_str)
+  {
+    let elem = new SDFText(this.font_layout.glyphs, text_str);
+    this.text_elements.push(elem);
+    return elem;
+  }
+
+  remove_text(text_elem)
+  {
+    ArrayUtilities.remove_elem(this.text_elements, text_elem);
+    this.update(true);
+  }
+
+  update(force_update)
+  {
+    let glyph_bounds_atr = this.geometry.getAttribute('glyph_bounds');
+    let plane_bounds_atr = this.geometry.getAttribute('plane_bounds');
+
+    let transformsCol0 = this.geometry.getAttribute('transformsCol0');
+    let transformsCol1 = this.geometry.getAttribute('transformsCol1');
+    let transformsCol2 = this.geometry.getAttribute('transformsCol2');
+    let transformsCol3 = this.geometry.getAttribute('transformsCol3');
+
+    let color_atr = this.geometry.getAttribute('color');
+
+    let matrix_needs_update = force_update === true;
+    let glyph_needs_update  = force_update === true;
+    let color_needs_update  = force_update === true;
+
+    let glyph_count = 0;
+    for (let i = 0; i < this.text_elements.length; i++)
+    {
+      let text = this.text_elements[i];
+
+      if (text.matrix_is_dirty)
+      {
+        matrix_needs_update = true;
+        text.update_matrix();
+      }
+
+      if (text.glyph_is_dirty)
+      {
+        glyph_needs_update = true;
+        text.clear_glyph_dirty();
+      }
+
+      if (text.color_is_dirty)
+      {
+        color_needs_update = true;
+        text.clear_color_dirty();
+      }
+
+      let matrix = text.matrix;
+      let color = text.color;
+      let opacity = text.opacity;
+
+      for (let glyph_i = 0; glyph_i < text.glyphs.length; glyph_i++)
+      {
+        let glyph = text.glyphs[glyph_i];
+
+        let buffer_i = glyph_count;
+
+        glyph_bounds_atr.setXYZW(buffer_i, glyph.atlas_bounds.x, glyph.atlas_bounds.y, glyph.atlas_bounds.z, glyph.atlas_bounds.w);
+        plane_bounds_atr.setXYZW(buffer_i, glyph.position.x, glyph.position.y, glyph.scale.x, glyph.scale.y);
+
+        transformsCol0.setXYZW(buffer_i, matrix.elements[0],
+          matrix.elements[1],
+          matrix.elements[2],
+          matrix.elements[3]);
+
+        transformsCol1.setXYZW(buffer_i, matrix.elements[4],
+          matrix.elements[5],
+          matrix.elements[6],
+          matrix.elements[7]);
+
+        transformsCol2.setXYZW(buffer_i, matrix.elements[8],
+          matrix.elements[9],
+          matrix.elements[10],
+          matrix.elements[11]);
+
+        transformsCol3.setXYZW(buffer_i, matrix.elements[12],
+          matrix.elements[13],
+          matrix.elements[14],
+          matrix.elements[15]);
+
+        color_atr.setXYZW(buffer_i, color.r, color.g, color.b, opacity);
+
+        glyph_count++;
+      }
+    }
+
+    this.geometry.instanceCount = glyph_count;
+
+    if (glyph_count > this.max_allocations)
+    {
+      console.error('SDFTextBatch exceeded maximum glyph allocations(max/current): ', this.max_allocations, glyph_count, this);
+    }
+
+    if (matrix_needs_update)
+    {
+      transformsCol0.needsUpdate = true;
+      transformsCol1.needsUpdate = true;
+      transformsCol2.needsUpdate = true;
+      transformsCol3.needsUpdate = true;
+    }
+    if (glyph_needs_update)
+    {
+      glyph_bounds_atr.needsUpdate = true;
+      plane_bounds_atr.needsUpdate = true;
+    }
+    if (color_needs_update)
+    {
+      color_atr.needsUpdate = true;
+    }
+  }
+
+  dispose()
+  {
+    this.geometry.dispose();
+    this.material.dispose();
+  }
+}

package/src/components/sdf_text/TextGlyph.js

@@ -0,0 +1,15 @@
+import { Vector2, Vector4 } from 'three';
+
+export default class TextGlyph
+{
+  constructor(offset, plane_bounds, atlas_bounds)
+  {
+    let width   = plane_bounds.right - plane_bounds.left;
+    let height  = plane_bounds.top   - plane_bounds.bottom;
+
+    this.scale    = new Vector2(width, height);
+    this.position = new Vector2(offset + plane_bounds.left, plane_bounds.bottom);
+
+    this.atlas_bounds = new Vector4(atlas_bounds.left, atlas_bounds.right, atlas_bounds.top, atlas_bounds.bottom);
+  }
+}

package/src/editor/ManipulatorHandle.js

@@ -0,0 +1,70 @@
+import CameraManager from '../CameraManager';
+import Input from '../Input';
+
+import { ArrowHelper } from 'three';
+import { Vector2 } from 'three';
+import { Vector3 } from 'three';
+import { Object3D } from 'three';
+import { BoxGeometry } from 'three';
+import { MeshBasicMaterial } from 'three';
+import { Mesh } from 'three';
+import { Raycaster } from 'three';
+import { Math as TMath } from 'three';
+
+export default class ManipulatorHandle extends Object3D
+{
+  constructor(direction, color)
+  {
+    super();
+
+    let length = 10;
+    this.arrow_helper = new ArrowHelper(direction, new Vector3(0, 0, 0), length, color, undefined, 1);
+    this.add(this.arrow_helper);
+
+    let collider_size = new Vector3();
+    collider_size.x = TMath.clamp(direction.x * length, 1, 30);
+    collider_size.y = TMath.clamp(direction.y * length, 1, 30);
+    collider_size.z = TMath.clamp(direction.z * length, 1, 30);
+
+    let geometry = new BoxGeometry(collider_size.x, collider_size.y, collider_size.z);
+    let material = new MeshBasicMaterial({ color: color, depthTest: false, depthWrite: false });
+    material.visible = false;
+    this.box_collider = new Mesh(geometry, material);
+    this.box_collider.position.add(direction.clone().multiplyScalar(length * 0.5));
+    this.add(this.box_collider);
+
+    this.direction = direction;
+    this.raycaster = new Raycaster();
+    this.raycast_result = undefined;
+
+    this.tmp_p1 = new Vector3(0, 0, 0);
+    this.tmp_p2 = new Vector3(0, 0, 0);
+
+    this.tmp_v2 = new Vector2(0, 0);
+
+    this.half_unit_vec = new Vector3(0.5, 0.5, 0.5);
+  }
+
+  is_mouse_over()
+  {
+    this.raycaster.setFromCamera(Input.NDC, CameraManager.current);
+    this.raycast_result = this.raycaster.intersectObject(this.box_collider);
+    if (this.raycast_result.length > 0)
+    {
+      return true;
+    }
+    return false;
+  }
+
+  get_normalized_screen_direction()
+  {
+    this.getWorldPosition(this.tmp_p1);
+    this.tmp_p2.copy(this.tmp_p1).add(this.direction);
+
+    this.tmp_p1.project(CameraManager.current).multiplyScalar(0.5).add(this.half_unit_vec);
+    this.tmp_p2.project(CameraManager.current).multiplyScalar(0.5).add(this.half_unit_vec);
+
+    this.tmp_p2.sub(this.tmp_p1);
+    return this.tmp_v2.copy(this.tmp_p2).normalize();
+  }
+}

package/src/editor/ObjectEditor.js

@@ -0,0 +1,66 @@
+import Input from '../Input';
+import ObjectManipulator from './ObjectManipulator';
+import ObjectPicker from './ObjectPicker';
+
+import { Raycaster } from 'three';
+
+export default class ObjectEditor
+{
+  constructor(renderer, scene, camera)
+  {
+    this.raycaster = new Raycaster();
+
+    this.selected_object = undefined;
+    this.object_manipulator = new ObjectManipulator();
+    this.object_picker = new ObjectPicker(renderer, scene, camera);
+
+    this.scene = scene;
+    this.camera = camera;
+
+    this.selectable_objects = [];
+
+    scene.add(this.object_manipulator);
+  }
+
+  refresh_scene()
+  {
+    this.selectable_objects.length = 0;
+    this.__populate_selectable_objects(this.selectable_objects);
+    this.__set_object_ids(this.selectable_objects);
+  }
+
+  update()
+  {
+    if (Input.left_mouse_button_pressed)
+    {
+      let x = this.object_picker.pick(Input.NDC, this.selectable_objects);
+      if (x !== 0)
+      {
+        let selected_obj = this.selectable_objects[x - 1];
+        // this.object_manipulator.position.copy(selected_obj.position);
+        this.object_manipulator.set_target(selected_obj);
+      }
+    }
+
+    this.object_manipulator.update();
+  }
+
+  __populate_selectable_objects(array)
+  {
+    this.scene.traverse((child) =>
+    {
+      if (child.selectable_material)
+      {
+        array.push(child);
+      }
+    });
+  }
+
+  __set_object_ids(array)
+  {
+    for (let i = 0; i < array.length; i++)
+    {
+      array[i].selectable_material.uniforms._Color.value.setHex(i + 1);
+    }
+  }
+}

package/src/editor/ObjectManipulator.js

@@ -0,0 +1,118 @@
+import ManipulatorHandle from '../editor/ManipulatorHandle';
+import Input from '../Input';
+import EventManager from '../EventManager';
+
+import { Object3D } from 'three';
+import { Vector2 } from 'three';
+import { Vector3 } from 'three';
+
+export default class ObjectManipulator extends Object3D
+{
+  constructor()
+  {
+    super();
+    this.target_obj = undefined;
+
+    this.up_handle = new ManipulatorHandle(new Vector3(0, 1, 0), 0x00ff00);
+    this.right_handle = new ManipulatorHandle(new Vector3(1, 0, 0), 0xff0000);
+    this.forward_handle = new ManipulatorHandle(new Vector3(0, 0, 1), 0x0000ff);
+
+    this.add(this.up_handle);
+    this.add(this.right_handle);
+    this.add(this.forward_handle);
+
+    this.active_handle = undefined;
+
+    this.tmp_displacement_vector = new Vector3();
+    this.tmp_local_pos = new Vector3();
+
+    this.target_obj = undefined;
+
+    this.tmp_up_v2 = new Vector2(0, 1);
+    this.tmp_right_v2 = new Vector2(1, 0);
+
+    this.use_vertical_translation = false;
+    this.translation_sign = false;
+
+    this.visible = false;
+  }
+
+  update()
+  {
+    this.check_active_handle();
+
+    if (this.active_handle && this.target_obj)
+    {
+      this.tmp_displacement_vector.copy(this.active_handle.direction);
+      if (this.use_vertical_translation)
+      {
+        this.tmp_displacement_vector.multiplyScalar(-Input.NDC_delta.y);
+      }
+      else
+      {
+        this.tmp_displacement_vector.multiplyScalar(Input.NDC_delta.x);
+      }
+
+      this.tmp_displacement_vector.multiplyScalar(Input.NDC_delta.length() * 250 * this.translation_sign);
+      this.position.add(this.tmp_displacement_vector);
+
+      this.tmp_local_pos.copy(this.position);
+      this.target_obj.parent.worldToLocal(this.tmp_local_pos);
+      this.target_obj.position.copy(this.tmp_local_pos);
+      let scope = this;
+      EventManager.fire_unit_position_updated({
+        unit_id: scope.target_obj.name,
+        position: scope.target_obj.position
+      });
+    }
+  }
+
+  set_translation_axis(active_handle)
+  {
+    let vertical = active_handle.get_normalized_screen_direction().dot(this.tmp_up_v2);
+    let horizontal = active_handle.get_normalized_screen_direction().dot(this.tmp_right_v2);
+
+    if (Math.abs(vertical) > Math.abs(horizontal))
+    {
+      this.use_vertical_translation = true;
+      this.translation_sign = Math.sign(vertical);
+    }
+    else
+    {
+      this.use_vertical_translation = false;
+      this.translation_sign = Math.sign(horizontal);
+    }
+  }
+
+  check_active_handle()
+  {
+    if (Input.left_mouse_button_down && this.active_handle === undefined)
+    {
+      if (this.right_handle.is_mouse_over())
+      {
+        this.active_handle = this.right_handle;
+      }
+      if (this.forward_handle.is_mouse_over())
+      {
+        this.active_handle = this.forward_handle;
+      }
+
+      if (this.active_handle)
+      {
+        this.set_translation_axis(this.active_handle);
+      }
+    }
+
+    if (Input.left_mouse_button_released)
+    {
+      this.active_handle = undefined;
+    }
+  }
+
+  set_target(obj)
+  {
+    this.target_obj = obj;
+    this.visible = true;
+    obj.getWorldPosition(this.position);
+  }
+}

package/src/editor/ObjectPicker.js

@@ -0,0 +1,75 @@
+import RenderLayers from '../RenderLayers';
+import Screen from '../Screen';
+
+import { Color } from 'three';
+import { WebGLRenderTarget } from 'three';
+import { Vector2 } from 'three';
+
+export default class ObjectPicker
+{
+  constructor(renderer, scene, camera)
+  {
+    this.renderer = renderer;
+    this.readback_buffer = new Uint8Array(4);
+    this.scene = scene;
+    this.camera = camera;
+    this.camera_layers = camera.layers;
+
+    this.clear_color = new Color('#000000');
+    this.picking_texture = new WebGLRenderTarget(Screen.width, Screen.height);
+    this.tmp_scene_auto_update = undefined;
+
+    this.tmp_mouse_pos = new Vector2();
+  }
+
+  pick(mouse_NDC, objects)
+  {
+    this.__prepare_scene(objects);
+    this.renderer.setRenderTarget(this.picking_texture);
+    this.renderer.setClearColor(this.clear_color, 1);
+    this.renderer.clear();
+    this.renderer.render(this.scene, this.camera, this.picking_texture);
+    this.renderer.setRenderTarget();
+
+    this.__restore_scene(objects);
+
+    return this.__readback_id(mouse_NDC);
+  }
+
+  __prepare_scene(objects)
+  {
+    for (let i = 0; i < objects.length; i++)
+    {
+      objects[i].material = objects[i].selectable_material;
+      objects[i].store_layer_state();
+      objects[i].layers.set(RenderLayers.selectable);
+    }
+
+    this.camera_layers = this.camera.layers.mask;
+    this.camera.layers.set(RenderLayers.selectable);
+    this.tmp_scene_auto_update = this.scene.autoUpdate;
+    this.scene.autoUpdate = false;
+  }
+
+  __restore_scene(objects)
+  {
+    for (let i = 0; i < objects.length; i++)
+    {
+      objects[i].restore_material();
+      objects[i].restore_layer_state();
+    }
+    this.camera.layers.mask = this.camera_layers;
+    this.scene.autoUpdate = this.tmp_scene_auto_update;
+  }
+
+  __readback_id(mouse_NDC)
+  {
+    this.tmp_mouse_pos.copy(mouse_NDC);
+    this.tmp_mouse_pos.multiplyScalar(0.5);
+    this.tmp_mouse_pos.x = (this.tmp_mouse_pos.x + 0.5) * Screen.width;
+    this.tmp_mouse_pos.y = (this.tmp_mouse_pos.y + 0.5) * Screen.height;
+    this.renderer.readRenderTargetPixels(this.picking_texture, this.tmp_mouse_pos.x, this.tmp_mouse_pos.y, 1, 1, this.readback_buffer);
+
+    return (this.readback_buffer[2]) | (this.readback_buffer[1] << 8) | (this.readback_buffer[0] << 16);
+  }
+}

package/src/editor/shaders/object_picker.frag

@@ -0,0 +1,6 @@
+uniform vec3 _Color;
+
+void main()
+{
+    gl_FragColor = vec4(_Color, 1.0);
+}

package/src/editor/shaders/object_picker.vert

@@ -0,0 +1,8 @@
+void main()
+{
+  vec3 pos = position;
+  mat4 MVP = projectionMatrix * modelViewMatrix;
+
+  gl_Position = MVP * vec4( pos, 1.0 );
+  //gl_Position.zw -= 0.1;
+}

package/src/gpu_particles/GPUParticleSystem.js

@@ -0,0 +1,87 @@
+import { Object3D } from 'three';
+import { BufferAttribute } from 'three';
+import { Points } from 'three';
+
+export default class GPUParticleSystem extends Object3D
+{
+  constructor()
+  {
+    super();
+    this.attributes = [];
+
+    this.particles = undefined;
+  }
+
+  set_from_geometry(geometry, material, init_attribute_uvs)
+  {
+    // let position = new ParticlePositionAttribute("_Position");
+    if (init_attribute_uvs && geometry.getAttribute('storage_uv') === undefined)
+    {
+      let uv_storage_attr = this.build_uv_storage_attribute(geometry.getAttribute('position').count);
+      geometry.setAttribute('storage_uv', uv_storage_attr);
+    }
+    // position.init_from_geometry(geometry);
+    // this.attributes.push(position);
+
+    // material.uniforms._Position.value = position.read.texture;
+
+    let points = new Points(geometry, material);
+    points.frustumCulled = false;
+    this.particles = points;
+
+    this.add(points);
+  }
+
+  add_texture_attribute(buffer_attribute)
+  {
+
+  }
+
+  add_attribute(name, buffer_attribute)
+  {
+
+  }
+
+  build_uv_storage_attribute(particle_count)
+  {
+    let resolution = this.calculate_resolution(particle_count);
+    let uvs = new Float32Array(particle_count * 2);
+    for (let i = 0, j = 0; i < particle_count * 2; i += 2, j++)
+    {
+      uvs[i] = ((j % resolution) / resolution) + (0.5 / resolution);
+      uvs[i + 1] = (Math.floor(j / resolution) / resolution) + (0.5 / resolution);
+    }
+
+    return new BufferAttribute(uvs, 2);
+  }
+
+  calculate_resolution(particle_count)
+  {
+    return Math.ceil(Math.sqrt(particle_count));
+  }
+
+  update()
+  {
+    for (let i = 0; i < this.attributes.length; i++)
+    {
+      this.attributes[i].update();
+    }
+  }
+
+  set_attribute_update_material(attribute_name, mat)
+  {
+    for (let i = 0; i < this.attributes.length; i++)
+    {
+      if (this.attributes[i].name === attribute_name)
+      {
+        this.attributes[i].update_material = mat;
+      }
+    }
+  }
+
+  dispose()
+  {
+    this.particles.geometry.dispose();
+    this.particles.material.dispose();
+  }
+}