Add some more WebGl

frontend/src/scripts/drawing/drawer.ts

@@ -1,9 +1,12 @@
 import { Vec2 } from '../math/vec2';
+import { Rectangle } from '../math/rectangle';
 
 export interface Drawer {
-  startFrame();
-  finishFrame();
-  setCameraPosition(position: Vec2);
+  startFrame(): void;
+  finishFrame(): void;
+  giveUniforms(uniforms: any): void;
+  setCameraPosition(position: Vec2): void;
   setInViewArea(size: number): Vec2;
-  drawInfoText(text: string);
+  drawInfoText(text: string): void;
+  isOnScreen(position: Vec2): boolean;
 }

frontend/src/scripts/drawing/graphics-library/create-program.ts

@@ -1,24 +0,0 @@
-import { createShader } from './create-shader';
-
-export const createProgram = (
-  gl: WebGL2RenderingContext,
-  vertexShader: string,
-  fragmentShader: string
-): WebGLProgram => {
-  const program = gl.createProgram();
-
-  gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, vertexShader));
-  gl.attachShader(
-    program,
-    createShader(gl, gl.FRAGMENT_SHADER, fragmentShader)
-  );
-  gl.linkProgram(program);
-
-  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
-  if (success) {
-    return program;
-  }
-
-  console.log(gl.getProgramInfoLog(program));
-  gl.deleteProgram(program);
-};

frontend/src/scripts/drawing/graphics-library/create-shader.ts

@@ -7,10 +7,10 @@ export const createShader = (
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
   const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
-  if (success) {
-    return shader;
+
+  if (!success) {
+    throw new Error(gl.getShaderInfoLog(shader));
   }
 
-  console.log(gl.getShaderInfoLog(shader));
-  gl.deleteShader(shader);
+  return shader;
 };

frontend/src/scripts/drawing/graphics-library/fragment-shader-only-program.ts

@@ -0,0 +1,121 @@
+import passthroughVertexShader from '../../../shaders/passthrough-vs.glsl';
+import { createShader } from './create-shader';
+import { loadUniform } from './load-uniform';
+
+export class FragmentShaderOnlyProgram {
+  program: WebGLProgram;
+  shaders: Array<WebGLShader> = [];
+
+  private vao: WebGLVertexArrayObject;
+  private uniforms: Array<{
+    name: Array<string>;
+    location: WebGLUniformLocation;
+    type: GLenum;
+  }> = [];
+
+  constructor(
+    private gl: WebGL2RenderingContext,
+    fragmentShaderSource: string
+  ) {
+    this.createProgram(fragmentShaderSource);
+    this.prepareScreenQuad('a_position');
+    this.queryUniforms();
+  }
+
+  public bind() {
+    this.gl.useProgram(this.program);
+    this.gl.bindVertexArray(this.vao);
+  }
+
+  public draw() {
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  }
+
+  public setUniforms(values: any) {
+    this.uniforms.forEach(({ name, location, type }) => {
+      const value = name.reduce(
+        (prev, prop) => (prev !== null && prop in prev ? prev[prop] : null),
+        values
+      );
+
+      if (value !== null) {
+        loadUniform(this.gl, value, type, location);
+      }
+    });
+  }
+
+  private queryUniforms() {
+    const uniformCount = this.gl.getProgramParameter(
+      this.program,
+      WebGL2RenderingContext.ACTIVE_UNIFORMS
+    );
+
+    for (let i = 0; i < uniformCount; i++) {
+      const glUniform = this.gl.getActiveUniform(this.program, i);
+
+      this.uniforms.push({
+        name: glUniform.name.split(/\[|\]\.|\]|\./).filter((p) => p !== ''),
+        location: this.gl.getUniformLocation(this.program, glUniform.name),
+        type: glUniform.type,
+      });
+    }
+  }
+
+  private createProgram(fragmentShaderSource: string) {
+    this.program = this.gl.createProgram();
+
+    const vertexShader = createShader(
+      this.gl,
+      this.gl.VERTEX_SHADER,
+      passthroughVertexShader
+    );
+    this.gl.attachShader(this.program, vertexShader);
+    this.shaders.push(vertexShader);
+
+    const fragmentShader = createShader(
+      this.gl,
+      this.gl.FRAGMENT_SHADER,
+      fragmentShaderSource
+    );
+    this.gl.attachShader(this.program, fragmentShader);
+    this.shaders.push(fragmentShader);
+
+    this.gl.linkProgram(this.program);
+
+    const success = this.gl.getProgramParameter(
+      this.program,
+      this.gl.LINK_STATUS
+    );
+    if (!success) {
+      throw new Error(this.gl.getProgramInfoLog(this.program));
+    }
+  }
+
+  private prepareScreenQuad(attributeName: string) {
+    const positionAttributeLocation = this.gl.getAttribLocation(
+      this.program,
+      attributeName
+    );
+
+    const positionBuffer = this.gl.createBuffer();
+
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
+    this.gl.bufferData(
+      this.gl.ARRAY_BUFFER,
+      new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]),
+      this.gl.STATIC_DRAW
+    );
+    this.vao = this.gl.createVertexArray();
+
+    this.gl.bindVertexArray(this.vao);
+    this.gl.enableVertexAttribArray(positionAttributeLocation);
+    this.gl.vertexAttribPointer(
+      positionAttributeLocation,
+      2,
+      this.gl.FLOAT,
+      false,
+      0,
+      0
+    );
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Vec2 } from '../../math/vec2';
+import { Mat3 } from '../../math/mat3';
+
+export const loadUniform = (
+  gl: WebGL2RenderingContext,
+  value: any,
+  type: GLenum,
+  location: WebGLUniformLocation
+): any => {
+  const converters: Map<
+    GLenum,
+    (
+      gl: WebGL2RenderingContext,
+      value: any,
+      location: WebGLUniformLocation
+    ) => void
+  > = new Map();
+  {
+    converters.set(WebGL2RenderingContext.FLOAT, (gl, v, l) =>
+      gl.uniform1f(l, v)
+    );
+
+    converters.set(WebGL2RenderingContext.FLOAT_VEC2, (gl, v: Vec2, l) =>
+      gl.uniform2fv(l, new Float32Array(v.list))
+    );
+
+    converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v: Mat3, l) =>
+      gl.uniformMatrix3fv(l, false, new Float32Array(v.transposedFlat))
+    );
+
+    converters.set(WebGL2RenderingContext.BOOL, (gl, v, l) =>
+      gl.uniform1i(l, v)
+    );
+
+    if (!converters.has(type)) {
+      throw new Error('Unimplemented webgl type');
+    }
+
+    converters.get(type)(gl, value, location);
+  }
+};

