Improve color handling approach

src/graphics/graphics-library/frame-buffer/intermediate-frame-buffer.ts

@@ -1,33 +1,23 @@
-import { enableExtension } from '../helper/enable-extension';
+import { ColorTexture } from '../texture/color-texture';
+import { DistanceTexture } from '../texture/distance-texture';
+import { Texture } from '../texture/texture';
 import { UniversalRenderingContext } from '../universal-rendering-context';
 import { FrameBuffer } from './frame-buffer';
 
 /** @internal */
 export class IntermediateFrameBuffer extends FrameBuffer {
-  private frameTexture: WebGLTexture;
-  private floatEnabled = false;
-  private floatLinearEnabled = false;
+  private distanceTexture?: DistanceTexture;
+  private colorTexture: ColorTexture;
 
   constructor(gl: UniversalRenderingContext) {
     super(gl);
 
-    try {
-      enableExtension(gl, 'EXT_color_buffer_float');
-      this.floatEnabled = true;
+    this.colorTexture = new ColorTexture(gl);
 
-      enableExtension(gl, 'OES_texture_float_linear');
-      this.floatLinearEnabled = true;
-    } catch {
-      // it's okay
+    if (gl.isWebGL2) {
+      this.distanceTexture = new DistanceTexture(gl);
     }
 
-    // can only return null on lost context
-    gl.activeTexture(gl.TEXTURE0);
-
-    this.frameTexture = this.gl.createTexture()!;
-    this.configureTexture();
-
-    // can only return null on lost context
     this.frameBuffer = this.gl.createFramebuffer()!;
     this.configureFrameBuffer();
 
@@ -35,74 +25,48 @@ export class IntermediateFrameBuffer extends FrameBuffer {
   }
 
   public destroy(): void {
-    this.gl.deleteTexture(this.frameTexture);
+    if (this.distanceTexture) {
+      this.gl.deleteTexture(this.distanceTexture);
+    }
+    this.gl.deleteTexture(this.colorTexture);
+    this.gl.deleteFramebuffer(this.frameBuffer);
   }
 
-  public get colorTexture(): WebGLTexture {
-    return this.frameTexture;
+  public get textures(): Array<Texture> {
+    return this.distanceTexture
+      ? [this.distanceTexture, this.colorTexture]
+      : [this.colorTexture];
   }
 
   public setSize(): boolean {
     const hasChanged = super.setSize();
 
     if (hasChanged) {
-      this.bind();
-
-      this.gl.texImage2D(
-        this.gl.TEXTURE_2D,
-        0,
-        this.floatEnabled ? this.gl.RG16F : this.gl.RGB,
-        this.size.x,
-        this.size.y,
-        0,
-        this.floatEnabled ? this.gl.RG : this.gl.RGB,
-        this.floatEnabled ? this.gl.FLOAT : this.gl.UNSIGNED_BYTE,
-        null
-      );
+      this.colorTexture.setSize(this.size);
+      this.distanceTexture?.setSize(this.size);
     }
 
     return hasChanged;
   }
 
-  private bind() {
-    this.gl.activeTexture(this.gl.TEXTURE0);
-    this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
-  }
-
-  private configureTexture() {
-    this.bind();
-
-    this.gl.texParameteri(
-      this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_MAG_FILTER,
-      this.floatLinearEnabled ? this.gl.LINEAR : this.gl.NEAREST
-    );
-    this.gl.texParameteri(
-      this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_MIN_FILTER,
-      this.floatLinearEnabled ? this.gl.LINEAR : this.gl.NEAREST
-    );
-    this.gl.texParameteri(
-      this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_WRAP_S,
-      this.gl.CLAMP_TO_EDGE
-    );
-    this.gl.texParameteri(
-      this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_WRAP_T,
-      this.gl.CLAMP_TO_EDGE
-    );
-  }
-
   private configureFrameBuffer() {
     this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
-    const attachmentPoint = this.gl.COLOR_ATTACHMENT0;
     this.gl.framebufferTexture2D(
       this.gl.FRAMEBUFFER,
-      attachmentPoint,
+      this.gl.COLOR_ATTACHMENT0,
       this.gl.TEXTURE_2D,
-      this.frameTexture,
+      this.colorTexture.colorTexture,
       0
     );
+
+    if (this.gl.isWebGL2) {
+      this.gl.framebufferTexture2D(
+        this.gl.FRAMEBUFFER,
+        this.gl.COLOR_ATTACHMENT1,
+        this.gl.TEXTURE_2D,
+        this.distanceTexture!.colorTexture,
+        0
+      );
+    }
   }
 }

src/graphics/graphics-library/program/uniform-array-autoscaling-program.ts

@@ -174,9 +174,9 @@ export class UniformArrayAutoScalingProgram implements IProgram {
           objectMinDistance = ${
             descriptors[i].sdf!.distanceFunctionName
           }(position, objectColor);
-
+          
           color = mix(
-            objectColor / {paletteSize},
+            objectColor,
             color,
             ${
               descriptors[i].sdf?.isInverted

src/graphics/graphics-library/texture/color-texture.ts

@@ -0,0 +1,31 @@
+import { vec2 } from 'gl-matrix';
+import { UniversalRenderingContext } from '../universal-rendering-context';
+import { Texture } from './texture';
+import { FilteringOptions } from './texture-options';
+
+/** @internal */
+export class ColorTexture extends Texture {
+  public static readonly textureUnitId = 0;
+
+  constructor(gl: UniversalRenderingContext) {
+    super(gl, ColorTexture.textureUnitId, {
+      minFilter: FilteringOptions.LINEAR,
+      maxFilter: FilteringOptions.LINEAR,
+    });
+  }
+
+  public setSize(size: vec2) {
+    this.bind();
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.gl.RGBA,
+      size.x,
+      size.y,
+      0,
+      this.gl.RGBA,
+      this.gl.UNSIGNED_BYTE,
+      null
+    );
+  }
+}

src/graphics/graphics-library/texture/distance-texture.ts

@@ -0,0 +1,53 @@
+import { vec2 } from 'gl-matrix';
+import { enableExtension } from '../helper/enable-extension';
+import { Texture } from './texture';
+import { FilteringOptions } from './texture-options';
+
+/** @internal */
+export class DistanceTexture extends Texture {
+  public static readonly textureUnitId = 1;
+
+  private floatEnabled = false;
+  private floatLinearEnabled = false;
+
+  constructor(gl: WebGL2RenderingContext) {
+    super(gl, DistanceTexture.textureUnitId, {
+      minFilter: FilteringOptions.NEAREST,
+      maxFilter: FilteringOptions.NEAREST,
+    });
+
+    try {
+      enableExtension(gl, 'EXT_color_buffer_float');
+      this.floatEnabled = true;
+
+      enableExtension(gl, 'OES_texture_float_linear');
+      this.floatLinearEnabled = true;
+    } catch {
+      // it's okay
+    }
+
+    if (this.floatLinearEnabled) {
+      this.setTextureOptions({
+        minFilter: FilteringOptions.LINEAR,
+        maxFilter: FilteringOptions.LINEAR,
+      });
+    }
+  }
+
+  public setSize(size: vec2) {
+    this.bind();
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.floatEnabled ? (this.gl as WebGL2RenderingContext).R16F : this.gl.RGBA,
+      size.x,
+      size.y,
+      0,
+      this.floatEnabled ? (this.gl as WebGL2RenderingContext).RED : this.gl.RGBA,
+      this.floatEnabled
+        ? (this.gl as WebGL2RenderingContext).FLOAT
+        : this.gl.UNSIGNED_BYTE,
+      null
+    );
+  }
+}

src/graphics/graphics-library/texture/palette-texture.ts

@@ -4,8 +4,10 @@ import { Texture } from './texture';
 
 /** @internal */
 export class PaletteTexture extends Texture {
+  public static readonly textureUnitId = 2;
+
   constructor(gl: UniversalRenderingContext, private readonly paletteSize: number) {
-    super(gl, 1);
+    super(gl, PaletteTexture.textureUnitId);
   }
 
   public setPalette(colors: Array<vec3 | vec4>) {

src/graphics/graphics-library/texture/texture.ts

@@ -1,4 +1,3 @@
-import { UniversalRenderingContext } from '../universal-rendering-context';
 import { FilteringOptions, TextureOptions, WrapOptions } from './texture-options';
 
 /**
@@ -8,10 +7,17 @@ export class Texture {
   protected texture: WebGLTexture;
 
   constructor(
-    protected readonly gl: UniversalRenderingContext,
+    protected readonly gl: WebGLRenderingContext | WebGL2RenderingContext,
     private textureUnitId: number,
     textureOptionOverrides: Partial<TextureOptions> = {}
   ) {
+    this.texture = gl.createTexture()!;
+
+    this.bind();
+    this.setTextureOptions(textureOptionOverrides);
+  }
+
+  public setTextureOptions(textureOptionOverrides: Partial<TextureOptions> = {}) {
     const defaultTextureOptions: TextureOptions = {
       wrapS: WrapOptions.CLAMP_TO_EDGE,
       wrapT: WrapOptions.CLAMP_TO_EDGE,
@@ -24,14 +30,28 @@ export class Texture {
       ...textureOptionOverrides,
     };
 
-    this.texture = gl.createTexture()!;
-
     this.bind();
 
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl[textureOptions.wrapS]);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl[textureOptions.wrapT]);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl[textureOptions.minFilter]);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl[textureOptions.maxFilter]);
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_WRAP_S,
+      this.gl[textureOptions.wrapS]
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_WRAP_T,
+      this.gl[textureOptions.wrapT]
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_MIN_FILTER,
+      this.gl[textureOptions.minFilter]
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_MAG_FILTER,
+      this.gl[textureOptions.maxFilter]
+    );
   }
 
   public get colorTexture(): WebGLTexture {