Add textures

src/graphics/rendering/renderer/context-aware-renderer.ts

@@ -136,6 +136,13 @@ export class ContextAwareRenderer implements Renderer {
     return this.handle(() => this.renderer.autoscaleQuality(deltaTime), undefined);
   }
 
+  public displayToWorldCoordinates(displayCoordinates: vec2): vec2 {
+    return this.handle(
+      () => this.renderer.displayToWorldCoordinates(displayCoordinates),
+      vec2.create()
+    );
+  }
+
   public renderDrawables(): void {
     return this.handle(() => this.renderer.renderDrawables(), undefined);
   }

src/graphics/rendering/renderer/noise-renderer.ts

@@ -0,0 +1,51 @@
+import { vec2 } from 'gl-matrix';
+import { ParallelCompiler } from '../../graphics-library/parallel-compiler';
+import { FragmentShaderOnlyProgram } from '../../graphics-library/program/fragment-shader-only-program';
+import { getUniversalRenderingContext } from '../../graphics-library/universal-rendering-context';
+import randomFragment100 from '../shaders/random-fs-100.glsl';
+import randomFragment from '../shaders/random-fs.glsl';
+import randomVertex100 from '../shaders/random-vs-100.glsl';
+import randomVertex from '../shaders/random-vs.glsl';
+
+/**
+ * Create a renderer, draw a (1D) noise texture with it,
+ * then destroy the used resources, while returning the generated texture
+ * in the form of a canvas.
+ *
+ * @param textureSize The resolution of the end result.
+ * @param scale A starting value can be 60
+ * @param amplitude A starting value can be 0.125
+ * @param ignoreWebGL2 Ignore WebGL2, even when its available.
+ */
+export const renderNoise = async (
+  textureSize: vec2,
+  scale: number,
+  amplitude: number,
+  ignoreWebGL2 = false
+): Promise<HTMLCanvasElement> => {
+  const canvas = document.createElement('canvas');
+  canvas.width = textureSize.x;
+  canvas.height = textureSize.y;
+
+  const gl = getUniversalRenderingContext(canvas, ignoreWebGL2);
+  const program = new FragmentShaderOnlyProgram(gl);
+  const compiler = new ParallelCompiler(gl);
+
+  const pogramPromise = program.initialize(
+    gl.isWebGL2 ? [randomVertex, randomFragment] : [randomVertex100, randomFragment100],
+    compiler
+  );
+
+  await compiler.compilePrograms();
+  await pogramPromise;
+
+  program.bind();
+  program.draw({
+    scale,
+    amplitude,
+  });
+
+  program.destroy();
+
+  return canvas;
+};

src/graphics/rendering/renderer/renderer-implementation.ts

@@ -6,8 +6,10 @@ 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 { PaletteTexture } from '../../graphics-library/palette-texture';
 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,
@@ -43,6 +45,8 @@ export class RendererImplementation implements Renderer {
   private palette!: PaletteTexture;
   private autoscaler: FpsAutoscaler;
 
+  private textures: Array<Texture> = [];
+
   private applyRuntimeSettings: {
     [key in keyof RuntimeSettings]: (value: any) => void;
   } = {
@@ -53,6 +57,26 @@ export class RendererImplementation implements Renderer {
     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),
@@ -108,7 +132,6 @@ export class RendererImplementation implements Renderer {
     this.setRuntimeSettings(defaultRuntimeSettings);
 
     const promises: Array<Promise<void>> = [];
-
     const compiler = new ParallelCompiler(this.gl);
 
     promises.push(
@@ -117,10 +140,10 @@ export class RendererImplementation implements Renderer {
           ? [distanceVertexShader, distanceFragmentShader]
           : [distanceVertexShader100, distanceFragmentShader100],
         this.descriptors.filter(RendererImplementation.hasSdf),
+        compiler,
         {
           paletteSize: settings.paletteSize,
-        },
-        compiler
+        }
       )
     );
     promises.push(
@@ -129,10 +152,10 @@ export class RendererImplementation implements Renderer {
           ? [lightsVertexShader, lightsFragmentShader]
           : [lightsVertexShader100, lightsFragmentShader100],
         this.descriptors.filter((d) => !RendererImplementation.hasSdf(d)),
+        compiler,
         {
           shadowTraceCount: settings.shadowTraceCount.toString(),
-        },
-        compiler
+        }
       )
     );
 
@@ -219,13 +242,13 @@ export class RendererImplementation implements Renderer {
       shadingNdcPixelSize: 2 / Math.max(...this.distanceFieldFrameBuffer.getSize()),
     };
 
-    this.distancePass.render(this.uniformsProvider.getUniforms(common));
+    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.colorTexture
+      [this.palette]
     );
     this.gl.disable(this.gl.BLEND);
 
@@ -234,6 +257,10 @@ export class RendererImplementation implements Renderer {
     }
   }
 
+  public displayToWorldCoordinates(displayCoordinates: vec2): vec2 {
+    return this.uniformsProvider.screenToWorldPosition(displayCoordinates);
+  }
+
   public setViewArea(topLeft: vec2, size: vec2) {
     this.uniformsProvider.setViewArea(topLeft, size);
   }

src/graphics/rendering/renderer/renderer.ts

@@ -29,6 +29,18 @@ export interface Renderer {
    */
   setViewArea(topLeft: vec2, size: vec2): void;
 
+  /**
+   * Return the world coordinates from a pixel's position.
+   *
+   * The view area coordinates are also given in world coordinates.
+   *
+   * Useful for picking.
+   *
+   * @param displayCoordinates The origin is in the display's top left corner.
+   * Just as in mouse events' clientX and clientY.
+   */
+  displayToWorldCoordinates(displayCoordinates: vec2): vec2;
+
   /**
    * Patch the current runtime settings with new values.
    * @param overrides