fix: type safety for WebGL constants and preliminary blend mode

src/gfx/apis/webgl2/WebGL2Device.ts

@@ -2,20 +2,19 @@ import Device from '../../Device';
 import ShaderRegistry from '../../ShaderRegistry';
 import { ShaderType } from '../../Shader';
 
-// import constantsFor from './constants';
-
+import constantsFor from './constants';
 
 class WebGL2Device extends Device {
   gl: WebGL2RenderingContext;
   shaders: ShaderRegistry;
+  constants;
 
   constructor(canvas: HTMLCanvasElement) {
     super();
 
     // TODO: Handle context loss
     this.gl = canvas.getContext('webgl2')!;
-    // TODO: Constants
-    // this.constants = constantsFor(this.gl);
+    this.constants = constantsFor(this.gl);
 
     this.shaders = new ShaderRegistry((type, name) => {
       const ext = type === 'pixel' ? 'frag' : 'vert';

src/gfx/apis/webgl2/constants.ts

@@ -5,98 +5,84 @@ import {
   PrimitiveType,
 } from '../../types';
 
-const cubeMapFaces = {
-  0: 'TEXTURE_CUBE_MAP_POSITIVE_X',
-  1: 'TEXTURE_CUBE_MAP_NEGATIVE_X',
-  2: 'TEXTURE_CUBE_MAP_POSITIVE_Y',
-  3: 'TEXTURE_CUBE_MAP_NEGATIVE_Y',
-  4: 'TEXTURE_CUBE_MAP_POSITIVE_Z',
-  5: 'TEXTURE_CUBE_MAP_NEGATIVE_Z',
-} as const;
+import { PickByType } from '../../../utils';
 
-const blendDestinations = {
-  [BlendMode.Opaque]: 'ZERO',
-  [BlendMode.AlphaKey]: 'ZERO',
-  [BlendMode.Alpha]: 'ONE_MINUS_SRC_ALPHA',
-  [BlendMode.Add]: 'ONE',
-  [BlendMode.Mod]: 'ZERO',
-  [BlendMode.Mod2x]: 'SRC_COLOR',
-  [BlendMode.ModAdd]: 'ONE',
-  [BlendMode.InvSrcAlphaAdd]: 'ONE',
-  [BlendMode.InvSrcAlphaOpaque]: 'ZERO',
-  [BlendMode.SrcAlphaOpaque]: 'ZERO',
-  [BlendMode.NoAlphaAdd]: 'ONE',
-  [BlendMode.ConstantAlpha]: 'ONE_MINUS_CONSTANT_ALPHA',
-} as const;
+export default (gl: WebGL2RenderingContext) => {
+  const resolve = (prop: keyof PickByType<WebGL2RenderingContext, number>): number => {
+    const constant = gl[prop];
+      if (constant === undefined) {
+        throw new Error(`Could not find WebGL2 constant: ${prop}`);
+      }
+      return constant;
+  };
 
-const blendSources = {
-  [BlendMode.Opaque]: 'ONE',
-  [BlendMode.AlphaKey]: 'ONE',
-  [BlendMode.Alpha]: 'SRC_ALPHA',
-  [BlendMode.Add]: 'SRC_ALPHA',
-  [BlendMode.Mod]: 'DST_COLOR',
-  [BlendMode.Mod2x]: 'DST_COLOR',
-  [BlendMode.ModAdd]: 'DST_COLOR',
-  [BlendMode.InvSrcAlphaAdd]: 'ONE_MINUS_SRC_ALPHA',
-  [BlendMode.InvSrcAlphaOpaque]: 'ONE_MINUS_SRC_ALPHA',
-  [BlendMode.SrcAlphaOpaque]: 'SRC_ALPHA',
-  [BlendMode.NoAlphaAdd]: 'ONE',
-  [BlendMode.ConstantAlpha]: 'CONSTANT_ALPHA',
-} as const;
+  const constants = {
+    cubeMapFaces: {
+      0: resolve('TEXTURE_CUBE_MAP_POSITIVE_X'),
+      1: resolve('TEXTURE_CUBE_MAP_NEGATIVE_X'),
+      2: resolve('TEXTURE_CUBE_MAP_POSITIVE_Y'),
+      3: resolve('TEXTURE_CUBE_MAP_NEGATIVE_Y'),
+      4: resolve('TEXTURE_CUBE_MAP_POSITIVE_Z'),
+      5: resolve('TEXTURE_CUBE_MAP_NEGATIVE_Z'),
+    },
 
-// TODO: Texture format
+    blendDestinations: {
+      [BlendMode.Opaque]: resolve('ZERO'),
+      [BlendMode.AlphaKey]: resolve('ZERO'),
+      [BlendMode.Alpha]: resolve('ONE_MINUS_SRC_ALPHA'),
+      [BlendMode.Add]: resolve('ONE'),
+      [BlendMode.Mod]: resolve('ZERO'),
+      [BlendMode.Mod2x]: resolve('SRC_COLOR'),
+      [BlendMode.ModAdd]: resolve('ONE'),
+      [BlendMode.InvSrcAlphaAdd]: resolve('ONE'),
+      [BlendMode.InvSrcAlphaOpaque]: resolve('ZERO'),
+      [BlendMode.SrcAlphaOpaque]: resolve('ZERO'),
+      [BlendMode.NoAlphaAdd]: resolve('ONE'),
+      [BlendMode.ConstantAlpha]: resolve('ONE_MINUS_CONSTANT_ALPHA'),
+    },
 
-const bufferFormatByPoolTarget = {
-  [PoolTarget.Vertex]: 'ZERO',
-  [PoolTarget.Index]: 'UNSIGNED_SHORT',
-} as const;
+    blendSources: {
+      [BlendMode.Opaque]: resolve('ONE'),
+      [BlendMode.AlphaKey]: resolve('ONE'),
+      [BlendMode.Alpha]: resolve('SRC_ALPHA'),
+      [BlendMode.Add]: resolve('SRC_ALPHA'),
+      [BlendMode.Mod]: resolve('DST_COLOR'),
+      [BlendMode.Mod2x]: resolve('DST_COLOR'),
+      [BlendMode.ModAdd]: resolve('DST_COLOR'),
+      [BlendMode.InvSrcAlphaAdd]: resolve('ONE_MINUS_SRC_ALPHA'),
+      [BlendMode.InvSrcAlphaOpaque]: resolve('ONE_MINUS_SRC_ALPHA'),
+      [BlendMode.SrcAlphaOpaque]: resolve('SRC_ALPHA'),
+      [BlendMode.NoAlphaAdd]: resolve('ONE'),
+      [BlendMode.ConstantAlpha]: resolve('CONSTANT_ALPHA'),
+    },
 
-const bufferTypeByPooltarget = {
-  [PoolTarget.Vertex]: 'ARRAY_BUFFER',
-  [PoolTarget.Index]: 'ELEMENT_ARRAY_BUFFER',
-} as const;
+    // TODO: Texture format
 
-const bufferUsageByPoolTarget = {
-  [PoolUsage.Static]: 'STATIC_DRAW',
-  [PoolUsage.Dynamic]: 'DYNAMIC_DRAW',
-  [PoolUsage.Stream]: 'DYNAMIC_DRAW',
-} as const;
+    bufferFormatByPoolTarget: {
+      [PoolTarget.Vertex]: resolve('ZERO'),
+      [PoolTarget.Index]: resolve('UNSIGNED_SHORT'),
+    },
 
-const primitiveTypes = {
-  [PrimitiveType.Points]: 'POINTS',
-  [PrimitiveType.Lines]: 'LINES',
-  [PrimitiveType.LineStrip]: 'LINE_STRIP',
-  [PrimitiveType.Triangles]: 'TRIANGLES',
-  [PrimitiveType.TriangleStrip]: 'TRIANGLE_STRIP',
-  [PrimitiveType.TriangleFan]: 'TRIANGLE_FAN',
-} as const;
+    bufferTypeByPooltarget: {
+      [PoolTarget.Vertex]: resolve('ARRAY_BUFFER'),
+      [PoolTarget.Index]: resolve('ELEMENT_ARRAY_BUFFER'),
+    },
 
-export default (gl: WebGL2RenderingContext) => {
-  const constants = {};
+    bufferUsageByPoolTarget: {
+      [PoolUsage.Static]: resolve('STATIC_DRAW'),
+      [PoolUsage.Dynamic]: resolve('DYNAMIC_DRAW'),
+      [PoolUsage.Stream]: resolve('DYNAMIC_DRAW'),
+    },
 
-  const categories = {
-    cubeMapFaces,
-    blendDestinations,
-    blendSources,
-    bufferFormatByPoolTarget,
-    bufferTypeByPooltarget,
-    bufferUsageByPoolTarget,
-    primitiveTypes,
-  } as const;
-
-  for (const [name, category] of Object.entries(categories)) {
-    const entry = {};
-    for (const [index, prop] of Object.entries(category)) {
-      const constant = gl[prop];
-      if (constant === undefined) {
-        throw new Error(`Could not find WebGL2 constant: ${prop}`);
-      }
-      // @ts-expect-error: currently unused (and untyped)
-      entry[index] = constant;
-    }
-    // @ts-expect-error: currently unused (and untyped)
-    constants[name] = entry;
-  }
+    primitiveTypes: {
+      [PrimitiveType.Points]: resolve('POINTS'),
+      [PrimitiveType.Lines]: resolve('LINES'),
+      [PrimitiveType.LineStrip]: resolve('LINE_STRIP'),
+      [PrimitiveType.Triangles]: resolve('TRIANGLES'),
+      [PrimitiveType.TriangleStrip]: resolve('TRIANGLE_STRIP'),
+      [PrimitiveType.TriangleFan]: resolve('TRIANGLE_FAN'),
+    },
+  };
 
   return constants;
 };

src/gfx/types.ts

@@ -13,7 +13,6 @@ export enum BlendMode {
   SrcAlphaOpaque = 9,
   NoAlphaAdd = 10,
   ConstantAlpha = 11,
-  Last = 12,
 }
 
 export enum PoolHintBit {
@@ -26,14 +25,12 @@ export enum PoolHintBit {
 export enum PoolTarget {
   Vertex = 0,
   Index = 1,
-  Last = 2,
 }
 
 export enum PoolUsage {
   Static = 0,
   Dynamic = 1,
   Stream = 2,
-  Last = 3,
 }
 
 export enum PrimitiveType {
@@ -43,7 +40,6 @@ export enum PrimitiveType {
   Triangles = 3,
   TriangleStrip = 4,
   TriangleFan = 5,
-  Last = 6,
 }
 
 export enum RenderStateType {
@@ -133,7 +129,6 @@ export enum RenderStateType {
   PointSprite = 83,
   Unk84 = 84,
   ColorMaterial = 85,
-  Last = 86,
 }
 
 export enum TextureFilter {
@@ -192,5 +187,4 @@ export enum VertexBufferFormat {
   PT2 = 11,
   PBNT2 = 12,
   PNC2T2 = 13,
-  Last = 14,
 }

src/ui/components/abstract/LayoutFrame.ts

@@ -14,6 +14,7 @@ import {
   NDCtoDDCHeight,
   NDCtoDDCWidth,
   Status,
+  enumRecordFor,
   extractDimensionsFrom,
   stringToBoolean,
 } from '../../../utils';
@@ -82,11 +83,7 @@ class LayoutFrame {
     this.resizeList = LinkedList.using('link');
     this.resizeCounter = 0;
 
-    this.points = [
-      null, null, null,
-      null, null, null,
-      null, null, null,
-    ];
+    this.points = enumRecordFor(FramePointType, (_type) => null);
   }
 
   // Note: LayoutFrame is used as an auxiliary baseclass using the `multipleClasses` utility, so creating this

src/ui/rendering/Renderer.ts

@@ -22,7 +22,7 @@ class Renderer {
 
   draw(batch: RenderBatch) {
     const root = UIRoot.instance;
-    const { gl } = (Device.instance as WebGL2Device);
+    const { constants, gl } = (Device.instance as WebGL2Device);
     const { pixelShader, vertexShader } = this;
 
     if (!this.program) {
@@ -49,6 +49,14 @@ class Renderer {
       for (const mesh of batch.meshes) {
         const { image } = mesh.texture;
 
+        // TODO: Is this correct?
+        if (mesh.blendMode) {
+          gl.enable(gl.BLEND);
+          gl.blendFunc(constants.blendSources[mesh.blendMode], constants.blendDestinations[mesh.blendMode]);
+        } else {
+          gl.disable(gl.BLEND);
+        }
+
         const texture = gl.createTexture();
         gl.activeTexture(gl.TEXTURE0 + 0);
         gl.bindTexture(gl.TEXTURE_2D, texture);

src/utils/types.ts

@@ -25,6 +25,11 @@ export function enumSizeFor<T extends string | number>(enumeration: EnumType<T>)
   return enumValuesFor(enumeration).length;
 }
 
+// See: https://stackoverflow.com/a/69756175
+export type PickByType<T, Value> = {
+  [P in keyof T as T[P] extends Value | undefined ? P : never]: T[P]
+}
+
 // See: https://github.com/microsoft/TypeScript/issues/5863#issuecomment-1336204919
 export type ThisConstructor<
   T extends { prototype: unknown } = { prototype: unknown },