Refactor rendering

README.md

@@ -13,11 +13,12 @@ A good-looking 2D adventure.
 
 ## Todo
 
-- host script
-  - https://github.com/ottomatica/slim
-  - rancher os
 - Frontend nginx disable logging
 - procedural piano
+- subtract cameraPosition
+- cross browser testing
+- nginx log monitor
+- pass befejezése
 - lightweight object storage
 - local dev env
 - CI pipeline:

frontend/src/scripts/commands/types/before-render.ts

@@ -1,5 +1,5 @@
 import { Command } from '../command';
-import { IRenderer } from '../../drawing/rendering/i-renderer';
+import { IRenderer } from '../../drawing/i-renderer';
 
 export class BeforeRenderCommand extends Command {
   public constructor(public readonly renderer?: IRenderer) {

frontend/src/scripts/commands/types/draw.ts

@@ -1,5 +1,5 @@
 import { Command } from '../command';
-import { IRenderer } from '../../drawing/rendering/i-renderer';
+import { IRenderer } from '../../drawing/i-renderer';
 
 export class RenderCommand extends Command {
   public constructor(public readonly renderer?: IRenderer) {

frontend/src/scripts/drawing/drawables/i-drawable-descriptor.ts

@@ -0,0 +1,5 @@
+export interface IDrawableDescriptor {
+  uniformName: string;
+  countMacroName: string;
+  shaderCombinationSteps: Array<number>;
+}

frontend/src/scripts/drawing/drawables/i-drawable.ts

@@ -0,0 +1,7 @@
+import { vec2 } from 'gl-matrix';
+
+export interface IDrawable {
+  serializeToUniforms(uniforms: any): void;
+  distance(target: vec2): number;
+  minimumDistance(target: vec2): number;
+}

frontend/src/scripts/drawing/drawables/lights/circle-light.ts

@@ -0,0 +1,49 @@
+import { ILight } from './i-light';
+import { vec2, vec3 } from 'gl-matrix';
+import { settings } from '../../settings';
+import { IDrawableDescriptor } from '../i-drawable-descriptor';
+
+export class CircleLight implements ILight {
+  public static descriptor: IDrawableDescriptor = {
+    uniformName: 'lights',
+    countMacroName: 'lightCount',
+    shaderCombinationSteps: settings.shaderCombinations.circleLightSteps,
+  };
+
+  constructor(
+    public center: vec2,
+    public radius: number,
+    public color: vec3,
+    public lightness: number
+  ) {}
+
+  distance(target: vec2): number {
+    return 0;
+  }
+
+  minimumDistance(target: vec2): number {
+    return 0;
+  }
+
+  serializeToUniforms(uniforms: any): void {
+    const listName = CircleLight.descriptor.uniformName;
+
+    if (!uniforms.hasOwnProperty(listName)) {
+      uniforms[listName] = [];
+    }
+
+    uniforms[listName].push({
+      center: this.center,
+      radius: this.radius,
+      value: this.value,
+    });
+  }
+
+  get value(): vec3 {
+    return vec3.scale(
+      vec3.create(),
+      vec3.normalize(this.color, this.color),
+      this.lightness
+    );
+  }
+}

frontend/src/scripts/drawing/drawables/lights/i-light.ts

@@ -0,0 +1,3 @@
+import { IDrawable } from '../i-drawable';
+
+export interface ILight extends IDrawable {}

frontend/src/scripts/drawing/drawables/lights/point-light.ts

@@ -0,0 +1,36 @@
+import { ILight } from './i-light';
+import { vec2, vec3 } from 'gl-matrix';
+
+export class PointLight implements ILight {
+  public static uniformName = 'lights';
+
+  constructor(
+    public center: vec2,
+    public color: vec3,
+    public lightness: number
+  ) {}
+  distance(target: vec2): number {
+    throw new Error('Method not implemented.');
+  }
+  minimumDistance(target: vec2): number {
+    throw new Error('Method not implemented.');
+  }
+
+  serializeToUniforms(uniforms: any): void {
+    const listName = PointLight.uniformName;
+
+    if (!uniforms.hasOwnProperty(listName)) {
+      uniforms[listName] = [];
+    }
+
+    uniforms[listName].push({
+      center: this.center,
+      radius: 0,
+      value: this.value,
+    });
+  }
+
+  get value(): vec3 {
+    return vec3.scale(vec3.create(), this.color, this.lightness);
+  }
+}

frontend/src/scripts/drawing/drawables/primitives/circle.ts

@@ -0,0 +1,27 @@
+import { vec2 } from 'gl-matrix';
+import { IPrimitive } from './i-primitive';
+
+export class Circle implements IPrimitive {
+  public constructor(public center = vec2.create(), public radius = 0) {}
+
+  public serializeToUniforms(uniforms: any): void {
+    throw new Error('Method not implemented.');
+  }
+
+  public distance(target: vec2): number {
+    return vec2.distance(this.center, target) - this.radius;
+  }
+
+  public minimumDistance(target: vec2): number {
+    return vec2.distance(this.center, target) - this.radius;
+  }
+
+  public isInside(target: vec2): boolean {
+    return this.distance(target) < 0;
+  }
+
+  public areIntersecting(other: Circle): boolean {
+    const distance = vec2.distance(this.center, other.center);
+    return distance < this.radius + other.radius;
+  }
+}

frontend/src/scripts/drawing/drawables/primitives/i-primitive.ts

@@ -0,0 +1,3 @@
+import { IDrawable } from '../i-drawable';
+
+export interface IPrimitive extends IDrawable {}

frontend/src/scripts/drawing/drawables/primitives/rectangle.ts

@@ -0,0 +1,18 @@
+import { vec2 } from 'gl-matrix';
+
+export class Rectangle {
+  public constructor(
+    public topLeft: vec2 = vec2.create(),
+    public size: vec2 = vec2.create()
+  ) {}
+
+  public isInside(position: vec2): boolean {
+    const translated = vec2.subtract(vec2.create(), position, this.topLeft);
+    return (
+      0 <= translated.x &&
+      translated.x < this.size.x &&
+      0 <= translated.y &&
+      translated.y < this.size.y
+    );
+  }
+}

frontend/src/scripts/drawing/drawables/primitives/tunnel-shape.ts

@@ -0,0 +1,67 @@
+import { vec2 } from 'gl-matrix';
+import { clamp01 } from '../../../helper/clamp';
+import { mix } from '../../../helper/mix';
+import { Circle } from './circle';
+import { IPrimitive } from './i-primitive';
+import { IDrawableDescriptor } from '../i-drawable-descriptor';
+import { settings } from '../../settings';
+
+export class TunnelShape implements IPrimitive {
+  public static descriptor: IDrawableDescriptor = {
+    uniformName: 'lines',
+    countMacroName: 'lineCount',
+    shaderCombinationSteps: settings.shaderCombinations.lineSteps,
+  };
+
+  public readonly toFromDelta: vec2;
+  private toFromDeltaLength: number;
+
+  private boundingCircle: Circle;
+
+  constructor(
+    public readonly from: vec2,
+    public readonly to: vec2,
+    public readonly fromRadius: number,
+    public readonly toRadius: number
+  ) {
+    this.toFromDelta = vec2.subtract(vec2.create(), to, from);
+    this.toFromDeltaLength = vec2.length(this.toFromDelta);
+
+    this.boundingCircle = new Circle(
+      vec2.fromValues(from.x / 2 + to.x / 2, from.y / 2 + to.y / 2),
+      Math.max(fromRadius, toRadius) + vec2.distance(from, to)
+    );
+  }
+
+  serializeToUniforms(uniforms: any): void {
+    if (!uniforms.hasOwnProperty(TunnelShape.descriptor.uniformName)) {
+      uniforms[TunnelShape.descriptor.uniformName] = [];
+    }
+
+    uniforms[TunnelShape.descriptor.uniformName].push({
+      from: this.from,
+      toFromDelta: this.toFromDelta,
+      fromRadius: this.fromRadius,
+      toRadius: this.toRadius,
+    });
+  }
+
+  public distance(target: vec2): number {
+    const targetFromDelta = vec2.subtract(vec2.create(), target, this.from);
+    const h = clamp01(
+      vec2.dot(targetFromDelta, this.toFromDelta) /
+        this.toFromDeltaLength /
+        this.toFromDeltaLength
+    );
+    return (
+      vec2.distance(
+        targetFromDelta,
+        vec2.scale(vec2.create(), this.toFromDelta, h)
+      ) - mix(this.fromRadius, this.toRadius, h)
+    );
+  }
+
+  public minimumDistance(target: vec2): number {
+    return this.boundingCircle.distance(target);
+  }
+}

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

@@ -1,15 +1,16 @@
+import { settings } from '../../settings';
+
 export const createShader = (
   gl: WebGL2RenderingContext,
   type: GLenum,
   source: string,
   substitutions: { [name: string]: string }
 ): WebGLShader => {
+  const allSubstitutions = { ...settings.shaderMacros, ...substitutions };
+
   source = source.replace(/{(.+)}/gm, (_, name: string): string => {
-    const value = substitutions[name];
+    const value = allSubstitutions[name];
-    if (Number.isInteger(value)) {
+    return Number.isInteger(value) ? `${value}.0` : value;
-      return `${value}.0`;
-    }
-    return value;
   });
 
   const shader = gl.createShader(type);

frontend/src/scripts/drawing/graphics-library/helper/get-webgl2-context.ts

@@ -0,0 +1,11 @@
+export const getWebGl2Context = (
+  canvas: HTMLCanvasElement
+): WebGL2RenderingContext => {
+  const gl = canvas.getContext('webgl2');
+
+  if (!gl) {
+    throw new Error('WebGl2 is not supported');
+  }
+
+  return gl;
+};

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

@@ -5,11 +5,10 @@ export class FragmentShaderOnlyProgram extends Program {
 
   constructor(
     gl: WebGL2RenderingContext,
-    vertexShaderSource: string,
+    shaderSources: [string, string],
-    fragmentShaderSource: string,
     substitutions: { [name: string]: string }
   ) {
-    super(gl, vertexShaderSource, fragmentShaderSource, substitutions);
+    super(gl, shaderSources, substitutions);
     this.prepareScreenQuad('vertexPosition');
   }
 

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

@@ -1,8 +1,8 @@
 import { vec2 } from 'gl-matrix';
 
 export interface IProgram {
-  bindAndSetUniforms(values: { [name: string]: any }): void;
   setDrawingRectangle(topLeft: vec2, size: vec2): void;
+  bindAndSetUniforms(values: { [name: string]: any }): void;
   draw(): void;
   delete(): void;
 }

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

@@ -17,8 +17,7 @@ export abstract class Program implements IProgram {
 
   constructor(
     protected gl: WebGL2RenderingContext,
-    vertexShaderSource: string,
+    [vertexShaderSource, fragmentShaderSource]: [string, string],
-    fragmentShaderSource: string,
     substitutions: { [name: string]: string }
   ) {
     this.createProgram(vertexShaderSource, fragmentShaderSource, substitutions);

frontend/src/scripts/drawing/graphics-library/program/uniform-array-autoscaling-program.ts

@@ -1,11 +1,14 @@
 import { vec2 } from 'gl-matrix';
 import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
 import { IProgram } from './i-program';
+import { last } from '../../../helper/last';
+import { getCombinations } from '../../../helper/get-combinations';
+import { IDrawableDescriptor } from '../../drawables/i-drawable-descriptor';
 
 export class UniformArrayAutoScalingProgram implements IProgram {
   private programs: Array<{
     program: FragmentShaderOnlyProgram;
-    value: number;
+    values: Array<number>;
   }> = [];
   private current: FragmentShaderOnlyProgram;
 
@@ -14,45 +17,33 @@ export class UniformArrayAutoScalingProgram implements IProgram {
 
   constructor(
     private gl: WebGL2RenderingContext,
-    private vertexShaderSource: string,
+    shaderSources: [string, string],
-    private fragmentShaderSource: string,
+    private options: Array<IDrawableDescriptor>
-    private substitutions: { [name: string]: any },
-    private options: {
-      getValueFromUniforms: (values: { [name: string]: any }) => number;
-      uniformArraySizeName: string;
-      enablingMacro: string;
-      startingValue: number;
-      steps: number;
-      maximumValue: number;
-    }
   ) {
-    for (
+    const names = options.map((o) => o.countMacroName);
-      let i = options.startingValue;
+    for (let combination of getCombinations(
-      i < options.maximumValue;
+      options.map((o) => o.shaderCombinationSteps)
-      i += options.steps
+    )) {
-    ) {
+      this.createProgram(names, combination, shaderSources);
-      this.createProgram(i);
     }
   }
 
-  public bindAndSetUniforms(values: { [name: string]: any }): void {
+  public bindAndSetUniforms(uniforms: { [name: string]: any }): void {
-    let value = this.options.getValueFromUniforms(values);
+    let values = this.options.map((o) =>
-    value = Math.min(this.options.maximumValue, value);
+      uniforms[o.uniformName] ? uniforms[o.uniformName].length : 0
-
-    const closest = this.programs.find(
-      (p) => value < p.value && value + this.options.steps >= p.value
     );
-    if (closest) {
+
-      this.current = closest.program;
+    const closest = this.programs.find((p) =>
-    } else {
+      p.values.every((v, i) => v > values[i])
-      this.current = this.createProgram(value + this.options.steps);
+    );
-    }
+
+    this.current = closest ? closest.program : last(this.programs).program;
 
     this.current.setDrawingRectangle(
       this.drawingRectangleTopLeft,
       this.drawingRectangleSize
     );
-    this.current.bindAndSetUniforms(values);
+    this.current.bindAndSetUniforms(uniforms);
   }
 
   public setDrawingRectangle(topLeft: vec2, size: vec2) {
@@ -68,21 +59,23 @@ export class UniformArrayAutoScalingProgram implements IProgram {
     this.programs.forEach((p) => p.program.delete());
   }
 
-  private createProgram(arraySize: number): FragmentShaderOnlyProgram {
+  private createProgram(
+    names: Array<string>,
+    combination: Array<number>,
+    shaderSources: [string, string]
+  ): FragmentShaderOnlyProgram {
+    const substitutions = {};
+    names.forEach((v, i) => (substitutions[v] = combination[i].toString()));
+
     const program = new FragmentShaderOnlyProgram(
       this.gl,
-      this.vertexShaderSource,
+      shaderSources,
-      this.fragmentShaderSource,
+      substitutions
-      {
-        [this.options.uniformArraySizeName]: Math.floor(arraySize).toString(),
-        [this.options.enablingMacro]: arraySize > 0 ? '1' : '0',
-        ...this.substitutions,
-      }
     );
 
     this.programs.push({
       program,
-      value: arraySize,
+      values: combination,
     });
 
     return program;

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

@@ -0,0 +1,16 @@
+import { vec2 } from 'gl-matrix';
+import { IPrimitive } from './drawables/primitives/i-primitive';
+import { ILight } from './drawables/lights/i-light';
+
+export interface IRenderer {
+  startFrame(deltaTime: DOMHighResTimeStamp): void;
+  finishFrame(): void;
+
+  drawPrimitive(primitive: IPrimitive): void;
+  drawLight(light: ILight): void;
+  drawInfoText(text: string): void;
+
+  setCameraPosition(position: vec2): void;
+  setCursorPosition(position: vec2): void;
+  setInViewArea(size: number): vec2;
+}

frontend/src/scripts/drawing/lights/i-light.ts

@@ -1,3 +0,0 @@
-export interface ILight {
-  serializeToUniforms(uniforms: any): void;
-}