frontend/src/scripts/drawing/graphics-library/prepare-screen-quad.ts

@@ -1,26 +0,0 @@
-export const prepareScreenQuad = (
-  gl: WebGL2RenderingContext,
-  program: WebGLProgram,
-  attributeName: string
-): WebGLVertexArrayObject => {
-  const positionAttributeLocation = gl.getAttribLocation(
-    program,
-    attributeName
-  );
-
-  const positionBuffer = gl.createBuffer();
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]),
-    gl.STATIC_DRAW
-  );
-  const vao = gl.createVertexArray();
-
-  gl.bindVertexArray(vao);
-  gl.enableVertexAttribArray(positionAttributeLocation);
-  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
-
-  return vao;
-};

frontend/src/scripts/drawing/graphics-library/stopwatch.ts

@@ -0,0 +1,64 @@
+import { WebGl2Renderer } from '../webgl2-renderer';
+import { InfoText } from '../../objects/types/info-text';
+
+// https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/
+
+export class WebGlStopwatch {
+  private timerExtension: any;
+  private timerQuery: WebGLQuery;
+  private isReady = true;
+
+  private resultsInNanoSeconds: number;
+
+  constructor(private gl: WebGL2RenderingContext) {
+    if (
+      this.gl
+        .getSupportedExtensions()
+        .indexOf('EXT_disjoint_timer_query_webgl2') == -1
+    ) {
+      throw new Error('Unsupported extension');
+    }
+
+    this.timerExtension = this.gl.getExtension(
+      'EXT_disjoint_timer_query_webgl2'
+    );
+  }
+
+  public start() {
+    if (this.isReady) {
+      this.timerQuery = this.gl.createQuery();
+      this.gl.beginQuery(this.timerExtension.TIME_ELAPSED_EXT, this.timerQuery);
+    }
+  }
+
+  public stop() {
+    if (this.isReady) {
+      this.gl.endQuery(this.timerExtension.TIME_ELAPSED_EXT);
+      this.isReady = false;
+    }
+
+    const available = this.gl.getQueryParameter(
+      this.timerQuery,
+      this.gl.QUERY_RESULT_AVAILABLE
+    );
+    const disjoint = this.gl.getParameter(this.timerExtension.GPU_DISJOINT_EXT);
+
+    if (available && !disjoint) {
+      this.resultsInNanoSeconds = this.gl.getQueryParameter(
+        this.timerQuery,
+        this.gl.QUERY_RESULT
+      );
+
+      InfoText.modifyRecord(
+        'Draw time',
+        `${this.resultsInMilliSeconds.toFixed(2)} ms`
+      );
+
+      this.isReady = true;
+    }
+  }
+
+  public get resultsInMilliSeconds(): number {
+    return this.resultsInNanoSeconds / 1000 / 1000;
+  }
+}

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

