ohzi-core 5.13.2 → 5.14.2

package/src/render_mode/UnrealBloomRender.js

@@ -0,0 +1,109 @@
+import Screen from '../Screen';
+import BaseRender from '../render_mode/BaseRender';
+import UnrealBloomComposeMaterial from '../materials/UnrealBloomComposeMaterial';
+import AddMaterial from '../materials/AddMaterial';
+
+import { WebGLRenderTarget } from 'three';
+
+import GaussianBlurrer from '../render_utilities/GaussianBlurrer';
+import Graphics from '../Graphics';
+import CameraManager from '../CameraManager';
+import SceneManager from '../SceneManager';
+
+export default class UnrealBloomRender extends BaseRender
+{
+  constructor()
+  {
+    super();
+
+    this.bloom_compose_mat = undefined;
+
+    this.main_RT = undefined;
+    this.blur_RT = undefined;
+    this.blurrer = undefined;
+
+    this.add_mat = new AddMaterial();
+  }
+
+  on_enter()
+  {
+    this.blurrer = new GaussianBlurrer();
+    this.main_RT = new WebGLRenderTarget(Screen.render_width, Screen.render_height);
+    this.blur_RT = new WebGLRenderTarget(Screen.render_width, Screen.render_height);
+
+    this.bloom_compose_mat = new UnrealBloomComposeMaterial(5);
+    this.blurrer = new GaussianBlurrer(5);
+
+    this.bloom_compose_mat.set_RT_0(this.blurrer.renderTargetsVertical[0].texture);
+    this.bloom_compose_mat.set_RT_1(this.blurrer.renderTargetsVertical[1].texture);
+    this.bloom_compose_mat.set_RT_2(this.blurrer.renderTargetsVertical[2].texture);
+    this.bloom_compose_mat.set_RT_3(this.blurrer.renderTargetsVertical[3].texture);
+    this.bloom_compose_mat.set_RT_4(this.blurrer.renderTargetsVertical[4].texture);
+
+    this.bloom_compose_mat.set_bloom_strength(1);
+    this.bloom_compose_mat.set_bloom_radius(1);
+
+    this.add_mat.set_add_texture(this.blurrer.renderTargetsHorizontal[0].texture);
+  }
+
+  set_bloom_strength(val)
+  {
+    this.bloom_compose_mat.set_bloom_strength(val);
+  }
+
+  set_bloom_radius(val)
+  {
+    this.bloom_compose_mat.set_bloom_radius(val);
+  }
+
+  set_tint_color_0(col_string)
+  {
+    this.bloom_compose_mat.set_tint_color_0(col_string);
+  }
+
+  set_tint_color_1(col_string)
+  {
+    this.bloom_compose_mat.set_tint_color_1(col_string);
+  }
+
+  set_tint_color_2(col_string)
+  {
+    this.bloom_compose_mat.set_tint_color_2(col_string);
+  }
+
+  set_tint_color_3(col_string)
+  {
+    this.bloom_compose_mat.set_tint_color_3(col_string);
+  }
+
+  set_tint_color_4(col_string)
+  {
+    this.bloom_compose_mat.set_tint_color_4(col_string);
+  }
+
+  render()
+  {
+    this.__check_RT_size();
+
+    Graphics.clear(this.main_RT, CameraManager.current, true, false);
+    Graphics.render(SceneManager.current, CameraManager.current, this.main_RT);
+
+    // // BLUR
+    this.blurrer.blur(this.main_RT, true);
+
+    // Blur compose
+    Graphics.material_pass(this.bloom_compose_mat, this.blurrer.renderTargetsHorizontal[0]);
+
+    // Additive blend
+    Graphics.blit(this.main_RT, undefined, this.add_mat);
+  }
+
+  __check_RT_size()
+  {
+    if (this.main_RT.width !== Screen.render_width || this.main_RT.height !== Screen.render_height)
+    {
+      this.main_RT.setSize(Screen.render_width, Screen.render_height);
+      this.blur_RT.setSize(Screen.render_width, Screen.render_height);
+    }
+  }
+}

package/src/render_utilities/Blitter.js

