RGBA16F + tonemapping

core/world/data/map.json

@@ -101,7 +101,7 @@
           "scale": 1594937,
           "textureSet": "gaia",
           "name": "Gaia",
-          "atmosphere": [-2.01, -8.31]
+          "atmosphere": [-0.21, -0.48]
         }
       ]
     },
@@ -372,7 +372,7 @@
           "scale": 3116645.82,
           "textureSet": "ansura",
           "name": "Ansura",
-          "atmosphere": [-1.99, -8.28]
+          "atmosphere": [-0.3, -0.75]
         }
       ]
     },

ogl-engine/OglCanvas.tsx

@@ -1,69 +1,57 @@
 import React from "react";
 
-import styles from "./styles.scss";
-import { useFps } from "./useFps";
 import type { Engine } from "./engine/engine";
 
 export interface OglCanvasProps {
   engine: Engine;
-  fpsCounter?: boolean;
 }
 
-export const OglCanvas: React.FC<OglCanvasProps> = React.memo(
-  ({ engine, fpsCounter = true }) => {
-    const [canvas, setCanvas] = React.useState<HTMLCanvasElement | null>(null);
-    const resizeObserver = React.useRef<ResizeObserver>();
-    const frameIdRef = React.useRef(0);
-    const { fps, tick, enabled: fpsCounterEnabled } = useFps(fpsCounter);
-    const [errorCount, setErrorCount] = React.useState(0);
+export const OglCanvas: React.FC<OglCanvasProps> = React.memo(({ engine }) => {
+  const [canvas, setCanvas] = React.useState<HTMLCanvasElement | null>(null);
+  const resizeObserver = React.useRef<ResizeObserver>();
+  const frameIdRef = React.useRef(0);
+  const [errorCount, setErrorCount] = React.useState(0);
 
-    React.useEffect(() => {
-      const cleanup = () => {
-        resizeObserver.current?.disconnect();
-        cancelAnimationFrame(frameIdRef.current);
-      };
-      if (!canvas) return cleanup;
-
-      engine.hooks.onUpdate.subscribe("OglCanvas", () => {
-        tick();
-        frameIdRef.current = requestAnimationFrame(engine.update.bind(engine));
-      });
-      engine.hooks.onError.subscribe("OglCanvas", () => {
-        setErrorCount((count) => count + 1);
-      });
-
-      engine.init(canvas);
-
-      resizeObserver.current = new ResizeObserver(engine.resize);
-      resizeObserver.current.observe(canvas!.parentElement!);
+  React.useEffect(() => {
+    const cleanup = () => {
+      resizeObserver.current?.disconnect();
+      cancelAnimationFrame(frameIdRef.current);
+    };
+    if (!canvas) return cleanup;
 
+    engine.hooks.onUpdate.subscribe("OglCanvas", () => {
       frameIdRef.current = requestAnimationFrame(engine.update.bind(engine));
-
-      setTimeout(engine.resize.bind(engine), 200);
-
-      return cleanup;
-    }, [canvas, engine]);
-
-    React.useEffect(() => {
-      if (errorCount > 10) {
-        console.error("Too many errors, stopping rendering");
-        cancelAnimationFrame(frameIdRef.current);
-      }
-    }, [errorCount]);
-
-    return (
-      <>
-        <canvas
-          ref={setCanvas}
-          onContextMenu={(event) => {
-            event.preventDefault();
-          }}
-          style={{ pointerEvents: "all" }}
-        />
-        {fpsCounterEnabled && fpsCounter && (
-          <div className={styles.fps}>{fps}</div>
-        )}
-      </>
-    );
-  }
-);
+    });
+    engine.hooks.onError.subscribe("OglCanvas", () => {
+      setErrorCount((count) => count + 1);
+    });
+
+    engine.init(canvas);
+
+    resizeObserver.current = new ResizeObserver(engine.resize);
+    resizeObserver.current.observe(canvas!.parentElement!);
+
+    frameIdRef.current = requestAnimationFrame(engine.update.bind(engine));
+
+    setTimeout(engine.resize.bind(engine), 200);
+
+    return cleanup;
+  }, [canvas, engine]);
+
+  React.useEffect(() => {
+    if (errorCount > 10) {
+      console.error("Too many errors, stopping rendering");
+      cancelAnimationFrame(frameIdRef.current);
+    }
+  }, [errorCount]);
+
+  return (
+    <canvas
+      ref={setCanvas}
+      onContextMenu={(event) => {
+        event.preventDefault();
+      }}
+      style={{ pointerEvents: "all" }}
+    />
+  );
+});

