Uniform interface

ogl-engine/engine/Camera.ts

@@ -1,5 +1,5 @@
 import type { FolderApi } from "tweakpane";
-import { Camera as BaseCamera, Vec3 } from "ogl";
+import { Camera as BaseCamera, Mat4, Vec3 } from "ogl";
 import { getPane } from "@ui/context/Pane";
 import type { Engine } from "./engine";
 
@@ -9,6 +9,10 @@ export class Camera extends BaseCamera {
   name = "Camera";
   engine: Engine;
 
+  invProjectionMatrix = new Mat4();
+  invViewMatrix = new Mat4();
+  invViewProjectionMatrix = new Mat4();
+
   private paneFolder: FolderApi;
 
   constructor(engine: Engine, initPane = true) {
@@ -56,4 +60,16 @@ export class Camera extends BaseCamera {
       cameraPos.z + t * cameraDir.z
     );
   }
+
+  updateMatrixWorld() {
+    super.updateMatrixWorld();
+
+    this.invProjectionMatrix.inverse(this.projectionMatrix);
+    this.invViewMatrix.inverse(this.viewMatrix);
+    this.invViewProjectionMatrix
+      .copy(this.invProjectionMatrix)
+      .multiply(this.invViewMatrix);
+
+    return this;
+  }
 }

ogl-engine/materials/AsteroidNew/AsteroidNew.ts

@@ -3,6 +3,7 @@ import { Vec3, type Texture } from "ogl";
 import { assetLoader } from "@ogl-engine/AssetLoader";
 import fragment from "./shader.frag.glsl";
 import vertex from "../pbr/shader.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 interface AsteroidNewMaterialArgs {
@@ -11,13 +12,14 @@ interface AsteroidNewMaterialArgs {
 }
 
 export class AsteroidNewMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    tGrunge: { value: Texture };
-    tNormal: { value: Texture };
-    uMask: { value: number };
-    uColor: { value: Vec3 };
-    uEmissive: { value: number };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      tGrunge: Texture;
+      tNormal: Texture;
+      uMask: number;
+      uColor: Vec3;
+      uEmissive: number;
+    }>;
 
   constructor(engine: Engine3D, args: AsteroidNewMaterialArgs = {}) {
     super(engine);

ogl-engine/materials/AsteroidRock/AsteroidRock.ts

@@ -3,17 +3,19 @@ import { type Texture } from "ogl";
 import { assetLoader } from "@ogl-engine/AssetLoader";
 import fragment from "./shader.frag.glsl";
 import vertex from "../pbr/shader.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 interface AsteroidRockMaterialArgs {
   instanced?: boolean;
 }
 
 export class AsteroidRockMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    tGrunge: { value: Texture };