@@ -0,0 +1,99 @@
+import BlitMaterial from '../materials/BlitMaterial';
+
+import { Scene } from 'three';
+import { Mesh } from 'three';
+import { PlaneBufferGeometry } from 'three';
+import { OrthographicCamera } from 'three';
+
+export default class Blitter
+{
+  constructor(renderer)
+  {
+    this.renderer = renderer;
+    this._blit_scene = new Scene();
+    this._blit_material = new BlitMaterial();
+    this._blit_quad = new Mesh(
+      new PlaneBufferGeometry(1, 1), this._blit_material);
+    this._blit_scene.add(this._blit_quad);
+    this._blit_camera = new OrthographicCamera(-1, 1, 1, -1, -10000, 10000);
+  }
+
+  blit(src, dst)
+  {
+    this._blit_quad.material = this._blit_material;
+
+    let src_texture = src.isWebGLRenderTarget === true ? src.texture : src;
+    let src_width   = src.isWebGLRenderTarget === true ? src.width   : src.image.width;
+    let src_height  = src.isWebGLRenderTarget === true ? src.height  : src.image.height;
+
+    this._blit_quad.material.uniforms._MainTex.value = src_texture;
+    this._blit_quad.material.uniforms._Resolution.value.set(src_width, src_height);
+
+    if (dst)
+    {
+      this._blit_quad.material.uniforms._TargetResolution.value.set(dst.width, dst.height);
+    }
+    else
+    {
+      this.renderer.getSize(this._blit_quad.material.uniforms._TargetResolution.value);
+    }
+
+    this.__render(dst);
+  }
+
+  material_pass(mat, dst)
+  {
+    this._blit_quad.material = mat;
+    // this._blit_quad.material.uniforms._MainTex.value = undefined;
+    // this._blit_quad.material.uniforms._Resolution.value.set(1, 1);
+
+    this.__render(dst);
+  }
+
+  blit_with_material(src, dst, mat)
+  {
+    let src_texture = src.isWebGLRenderTarget === true ? src.texture : src;
+    let src_width   = src.isWebGLRenderTarget === true ? src.width   : src.image.width;
+    let src_height  = src.isWebGLRenderTarget === true ? src.height  : src.image.height;
+
+    this._blit_quad.material = mat;
+    this._blit_quad.material.uniforms._MainTex.value = src_texture;
+    this._blit_quad.material.uniforms._Resolution.value.set(src_width, src_height);
+
+    if (dst)
+    {
+      this._blit_quad.material.uniforms._TargetResolution.value.set(dst.width, dst.height);
+    }
+    else
+    {
+      this.renderer.getSize(this._blit_quad.material.uniforms._TargetResolution.value);
+    }
+
+    this.__render(dst);
+  }
+
+  blit_clear_with_material(dst_RT, mat)
+  {
+    this._blit_quad.material = mat;
+
+    this.__render(dst_RT);
+  }
+
+  dispose()
+  {
+    this._blit_quad.geometry.dispose();
+    this._blit_quad.material.dispose();
+  }
+
+  __render(RT)
+  {
+    RT = RT === undefined ? null : RT;
+
+    let current_rt = this.renderer.getRenderTarget();
+
+    this.renderer.setRenderTarget(RT === undefined ? null : RT);
+    this.renderer.render(this._blit_scene, this._blit_camera);
+
+    this.renderer.setRenderTarget(current_rt);
+  }
+}

package/src/render_utilities/Blurrer.js

@@ -0,0 +1,29 @@
+import BoxBlurMaterial from '../materials/BoxBlurMaterial';
+import Graphics from '../Graphics';
+
+import { WebGLRenderTarget } from 'three';
+
+export default class Blurrer
+{
+  constructor(renderer)
+  {
+    this.RT1 = new WebGLRenderTarget(1, 1);
+    this.RT2 = new WebGLRenderTarget(1, 1);
+    this.box_blur_mat = new BoxBlurMaterial();
+  }
+
+  blur(RT)
+  {
+    if (RT.width !== this.RT1.width || RT.height !== this.RT1.height)
+    {
+      this.RT1.setSize(RT.width, RT.height);
+      this.RT2.setSize(RT.width, RT.height);
+    }
+
+    this.box_blur_mat.uniforms._SampleDir.value.set(1, 0);
+    Graphics.blit(RT, this.RT1, this.box_blur_mat);
+    this.box_blur_mat.uniforms._SampleDir.value.set(0, 1);
+    Graphics.blit(this.RT1, RT, this.box_blur_mat);
+    // return this.RT2;
+  }
+}

