ohzi-core 12.2.1 → 12.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ohzi-core",
-  "version": "12.2.1",
+  "version": "12.3.0",
   "description": "OHZI Interactive Core Library",
   "source": "src/index.js",
   "module": "build/index.mjs",

package/src/materials/AddMaterial.js

@@ -4,10 +4,10 @@ import frag from '../shaders/add/add.frag';
 
 class AddMaterial extends BlitMaterial
 {
-  constructor(nMips)
+  constructor(use_half_float = false)
   {
     super(frag);
-
+    this.defines.USE_LINEAR_COLOR_SPACE = use_half_float;
     this.uniforms._SecondTex = { value: undefined };
   }
 

package/src/materials/GaussianBlurMaterial.js

@@ -6,7 +6,7 @@ import { Vector2 } from 'three';
 
 class GaussianBlurMaterial extends BlitMaterial
 {
-  constructor(kernel_radius)
+  constructor(kernel_radius, use_half_float)
   {
     super(frag, undefined, {
       KERNEL_RADIUS: kernel_radius,
@@ -15,6 +15,9 @@ class GaussianBlurMaterial extends BlitMaterial
 
     this.uniforms.texSize = { value: new Vector2(0.5, 0.5) };
     this.uniforms.direction = { value: new Vector2(0.5, 0.5) };
+    this.uniforms.radius = { value: 1 };
+
+    this.defines.USE_LINEAR_COLOR_SPACE = true;
   }
 
   set_size(w, h)
@@ -27,6 +30,11 @@ class GaussianBlurMaterial extends BlitMaterial
   {
     this.uniforms.direction.value.set(x, y);
   }
+
+  set_radius(value = 1)
+  {
+    this.uniforms.radius.value = value;
+  }
 }
 
 export { GaussianBlurMaterial };

package/src/materials/LuminosityHighPassMaterial.js

@@ -5,7 +5,7 @@ import frag from '../shaders/luminosity_high_pass/luminosity_high_pass.frag';
 import { Color } from 'three';
 class LuminosityHighPassMaterial extends BlitMaterial
 {
-  constructor(kernel_radius)
+  constructor(use_half_float)
   {
     super(frag);
 
@@ -13,6 +13,13 @@ class LuminosityHighPassMaterial extends BlitMaterial
     this.uniforms.smoothWidth         = { value: 0.01 };
     this.uniforms.defaultColor        = { value: new Color('#000000') };
     this.uniforms.defaultOpacity      = { value: 0.0 };
+
+    this.defines.USE_LINEAR_COLOR_SPACE = true;
+  }
+
+  set_threshold(value_01)
+  {
+    this.uniforms.luminosityThreshold.value = value_01;
   }
 }
 

package/src/materials/UnrealBloomComposeMaterial.js

@@ -5,7 +5,7 @@ import frag from '../shaders/gaussian_blur/unreal_bloom_compose.frag';
 import { Color } from 'three';
 class UnrealBloomComposeMaterial extends BlitMaterial
 {
-  constructor(nMips)
+  constructor(nMips, use_linear_color_space = false)
   {
     super(frag, undefined, {
       NUM_MIPS: nMips
@@ -22,8 +22,9 @@ class UnrealBloomComposeMaterial extends BlitMaterial
 
     this.uniforms.bloomStrength = { value: 1.0 };
     this.uniforms.bloomFactors  = { value: [1.0, 0.8, 0.6, 0.4, 0.2] };
-    this.uniforms.bloomRadius   = { value: 0.0 };
+    this.uniforms.bloomRadius   = { value: 1.0 };
 
+    this.defines.USE_LINEAR_COLOR_SPACE = use_linear_color_space;
     const bloomTintColors = [
       new Color('#FFFFFF'),
       new Color('#FFFFFF'),

package/src/render_mode/UnrealBloomRender.js

@@ -3,7 +3,7 @@ import { BaseRender } from '../render_mode/BaseRender';
 import { UnrealBloomComposeMaterial } from '../materials/UnrealBloomComposeMaterial';
 import { AddMaterial } from '../materials/AddMaterial';
 
-import { WebGLRenderTarget } from 'three';
+import { HalfFloatType, LinearSRGBColorSpace, NearestFilter, RGBAFormat, UnsignedByteType, WebGLRenderTarget } from 'three';
 
 import { GaussianBlurrer } from '../render_utilities/GaussianBlurrer';
 import { Graphics } from '../Graphics';
@@ -12,40 +12,61 @@ import { SceneManager } from '../SceneManager';
 
 class UnrealBloomRender extends BaseRender
 {
-  constructor()
+  constructor(use_antialiasing, use_half_float, use_hight_luminosity_pass)
   {
     super();
 
-    this.bloom_compose_mat = undefined;
-
-    this.main_RT = undefined;
-    this.blur_RT = undefined;
-    this.blurrer = undefined;
-
-    this.add_mat = new AddMaterial();
+    this.add_mat = new AddMaterial(use_half_float);
+
+    const rt_settings = {
+      samples: use_antialiasing ? 8 : 1,
+      type: use_half_float ? HalfFloatType : UnsignedByteType,
+      format: RGBAFormat,
+      colorSpace: LinearSRGBColorSpace,
+      minFilter: NearestFilter,
+      magFilter: NearestFilter
+    };
+    this.main_RT = new WebGLRenderTarget(1, 1, rt_settings);
+    this.main_RT.texture.colorSpace = LinearSRGBColorSpace;
+    this.main_RT.texture.minFilter = NearestFilter;
+    this.main_RT.texture.magFilter = NearestFilter;
+
+    this.bloom_compose_mat = new UnrealBloomComposeMaterial(5, use_half_float);
+    this.blurrer = new GaussianBlurrer(use_half_float);
+    this.use_hight_luminosity_pass = use_hight_luminosity_pass;
+    this.luminosity_threshold = 0.5;
   }
 
   on_enter()
   {
-    this.blurrer = new GaussianBlurrer();
-    this.main_RT = new WebGLRenderTarget(OScreen.width, OScreen.height);
-    this.blur_RT = new WebGLRenderTarget(OScreen.width, OScreen.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);
   }
 
+  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, this.use_hight_luminosity_pass);
+
+    // // Blur compose
+    Graphics.material_pass(this.bloom_compose_mat, this.blurrer.renderTargetsHorizontal[0]);
+
+    // // Additive blend
+    // Graphics.clear(undefined, CameraManager.current, true, false);
+    // Graphics.render(SceneManager.current, CameraManager.current);
+    Graphics.blit(this.main_RT, undefined, this.add_mat);
+  }
+
   set_bloom_strength(val)
   {
     this.bloom_compose_mat.set_bloom_strength(val);
@@ -53,7 +74,13 @@ class UnrealBloomRender extends BaseRender
 
   set_bloom_radius(val)
   {
-    this.bloom_compose_mat.set_bloom_radius(val);
+    // this.bloom_compose_mat.set_bloom_radius(val);
+    this.blurrer.set_radius(val);
+  }
+
+  set_luminosity_threshold(value)
+  {
+    this.blurrer.set_luminosity_threshold(value);
   }
 
   set_tint_color_0(col_string)
@@ -81,29 +108,11 @@ class UnrealBloomRender extends BaseRender
     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 !== OScreen.width || this.main_RT.height !== OScreen.height)
     {
       this.main_RT.setSize(OScreen.width, OScreen.height);
-      this.blur_RT.setSize(OScreen.width, OScreen.height);
     }
   }
 }

package/src/render_utilities/Blitter.js

@@ -85,13 +85,13 @@ class Blitter
     this._blit_quad.material.dispose();
   }
 
-  __render(RT)
+  __render(dst_RT)
   {
-    RT = RT === undefined ? null : RT;
+    const RT = dst_RT === undefined ? null : dst_RT;
 
     const current_rt = this.renderer.getRenderTarget();
 
-    this.renderer.setRenderTarget(RT === undefined ? null : RT);
+    this.renderer.setRenderTarget(RT);
     this.renderer.render(this._blit_scene, this._blit_camera);
 
     this.renderer.setRenderTarget(current_rt);

package/src/render_utilities/GaussianBlurrer.js

@@ -2,11 +2,11 @@ import { GaussianBlurMaterial } from '../materials/GaussianBlurMaterial';
 import { LuminosityHighPassMaterial } from '../materials/LuminosityHighPassMaterial';
 import { Graphics } from '../Graphics';
 
-import { WebGLRenderTarget, LinearFilter, RGBAFormat } from 'three';
+import { WebGLRenderTarget, LinearFilter, RGBAFormat, HalfFloatType, UnsignedByteType, SRGBColorSpace, LinearSRGBColorSpace } from 'three';
 
 class GaussianBlurrer
 {
-  constructor(nMips = 5)
+  constructor(use_half_float = false)
   {
     this.current_width = 1;
     this.current_height = 1;
@@ -14,10 +14,16 @@ class GaussianBlurrer
     this.separableBlurMaterials = [];
     this.renderTargetsHorizontal = [];
     this.renderTargetsVertical = [];
-
-    this.nMips = nMips;
+    this.use_half_float = use_half_float;
+    this.nMips = 5;
     this.kernelSizeArray = [3, 5, 7, 9, 11];
-    this.rt_pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat };
+    this.rt_pars = {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      format: RGBAFormat,
+      type: use_half_float ? HalfFloatType : UnsignedByteType,
+      colorSpace: use_half_float ? LinearSRGBColorSpace : SRGBColorSpace
+    };
 
     this.renderTargetBright = new WebGLRenderTarget(1, 1, this.rt_pars);
     this.renderTargetBright.texture.generateMipmaps = false;
@@ -25,24 +31,21 @@ class GaussianBlurrer
     this.init_materials();
     this.init_RT();
 
-    this.luminosity_high_pass_mat = new LuminosityHighPassMaterial();
+    this.luminosity_high_pass_mat = new LuminosityHighPassMaterial(use_half_float);
   }
 
   blur(RT, use_luminosity_high_pass)
   {
     this.resize_RT(RT.width, RT.height);
 
+    let inputRenderTarget = RT;
+
     if (use_luminosity_high_pass)
     {
       Graphics.blit(RT, this.renderTargetBright, this.luminosity_high_pass_mat);
-    }
-    else
-    {
-      Graphics.blit(RT, this.renderTargetBright);
+      inputRenderTarget = this.renderTargetBright;
     }
 
-    let inputRenderTarget = this.renderTargetBright;
-
     for (let i = 0; i < this.nMips; i++)
     {
       const mat = this.separableBlurMaterials[i];
@@ -81,6 +84,9 @@ class GaussianBlurrer
       hor.texture.generateMipmaps = false;
       ver.texture.generateMipmaps = false;
 
+      hor.texture.colorSpace = this.rt_pars.colorSpace;
+      ver.texture.colorSpace = this.rt_pars.colorSpace;
+
       this.renderTargetsHorizontal.push(hor);
       this.renderTargetsVertical.push(ver);
     }
@@ -112,16 +118,29 @@ class GaussianBlurrer
     }
   }
 
-  init_materials(texture_width, texture_height)
+  init_materials()
   {
     this.dispose_materials();
 
     for (let i = 0; i < this.nMips; i++)
     {
-      this.separableBlurMaterials.push(new GaussianBlurMaterial(this.kernelSizeArray[i]));
+      this.separableBlurMaterials.push(new GaussianBlurMaterial(this.kernelSizeArray[i], this.use_half_float));
     }
   }
 
+  set_radius(value)
+  {
+    for (let i = 0; i < this.separableBlurMaterials.length; i++)
+    {
+      this.separableBlurMaterials[i].set_radius(value);
+    }
+  }
+
+  set_luminosity_threshold(value)
+  {
+    this.luminosity_high_pass_mat.set_threshold(value);
+  }
+
   dispose_materials()
   {
     for (let i = 0; i < this.separableBlurMaterials.length; i++)

package/src/shaders/add/add.frag

@@ -2,8 +2,27 @@ uniform sampler2D _MainTex;
 uniform sampler2D _SecondTex;
 
 varying vec2 vUv;
+
+vec4 sampleTex(sampler2D tex, vec2 uv)
+{
+  vec4 col = texture2D( tex, uv);
+
+  #ifndef USE_LINEAR_COLOR_SPACE
+    col.rgb = pow(col.rgb, vec3(2.2));
+  #endif
+
+  return col;
+}
 void main()
 {
-	gl_FragColor = texture2D(_MainTex, vUv);
-	gl_FragColor += texture2D(_SecondTex, vUv);
+	vec4 col0 = sampleTex(_MainTex, vUv);
+	vec4 col1 = sampleTex(_SecondTex, vUv);
+
+
+  gl_FragColor = col0+col1;
+	// gl_FragColor = texture2D(_SecondTex, vUv);
+  gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(0.4545));
+
+	// gl_FragColor = texture2D(_MainTex, vUv)+texture2D(_SecondTex, vUv);
+
 }

package/src/shaders/gaussian_blur/gaussian_blur.frag

@@ -3,23 +3,42 @@ varying vec2 vUv;
 uniform sampler2D _MainTex;
 uniform vec2 texSize;
 uniform vec2 direction;
+uniform float radius;
 
 float gaussianPdf(in float x, in float sigma) {
 	return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
 }
+
+vec4 sampleTex(sampler2D tex, vec2 uv)
+{
+  vec4 col = texture2D( tex, uv);
+
+  #ifndef USE_LINEAR_COLOR_SPACE
+    col.rgb = pow(col.rgb, vec3(2.2));
+  #endif
+
+  return col;
+}
+
 void main() {
 	vec2 invSize = 1.0 / texSize;
 	float fSigma = float(SIGMA);
 	float weightSum = gaussianPdf(0.0, fSigma);
-	vec4 diffuseSum = texture2D( _MainTex, vUv) * weightSum;
+	vec4 diffuseSum = sampleTex( _MainTex, vUv) * weightSum;
 	for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
 		float x = float(i);
 		float w = gaussianPdf(x, fSigma);
-		vec2 uvOffset = direction * invSize * x;
-		vec4 sample1 = texture2D( _MainTex, vUv + uvOffset);
-		vec4 sample2 = texture2D( _MainTex, vUv - uvOffset);
+		vec2 uvOffset = direction * invSize * x * radius;
+		vec4 sample1 = sampleTex( _MainTex, vUv + uvOffset);
+		vec4 sample2 = sampleTex( _MainTex, vUv - uvOffset);
 		diffuseSum += (sample1 + sample2) * w;
 		weightSum += 2.0 * w;
 	}
 	gl_FragColor = vec4(diffuseSum/weightSum);
+
+  #ifndef USE_LINEAR_COLOR_SPACE
+    gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(0.4545));
+  #endif
+  // #include <colorspace_fragment>
+
 }

package/src/shaders/gaussian_blur/unreal_bloom_compose.frag

@@ -15,10 +15,22 @@ float lerpBloomFactor(const in float factor) {
 	return mix(factor, mirrorFactor, bloomRadius);
 }
 
+vec4 sampleTex(sampler2D tex, vec2 uv)
+{
+  vec4 col = texture2D( tex, uv);
+  #ifndef USE_LINEAR_COLOR_SPACE
+    col.rgb = pow(col.rgb, vec3(2.2));
+  #endif
+  return col;
+}
 void main() {
-	gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) + 
-										 							 lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) + 
-																	 lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) + 
-																	 lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) + 
-																	 lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );
+	gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * sampleTex(blurTexture1, vUv) + 
+										 							 lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * sampleTex(blurTexture2, vUv) + 
+																	 lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * sampleTex(blurTexture3, vUv) + 
+																	 lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * sampleTex(blurTexture4, vUv) + 
+																	 lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * sampleTex(blurTexture5, vUv) );
+
+  #ifndef USE_LINEAR_COLOR_SPACE
+    gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(0.4545));
+  #endif
 }

package/src/shaders/luminosity_high_pass/luminosity_high_pass.frag

@@ -6,9 +6,17 @@ uniform float smoothWidth;
 
 varying vec2 vUv;
 
+vec4 sampleTex(sampler2D tex, vec2 uv)
+{
+  vec4 col = texture2D( tex, uv);
+  #ifndef USE_LINEAR_COLOR_SPACE
+    col.rgb = pow(col.rgb, vec3(2.2));
+  #endif
+  return col;
+}
 void main() {
 
-	vec4 texel = texture2D( _MainTex, vUv );
+	vec4 texel = sampleTex( _MainTex, vUv );
 
 	vec3 luma = vec3( 0.299, 0.587, 0.114 );
 
@@ -19,5 +27,12 @@ void main() {
 	float alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );
 
 	gl_FragColor = mix( outputColor, texel, alpha );
+  
+  // #include <colorspace_fragment>
+
+  #ifndef USE_LINEAR_COLOR_SPACE
+    gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(0.4545));
+  #endif
+
 
 }