Add uniform for lights

frontend/src/scripts/drawing/drawer.ts

@@ -1,12 +1,14 @@
 import { vec2 } from 'gl-matrix';
 
 export interface Drawer {
-  startFrame(): void;
+  startFrame(deltaTime: DOMHighResTimeStamp): void;
   finishFrame(): void;
   giveUniforms(uniforms: any): void;
+  appendToUniformList(listName: string, ...values: Array<any>): void;
   setCameraPosition(position: vec2): void;
   setCursorPosition(position: vec2): void;
   setInViewArea(size: number): vec2;
+  screenUvToWorldCoordinate(mousePosition: vec2): vec2;
   drawInfoText(text: string): void;
   isOnScreen(position: vec2): boolean;
 }

frontend/src/scripts/drawing/graphics-library/load-uniform.ts

@@ -1,4 +1,4 @@
-import { mat3, vec2 } from 'gl-matrix';
+import { mat3, ReadonlyVec3, vec2, vec3 } from 'gl-matrix';
 
 const loaderMat3 = mat3.create();
 
@@ -18,10 +18,15 @@ export const loadUniform = (
   > = new Map();
   {
     converters.set(WebGL2RenderingContext.FLOAT, (gl, v, l) => {
-      if (v.length == 0) {
-        return;
+      if (v instanceof Array) {
+        if (v.length == 0) {
+          return;
+        }
+
+        gl.uniform1fv(l, new Float32Array(v));
+      } else {
+        gl.uniform1f(l, v);
       }
-      gl.uniform1fv(l, new Float32Array(v));
     });
 
     converters.set(
@@ -39,13 +44,36 @@ export const loadUniform = (
             result[2 * i + 1] = (v[i] as Array<number>).y;
           }
 
-          gl.uniform2fv(l, new Float32Array(result));
+          gl.uniform2fv(l, result);
         } else {
           gl.uniform2fv(l, v as vec2);
         }
       }
     );
 
+    converters.set(
+      WebGL2RenderingContext.FLOAT_VEC3,
+      (gl, v: ReadonlyVec3 | Array<vec3>, l) => {
+        if (v.length == 0) {
+          return;
+        }
+
+        if (v[0] instanceof Array) {
+          const result = new Float32Array(v.length * 3);
+
+          for (let i = 0; i < v.length; i++) {
+            result[3 * i] = (v[i] as Array<number>)[0];
+            result[3 * i + 1] = (v[i] as Array<number>)[1];
+            result[3 * i + 2] = (v[i] as Array<number>)[2];
+          }
+
+          gl.uniform3fv(l, result);
+        } else {
+          gl.uniform3fv(l, v as vec3);
+        }
+      }
+    );
+
     converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v, l) => {
       gl.uniformMatrix3fv(l, true, mat3.fromMat2d(loaderMat3, v));
     });
@@ -55,7 +83,7 @@ export const loadUniform = (
     );
 
     if (!converters.has(type)) {
-      throw new Error('Unimplemented webgl type');
+      throw new Error(`Unimplemented webgl type: ${type}`);
     }
 
     converters.get(type)(gl, value, location);

frontend/src/scripts/drawing/webgl2-renderer.ts

@@ -34,15 +34,15 @@ export class WebGl2Renderer implements Drawer {
       new FragmentShaderOnlyProgram(this.gl, ...shaderSources[1]),
     ]);
 
-    this.distanceFieldFrameBuffer.renderScale = 0.5;
-    this.lightingFrameBuffer.renderScale = 1;
+    this.distanceFieldFrameBuffer.renderScale = 0.1;
+    this.lightingFrameBuffer.renderScale = 0.2;
 
     try {
       this.stopwatch = new WebGlStopwatch(this.gl);
     } catch {}
   }
 
-  public startFrame(): void {
+  public startFrame(deltaTime: DOMHighResTimeStamp): void {
     this.stopwatch?.start();
     this.uniforms = {};
     this.distanceFieldFrameBuffer.setSize();
@@ -76,8 +76,6 @@ export class WebGl2Renderer implements Drawer {
     mat2d.scale(ndcToWorld, ndcToWorld, vec2.fromValues(0.5, 0.5));
     mat2d.translate(ndcToWorld, ndcToWorld, vec2.fromValues(1, 1));
 
-    const screenToWorld = this.getScreenToWorldTransform(resolution);
-
     const worldToDistanceUV = mat2d.scale(
       mat2d.create(),
       distanceScreenToWorld,
@@ -85,11 +83,7 @@ export class WebGl2Renderer implements Drawer {
     );
     mat2d.invert(worldToDistanceUV, worldToDistanceUV);
 
-    const cursorPosition = vec2.transformMat2d(
-      vec2.create(),
-      vec2.multiply(vec2.create(), this.cursorPosition, resolution),
-      screenToWorld
-    );
+    const cursorPosition = this.screenUvToWorldCoordinate(this.cursorPosition);
 
     this.giveUniforms({
       distanceScreenToWorld,
@@ -115,6 +109,16 @@ export class WebGl2Renderer implements Drawer {
     return transform;
   }
 
+  public screenUvToWorldCoordinate(screenUvPosition: vec2): vec2 {
+    const resolution = vec2.fromValues(this.canvas.width, this.canvas.height);
+
+    return vec2.transformMat2d(
+      vec2.create(),
+      vec2.multiply(vec2.create(), screenUvPosition, resolution),
+      this.getScreenToWorldTransform(resolution)
+    );
+  }
+
   public setCameraPosition(position: vec2) {
     this.viewBox.topLeft = position;
   }
@@ -123,6 +127,16 @@ export class WebGl2Renderer implements Drawer {
     this.cursorPosition = position;
   }
 
+  public appendToUniformList(listName: string, ...values: any[]): void {
+    if (!this.uniforms.hasOwnProperty(listName)) {
+      this.uniforms[listName] = [];
+    }
+
+    for (let value of values) {
+      this.uniforms[listName].push(value);
+    }
+  }
+
   public giveUniforms(uniforms: any): void {
     this.uniforms = { ...this.uniforms, ...uniforms };
   }
@@ -144,7 +158,7 @@ export class WebGl2Renderer implements Drawer {
     }
   }
 
-  isOnScreen(position: vec2): boolean {
+  public isOnScreen(position: vec2): boolean {
     return this.viewBox.isInside(position);
   }
 }