package/src/render_utilities/DepthAndNormalsRenderer.js

@@ -0,0 +1,45 @@
+import CameraManager from '../CameraManager';
+import Screen from '../Screen';
+
+import ClearDepthNormalMaterial from '../materials/ClearDepthNormalMaterial';
+import DepthNormalMaterial from '../materials/DepthNormalMaterial';
+
+import { WebGLRenderTarget } from 'three';
+import { Vector3 } from 'three';
+
+export default class DepthAndNormalsRenderer
+{
+  constructor()
+  {
+    this.RT = new WebGLRenderTarget(Screen.width, Screen.height);
+
+    this.clear_depth_normal_mat = new ClearDepthNormalMaterial(1, new Vector3(0, 0, 1));
+    this.depth_normal_material = new DepthNormalMaterial();
+  }
+
+  render(graphics)
+  {
+    this.__resize_RT_if_necessary();
+
+    graphics.clear(this.RT, undefined, true, true);
+
+    graphics.blit_clear_with_material(this.RT, this.clear_depth_normal_mat);
+
+    this.depth_normal_material.far_plane = CameraManager.current.far;
+
+    graphics.render(undefined, undefined, this.RT, this.depth_normal_material);
+  }
+
+  __resize_RT_if_necessary()
+  {
+    if (this.RT.width !== Screen.width || this.RT.height !== Screen.height)
+    {
+      this.RT.setSize(Screen.width, Screen.height);
+    }
+  }
+
+  get render_target()
+  {
+    return this.RT;
+  }
+}

package/src/render_utilities/DualFilteringBlurrer.js

@@ -0,0 +1,56 @@
+import DualFilteringBlurMaterial from '../materials/DualFilteringBlurMaterial';
+import AlphaFilterMaterial from '../materials/AlphaFilterMaterial';
+import Graphics from '../Graphics';
+import { WebGLRenderTarget } from 'three';
+export default class DualFilteringBlurrer
+{
+  constructor(use_alpha_mask)
+  {
+    this.current_width  = 1;
+    this.current_height = 1;
+    this.RT0 = new WebGLRenderTarget(1, 1);
+    this.RT1 = new WebGLRenderTarget(1, 1);
+    this.RT2 = new WebGLRenderTarget(1, 1);
+    this.RT3 = new WebGLRenderTarget(1, 1);
+    this.RT4 = new WebGLRenderTarget(1, 1);
+
+    this.upscale_blur_mat   = new DualFilteringBlurMaterial(true);
+    this.downscale_blur_mat = new DualFilteringBlurMaterial(false);
+
+    this.alpha_filter_mat = new AlphaFilterMaterial();
+  }
+
+  blur(RT)
+  {
+    this.check_RT_resize(RT.width, RT.height);
+    Graphics.blit(RT,       this.RT1, this.alpha_filter_mat);
+
+    // Graphics.blit(this.RT0, this.RT1, this.downscale_blur_mat);
+    Graphics.blit(this.RT1, this.RT2, this.downscale_blur_mat);
+    Graphics.blit(this.RT2, this.RT3, this.downscale_blur_mat);
+    Graphics.blit(this.RT3, this.RT4, this.downscale_blur_mat);
+
+    // Graphics.blit(this.RT4, this.RT3, this.upscale_blur_mat);
+    // Graphics.blit(this.RT3, this.RT4, this.upscale_blur_mat);
+    Graphics.blit(this.RT4, this.RT3, this.upscale_blur_mat);
+    Graphics.blit(this.RT3, this.RT2, this.upscale_blur_mat);
+    Graphics.blit(this.RT2, RT, this.upscale_blur_mat);
+    // Graphics.blit(this.RT1, RT,       this.upscale_blur_mat);
+
+    // return this.RT2;
+  }
+
+  check_RT_resize(width, height)
+  {
+    if (this.current_width !== width || this.current_height !== height)
+    {
+      this.current_width = width;
+      this.current_height = height;
+      this.RT0.setSize(this.current_width / 2, this.current_height / 2);
+      this.RT1.setSize(this.current_width / 2, this.current_height / 2);
+      this.RT2.setSize(this.current_width / 4, this.current_height / 4);
+      this.RT3.setSize(this.current_width / 8, this.current_height / 8);
+      this.RT4.setSize(this.current_width / 16, this.current_height / 16);
+    }
+  }
+}