@@ -1,32 +1,37 @@
 import { Drawer } from './drawer';
 import { Vec2 } from '../math/vec2';
-import { createProgram } from './graphics-library/create-program';
-import { prepareScreenQuad } from './graphics-library/prepare-screen-quad';
 import { Mat3 } from '../math/mat3';
+import { FragmentShaderOnlyProgram } from './graphics-library/fragment-shader-only-program';
+import { WebGlStopwatch } from './graphics-library/stopwatch';
+import { Rectangle } from '../math/rectangle';
 
 export class WebGl2Renderer implements Drawer {
   private gl: WebGL2RenderingContext;
-  private program: WebGLProgram;
-  private vao: WebGLVertexArrayObject;
+  private program: FragmentShaderOnlyProgram;
+  private stopwatch: WebGlStopwatch;
 
   public enableHighDpiRendering = false;
-  public renderScale = 0.33;
+  public renderScale = 0.5;
 
-  private cameraPosition: Vec2;
-  private viewBoxSize: Vec2;
+  private viewBox: Rectangle = new Rectangle();
+
+  private nextFrameUniforms: any;
 
   constructor(
     private canvas: HTMLCanvasElement,
     private overlay: HTMLElement,
-    shaderSources: [string, string]
+    shaderSources: Array<string>
   ) {
     this.gl = this.canvas.getContext('webgl2');
     if (!this.gl) {
       throw new Error('WebGl2 is not supported');
     }
 
-    this.program = createProgram(this.gl, ...shaderSources);
-    this.vao = prepareScreenQuad(this.gl, this.program, 'a_position');
+    this.program = new FragmentShaderOnlyProgram(this.gl, shaderSources[0]);
+
+    try {
+      this.stopwatch = new WebGlStopwatch(this.gl);
+    } catch {}
   }
 
   private handleResize() {
@@ -49,51 +54,56 @@ export class WebGl2Renderer implements Drawer {
   }
 
   public startFrame() {
+    this.stopwatch?.start();
+
     this.handleResize();
+
     this.gl.clearColor(0, 0, 0, 0);
     this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
-    this.gl.useProgram(this.program);
-    this.gl.bindVertexArray(this.vao);
+
+    this.program.bind();
+    this.nextFrameUniforms = {};
   }
 
-  finishFrame() {
+  public finishFrame() {
     const resolution = new Vec2(this.canvas.width, this.canvas.height);
 
-    const transform = Mat3.translateMatrix(new Vec2(0.5, 0.5))
-      .times(Mat3.scaleMatrix(this.viewBoxSize.divide(resolution)))
-      .times(Mat3.translateMatrix(this.cameraPosition));
+    this.nextFrameUniforms.transform = Mat3.translateMatrix(new Vec2(0.5, 0.5))
+      .times(Mat3.scaleMatrix(this.viewBox.size.divide(resolution)))
+      .times(Mat3.translateMatrix(this.viewBox.topLeft));
 
-    const viewBoxSizeUniformLocation = this.gl.getUniformLocation(
-      this.program,
-      'transform'
-    );
-    this.gl.uniformMatrix3fv(
-      viewBoxSizeUniformLocation,
-      false,
-      new Float32Array(transform.transposedFlat)
-    );
+    this.program.setUniforms(this.nextFrameUniforms);
+    this.program.draw();
 
-    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+    this.stopwatch?.stop();
   }
 
-  setCameraPosition(position: Vec2) {
-    this.cameraPosition = position;
+  public setCameraPosition(position: Vec2) {
+    this.viewBox.topLeft = position;
   }
 
-  setInViewArea(size: number): Vec2 {
+  public giveUniforms(uniforms: any): void {
+    this.nextFrameUniforms = { ...this.nextFrameUniforms, ...uniforms };
+  }
+
+  public setInViewArea(size: number): Vec2 {
     const canvasAspectRatio =
       this.canvas.clientWidth / this.canvas.clientHeight;
 
-    this.viewBoxSize = new Vec2(
+    this.viewBox.size = new Vec2(
       Math.sqrt(size * canvasAspectRatio),
       Math.sqrt(size / canvasAspectRatio)
     );
-    return this.viewBoxSize;
+    return this.viewBox.size;
   }
 
-  drawInfoText(text: string) {
+  public drawInfoText(text: string) {
     if (this.overlay.innerText != text) {
       this.overlay.innerText = text;
     }
   }
+
+  isOnScreen(position: Vec2): boolean {
+    return this.viewBox.isInside(position);
+  }
 }