Merge branch 'main' into SpaceStationsV2

src/html/bodyEditor.html

@@ -46,14 +46,15 @@ <h1>General</h1>
         <div id="saturation">
             <p>Saturation : </p>
         </div>
-        <!--
         <div id="bloomThreshold">
             <p>Bloom Threshold : </p>
         </div>
         <div id="bloomWeight">
             <p>Bloom Weight : </p>
         </div>
-        -->
+        <div id="bloomKernel">
+            <p>Bloom Kernel : </p>
+        </div>
     </div>
 
     <div class="ui" id="starPhysicUI">

src/shaders/colorCorrection.glsl

@@ -27,17 +27,16 @@ uniform sampler2D textureSampler;
 
 varying vec2 vUV;
 
-#include "./utils/acesTonemap.glsl";
+#include "./utils/tonemapping/acesTonemap.glsl";
 
 void main() {
     vec3 color = texture2D(textureSampler, vUV).rgb;
 
     float alpha = texture2D(textureSampler, vUV).a;
 
-    color = acesTonemap(color);
-
     color *= exposure;
-    color = clamp(color, 0.0, 1.0);
+
+    color = acesTonemap(color);
 
     color = (color - 0.5) * contrast + 0.5 + brightness;
     color = clamp(color, 0.0, 1.0);

src/shaders/utils/tonemapping/reinhardTonemap.glsl

@@ -0,0 +1,3 @@
+vec3 reinhardTonemap(vec3 v) {
+    return v / (1.0f + v);
+}

src/ts/postProcesses/colorCorrection.ts

@@ -20,6 +20,7 @@ import colorCorrectionFragment from "../../shaders/colorCorrection.glsl";
 import { Effect } from "@babylonjs/core/Materials/effect";
 import { Texture } from "@babylonjs/core/Materials/Textures/texture";
 import { Scene } from "@babylonjs/core/scene";
+import { Constants } from "@babylonjs/core/Engines/constants";
 
 const shaderName = "colorCorrection";
 Effect.ShadersStore[`${shaderName}FragmentShader`] = colorCorrectionFragment;
@@ -32,7 +33,7 @@ export class ColorCorrection extends PostProcess {
     saturation = 1;
 
     constructor(name: string, scene: Scene) {
-        super(name, shaderName, ["brightness", "contrast", "exposure", "gamma", "saturation"], ["textureSampler"], 1, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine());
+        super(name, shaderName, ["brightness", "contrast", "exposure", "gamma", "saturation"], ["textureSampler"], 1, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, null, Constants.TEXTURETYPE_HALF_FLOAT);
 
         // This is necessary because BabylonJS post process sets the scene using the camera. However, I don't pass a camera to the constructor as I use a PostProcessRenderPipeline.
         this._scene = scene;

src/ts/postProcesses/postProcessManager.ts

@@ -36,7 +36,6 @@ import { PostProcessType } from "./postProcessTypes";
 import { MandelbulbPostProcess } from "../anomalies/mandelbulb/mandelbulbPostProcess";
 import { ShadowPostProcess } from "./shadowPostProcess";
 import { LensFlarePostProcess } from "./lensFlarePostProcess";
-import { Quaternion } from "@babylonjs/core/Maths/math";
 import { isOrbiting } from "../utils/nearestBody";
 import { UpdatablePostProcess } from "./objectPostProcess";
 import { MatterJetPostProcess } from "./matterJetPostProcess";
@@ -53,6 +52,9 @@ import { JuliaSet } from "../anomalies/julia/juliaSet";
 import { AbstractEngine } from "@babylonjs/core/Engines/abstractEngine";
 import { PostProcess } from "@babylonjs/core/PostProcesses/postProcess";
 import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
+import { BloomEffect } from "@babylonjs/core/PostProcesses/bloomEffect";
+import { Constants } from "@babylonjs/core/Engines/constants";
+
 
 /**
  * The order in which the post processes are rendered when away from a planet
@@ -176,7 +178,7 @@ export class PostProcessManager {
      */
     readonly fxaaRenderEffect: PostProcessRenderEffect;
 
-    //readonly bloomRenderEffect: BloomEffect;
+    readonly bloomRenderEffect: BloomEffect;
 
     constructor(scene: UberScene) {
         this.scene = scene;
@@ -185,11 +187,11 @@ export class PostProcessManager {
         this.renderingPipelineManager = scene.postProcessRenderPipelineManager;
 
         this.colorCorrection = new ColorCorrection("colorCorrection", scene);
-        this.colorCorrection.exposure = 1.5;
+        this.colorCorrection.exposure = 1.3;
         this.colorCorrection.gamma = 1.0;
-        this.colorCorrection.saturation = 1.2;
+        this.colorCorrection.saturation = 1.5;
 
-        this.fxaa = new FxaaPostProcess("fxaa", 1, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine());
+        this.fxaa = new FxaaPostProcess("fxaa", 1, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, Constants.TEXTURETYPE_HALF_FLOAT);
 
         this.colorCorrectionRenderEffect = new PostProcessRenderEffect(scene.getEngine(), "colorCorrectionRenderEffect", () => {
             return [this.colorCorrection];
@@ -201,8 +203,8 @@ export class PostProcessManager {
         this.renderingPipeline = new PostProcessRenderPipeline(scene.getEngine(), "renderingPipeline");
         this.renderingPipelineManager.addPipeline(this.renderingPipeline);
 
-        //this.bloomRenderEffect = new BloomEffect(scene, 1.0, 2.0, 32);
-        //this.bloomRenderEffect.threshold = 0.7;
+        this.bloomRenderEffect = new BloomEffect(scene, 1.0, 0.3, 32, Constants.TEXTURETYPE_HALF_FLOAT);
+        this.bloomRenderEffect.threshold = 0.0;
     }
 
     /**
@@ -521,6 +523,7 @@ export class PostProcessManager {
             }
         }
 
+        this.renderingPipeline.addEffect(this.bloomRenderEffect);
         this.renderingPipeline.addEffect(lensFlareRenderEffect);
         this.renderingPipeline.addEffect(this.fxaaRenderEffect);
         //this.renderingPipeline.addEffect(this.bloomRenderEffect);

src/ts/ui/bodyEditor/bodyEditor.ts

@@ -175,7 +175,7 @@ export class BodyEditor {
 
         this.generalPanel.enable();
         this.generalPanel.setVisibility(this.currentPanel === this.generalPanel);
-        this.generalPanel.init(body, postProcessManager.colorCorrection, scene);
+        this.generalPanel.init(body, postProcessManager.colorCorrection, postProcessManager.bloomRenderEffect, scene);
 
         const rings = postProcessManager.getRings(body);
         if (rings) {

src/ts/ui/bodyEditor/editorPanel.ts

@@ -31,8 +31,6 @@ export abstract class EditorPanel {
         this.panel = document.getElementById(id + "UI") as HTMLElement;
     }
 
-    abstract init(body: CelestialBody, postProcess: PostProcess, scene: Scene): void;
-
     updateAllSliders() {
         for (const slider of this.sliders) slider.update(false);
     }

src/ts/ui/bodyEditor/panels/generalPanel.ts

@@ -27,13 +27,14 @@ import { BoundingSphere } from "../../../architecture/boundingSphere";
 import { Transformable } from "../../../architecture/transformable";
 import { Scene } from "@babylonjs/core/scene";
 import { Tools } from "@babylonjs/core/Misc/tools";
+import { BloomEffect } from "@babylonjs/core/PostProcesses/bloomEffect";
 
 export class GeneralPanel extends EditorPanel {
     constructor() {
         super("general");
     }
 
-    init(body: Transformable & BoundingSphere, colorCorrection: ColorCorrection, scene: Scene) {
+    init(body: Transformable & BoundingSphere, colorCorrection: ColorCorrection, bloom: BloomEffect, scene: Scene) {
         this.enable();
 
         for (const slider of this.sliders) slider.remove();
@@ -76,13 +77,16 @@ export class GeneralPanel extends EditorPanel {
             }),
             new Slider("gamma", document.getElementById("gamma") as HTMLElement, 0, 300, colorCorrection.gamma * 100, (val: number) => {
                 colorCorrection.gamma = val / 100;
-            })
-            /*new Slider("bloomThreshold", document.getElementById("bloomThreshold") as HTMLElement, 0, 100, bloom.threshold * 100, (val: number) => {
+            }),
+            new Slider("bloomThreshold", document.getElementById("bloomThreshold") as HTMLElement, 0, 100, bloom.threshold * 100, (val: number) => {
                 bloom.threshold = val / 100;
             }),
             new Slider("bloomWeight", document.getElementById("bloomWeight") as HTMLElement, 0, 600, bloom.weight * 100, (val: number) => {
                 bloom.weight = val / 100;
-            })*/
+            }),
+            new Slider("bloomKernel", document.getElementById("bloomKernel") as HTMLElement, 0, 100, bloom.kernel, (val: number) => {
+                bloom.kernel = val;
+            })
         ];
     }
 }