ohzi-core 7.0.0 → 7.1.0

package/src/editor/shaders/object_picker.vert

@@ -1,8 +1,8 @@
-void main()
-{
-  vec3 pos = position;
-  mat4 MVP = projectionMatrix * modelViewMatrix;
-
-  gl_Position = MVP * vec4( pos, 1.0 );
-  //gl_Position.zw -= 0.1;
+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

@@ -1,87 +1,109 @@
-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)
-    {
-      const 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;
-
-    const 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)
-  {
-    const resolution = this.calculate_resolution(particle_count);
-    const 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();
-  }
-}
+import { Object3D } from 'three';
+import { BufferAttribute } from 'three';
+import { PlaneGeometry } from 'three';
+import { Mesh } from 'three';
+import { BufferGeometry } from 'three';
+import { Scene } from 'three';
+import { Points } from 'three';
+import { InstancedBufferGeometry } from 'three';
+import { InstancedBufferAttribute } from 'three';
+import ParticleAttribute from './ParticleAttribute';
+
+export default class GPUParticleSystem extends Object3D
+{
+  constructor(particle_count, material)
+  {
+    super();
+    this.attributes = [];
+
+    this.mesh = this.build_point_mesh(particle_count, material);
+    this.add(this.mesh);
+
+    this.attribute_writter_mesh = this.build_attribute_writter_mesh(particle_count);
+    this.attribute_writter_scene = new Scene();
+    this.attribute_writter_scene.add(this.attribute_writter_mesh);
+  }
+
+  add_texture_attribute(buffer_attribute)
+  {
+    this.attributes.push(buffer_attribute);
+  }
+
+  add_update_attribute_array(name, array, item_size)
+  {
+    this.attribute_writter_mesh.geometry.setAttribute(name, new BufferAttribute(array, item_size, false));
+  }
+
+  add_attribute_array(name, array, item_size)
+  {
+    this.mesh.geometry.setAttribute(name, new InstancedBufferAttribute(array, item_size, false));
+  }
+
+  update()
+  {
+    this.mesh.material.update();
+    for (let i = 0; i < this.attributes.length; i++)
+    {
+      this.attributes[i].update(this.attribute_writter_scene);
+    }
+  }
+
+  dispose()
+  {
+    this.mesh.geometry.dispose();
+    this.mesh.material.dispose();
+  }
+
+  build_point_mesh(instance_count = 1, material)
+  {
+    const geo = new PlaneGeometry();
+
+    const instanced_geo = new InstancedBufferGeometry();
+    instanced_geo.setAttribute('position', geo.getAttribute('position'));
+    instanced_geo.index = geo.index;
+
+    instanced_geo.setAttribute('storage_uv', this.build_uv_storage_attribute(instance_count));
+    instanced_geo.instanceCount = instance_count;
+    const mesh = new Mesh(instanced_geo, material);
+    mesh.frustumCulled = false;
+    return mesh;
+  }
+
+  build_attribute_writter_mesh(particle_count)
+  {
+    const { width, height } = ParticleAttribute.calculate_resolution(particle_count);
+
+    const uvs = new Float32Array(particle_count * 3);
+
+    for (let i = 0; i < particle_count; i++)
+    {
+      const x = i % width;
+      const y = Math.floor(i / width);
+      uvs[i * 3 + 0] = (x + 0.5) / width;
+      uvs[i * 3 + 1] = (y + 0.5) / height;
+      uvs[i * 3 + 2] = i;
+    }
+    const geo = new BufferGeometry();
+    geo.setAttribute('position', new BufferAttribute(uvs, 3, false));
+
+    const points = new Points(geo);
+    points.frustumCulled = false;
+    return points;
+  }
+
+  build_uv_storage_attribute(particle_count)
+  {
+    const { width, height } = ParticleAttribute.calculate_resolution(particle_count);
+
+    const uvs = new Float32Array(particle_count * 2);
+
+    for (let i = 0; i < particle_count; i++)
+    {
+      const x = i % width;
+      const y = Math.floor(i / width);
+      uvs[i * 2 + 0] = (x + 0.5) / width;
+      uvs[i * 2 + 1] = (y + 0.5) / height;
+    }
+    return new InstancedBufferAttribute(uvs, 2, false);
+  }
+}

