sdf-2d/src/graphics/rendering/renderer/renderer-implementation.ts

import { vec2 } from 'gl-matrix';
import { Drawable } from '../../../drawables/drawable';
import { DrawableDescriptor } from '../../../drawables/drawable-descriptor';
import { LightDrawable } from '../../../drawables/lights/light-drawable';
import { msToString } from '../../../helper/ms-to-string';
import { DefaultFrameBuffer } from '../../graphics-library/frame-buffer/default-frame-buffer';
import { IntermediateFrameBuffer } from '../../graphics-library/frame-buffer/intermediate-frame-buffer';
import { WebGlStopwatch } from '../../graphics-library/helper/stopwatch';
import { ParallelCompiler } from '../../graphics-library/parallel-compiler';
import { PaletteTexture } from '../../graphics-library/texture/palette-texture';
import { Texture } from '../../graphics-library/texture/texture';
import { TextureWithOptions } from '../../graphics-library/texture/texture-options';
import {
  getUniversalRenderingContext,
  UniversalRenderingContext,
} from '../../graphics-library/universal-rendering-context';
import { FpsAutoscaler } from '../fps-autoscaler';
import { Insights } from '../insights';
import { DistanceRenderPass } from '../render-pass/distance-render-pass';
import { LightsRenderPass } from '../render-pass/lights-render-pass';
import { defaultRuntimeSettings } from '../settings/default-runtime-settings';
import { defaultStartupSettings } from '../settings/default-startup-settings';
import { RuntimeSettings } from '../settings/runtime-settings';
import { StartupSettings } from '../settings/startup-settings';
import distanceFragmentShader100 from '../shaders/distance-fs-100.glsl';
import distanceFragmentShader from '../shaders/distance-fs.glsl';
import distanceVertexShader100 from '../shaders/distance-vs-100.glsl';
import distanceVertexShader from '../shaders/distance-vs.glsl';
import lightsFragmentShader100 from '../shaders/shading-fs-100.glsl';
import lightsFragmentShader from '../shaders/shading-fs.glsl';
import lightsVertexShader100 from '../shaders/shading-vs-100.glsl';
import lightsVertexShader from '../shaders/shading-vs.glsl';
import { UniformsProvider } from '../uniforms-provider';
import { Renderer } from './renderer';

/** @internal */
export class RendererImplementation implements Renderer {
  private readonly gl: UniversalRenderingContext;
  private stopwatch?: WebGlStopwatch;
  private uniformsProvider: UniformsProvider;
  private distanceFieldFrameBuffer: IntermediateFrameBuffer;
  private distancePass: DistanceRenderPass;
  private lightingFrameBuffer: DefaultFrameBuffer;
  private lightsPass: LightsRenderPass;
  private palette!: PaletteTexture;
  private autoscaler: FpsAutoscaler;

  private textures: Array<Texture> = [];

  private applyRuntimeSettings: {
    [key in keyof RuntimeSettings]: (value: any) => void;
  } = {
    enableHighDpiRendering: (v) => {
      this.distanceFieldFrameBuffer.enableHighDpiRendering = v;
      this.lightingFrameBuffer.enableHighDpiRendering = v;
    },
    tileMultiplier: (v) => (this.distancePass.tileMultiplier = v),
    isWorldInverted: (v) => (this.distancePass.isWorldInverted = v),
    backgroundColor: (v) => (this.uniformsProvider.backgroundColor = v),
    textures: (v: { [textureName: string]: TexImageSource | TextureWithOptions }) => {
      this.textures.forEach((t) => t.destroy());
      this.textures = [];

      let id = 2;
      for (const key in v) {
        this.uniformsProvider.textures[key] = id;
        let texture: Texture;

        if (Object.prototype.hasOwnProperty.call(v[key], 'source')) {
          texture = new Texture(this.gl, id++, (v[key] as TextureWithOptions).overrides);
          texture.setImage((v[key] as TextureWithOptions).source);
        } else {
          texture = new Texture(this.gl, id++);
          texture.setImage(v[key] as TexImageSource);
        }

        this.textures.push(texture);
      }
    },
    ambientLight: (v) => (this.uniformsProvider.ambientLight = v),
    lightCutoffDistance: (v) => (this.lightsPass.lightCutoffDistance = v),
    colorPalette: (v) => this.palette.setPalette(v),
  };

  setRuntimeSettings(overrides: Partial<RuntimeSettings>): void {
    Object.entries(overrides).forEach(([k, v]) => {
      this.applyRuntimeSettings[k as keyof RuntimeSettings](v);
    });
  }

  constructor(
    private canvas: HTMLCanvasElement,
    private descriptors: Array<DrawableDescriptor>,
    ignoreWebGL2?: boolean
  ) {
    this.gl = getUniversalRenderingContext(
      canvas,
      ignoreWebGL2 !== undefined ? ignoreWebGL2 : defaultStartupSettings.ignoreWebGL2
    );

    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);