package/src/render_utilities/GaussianBlurrer.js

@@ -0,0 +1,146 @@
+import GaussianBlurMaterial from '../materials/GaussianBlurMaterial';
+import LuminosityHighPassMaterial from '../materials/LuminosityHighPassMaterial';
+import Graphics from '../Graphics';
+
+import { WebGLRenderTarget, LinearFilter, RGBAFormat } from 'three';
+
+export default class GaussianBlurrer
+{
+  constructor(nMips = 5)
+  {
+    this.current_width = 1;
+    this.current_height = 1;
+
+    this.separableBlurMaterials = [];
+    this.renderTargetsHorizontal = [];
+    this.renderTargetsVertical = [];
+
+    this.nMips = nMips;
+    this.kernelSizeArray = [3, 5, 7, 9, 11];
+    this.rt_pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat };
+
+    this.renderTargetBright = new WebGLRenderTarget(1, 1, this.rt_pars);
+    this.renderTargetBright.texture.generateMipmaps = false;
+
+    this.init_materials();
+    this.init_RT();
+
+    this.luminosity_high_pass_mat = new LuminosityHighPassMaterial();
+  }
+
+  blur(RT, use_luminosity_high_pass)
+  {
+    this.resize_RT(RT.width, RT.height);
+
+    if (use_luminosity_high_pass)
+    {
+      Graphics.blit(RT, this.renderTargetBright, this.luminosity_high_pass_mat);
+    }
+    else
+    {
+      Graphics.blit(RT, this.renderTargetBright);
+    }
+
+    let inputRenderTarget = this.renderTargetBright;
+
+    for (let i = 0; i < this.nMips; i++)
+    {
+      let mat = this.separableBlurMaterials[i];
+
+      mat.set_direction(1, 0);
+      Graphics.blit(inputRenderTarget, this.renderTargetsHorizontal[i], mat);
+
+      mat.set_direction(0, 1);
+      Graphics.blit(this.renderTargetsHorizontal[i], this.renderTargetsVertical[i], mat);
+
+      inputRenderTarget = this.renderTargetsVertical[i];
+    }
+  }
+
+  get_blurred_texture()
+  {
+    return this.renderTargetsHorizontal[0].texture;
+  }
+
+  get_blurred_RT()
+  {
+    return this.renderTargetsHorizontal[0];
+  }
+
+  init_RT()
+  {
+    this.dispose_RT();
+
+    this.renderTargetBright.setSize(1, 1);
+
+    for (let i = 0; i < this.nMips; i++)
+    {
+      let hor = new WebGLRenderTarget(1, 1, this.rt_pars);
+      let ver = new WebGLRenderTarget(1, 1, this.rt_pars);
+
+      hor.texture.generateMipmaps = false;
+      ver.texture.generateMipmaps = false;
+
+      this.renderTargetsHorizontal.push(hor);
+      this.renderTargetsVertical.push(ver);
+    }
+  }
+
+  resize_RT(texture_width, texture_height)
+  {
+    if (this.current_width === texture_width && this.current_height === texture_height)
+    {
+      return;
+    }
+
+    this.current_width = texture_width;
+    this.current_height = texture_height;
+
+    let width = Math.round(texture_width / 2);
+    let height = Math.round(texture_height / 2);
+
+    this.renderTargetBright.setSize(width, height);
+
+    for (let i = 0; i < this.nMips; i++)
+    {
+      this.renderTargetsVertical[i].setSize(width, height);
+      this.renderTargetsHorizontal[i].setSize(width, height);
+      this.separableBlurMaterials[i].set_size(width, height);
+
+      width   = Math.round(width / 2);
+      height  = Math.round(height / 2);
+    }
+  }
+
+  init_materials(texture_width, texture_height)
+  {
+    this.dispose_materials();
+
+    for (let i = 0; i < this.nMips; i++)
+    {
+      this.separableBlurMaterials.push(new GaussianBlurMaterial(this.kernelSizeArray[i]));
+    }
+  }
+
+  dispose_materials()
+  {
+    for (let i = 0; i < this.separableBlurMaterials.length; i++)
+    {
+      this.separableBlurMaterials[i].dispose();
+    }
+    this.separableBlurMaterials.length = 0;
+  }
+
+  dispose_RT()
+  {
+    for (let i = 0; i < this.renderTargetsVertical.length; i++)
+    {
+      this.renderTargetsHorizontal[i].dispose();
+      this.renderTargetsVertical[i].dispose();
+    }
+    this.renderTargetBright.dispose();
+
+    this.renderTargetsHorizontal.length = 0;
+    this.renderTargetsVertical.length = 0;
+  }
+}

