Add textures

src/graphics/rendering/render-pass/distance-render-pass.ts

@@ -1,5 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import { Drawable } from '../../../drawables/drawable';
+import { Texture } from '../../graphics-library/texture/texture';
 import { Insights } from '../insights';
 import { RenderPass } from './render-pass';
 
@@ -14,7 +15,7 @@ export class DistanceRenderPass extends RenderPass {
     this.drawables.push(drawable);
   }
 
-  public render(commonUniforms: any, ...inputTextures: Array<WebGLTexture>) {
+  public render(commonUniforms: any, ...inputTextures: Array<Texture>) {
     this.frame.bindAndClear(inputTextures);
 
     const stepsInUV = 1 / this.tileMultiplier;

src/graphics/rendering/render-pass/lights-render-pass.ts

@@ -1,6 +1,7 @@
 import { vec2 } from 'gl-matrix';
 import { LightDrawable } from '../../../drawables/lights/light-drawable';
 import { clamp01 } from '../../../helper/clamp';
+import { Texture } from '../../graphics-library/texture/texture';
 import { Insights } from '../insights';
 import { RenderPass } from './render-pass';
 
@@ -13,7 +14,14 @@ export class LightsRenderPass extends RenderPass {
     this.drawables.push(drawable);
   }
 
-  public render(commonUniforms: any, ...inputTextures: Array<WebGLTexture>) {
+  public render(
+    commonUniforms: any,
+    distanceTexture: WebGLTexture,
+    inputTextures: Array<Texture>
+  ) {
+    this.gl.activeTexture(this.gl.TEXTURE0);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, distanceTexture);
+
     this.frame.bindAndClear(inputTextures);
 
     const tileCenterWorldCoordinates = vec2.transformMat2d(

src/graphics/rendering/render-pass/render-pass.ts

@@ -8,21 +8,22 @@ import { UniversalRenderingContext } from '../../graphics-library/universal-rend
 export abstract class RenderPass {
   protected program: UniformArrayAutoScalingProgram;
 
-  constructor(gl: UniversalRenderingContext, protected frame: FrameBuffer) {
+  constructor(
+    protected readonly gl: UniversalRenderingContext,
+    protected frame: FrameBuffer
+  ) {
     this.program = new UniformArrayAutoScalingProgram(gl);
   }
 
   public async initialize(
     shaderSources: [string, string],
     descriptors: Array<DrawableDescriptor>,
-    substitutions: { [name: string]: any } = {},
-    compiler: ParallelCompiler
+    compiler: ParallelCompiler,
+    substitutions: { [name: string]: any } = {}
   ): Promise<void> {
-    await this.program.initialize(shaderSources, descriptors, substitutions, compiler);
+    await this.program.initialize(shaderSources, descriptors, compiler, substitutions);
   }
 
-  public abstract render(commonUniforms: any, inputTexture?: WebGLTexture): void;
-
   public destroy(): void {
     this.frame.destroy();
     this.program.destroy();

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

src/graphics/rendering/settings/default-runtime-settings.ts

@@ -12,4 +12,5 @@ export const defaultRuntimeSettings: RuntimeSettings = {
   backgroundColor: vec4.fromValues(1, 1, 1, 1),
   colorPalette: [],
   ambientLight: vec3.fromValues(0.25, 0.15, 0.25),
+  textures: {},
 };

src/graphics/rendering/settings/runtime-settings.ts

@@ -1,4 +1,5 @@
 import { vec3, vec4 } from 'gl-matrix';
+import { TextureWithOptions } from '../../graphics-library/texture/texture-options';
 
 /**
  * Interface for a configuration object containing the settings
@@ -52,6 +53,18 @@ export interface RuntimeSettings {
    */
   colorPalette: Array<vec3 | vec4>;
 
+  /**
+   * It is possible to use your own textures in your SDF definitions.
+   *
+   * The keys of the object should be the name used to reference them in the GLSL code,
+   * and the values should be the textures themselves or a TextureWithOptions specifying
+   * the texture's [[TextureOptions]].
+   * It can be a canvas, img element, Image and so on.
+   */
+  textures: {
+    [textureName: string]: TexImageSource | TextureWithOptions;
+  };
+
   /**
    * A light affecting every pixel (even the ones inside objects).
    */

src/graphics/rendering/shaders/distance-fs.glsl

@@ -6,6 +6,8 @@ uniform float maxMinDistance;
 uniform float distanceNdcPixelSize;
 in vec2 position;
 
+#define WEBGL2_IS_AVAILABLE
+
 {macroDefinitions}
 
 {declarations}

src/graphics/rendering/shaders/random-fs-100.glsl

@@ -0,0 +1,32 @@
+#version 100
+
+precision lowp float;
+
+varying vec2 uvCoordinates;
+
+uniform float scale;
+uniform float amplitude;
+
+float noise(float x){
+    return fract(sin(x) * 43758.5453123) / 100.0;
+}
+
+float terrain(float x) {
+    float result = 0.0;
+
+    float frequency = 0.01;
+    float amplitude = 1.0;
+  
+    const float pi = 3.141592654;
+    for (int i = 0; i < 8; i++) {
+        result += sin(2.0 * pi * x * frequency - 2.0 * pi * noise(float(i) * 200.0)) * amplitude;
+        frequency *= 1.5;
+        amplitude /= 1.2;
+  }
+
+    return result;
+}
+
+void main() {
+    gl_FragColor = vec4(vec3(terrain(uvCoordinates.x * scale) * amplitude + 0.5), 1.0);
+}

src/graphics/rendering/shaders/random-fs.glsl

@@ -0,0 +1,34 @@
+#version 300 es
+
+precision lowp float;
+
+in vec2 uvCoordinates;
+
+uniform float scale;
+uniform float amplitude;
+
+float noise(float x){
+    return fract(sin(x) * 43758.5453123) / 100.0;
+}
+
+float terrain(float x) {
+    float result = 0.0;
+
+    float frequency = 0.01;
+    float amplitude = 1.0;
+  
+    const float pi = 3.141592654;
+    for (int i = 0; i < 8; i++) {
+        result += sin(2.0 * pi * x * frequency - 2.0 * pi * noise(float(i) * 200.0)) * amplitude;
+        frequency *= 1.5;
+        amplitude /= 1.2;
+    }
+
+    return result;
+}
+
+out vec4 fragmentColor;
+
+void main() {
+    fragmentColor = vec4(vec3(terrain(uvCoordinates.x * scale) * amplitude + 0.5), 1.0);
+}

src/graphics/rendering/shaders/random-vs-100.glsl

@@ -0,0 +1,18 @@
+#version 100
+
+precision lowp float;
+
+attribute vec4 vertexPosition;
+varying vec2 uvCoordinates;
+
+void main() {
+    gl_Position = vec4(vertexPosition.xy, 0.0, 1.0);
+
+    uvCoordinates = (
+        vec3(vertexPosition.xy, 1.0) 
+      * mat3(
+        0.5, 0.0, 0.5,
+        0.0, 0.5, 0.5,
+        0.0, 0.0, 1.0
+    )).xy;
+}

src/graphics/rendering/shaders/random-vs.glsl

@@ -0,0 +1,18 @@
+#version 300 es
+
+precision lowp float;
+
+in vec4 vertexPosition;
+out vec2 uvCoordinates;
+
+void main() {
+    gl_Position = vec4(vertexPosition.xy, 0.0, 1.0);
+
+    uvCoordinates = (
+        vec3(vertexPosition.xy, 1.0) 
+      * mat3(
+        0.5, 0.0, 0.5,
+        0.0, 0.5, 0.5,
+        0.0, 0.0, 1.0
+    )).xy;
+}

src/graphics/rendering/uniforms-provider.ts

@@ -5,6 +5,7 @@ import { UniversalRenderingContext } from '../graphics-library/universal-renderi
 export class UniformsProvider {
   public ambientLight!: vec3;
   public _backgroundColor!: vec4;
+  public textures: { [textureName: string]: number } = {};
 
   private scaleWorldLengthToNDC = 1;
   private transformWorldToNDC = mat2d.create();
@@ -18,6 +19,7 @@ export class UniformsProvider {
   public getUniforms(uniforms: any): any {
     return {
       ...uniforms,
+      ...this.textures,
       ambientLight: this.ambientLight,
       backgroundColor: this._backgroundColor,
       uvToWorld: this.uvToWorld,
@@ -79,7 +81,11 @@ export class UniformsProvider {
   }
 
   public screenToWorldPosition(screenPosition: vec2): vec2 {
-    const resolution = vec2.fromValues(this.gl.canvas.width, this.gl.canvas.height);
+    const { width, height } = (this.gl
+      .canvas as HTMLCanvasElement).getBoundingClientRect();
+
+    const position = vec2.fromValues(screenPosition.x, height - screenPosition.y);
+    const resolution = vec2.fromValues(width, height);
 
     const transform = mat2d.fromTranslation(mat2d.create(), this.viewAreaBottomLeft);
 
@@ -90,6 +96,6 @@ export class UniformsProvider {
     );
     mat2d.translate(transform, transform, vec2.fromValues(0.5, 0.5));
 
-    return vec2.transformMat2d(vec2.create(), screenPosition, transform);
+    return vec2.transformMat2d(vec2.create(), position, transform);
   }
 }