Add textures

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

@@ -0,0 +1,29 @@
+import { vec3, vec4 } from 'gl-matrix';
+import { UniversalRenderingContext } from '../universal-rendering-context';
+import { Texture } from './texture';
+
+/** @internal */
+export class PaletteTexture extends Texture {
+  constructor(gl: UniversalRenderingContext, private readonly paletteSize: number) {
+    super(gl, 1);
+  }
+
+  public setPalette(colors: Array<vec3 | vec4>) {
+    const canvas = document.createElement('canvas');
+    canvas.width = this.paletteSize;
+    canvas.height = 1;
+
+    const ctx = canvas.getContext('2d')!;
+    const imageData = ctx.createImageData(this.paletteSize, 1);
+
+    colors.forEach((c, i) => {
+      imageData.data[4 * i + 0] = c[0] * 255;
+      imageData.data[4 * i + 1] = c[1] * 255;
+      imageData.data[4 * i + 2] = c[2] * 255;
+      imageData.data[4 * i + 3] = c.length == 4 ? c[3] * 255 : 255;
+    });
+    ctx.putImageData(imageData, 0, 0);
+
+    this.setImage(canvas);
+  }
+}

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

@@ -0,0 +1,22 @@
+export enum WrapOptions {
+  CLAMP_TO_EDGE = 'CLAMP_TO_EDGE',
+  REPEAT = 'REPEAT',
+  MIRRORED_REPEAT = 'MIRRORED_REPEAT',
+}
+
+export enum FilteringOptions {
+  LINEAR = 'LINEAR',
+  NEAREST = 'NEAREST',
+}
+
+export interface TextureOptions {
+  wrapS: WrapOptions;
+  wrapT: WrapOptions;
+  minFilter: FilteringOptions;
+  maxFilter: FilteringOptions;
+}
+
+export type TextureWithOptions = {
+  source: TexImageSource;
+  overrides: Partial<TextureOptions>;
+};

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

@@ -0,0 +1,62 @@
+import { UniversalRenderingContext } from '../universal-rendering-context';
+import { FilteringOptions, TextureOptions, WrapOptions } from './texture-options';
+
+/**
+ * @internal
+ */
+export class Texture {
+  protected texture: WebGLTexture;
+
+  constructor(
+    protected readonly gl: UniversalRenderingContext,
+    private textureUnitId: number,
+    textureOptionOverrides: Partial<TextureOptions> = {}
+  ) {
+    const defaultTextureOptions: TextureOptions = {
+      wrapS: WrapOptions.CLAMP_TO_EDGE,
+      wrapT: WrapOptions.CLAMP_TO_EDGE,
+      minFilter: FilteringOptions.NEAREST,
+      maxFilter: FilteringOptions.NEAREST,
+    };
+
+    const textureOptions = {
+      ...defaultTextureOptions,
+      ...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]);
+  }
+
+  public get colorTexture(): WebGLTexture {
+    return this.texture;
+  }
+
+  public bind() {
+    this.gl.activeTexture(this.gl.TEXTURE0 + this.textureUnitId);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+  }
+
+  public setImage(image: TexImageSource) {
+    this.bind();
+
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.gl.RGBA,
+      this.gl.RGBA,
+      this.gl.UNSIGNED_BYTE,
+      image
+    );
+  }
+
+  public destroy() {
+    this.gl.deleteTexture(this.texture);
+  }
+}