package/src/render_utilities/MedianFilter.js

@@ -0,0 +1,66 @@
+import MedianFilterMaterial from '../materials/MedianFilterMaterial';
+import Graphics from '../Graphics';
+
+import { WebGLRenderTarget, Vector2, RGBAFormat, FloatType, NearestFilter } from 'three';
+
+export default class MedianFilter
+{
+  constructor(renderer)
+  {
+    this.RT = new WebGLRenderTarget(1, 1, {
+      type: FloatType,
+      format: RGBAFormat,
+      minFilter: NearestFilter,
+      magFilter: NearestFilter
+    });
+    this.RT1 = new WebGLRenderTarget(1, 1, {
+      type: FloatType,
+      format: RGBAFormat,
+      minFilter: NearestFilter,
+      magFilter: NearestFilter
+    });
+
+    this.median_filter_mat = new MedianFilterMaterial();
+  }
+
+  filter(texture)
+  {
+    let tex_size = this.get_size(texture);
+    if (tex_size.x !== this.RT.width || tex_size.y !== this.RT.height)
+    {
+      this.RT.setSize(tex_size.x, tex_size.y);
+      this.RT1.setSize(tex_size.x, tex_size.y);
+    }
+
+    this.median_filter_mat.set_texture(texture);
+    Graphics.material_pass(this.median_filter_mat, this.RT);
+
+    for (let i = 0; i < 0; i++)
+    {
+      this.median_filter_mat.set_texture(this.RT.texture);
+      Graphics.material_pass(this.median_filter_mat, this.RT1);
+
+      this.median_filter_mat.set_texture(this.RT1.texture);
+      Graphics.material_pass(this.median_filter_mat, this.RT);
+    }
+
+    return this.RT;
+  }
+
+  get_size(tex)
+  {
+    if (tex.isVideoTexture)
+    {
+      return new Vector2(Math.max(1, tex.image.videoWidth), Math.max(1, tex.image.videoHeight));
+    }
+    if (tex.isWebGLRenderTarget)
+    {
+      return new Vector2(tex.width, tex.height);
+    }
+    if (tex.isTexture)
+    {
+      return new Vector2(tex.image.width, tex.image.height);
+    }
+    return new Vector2(1, 1);
+  }
+}

package/src/render_utilities/ViewPositionRenderer.js