package/src/gpu_particles/ParticleAttribute.js

@@ -1,83 +1,92 @@
-import Graphics from '../Graphics';
-
-import { Scene } from 'three';
-import { NearestFilter } from 'three';
-import { RGBAFormat } from 'three';
-import { LinearEncoding } from 'three';
-import { HalfFloatType } from 'three';
-import { FloatType } from 'three';
-import { WebGLRenderTarget } from 'three';
-import { Points } from 'three';
-
-export default class ParticleAttribute
-{
-  constructor(attr_name)
-  {
-    this.read = undefined;
-    this.write = undefined;
-
-    this.name = attr_name;
-
-    this.update_material = undefined;
-
-    this.update_scene = new Scene();
-  }
-
-  init_from_geometry(geometry)
-  {
-    // overrided by inheritance
-  }
-
-  init_from_attribute(particle_attribute)
-  {
-
-  }
-
-  build_RT(particle_count)
-  {
-    const resolution = this.calculate_resolution(particle_count);
-    const options = {
-      minFilter: NearestFilter,
-      magFilter: NearestFilter,
-      format: RGBAFormat,
-      encoding: LinearEncoding,
-      type: (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) ? HalfFloatType : FloatType,
-      stencilBuffer: false,
-      depthBuffer: false
-    };
-
-    return new WebGLRenderTarget(resolution, resolution, options);
-  }
-
-  calculate_resolution(particle_count)
-  {
-    return Math.ceil(Math.sqrt(particle_count));
-  }
-
-  swap_RT()
-  {
-    const tmp = this.read;
-    this.read = this.write;
-    this.write = tmp;
-  }
-
-  update()
-  {
-    if (this.update_material)
-    {
-      Graphics.blit(this.read, this.write, this.update_material);
-      this.swap_RT();
-    }
-  }
-
-  render_geometry_to_RT(geometry, material, RT)
-  {
-    const points = new Points(geometry, material);
-    points.frustumCulled = false;
-    // let scene = new Scene();
-    // scene.add( points );
-    this.update_scene.add(points);
-    Graphics.render(this.update_scene, undefined, RT);
-    // Graphics.render(scene, undefined, RT);
-  }
-}
+import Graphics from '../Graphics';
+
+import { NearestFilter } from 'three';
+import { RGBAFormat } from 'three';
+import { LinearEncoding } from 'three';
+import { HalfFloatType } from 'three';
+import { FloatType } from 'three';
+import { WebGLRenderTarget } from 'three';
+import Capabilities from '../Capabilities';
+
+export default class ParticleAttribute
+{
+  constructor(attr_name, update_material)
+  {
+    this.read = undefined;
+    this.write = undefined;
+
+    this.name = attr_name;
+
+    this.update_material = update_material;
+  }
+
+  init_from_geometry(geometry)
+  {
+    // overrided by inheritance
+  }
+
+  init_from_attribute(particle_attribute)
+  {
+
+  }
+
+  build_RT(particle_count)
+  {
+    const resolution = ParticleAttribute.calculate_resolution(particle_count);
+    const options = {
+      minFilter: NearestFilter,
+      magFilter: NearestFilter,
+      format: RGBAFormat,
+      encoding: LinearEncoding,
+      type: Capabilities.fp_textures_available ? FloatType : HalfFloatType,
+      stencilBuffer: false,
+      depthBuffer: false
+    };
+
+    return new WebGLRenderTarget(resolution.width, resolution.height, options);
+  }
+
+  static calculate_resolution(particle_count)
+  {
+    const width = Math.min(particle_count, 512);
+    const height = Math.max(1, Math.ceil(particle_count / width));
+    return { width, height };
+  }
+
+  swap_RT()
+  {
+    const tmp = this.read;
+    this.read = this.write;
+    this.write = tmp;
+  }
+
+  update(attribute_writter_scene)
+  {
+    if (this.update_material)
+    {
+      this.update_material.update();
+      attribute_writter_scene.children[0].material = this.update_material;
+      this.update_material.uniforms._MainTex.value = this.read.texture;
+      Graphics.render(attribute_writter_scene, undefined, this.write);
+      attribute_writter_scene.children[0].material = undefined;
+
+      this.swap_RT();
+    }
+  }
+
+  store_geometry_attribute_in_RT(attribute, RT, storage_material, attribute_writter_scene)
+  {
+    attribute_writter_scene.children[0].geometry.setAttribute('data', attribute);
+    attribute_writter_scene.children[0].material = storage_material;
+
+    Graphics.render(attribute_writter_scene, undefined, RT);
+
+    attribute_writter_scene.children[0].geometry.deleteAttribute('data');
+    attribute_writter_scene.children[0].material = undefined;
+  }
+
+  get_texture()
+  {
+    return this.read.texture;
+  }
+}

