Graphic improvements

_templates/material/new/shader.frag.ejs.t

@@ -7,7 +7,7 @@ precision highp float;
 
 in vec2 vUv;
 
-out vec4 fragData[3];
+out vec4 fragData[2];
 
 uniform sampler2D tMap;
 uniform vec3 uColor;

ogl-engine/OglCanvas.tsx

@@ -40,6 +40,7 @@ export const OglCanvas: React.FC<OglCanvasProps> = React.memo(({ engine }) => {
 
   React.useEffect(() => {
     if (errorCount > 10) {
+      // eslint-disable-next-line no-console
       console.error("Too many errors, stopping rendering");
       cancelAnimationFrame(frameIdRef.current);
     }

ogl-engine/builders/Asteroids.ts

@@ -122,7 +122,7 @@ export class Asteroids extends Transform {
     );
 
     const material = new AsteroidDustMaterial(this.engine, "prop/smoke", {
-      alpha: 0.25,
+      alpha: 0.14,
       color: "#ffffff",
       emissive: 0.0,
     });

ogl-engine/engine/BaseMesh.ts

@@ -6,6 +6,7 @@ import type { Destroyable } from "@ogl-engine/types";
 import type { Engine3D } from "./engine3d";
 import { Light } from "./Light";
 import { BoundingBox } from "./BoundingBox";
+import { RenderLayer } from "./Renderer";
 
 const tempMat4 = new Mat4();
 const tempWorldMatrix = new Mat4();
@@ -19,6 +20,7 @@ export class BaseMesh<TMaterial extends Material = Material>
   material: TMaterial;
   tangents = true;
   onDestroyCallbacks: (() => void)[] = [];
+  layer: RenderLayer = RenderLayer.default;
 
   constructor(
     engine: Engine3D,

ogl-engine/engine/Renderer.ts

@@ -0,0 +1,90 @@
+import type { Mesh, Transform } from "ogl";
+import { Renderer as BaseRenderer, Vec3 } from "ogl";
+
+const tempVec3 = new Vec3();
+
+export const RenderLayer = {
+  default: 0,
+  ui: 1,
+} as const;
+// eslint-disable-next-line no-redeclare
+export type RenderLayer = (typeof RenderLayer)[keyof typeof RenderLayer];
+
+function isDrawableMesh(obj: Transform): obj is Mesh {
+  return (obj as Mesh).draw !== undefined;
+}
+
+export class Renderer extends BaseRenderer {
+  private currentLayer: RenderLayer = RenderLayer.default;
+
+  setRenderLayer(layer: RenderLayer) {
+    this.currentLayer = layer;
+  }
+
+  getRenderList({
+    scene,
+    camera,
+    frustumCull,
+    sort,
+  }: Parameters<BaseRenderer["getRenderList"]>[0]) {
+    let renderList: Mesh[] = [];
+
+    if (camera && frustumCull) camera.updateFrustum();
+
+    // Get visible
+    scene.traverse((node) => {
+      if (!node.visible) return true;
+      if (!isDrawableMesh(node)) return undefined;
+
+      if (frustumCull && node.frustumCulled && camera) {
+        if (!camera.frustumIntersectsMesh(node)) return undefined;
+      }
+
+      if (
+        (node as any).layer === this.currentLayer ||
+        (this.currentLayer === RenderLayer.default &&
+          (node as any).layer === undefined)
+      ) {
+        renderList.push(node);
+      }
+
+      return undefined;
+    });
+
+    if (sort) {
+      const opaque: Mesh[] = [];
+      const transparent: Mesh[] = []; // depthTest true
+      const ui: Mesh[] = []; // depthTest false
+
+      renderList.forEach((node) => {
+        // Split into the 3 render groups
+        if (!node.program.transparent) {
+          opaque.push(node);
+        } else if (node.program.depthTest) {
+          transparent.push(node);
+        } else {
+          ui.push(node);
+        }
+
+        (node as any).zDepth = 0;
+
+        // Only calculate z-depth if renderOrder unset and depthTest is true
+        if (node.renderOrder !== 0 || !node.program.depthTest || !camera)
+          return;
+
+        // update z-depth
+        node.worldMatrix.getTranslation(tempVec3);
+        tempVec3.applyMatrix4(camera.projectionViewMatrix);
+        (node as any).zDepth = tempVec3.z;
+      });
+
+      opaque.sort(this.sortOpaque);
+      transparent.sort(this.sortTransparent);
+      ui.sort(this.sortUI);
+
+      renderList = opaque.concat(transparent, ui);
+    }
+
+    return renderList;
+  }
+}

ogl-engine/engine/Scene.ts

@@ -114,8 +114,19 @@ export class TacticalMapScene extends Scene {
         label: "God Rays Exposure",
       }
     );
+    this.pane.addBinding(this.engine.kawase, "iterations", {
+      label: "Bloom Iterations",
+      min: 2,
+      max: 5,
+      step: 1,
+    });
+    this.pane.addBinding(this.engine.kawase, "samplePosMult", {
+      label: "Bloom Spread",
+      min: 0,
+      max: 5,
+    });
     this.pane.addBinding(
-      this.engine.uniforms.env.postProcessing.bloom.uBloomStrength,
+      this.engine.uniforms.env.postProcessing.bloom.uGain,
       "value",
       {
         label: "Bloom Strength",
@@ -187,13 +198,6 @@ export class TacticalMapScene extends Scene {
         max: 1,
       }
     );
-    this.pane
-      .addButton({
-        title: "Toggle UI",
-      })
-      .on("click", () =>
-        this.engine.togglePostProcessingPass("composite", "ui")
-      );
   }
 
   destroy() {

ogl-engine/engine/engine.ts

@@ -1,13 +1,18 @@
-import { Renderer } from "ogl";
 import { PubSub } from "@core/utils/pubsub";
 import type { Scene } from "./Scene";
 import type { Camera } from "./Camera";
+import { Renderer } from "./Renderer";
 
 type InitEvent = { type: "init" };
 type UpdateEvent = { type: "update"; delta: number };
 type ErrorEvent = { type: "error"; error: Error };
 type EngineEvent = InitEvent | UpdateEvent | ErrorEvent;
 
+export type RenderingContext = WebGL2RenderingContext & {
+  renderer: Renderer;
+  canvas: HTMLCanvasElement;
+};
+
 export abstract class Engine<TScene extends Scene = Scene> {
   public hooks: PubSub<EngineEvent>;
 
@@ -40,6 +45,7 @@ export abstract class Engine<TScene extends Scene = Scene> {
       canvas: canvas as any, // Works for both HTMLCanvasElement and OffscreenCanvas
       dpr: this.dpr,
       antialias: true,
+      webgl: 2,
     });
   }
 
@@ -86,7 +92,7 @@ export abstract class Engine<TScene extends Scene = Scene> {
   }
 
   get gl() {
-    return this.renderer.gl;
+    return this.renderer.gl as RenderingContext;
   }
 
   get delta() {

ogl-engine/engine/engine2d.ts

@@ -1,9 +1,10 @@
-import { Mesh, Plane, Program, Renderer } from "ogl";
+import { Mesh, Plane, Program } from "ogl";
 import settings from "@core/settings";
 import { gameStore } from "@ui/state/game";
 import { Scene, StrategicMapScene } from "./Scene";
 import { Camera } from "./Camera";
 import { Engine } from "./engine";
+import { Renderer } from "./Renderer";
 
 // It's not really 2D, but it's going to be used as 2D
 export class Engine2D extends Engine {