Improve color handling approach

src/graphics/rendering/fps-autoscaler.ts

@@ -23,7 +23,7 @@ const settings = {
       finalRenderScale: 1.0,
     },
     {
-      distanceRenderScale: 1.0,
+      distanceRenderScale: 0.5,
       finalRenderScale: 1.0,
     },
   ],

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

@@ -15,8 +15,11 @@ export class DistanceRenderPass extends RenderPass {
     this.drawables.push(drawable);
   }
 
-  public render(commonUniforms: any, ...inputTextures: Array<Texture>) {
+  public render(commonUniforms: any, inputTextures: Array<Texture>) {
     this.frame.bindAndClear(inputTextures);
+    if (this.gl.isWebGL2) {
+      this.gl.drawBuffers([this.gl.COLOR_ATTACHMENT0, this.gl.COLOR_ATTACHMENT1]);
+    }
 
     const stepsInUV = 1 / this.tileMultiplier;
 

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

@@ -14,14 +14,7 @@ export class LightsRenderPass extends RenderPass {
     this.drawables.push(drawable);
   }
 
-  public render(
-    commonUniforms: any,
-    distanceTexture: WebGLTexture,
-    inputTextures: Array<Texture>
-  ) {
-    this.gl.activeTexture(this.gl.TEXTURE0);
-    this.gl.bindTexture(this.gl.TEXTURE_2D, distanceTexture);
-
+  public render(commonUniforms: any, inputTextures: Array<Texture>) {
     this.frame.bindAndClear(inputTextures);
 
     const tileCenterWorldCoordinates = vec2.transformMat2d(

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

@@ -2,11 +2,14 @@ import { vec2 } from 'gl-matrix';
 import { Drawable } from '../../../drawables/drawable';
 import { DrawableDescriptor } from '../../../drawables/drawable-descriptor';
 import { LightDrawable } from '../../../drawables/lights/light-drawable';
+import { colorToString } from '../../../helper/color-to-string';
 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 { ColorTexture } from '../../graphics-library/texture/color-texture';
+import { DistanceTexture } from '../../graphics-library/texture/distance-texture';
 import { PaletteTexture } from '../../graphics-library/texture/palette-texture';
 import { Texture } from '../../graphics-library/texture/texture';
 import { TextureWithOptions } from '../../graphics-library/texture/texture-options';
@@ -56,12 +59,11 @@ 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;
+      let id = 3;
       for (const key in v) {
         this.uniformsProvider.textures[key] = id;
         let texture: Texture;
@@ -113,8 +115,6 @@ export class RendererImplementation implements Renderer {
       vec2.fromValues(canvas.clientWidth, canvas.clientHeight)
     );
 
-    this.queryPrecisions();
-
     this.autoscaler = new FpsAutoscaler({
       distanceRenderScale: (v) =>
         (this.distanceFieldFrameBuffer.renderScale = v as number),
@@ -143,6 +143,7 @@ export class RendererImplementation implements Renderer {
         compiler,
         {
           paletteSize: settings.paletteSize,
+          backgroundColor: colorToString(settings.backgroundColor),
         }
       )
     );
@@ -155,6 +156,7 @@ export class RendererImplementation implements Renderer {
         compiler,
         {
           shadowTraceCount: settings.shadowTraceCount.toString(),
+          backgroundColor: colorToString(settings.backgroundColor),
         }
       )
     );
@@ -162,7 +164,7 @@ export class RendererImplementation implements Renderer {
     await compiler.compilePrograms();
     await Promise.all(promises);
 
-    if (settings.enableStopwatch) {
+    if (settings.enableStopwatch && this.gl.isWebGL2) {
       try {
         this.stopwatch = new WebGlStopwatch(this.gl);
       } catch {
@@ -179,30 +181,6 @@ export class RendererImplementation implements Renderer {
     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)
@@ -235,20 +213,23 @@ export class RendererImplementation implements Renderer {
 
     const common = {
       // texture units
-      distanceTexture: 0,
-      palette: 1,
+      distanceTexture: DistanceTexture.textureUnitId,
+      colorTexture: ColorTexture.textureUnitId,
+      palette: PaletteTexture.textureUnitId,
 
       distanceNdcPixelSize: 2 / Math.max(...this.distanceFieldFrameBuffer.getSize()),
       shadingNdcPixelSize: 2 / Math.max(...this.lightingFrameBuffer.getSize()),
     };
 
-    this.distancePass.render(this.uniformsProvider.getUniforms(common), ...this.textures);
+    this.distancePass.render(this.uniformsProvider.getUniforms(common), [
+      this.palette,
+      ...this.textures,
+    ]);
 
     this.gl.enable(this.gl.BLEND);
     this.lightsPass.render(
       this.uniformsProvider.getUniforms(common),
-      this.distanceFieldFrameBuffer.colorTexture,
-      [this.palette]
+      this.distanceFieldFrameBuffer.textures
     );
     this.gl.disable(this.gl.BLEND);
 

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

@@ -1,4 +1,4 @@
-import { vec3, vec4 } from 'gl-matrix';
+import { vec3 } from 'gl-matrix';
 import { RuntimeSettings } from './runtime-settings';
 
 /**
@@ -9,7 +9,6 @@ export const defaultRuntimeSettings: RuntimeSettings = {
   tileMultiplier: 8,
   isWorldInverted: false,
   lightCutoffDistance: 400,
-  backgroundColor: vec4.fromValues(1, 1, 1, 1),
   colorPalette: [],
   ambientLight: vec3.fromValues(0.25, 0.15, 0.25),
   textures: {},

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

@@ -1,3 +1,4 @@
+import { vec4 } from 'gl-matrix';
 import { StartupSettings } from './startup-settings';
 
 /**
@@ -7,5 +8,6 @@ export const defaultStartupSettings: StartupSettings = {
   shadowTraceCount: 16,
   paletteSize: 256,
   ignoreWebGL2: false,
+  backgroundColor: vec4.fromValues(1, 1, 1, 1),
   enableStopwatch: false,
 };

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

@@ -38,18 +38,13 @@ export interface RuntimeSettings {
    */
   lightCutoffDistance: number;
 
-  /**
-   * The default background color of the scene, can have transparency.
-   */
-  backgroundColor: vec3 | vec4;
-
   /**
    * Its length should be less than the one specified in [[StartupSettings]].paletteSize.
    *
    * The possible colors for the objects. Each color is referenced by its index in the
    * palette.
    *
-   * Can have transparency.
+   * Can have transparency, but only if WebGL2 support is enabled.
    */
   colorPalette: Array<vec3 | vec4>;
 

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

@@ -1,3 +1,5 @@
+import { vec3, vec4 } from 'gl-matrix';
+
 /**
  * Interface for a configuration object containing the settings
  * that need to be given before shader compilation.
@@ -31,6 +33,11 @@ export interface StartupSettings {
    */
   paletteSize: number;
 
+  /**
+   * The default background color of the scene, can have transparency on every platform.
+   */
+  backgroundColor: vec3 | vec4;
+
   /**
    * When set to `true`, rendering will fall back to WebGL
    * even when WebGL2 is present.

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

@@ -6,17 +6,23 @@ uniform float maxMinDistance;
 uniform float distanceNdcPixelSize;
 varying vec2 position;
 
+uniform sampler2D palette;
+
+vec4 readFromPalette(int index) {
+  return texture2D(palette, vec2((float(index) + 0.5) / {paletteSize}, 0.5));
+}
+
+
 {macroDefinitions}
 
 {declarations}
 
 void main() {
-    float minDistance = maxMinDistance;
-    float color = 0.0;
-
-    float objectMinDistance, objectColor;
+    float minDistance = maxMinDistance, objectMinDistance;
+    vec4 color = {backgroundColor};
+    vec4 objectColor;
 
     {functionCalls}
     
-    gl_FragColor = vec4(minDistance * 8.0, color, 0.0, 1.0);
+    gl_FragColor = vec4(color.rgb, minDistance * 8.0);
 }

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

@@ -6,21 +6,28 @@ uniform float maxMinDistance;
 uniform float distanceNdcPixelSize;
 in vec2 position;
 
+uniform sampler2D palette;
+
 #define WEBGL2_IS_AVAILABLE
 
+vec4 readFromPalette(int index) {
+  return texture(palette, vec2((float(index) + 0.5) / {paletteSize}, 0.5));
+}
+
 {macroDefinitions}
 
 {declarations}
 
-out vec2 fragmentColor;
+layout(location = 0) out vec4 fragmentColor;
+layout(location = 1) out float distanceValue;
 
 void main() {
-    float minDistance = maxMinDistance;
-    float color = 0.0;
-
-    float objectMinDistance, objectColor;
+    float minDistance = maxMinDistance, objectMinDistance;
+    vec4 color = {backgroundColor};
+    vec4 objectColor;
 
     {functionCalls}
 
-    fragmentColor = vec2(minDistance, color);
+    distanceValue = minDistance;
+    fragmentColor = color;
 }

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

@@ -10,22 +10,20 @@ precision lowp float;
 uniform float shadingNdcPixelSize;
 uniform vec2 squareToAspectRatioTimes2;
 uniform vec3 ambientLight;
-uniform vec4 backgroundColor;
 
-uniform sampler2D distanceTexture;
-uniform sampler2D palette;
+uniform sampler2D colorTexture;
 
 varying vec2 position;
 varying vec2 uvCoordinates;
 
 float getDistance(in vec2 target, out vec4 color) {
-    vec4 values = texture2D(distanceTexture, target);
-    color = texture2D(palette, vec2(values[1], 0.0));
-    return values[0] / 8.0;
+    vec4 values = texture2D(colorTexture, target);
+    color = vec4(values.rgb, 1.0);
+    return values[3] / 8.0;
 }
 
 float getDistance(in vec2 target) {
-    return texture2D(distanceTexture, target)[0] / 8.0;
+    return texture2D(colorTexture, target)[3] / 8.0;
 }
 
 float shadowTransparency(float startingDistance, float lightCenterDistance, vec2 direction) {
@@ -122,13 +120,13 @@ void main() {
     #endif
     #endif
 
-    vec3 outsideColor = backgroundColor.rgb * lighting;
+    vec3 outsideColor = {backgroundColor}.rgb * lighting;
     vec3 insideColor = colorAtPosition * lightingInside;
 
     float edge = clamp(startingDistance / shadingNdcPixelSize, 0.0, 1.0);
     vec3 antialiasedColor = mix(insideColor, outsideColor, edge);
     gl_FragColor = vec4(
         antialiasedColor,
-        mix(rgbaColorAtPosition.a, backgroundColor.a, step(0.0, startingDistance))
+        rgbaColorAtPosition.a
     );
 }

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

@@ -8,23 +8,21 @@ precision lowp float;
 {macroDefinitions}
 
 uniform float shadingNdcPixelSize;
+uniform float distanceNdcPixelSize;
 uniform vec2 squareToAspectRatioTimes2;
 uniform vec3 ambientLight;
-uniform vec4 backgroundColor;
 
 uniform sampler2D distanceTexture;
-uniform sampler2D palette;
+uniform sampler2D colorTexture;
 
 in vec2 position;
 in vec2 uvCoordinates;
 
-float getDistance(in vec2 target, out vec4 color) {
-    vec4 values = texture(distanceTexture, target);
-    color = texture(palette, vec2(values[1], 0.0));
-    return values[0];
+vec4 getColor(vec2 target) {
+    return texture(colorTexture, target);
 }
 
-float getDistance(in vec2 target) {
+float getDistance(vec2 target) {
     return texture(distanceTexture, target)[0];
 }
 
@@ -83,13 +81,14 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
 
 out vec4 fragmentColor;
 void main() {
-    vec4 rgbaColorAtPosition;
-    float startingDistance = getDistance(uvCoordinates, rgbaColorAtPosition);
-
+    vec4 rgbaColorAtPosition = getColor(uvCoordinates);
     vec3 colorAtPosition = rgbaColorAtPosition.rgb;
 
+    float startingDistance = getDistance(uvCoordinates);
+
+
     vec3 lighting = ambientLight;
-    vec3 lightingInside = lighting;
+    vec3 lightingInside = ambientLight;
     
     #ifdef CIRCLE_LIGHT_COUNT
     #if CIRCLE_LIGHT_COUNT > 0
@@ -142,13 +141,13 @@ void main() {
     #endif
     #endif
 
-    vec3 outsideColor = backgroundColor.rgb * lighting;
+    vec3 outsideColor = {backgroundColor}.rgb * lighting;
     vec3 insideColor = colorAtPosition * lightingInside * INTENSITY_INSIDE_RATIO;
-
+    
     float edge = clamp(startingDistance / shadingNdcPixelSize, 0.0, 1.0);
     vec3 antialiasedColor = mix(insideColor, outsideColor, edge);
     fragmentColor = vec4(
         antialiasedColor,
-        mix(rgbaColorAtPosition.a, backgroundColor.a, step(0.0, startingDistance))
+        rgbaColorAtPosition.a
     );
 }

src/graphics/rendering/uniforms-provider.ts

@@ -1,10 +1,9 @@
-import { mat2d, vec2, vec3, vec4 } from 'gl-matrix';
+import { mat2d, vec2, vec3 } from 'gl-matrix';
 import { UniversalRenderingContext } from '../graphics-library/universal-rendering-context';
 
 /** @internal */
 export class UniformsProvider {
   public ambientLight!: vec3;
-  public _backgroundColor!: vec4;
   public textures: { [textureName: string]: number } = {};
 
   private scaleWorldLengthToNDC = 1;
@@ -21,7 +20,6 @@ export class UniformsProvider {
       ...uniforms,
       ...this.textures,
       ambientLight: this.ambientLight,
-      backgroundColor: this._backgroundColor,
       uvToWorld: this.uvToWorld,
       worldAreaInView: this.worldAreaInView,
       squareToAspectRatio: this.squareToAspectRatio,
@@ -31,14 +29,6 @@ export class UniformsProvider {
     };
   }
 
-  public set backgroundColor(value: vec3 | vec4) {
-    if (value.length === 3) {
-      this.backgroundColor = vec4.fromValues(value[0], value[1], value[2], 1);
-    } else {
-      this._backgroundColor = value as vec4;
-    }
-  }
-
   public getViewArea(): vec2 {
     return this.worldAreaInView;
   }