package/src/gpu_particles/ParticlePositionAttribute.js

@@ -1,20 +1,40 @@
-import ParticleAttribute from '../gpu_particles/ParticleAttribute';
-import PositionStorageMaterial from '../materials/gpu_particles/PositionStorageMaterial';
-
-export default class ParticlePositionAttribute extends ParticleAttribute
-{
-  constructor()
-  {
-    super('_Position');
-  }
-
-  init_from_geometry(geometry)
-  {
-    const pos_attr = geometry.getAttribute('position');
-    this.read    = this.build_RT(pos_attr.count);
-    this.write   = this.build_RT(pos_attr.count);
-
-    const mat = new PositionStorageMaterial();
-    this.render_geometry_to_RT(geometry, mat, this.read);
-  }
-}
+import { BufferAttribute } from 'three';
+
+import ParticleAttribute from '../gpu_particles/ParticleAttribute';
+import ParticleStorageMaterial from '../materials/gpu_particles/ParticleStorageMaterial';
+
+export default class ParticlePositionAttribute extends ParticleAttribute
+{
+  constructor(update_material)
+  {
+    super('_Position', update_material);
+  }
+
+  store_geometry(geometry, attribute_writter_scene)
+  {
+    const pos_attr = geometry.getAttribute('position');
+    this.read    = this.build_RT(pos_attr.count);
+    this.write   = this.build_RT(pos_attr.count);
+
+    const mat = new ParticleStorageMaterial();
+    this.store_geometry_attribute_in_RT(geometry.getAttribute('position'), this.read, mat, attribute_writter_scene);
+  }
+
+  store_positions(positions, attribute_writter_scene)
+  {
+    this.read    = this.build_RT(positions.length);
+    this.write   = this.build_RT(positions.length);
+
+    const arr = new Float32Array(positions.length * 4);
+
+    for (let i = 0; i < positions.length; i++)
+    {
+      arr[i * 4 + 0] = positions[i].x;
+      arr[i * 4 + 1] = positions[i].y;
+      arr[i * 4 + 2] = positions[i].z;
+      arr[i * 4 + 3] = (Math.random() * 2 - 1) * 10;
+    }
+    const mat = new ParticleStorageMaterial();
+    this.store_geometry_attribute_in_RT(new BufferAttribute(arr, 4), this.read, mat, attribute_writter_scene);
+  }
+}

package/src/html_utilities/CSSAnimator.js