ogl-engine/builders/Planet.ts

@@ -40,7 +40,7 @@ export class Planet extends BackgroundProp {
       }),
       frustumCulled: false,
     });
-    this.atmosphere.scale.set(2.3);
+    this.atmosphere.scale.set(2.15);
     this.atmosphere.setParent(this);
 
     this.task = this.engine.addOnBeforeRenderTask(() => {

ogl-engine/engine/BaseMesh.ts

@@ -1,5 +1,5 @@
 import type { Material } from "@ogl-engine/materials/material";
-import type { AttributeData, Camera, Geometry, GLTF, MeshOptions } from "ogl";
+import type { AttributeData, Geometry, GLTF, MeshOptions } from "ogl";
 import { Mat4, Mesh, Vec3 } from "ogl";
 import { MissingMaterial } from "@ogl-engine/materials/missing/missing";
 import type { Destroyable } from "@ogl-engine/types";
@@ -173,21 +173,6 @@ export class BaseMesh<TMaterial extends Material = Material>
     }
   }
 
-  draw(options?: { camera?: Camera | undefined } | undefined): void {
-    const start = performance.now();
-    super.draw(options);
-    const end = performance.now();
-
-    if (this.engine.capturePerformance) {
-      this.engine.performanceReport.push({
-        id: this.id,
-        label: this.name,
-        time: end - start,
-        parent: (this.parent as any)?.id,
-      });
-    }
-  }
-
   addBoundingBox() {
     if (this.children.some((child) => child instanceof BoundingBox)) return;
 

ogl-engine/engine/Scene.ts

@@ -169,6 +169,24 @@ export class TacticalMapScene extends Scene {
         max: 2,
       }
     );
+    this.pane.addBinding(
+      this.engine.uniforms.env.postProcessing.tonemapping.uExposure,
+      "value",
+      {
+        label: "Exposure",
+        min: 0.5,
+        max: 2.5,
+      }
+    );
+    this.pane.addBinding(
+      this.engine.uniforms.env.postProcessing.tonemapping.uMap,
+      "value",
+      {
+        label: "Tonemapping Enabled",
+        min: 0,
+        max: 1,
+      }
+    );
   }
 
   destroy() {

ogl-engine/engine/engine3d.ts

@@ -4,6 +4,7 @@ import settings from "@core/settings";
 import { EntityMesh } from "@ui/components/TacticalMap/EntityMesh";
 import { gameStore } from "@ui/state/game";
 import { sortBy } from "@fxts/core";
+import { getPane } from "@ui/context/Pane";
 import brightPassFragment from "../post/brightPass.frag.glsl";
 import blurFragment from "../post/blur.frag.glsl";
 import fxaaFragment from "../post/fxaa.frag.glsl";
@@ -18,6 +19,7 @@ import { Camera } from "./Camera";
 import { Engine } from "./engine";
 import { TacticalMapScene, type Scene } from "./Scene";
 import { OnBeforeRenderTask } from "./task";
+import { RenderingPerformance } from "./performance";
 
 const bloomSize = 1.2;
 const lightsNum = 16;
@@ -32,17 +34,7 @@ export class Engine3D<TScene extends Scene = Scene> extends Engine<TScene> {
   fxaa = false;
   godrays = false;
   scene: TScene;
-  /**
-   * Capture performance metrics for the next frame
-   */
-  willCapturePerformance = false;
-  capturePerformance = false;
-  performanceReport: Array<{
-    id: number;
-    time: number;
-    label: string;
-    parent: number;
-  }> = [];
+  performance = new RenderingPerformance();
 
   fxOwners: Record<number, Transform[]> = {};
 
@@ -73,6 +65,8 @@ export class Engine3D<TScene extends Scene = Scene> extends Engine<TScene> {
           uGamma: { value: number };
           uSaturation: { value: number };
           uContrast: { value: number };
+          uExposure: { value: number };
+          uMap: { value: number };
         };
       };
     };