-    tNormal: { value: Texture };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      tGrunge: Texture;
+      tNormal: Texture;
+    }>;
 
   constructor(engine: Engine3D, args: AsteroidRockMaterialArgs = {}) {
     super(engine);

ogl-engine/materials/asteroidDust/asteroidDust.ts

@@ -5,15 +5,17 @@ import { assetLoader } from "@ogl-engine/AssetLoader";
 import { colorToVec3 } from "@core/utils/maps";
 import fragment from "./shader.frag.glsl";
 import vertex from "./shader.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 export class AsteroidDustMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    tMap: { value: Texture };
-    uColor: { value: Vec3 };
-    uEmissive: { value: number };
-    uAlpha: { value: number };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      tMap: Texture;
+      uColor: Vec3;
+      uEmissive: number;
+      uAlpha: number;
+    }>;
 
   constructor(
     engine: Engine3D,

ogl-engine/materials/atmosphere/atmosphere.ts

@@ -2,6 +2,7 @@ import type { Engine3D } from "@ogl-engine/engine/engine3d";
 import { Vec3 } from "ogl";
 import fragment from "./shader.frag.glsl";
 import vertex from "./shader.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 interface AtmosphereMaterialArgs {
@@ -11,11 +12,12 @@ interface AtmosphereMaterialArgs {
 }
 
 export class AtmosphereMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    uColor: { value: Vec3 };
-    uX: { value: number };
-    uY: { value: number };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      uColor: Vec3;
+      uX: number;
+      uY: number;
+    }>;
 
   constructor(engine: Engine3D, args: AtmosphereMaterialArgs) {
     super(engine);

ogl-engine/materials/color/color.ts

@@ -6,14 +6,16 @@ import fragment from "./shader.frag.glsl";
 import fragment2d from "./shader2d.frag.glsl";
 import vertex from "./shader.vert.glsl";
 import vertex2d from "./shader2d.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material, Material2D } from "../material";
 
 export class ColorMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    uColor: { value: Vec3 };
-    fEmissive: { value: number };
-    bShaded: { value: boolean };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      uColor: Vec3;
+      fEmissive: number;
+      bShaded: boolean;
+    }>;
 
   constructor(
     engine: Engine3D,
@@ -52,9 +54,10 @@ export class ColorMaterial extends Material {
 }
 
 export class ColorMaterial2D extends Material2D {
-  uniforms: Material["uniforms"] & {
-    uColor: { value: Vec3 };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      uColor: Vec3;
+    }>;
 
   constructor(engine: Engine2D, color: string) {
     super(engine);

ogl-engine/materials/engineTrail/engineTrail.ts

@@ -3,12 +3,14 @@ import type { Engine3D } from "@ogl-engine/engine/engine3d";
 import Color from "color";
 import fragment from "./shader.frag.glsl";
 import vertex from "./shader.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 export class EngineTrailMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    uColor: { value: Vec3 };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      uColor: Vec3;
+    }>;
 
   constructor(engine: Engine3D, color: string) {
     super(engine);

ogl-engine/materials/entityIndicator/entityIndicator.ts

@@ -4,17 +4,19 @@ import type { DockSize } from "@core/components/dockable";
 import type { Engine3D } from "@ogl-engine/engine/engine3d";
 import fragment from "./shader.frag.glsl";
 import vertex from "./shader.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 export class EntityIndicatorMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    uSize: { value: number };
-    uColor: { value: Vec4 };
-    uHp: { value: number };
-    uShield: { value: number };
-    uHovered: { value: number };
-    uSelected: { value: number };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      uSize: number;
+      uColor: Vec4;
+      uHp: number;
+      uShield: number;
+      uHovered: number;
+      uSelected: number;
+    }>;
 
   constructor(engine: Engine3D) {
     super(engine);

ogl-engine/materials/entityName/entityName.ts

@@ -5,14 +5,16 @@ import type { Engine3D } from "@ogl-engine/engine/engine3d";
 import type { DockSize } from "@core/components/dockable";
 import fragment from "./shader.frag.glsl";
 import vertex from "./shader.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 export class EntityNameMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    tMap: { value: Texture };
-    uOffset: { value: number };
-    uColor: { value: Vec3 };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      tMap: Texture;
+      uOffset: number;
+      uColor: Vec3;
+    }>;
 
   constructor(engine: Engine3D, texture: Texture) {
     super(engine);

ogl-engine/materials/kineticGun/kineticGun.ts

@@ -2,16 +2,18 @@ import type { Engine3D } from "@ogl-engine/engine/engine3d";
 import { Vec4 } from "ogl";
 import fragment from "./shader.frag.glsl";
 import vertex from "../orb/shader.vert.glsl";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 interface KineticGunMaterialArgs {
   color: string;
 }
 
 export class KineticGunMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    uColor: { value: Vec4 };
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      uColor: Vec4;
+    }>;
 
   constructor(engine: Engine3D, args: KineticGunMaterialArgs) {
     super(engine);

ogl-engine/materials/laser/laser.ts

@@ -2,19 +2,20 @@ import type { Engine3D } from "@ogl-engine/engine/engine3d";
 import { Vec3 } from "ogl";
 import fragment from "./shader.frag.glsl";
 import vertex from "../base.vert.glsl";
-import type { Uniform } from "../material";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 interface LaserMaterialArgs {
   color: string;
 }
 
 export class LaserMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    uColor: Uniform<Vec3>;
-    uIntensity: Uniform<number>;
-    uAspectRatio: Uniform<number>;
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      uColor: Vec3;
+      uIntensity: number;
+      uAspectRatio: number;
+    }>;
 
   constructor(engine: Engine3D, { color }: LaserMaterialArgs) {
     super(engine);

ogl-engine/materials/laserImpact/laserImpact.ts

@@ -2,18 +2,19 @@ import type { Engine3D } from "@ogl-engine/engine/engine3d";
 import { Vec3 } from "ogl";
 import fragment from "./shader.frag.glsl";
 import vertex from "../base.vert.glsl";
-import type { Uniform } from "../material";
+import type { Uniforms } from "../material";
 import { Material } from "../material";
 
 interface LaserImpactMaterialArgs {
   color: string;
 }
 
 export class LaserImpactMaterial extends Material {
-  uniforms: Material["uniforms"] & {
-    uColor: Uniform<Vec3>;
-    uIntensity: Uniform<number>;
-  };
+  uniforms: Material["uniforms"] &
+    Uniforms<{
+      uColor: Vec3;
+      uIntensity: number;
+    }>;
 
   constructor(engine: Engine3D, { color }: LaserImpactMaterialArgs) {
     super(engine);

ogl-engine/materials/material.ts

@@ -4,27 +4,35 @@ import { entries, join, map, pipe } from "@fxts/core";
 import type { Engine3D } from "@ogl-engine/engine/engine3d";
 import type { Light } from "@ogl-engine/engine/Light";
 import Color from "color";
-import type { ProgramOptions, Mesh, Vec3, Vec4, Vec2 } from "ogl";
+import type { ProgramOptions, Mesh, Vec3, Vec4, Mat4 } from "ogl";
 import { Texture, Program } from "ogl";
 import type { BindingParams, FolderApi } from "tweakpane";
 import { getPane } from "@ui/context/Pane";
 
-export interface Uniform<T extends Vec2 | Vec3 | Vec4 | Texture | number> {
+export interface Uniform<T> {
   value: T;
   meta?: {
     pane?: BindingParams;
   };
 }
 
+export type Uniforms<T extends Record<string, any>> = {
+  [K in keyof T]: Uniform<T[K]>;
+};
+
 export abstract class Material {
   engine: Engine3D;
   protected program: Program;
-  protected uniforms: {
-    ambient: { value: Vec3 };
+  protected uniforms: Uniforms<{
+    ambient: Vec3;
+    uTime: number;
+    tEnvMap: Texture;
+    uCameraScale: number;
+    invProjectionMatrix: Mat4;
+    invViewMatrix: Mat4;
+    invViewProjectionMatrix: Mat4;
+  }> & {
     lights: Light["uniforms"][];
-    uTime: { value: number };
-    tEnvMap: { value: Texture };
-    uCameraScale: { value: number };
   };
 
   constructor(engine: Engine3D) {
@@ -35,6 +43,9 @@ export abstract class Material {
       uTime: engine.uniforms.uTime,
       tEnvMap: engine.uniforms.env.tEnvMap,
       uCameraScale: { value: Math.log2(engine.camera.far) },
+      invProjectionMatrix: { value: engine.camera.invProjectionMatrix },
+      invViewMatrix: { value: engine.camera.invViewMatrix },
+      invViewProjectionMatrix: { value: engine.camera.invViewProjectionMatrix },
     };
   }
 
@@ -116,12 +127,12 @@ export abstract class Material {
     });
   }
 
-  static colorToVec3(color: string, uniform: { value: Vec3 }) {
+  static colorToVec3(color: string, uniform: Uniform<Vec3>) {
     const c = Color(color).rgb().array();
     uniform.value.set(c[0], c[1], c[2]).divide(255);
   }
 
-  static colorToVec4(color: string, uniform: { value: Vec4 }) {
+  static colorToVec4(color: string, uniform: Uniform<Vec4>) {
     const c = Color(color).rgb();
     uniform.value.set(
       c.red() / 255,