@@ -1,64 +1,64 @@
-import Animating from './css_animator_states/Animating';
-import Idle from './css_animator_states/Idle';
-import EasingFunctions from '../utilities/EasingFunctions';
-
-export default class CSSAnimator
-{
-  constructor({
-    element,
-    css_property,
-    from = 0,
-    to = 1,
-    duration = 1,
-    value_prefix = '',
-    value_suffix =  '',
-    easing_function = EasingFunctions.ease_in_out_cubic,
-    finished_callback = () =>
-    {}
-  })
-  {
-    this.element = element;
-    this.css_property = css_property;
-    this.from = from;
-    this.to = to;
-    this.value_prefix = value_prefix;
-    this.value_suffix = value_suffix;
-    this.duration = duration;
-    this.easing_function = easing_function;
-    this.finished_callback = finished_callback;
-
-    this.current_state = new Idle();
-  }
-
-  animate()
-  {
-    this.set_current_state(new Animating());
-  }
-
-  stop()
-  {
-    this.set_current_state(new Idle());
-  }
-
-  set_property_value(value)
-  {
-    this.element.style[this.css_property] = `${this.value_prefix}${value}${this.value_suffix}`;
-  }
-
-  update()
-  {
-    this.current_state.update(this);
-  }
-
-  get is_animating()
-  {
-    return this.current_state.is_animating;
-  }
-
-  set_current_state(state)
-  {
-    this.current_state.on_exit(this);
-    this.current_state = state;
-    this.current_state.on_enter(this);
-  }
-}
+import Animating from './css_animator_states/Animating';
+import Idle from './css_animator_states/Idle';
+import EasingFunctions from '../utilities/EasingFunctions';
+
+export default class CSSAnimator
+{
+  constructor({
+    element,
+    css_property,
+    from = 0,
+    to = 1,
+    duration = 1,
+    value_prefix = '',
+    value_suffix =  '',
+    easing_function = EasingFunctions.ease_in_out_cubic,
+    finished_callback = () =>
+    {}
+  })
+  {
+    this.element = element;
+    this.css_property = css_property;
+    this.from = from;
+    this.to = to;
+    this.value_prefix = value_prefix;
+    this.value_suffix = value_suffix;
+    this.duration = duration;
+    this.easing_function = easing_function;
+    this.finished_callback = finished_callback;
+
+    this.current_state = new Idle();
+  }
+
+  animate()
+  {
+    this.set_current_state(new Animating());
+  }
+
+  stop()
+  {
+    this.set_current_state(new Idle());
+  }
+
+  set_property_value(value)
+  {
+    this.element.style[this.css_property] = `${this.value_prefix}${value}${this.value_suffix}`;
+  }
+
+  update()
+  {
+    this.current_state.update(this);
+  }
+
+  get is_animating()
+  {
+    return this.current_state.is_animating;
+  }
+
+  set_current_state(state)
+  {
+    this.current_state.on_exit(this);
+    this.current_state = state;
+    this.current_state.on_enter(this);
+  }
+}

package/src/html_utilities/css_animator_states/Animating.js

@@ -1,44 +1,44 @@
-import Time from '../../Time';
-import Idle from './Idle';
-
-import OMath from '../../utilities/OMath';
-export default class Animating
-{
-  constructor()
-  {
-    this.t = 0;
-    this.easing_function_t = 0;
-  }
-
-  get is_animating()
-  {
-    return true;
-  }
-
-  on_enter(animator)
-  {
-  }
-
-  update(animator)
-  {
-    this.t += Time.delta_time / animator.duration;
-
-    this.easing_function_t = animator.easing_function(this.t);
-    this.easing_function_t = OMath.clamp(this.easing_function_t, 0, 1);
-
-    animator.set_property_value(OMath.lerp(animator.from, animator.to, this.easing_function_t));
-
-    if (this.easing_function_t >= 0.9999)
-    {
-      animator.set_property_value(animator.to);
-
-      animator.set_current_state(new Idle());
-      animator.finished_callback(animator);
-    }
-  }
-
-  on_exit(view)
-  {
-
-  }
-}
+import Time from '../../Time';
+import Idle from './Idle';
+
+import OMath from '../../utilities/OMath';
+export default class Animating
+{
+  constructor()
+  {
+    this.t = 0;
+    this.easing_function_t = 0;
+  }
+
+  get is_animating()
+  {
+    return true;
+  }
+
+  on_enter(animator)
+  {
+  }
+
+  update(animator)
+  {
+    this.t += Time.delta_time / animator.duration;
+
+    this.easing_function_t = animator.easing_function(this.t);
+    this.easing_function_t = OMath.clamp(this.easing_function_t, 0, 1);
+
+    animator.set_property_value(OMath.lerp(animator.from, animator.to, this.easing_function_t));
+
+    if (this.easing_function_t >= 0.9999)
+    {
+      animator.set_property_value(animator.to);
+
+      animator.set_current_state(new Idle());
+      animator.finished_callback(animator);
+    }
+  }
+
+  on_exit(view)
+  {
+
+  }
+}