@@ -100,12 +94,42 @@ export class Engine3D<TScene extends Scene = Scene> extends Engine<TScene> {
 
   constructor() {
     super();
+
+    const folder = getPane().addOrReplaceFolder({
+      title: "Renderer",
+      expanded: true,
+    });
+    folder.addBinding(this.performance, "fps", {
+      readonly: true,
+      interval: 500,
+      label: "FPS",
+    });
+    folder.addBinding(this.performance, "fps", {
+      view: "graph",
+      label: "FPS Graph",
+      interval: 500,
+      readonly: true,
+    });
+    folder.addBinding(this.performance, "averageFrameTime", {
+      view: "graph",
+      label: "Avg Frame Time [ms]",
+      interval: 500,
+      readonly: true,
+      min: 0,
+      max: 4,
+    });
+
     this.initUniforms();
   }
 
   init = (canvas: HTMLCanvasElement) => {
     super.init(canvas);
 
+    this.gl.getExtension("EXT_color_buffer_float");
+    this.gl.getExtension("WEBGL_color_buffer_float");
+    this.gl.getExtension("OES_texture_half_float");
+    this.gl.getExtension("OES_texture_half_float_linear");
+
     const gl = this.renderer.gl;
     this.camera = new Camera(this);
     this.camera.position.set(50, 50, 50);
@@ -116,6 +140,11 @@ export class Engine3D<TScene extends Scene = Scene> extends Engine<TScene> {
     this.renderTarget = new RenderTarget(gl, {
       // Color, bloom and UI
       color: 3,
+      // @ts-expect-error type resolution fails for some reason
+      type: gl.HALF_FLOAT,
+      format: gl.RGBA,
+      // @ts-expect-error type resolution fails for some reason
+      internalFormat: gl.RGBA16F,
     });
 
     this.uniforms.env.tEnvMap.value = new Texture(this.renderer.gl);
@@ -154,6 +183,8 @@ export class Engine3D<TScene extends Scene = Scene> extends Engine<TScene> {
             uGamma: { value: 1.08 },
             uContrast: { value: 1 },
             uSaturation: { value: 1 },
+            uExposure: { value: 1.03 },
+            uMap: { value: 1 },
           },
         },
       },
@@ -316,20 +347,17 @@ export class Engine3D<TScene extends Scene = Scene> extends Engine<TScene> {
   }
 
   render() {
-    if (this.willCapturePerformance) {
-      this.capturePerformance = true;
-      this.willCapturePerformance = false;
-    }
-
+    this.performance.updateTimeToNextFrame();
+    const startTime = performance.now();
     this.prepareLighting();
 
     if (this.postProcessing) {
       this.renderComposite();
     } else {
       this.renderSimple();
     }
+    this.performance.updateFrameTime(performance.now() - startTime);
 
-    this.capturePerformance = false;
     this.executeOnBeforeRenderTasks();
   }
 
@@ -482,11 +510,6 @@ export class Engine3D<TScene extends Scene = Scene> extends Engine<TScene> {
     super.setScene(scene);
   }
 
-  capture() {
-    this.willCapturePerformance = true;
-    this.capturePerformance = false;
-  }
-
   addOnBeforeRenderTask(task: () => void, priority?: number) {
     const t = new OnBeforeRenderTask(task, priority);
     this.onBeforeRenderTasks.push(t);