@@ -0,0 +1,48 @@
+import CameraManager from '../CameraManager';
+import SceneManager from '../SceneManager';
+import Screen from '../Screen';
+import ViewPositionMaterial from '../materials/ViewPositionMaterial';
+
+import { WebGLRenderTarget } from 'three';
+import { FloatType } from 'three';
+import { Color } from 'three';
+
+export default class ViewPositionRenderer
+{
+  constructor()
+  {
+    this.RT = new WebGLRenderTarget(Screen.width, Screen.height, { type: FloatType });
+    this.clear_color = new Color(0, 0, 0);
+    this.render_pos_mat = new ViewPositionMaterial();
+  }
+
+  render(context, renderer)
+  {
+    if (this.RT.width !== Screen.width || this.RT.height !== Screen.height)
+    {
+      this.RT.setSize(Screen.width, Screen.height);
+    }
+
+    if (CameraManager.current)
+    {
+      CameraManager.current.aspect = Screen.aspect_ratio;
+      CameraManager.current.updateProjectionMatrix();
+      CameraManager.current.updateMatrix();
+      CameraManager.current.updateMatrixWorld(true);
+
+      renderer.setRenderTarget(this.RT);
+      this.clear_color.set(CameraManager.current.far, CameraManager.current.far, CameraManager.current.far);
+      renderer.setClearColor(this.clear_color, 1);
+      renderer.clear(true, true, false);
+
+      SceneManager.current.overrideMaterial = this.render_pos_mat;
+      renderer.render(SceneManager.current, CameraManager.current, this.RT, false);
+      SceneManager.current.overrideMaterial = undefined;
+    }
+  }
+
+  get render_target()
+  {
+    return this.RT;
+  }
+}

package/src/resource_loader/AbstractLoader.js

@@ -0,0 +1,103 @@
+import OS from '../OS';
+import Validation from '../utilities/Validation';
+
+export default class AbstractLoader
+{
+  constructor(resource_id, url, size = 1)
+  {
+    this.resource_id = resource_id;
+    this.url = url;
+    this.loaded_bytes = 0;
+    this.total_bytes = size;
+
+    this.has_finished = false;
+    this.has_error = false;
+    this.error_message = 'none';
+  }
+
+  __update_downloaded_bytes(loaded, total)
+  {
+    loaded = Validation.is_number(loaded) ? loaded : 1;
+    total  = Validation.is_number(total)  ? total  : 1;
+
+    this.loaded_bytes = loaded;
+
+    if (total > 0)
+    {
+      this.total_bytes = total;
+    }
+
+    if (this.loaded_bytes > this.total_bytes)
+    {
+      console.warn('Total bytes is smaller than loaded ones. Please set total bytes by hand to:', this.url);
+    }
+  }
+
+  __loading_ended()
+  {
+    this.has_finished = true;
+  }
+
+  __set_error(message)
+  {
+    this.has_error = true;
+    this.error_message = message;
+  }
+
+  print_error()
+  {
+    console.error('Error while loading ' + this.resource_id + '\n\t path: ' + this.url + '\n\t\t' + this.error_message);
+  }
+
+  load(resource_container)
+  {
+    const cache = OS.is_safari ? 'no-cache' : 'default';
+
+    fetch(this.url, {
+      method: 'GET', // *GET, POST, PUT, DELETE, etc.
+      mode: 'cors', // no-cors, *cors, same-origin
+      cache: cache, // *default, no-cache, reload, force-cache, only-if-cached
+      credentials: 'same-origin', // include, *same-origin, omit
+      redirect: 'follow' // manual, *follow, error
+    })
+      .then(this.on_progress.bind(this, resource_container))
+      .catch(this.__on_error.bind(this));
+  }
+
+  async on_progress(resource_container, response)
+  {
+    const reader = response.body.getReader();
+
+    // Step 2: get total length
+    let contentLength = +response.headers.get('Content-Length');
+
+    // Step 3: read the data
+    let receivedLength = 0; // received that many bytes at the moment
+
+    while (true)
+    {
+      const { done, value } = await reader.read();
+
+      if (done)
+      {
+        break;
+      }
+
+      receivedLength += value.length;
+
+      this.__update_downloaded_bytes(receivedLength, contentLength);
+      // console.log(`Received ${receivedLength} of ${contentLength}`);
+    }
+
+    this.on_preloaded_finished(resource_container);
+  }
+
+  on_preloaded_finished(resource_container)
+  {
+  }
+
+  __on_error(data)
+  {
+    console.error(data);
+  }
+}