    this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl);
    this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl);

    this.distancePass = new DistanceRenderPass(this.gl, this.distanceFieldFrameBuffer);
    this.lightsPass = new LightsRenderPass(this.gl, this.lightingFrameBuffer);

    this.uniformsProvider = new UniformsProvider(this.gl);

    this.setViewArea(
      vec2.fromValues(0, canvas.clientHeight),
      vec2.fromValues(canvas.clientWidth, canvas.clientHeight)
    );

    this.queryPrecisions();

    this.autoscaler = new FpsAutoscaler({
      distanceRenderScale: (v) =>
        (this.distanceFieldFrameBuffer.renderScale = v as number),
      finalRenderScale: (v) => (this.lightingFrameBuffer.renderScale = v as number),
    });
  }

  public async initialize(settingsOverrides: Partial<StartupSettings>): Promise<void> {
    const settings = {
      ...defaultStartupSettings,
      ...settingsOverrides,
    };

    this.palette = new PaletteTexture(this.gl, settings.paletteSize);
    this.setRuntimeSettings(defaultRuntimeSettings);

    const promises: Array<Promise<void>> = [];
    const compiler = new ParallelCompiler(this.gl);

    promises.push(
      this.distancePass.initialize(
        this.gl.isWebGL2
          ? [distanceVertexShader, distanceFragmentShader]
          : [distanceVertexShader100, distanceFragmentShader100],
        this.descriptors.filter(RendererImplementation.hasSdf),
        compiler,
        {
          paletteSize: settings.paletteSize,
        }
      )
    );
    promises.push(
      this.lightsPass.initialize(
        this.gl.isWebGL2
          ? [lightsVertexShader, lightsFragmentShader]
          : [lightsVertexShader100, lightsFragmentShader100],
        this.descriptors.filter((d) => !RendererImplementation.hasSdf(d)),
        compiler,
        {
          shadowTraceCount: settings.shadowTraceCount.toString(),
        }
      )
    );

    await compiler.compilePrograms();
    await Promise.all(promises);

    if (settings.enableStopwatch) {
      try {
        this.stopwatch = new WebGlStopwatch(this.gl);
      } catch {
        // no problem
      }
    }
  }

  public get insights(): any {
    return Insights.values;
  }

  private static hasSdf(descriptor: DrawableDescriptor) {
    return Object.prototype.hasOwnProperty.call(descriptor, 'sdf');
  }

  private queryPrecisions() {
    const precisionToObject = (shader: GLenum, precision: GLenum) => {
      const toExponent = (v: number): string => `2^${v}`;
      const p = this.gl.getShaderPrecisionFormat(shader, precision)!;
      return {
        range: `[${toExponent(p.rangeMin)}, ${toExponent(p.rangeMax)}]`,
        precision: toExponent(p.precision),
      };
    };

    Insights.setValue('precisions', {
      'vertex shader': {
        'low float': precisionToObject(this.gl.VERTEX_SHADER, this.gl.LOW_FLOAT),
        'medium float': precisionToObject(this.gl.VERTEX_SHADER, this.gl.MEDIUM_FLOAT),
        'high float': precisionToObject(this.gl.VERTEX_SHADER, this.gl.HIGH_FLOAT),
      },
      'fragment shader': {
        'low float': precisionToObject(this.gl.FRAGMENT_SHADER, this.gl.LOW_FLOAT),
        'medium float': precisionToObject(this.gl.FRAGMENT_SHADER, this.gl.MEDIUM_FLOAT),
        'high float': precisionToObject(this.gl.FRAGMENT_SHADER, this.gl.HIGH_FLOAT),
      },
    });
  }

  public addDrawable(drawable: Drawable): void {
    if (
      RendererImplementation.hasSdf((drawable.constructor as typeof Drawable).descriptor)
    ) {
      this.distancePass.addDrawable(drawable);
    } else {
      this.lightsPass.addDrawable(drawable as LightDrawable);
    }
  }

  public autoscaleQuality(deltaTime: DOMHighResTimeStamp) {
    this.autoscaler.autoscale(deltaTime);
  }

  public renderDrawables() {
    if (this.stopwatch) {
      if (this.stopwatch.isReady) {
        this.stopwatch.start();
      } else {
        this.stopwatch.tryGetResults();
        Insights.setValue(
          'GPU render time',
          msToString(this.stopwatch.resultsInMilliSeconds)
        );
      }
    }

    this.distanceFieldFrameBuffer.setSize();
    this.lightingFrameBuffer.setSize();

    const common = {
      // texture units
      distanceTexture: 0,
      palette: 1,

      distanceNdcPixelSize: 2 / Math.max(...this.distanceFieldFrameBuffer.getSize()),
      shadingNdcPixelSize: 2 / Math.max(...this.lightingFrameBuffer.getSize()),
    };

    this.distancePass.render(this.uniformsProvider.getUniforms(common), ...this.textures);

    this.gl.enable(this.gl.BLEND);
    this.lightsPass.render(
      this.uniformsProvider.getUniforms(common),
      this.distanceFieldFrameBuffer.colorTexture,
      [this.palette]
    );
    this.gl.disable(this.gl.BLEND);

    if (this.stopwatch?.isRunning) {
      this.stopwatch?.stop();
    }
  }

  public displayToWorldCoordinates(displayCoordinates: vec2): vec2 {
    return this.uniformsProvider.screenToWorldPosition(displayCoordinates);
  }

  public setViewArea(topLeft: vec2, size: vec2) {
    this.uniformsProvider.setViewArea(topLeft, size);
  }

  public get viewAreaSize(): vec2 {
    return this.uniformsProvider.getViewArea();
  }

  public get canvasSize(): vec2 {
    return vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);
  }

  public destroy(): void {
    this.distancePass.destroy();
    this.lightsPass.destroy();
    this.palette.destroy();
  }
}