@lightningjs/renderer 2.1.2 → 2.3.0

package/src/core/lib/WebGlContextWrapper.ts

@@ -45,10 +45,6 @@ export class WebGlContextWrapper {
   private boundArrayBuffer: WebGLBuffer | null;
   private boundElementArrayBuffer: WebGLBuffer | null;
   private curProgram: WebGLProgram | null;
-  private programUniforms: WeakMap<
-    WebGLProgram,
-    Map<WebGLUniformLocation, any[]>
-  > = new WeakMap();
   //#endregion Cached WebGL State
 
   //#region Canvas
@@ -708,22 +704,279 @@ export class WebGlContextWrapper {
     this.curProgram = program;
   }
 
-  setUniform<T extends keyof UniformMethodMap>(
-    type: T,
-    location: WebGLUniformLocation,
-    ...args: UniformMethodMap[T]
+  /**
+   * Sets the value of a single float uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The value to set.
+   */
+  uniform1f(location: WebGLUniformLocation | null, v0: number) {
+    const { gl } = this;
+    gl.uniform1f(location, v0);
+  }
+
+  /**
+   * Sets the value of a float array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of values to set.
+   */
+  uniform1fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
   ) {
-    const { gl, programUniforms } = this;
-    let uniforms = programUniforms.get(this.curProgram!);
-    if (!uniforms) {
-      uniforms = new Map();
-      programUniforms.set(this.curProgram!, uniforms);
-    }
-    const uniformArgs = uniforms.get(location);
-    if (!uniformArgs || !compareArrays(uniformArgs, args)) {
-      uniforms.set(location, args);
-      gl[type](location, ...(args as [never, never, never, never]));
-    }
+    const { gl } = this;
+    gl.uniform1fv(location, value);
+  }
+
+  /**
+   * Sets the value of a single integer uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The value to set.
+   */
+  uniform1i(location: WebGLUniformLocation | null, v0: number) {
+    const { gl } = this;
+    gl.uniform1i(location, v0);
+  }
+
+  /**
+   * Sets the value of an integer array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of values to set.
+   */
+  uniform1iv(
+    location: WebGLUniformLocation | null,
+    value: Int32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform1iv(location, value);
+  }
+
+  /**
+   * Sets the value of a vec2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   */
+  uniform2f(location: WebGLUniformLocation | null, v0: number, v1: number) {
+    const { gl } = this;
+    gl.uniform2f(location, v0, v1);
+  }
+
+  /**
+   * Sets the value of a vec2 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec2 values to set.
+   */
+  uniform2fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform2fv(location, value);
+  }
+
+  /**
+   * Sets the value of a ivec2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   */
+  uniform2i(location: WebGLUniformLocation | null, v0: number, v1: number) {
+    const { gl } = this;
+    gl.uniform2i(location, v0, v1);
+  }
+
+  /**
+   * Sets the value of an ivec2 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec2 values to set.
+   */
+  uniform2iv(
+    location: WebGLUniformLocation | null,
+    value: Int32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform2iv(location, value);
+  }
+
+  /**
+   * Sets the value of a vec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   */
+  uniform3f(
+    location: WebGLUniformLocation | null,
+    v0: number,
+    v1: number,
+    v2: number,
+  ) {
+    const { gl } = this;
+    gl.uniform3f(location, v0, v1, v2);
+  }
+
+  /**
+   * Sets the value of a vec3 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec3 values to set.
+   */
+  uniform3fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform3fv(location, value);
+  }
+
+  /**
+   * Sets the value of a ivec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   */
+  uniform3i(
+    location: WebGLUniformLocation | null,
+    v0: number,
+    v1: number,
+    v2: number,
+  ) {
+    const { gl } = this;
+    gl.uniform3i(location, v0, v1, v2);
+  }
+
+  /**
+   * Sets the value of an ivec3 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec3 values to set.
+   */
+  uniform3iv(
+    location: WebGLUniformLocation | null,
+    value: Int32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform3iv(location, value);
+  }
+
+  /**
+   * Sets the value of a vec4 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   * @param v3 - The fourth component of the vector.
+   */
+  uniform4f(
+    location: WebGLUniformLocation | null,
+    v0: number,
+    v1: number,
+    v2: number,
+    v3: number,
+  ) {
+    const { gl } = this;
+    gl.uniform4f(location, v0, v1, v2, v3);
+  }
+
+  /**
+   * Sets the value of a vec4 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec4 values to set.
+   */
+  uniform4fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform4fv(location, value);
+  }
+
+  /**
+   * Sets the value of a ivec4 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   * @param v3 - The fourth component of the vector.
+   */
+  uniform4i(
+    location: WebGLUniformLocation | null,
+    v0: number,
+    v1: number,
+    v2: number,
+    v3: number,
+  ) {
+    const { gl } = this;
+    gl.uniform4i(location, v0, v1, v2, v3);
+  }
+
+  /**
+   * Sets the value of an ivec4 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec4 values to set.
+   */
+  uniform4iv(
+    location: WebGLUniformLocation | null,
+    value: Int32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform4iv(location, value);
+  }
+
+  /**
+   * Sets the value of a mat2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param transpose - Whether to transpose the matrix.
+   * @param value - The array of mat2 values to set.
+   */
+  uniformMatrix2fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniformMatrix2fv(location, false, value);
+  }
+
+  /**
+   * Sets the value of a mat2 uniform variable.
+   * @param location - The location of the uniform variable.
+   * @param value - The array of mat2 values to set.
+   */
+  uniformMatrix3fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniformMatrix3fv(location, false, value);
+  }
+
+  /**
+   * Sets the value of a mat4 uniform variable.
+   * @param location - The location of the uniform variable.
+   * @param value - The array of mat4 values to set.
+   */
+  uniformMatrix4fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniformMatrix4fv(location, false, value);
   }
 
   /**
@@ -1031,12 +1284,21 @@ export function compareArrays<T>(a: T[], b: T[]): boolean {
   if (a.length !== b.length) {
     return false;
   }
-  return a.every((v, i) => {
-    // Don't bother to compare nested arrays or Float32Arrays
-    if (Array.isArray(v) || v instanceof Float32Array) {
-      return false;
-    } else {
-      return v === b[i];
+
+  let result = false;
+  for (let i = 0; i < a.length; i++) {
+    if (Array.isArray(a[i]) || a[i] instanceof Float32Array) {
+      result = false;
+      break;
     }
-  });
+
+    if (a[i] !== b[i]) {
+      result = false;
+      break;
+    }
+
+    result = true;
+  }
+
+  return result;
 }

package/src/core/renderers/CoreRenderer.ts

@@ -70,6 +70,7 @@ export interface CoreRendererOptions {
   clearColor: number;
   bufferMemory: number;
   contextSpy: ContextSpy | null;
+  forceWebGL2: boolean;
 }
 
 export interface BufferInfo {

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -121,7 +121,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
       this.stage.requestRender();
     });
 
-    const gl = createWebGLContext(canvas, options.contextSpy);
+    const gl = createWebGLContext(
+      canvas,
+      options.forceWebGL2,
+      options.contextSpy,
+    );
     const glw = (this.glw = new WebGlContextWrapper(gl));
 
     const color = getNormalizedRgbaComponents(clearColor);
@@ -619,12 +623,13 @@ export class WebGlCoreRenderer extends CoreRenderer {
       console.log('renderOps', this.renderOps.length);
     }
 
-    this.renderOps.forEach((renderOp, i) => {
+    for (let i = 0, length = this.renderOps.length; i < length; i++) {
+      const renderOp = this.renderOps[i] as WebGlCoreRenderOp;
       if (doLog) {
         console.log('Quads per operation', renderOp.numQuads);
       }
       renderOp.draw();
-    });
+    }
     this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
   }
 

package/src/core/renderers/webgl/WebGlCoreShader.ts

@@ -152,16 +152,6 @@ export abstract class WebGlCoreShader extends CoreShader {
     }
     this.program = program;
 
-    if (webGl2) {
-      const vao = glw.createVertexArray();
-      if (!vao) {
-        throw new Error();
-      }
-      this.vao = vao;
-
-      glw.bindVertexArray(this.vao);
-    }
-
     this.attributeLocations = {} as Record<string, number>;
     this.attributeBuffers = {} as Record<string, number>;
     this.attributeNames = [];
@@ -274,18 +264,23 @@ export abstract class WebGlCoreShader extends CoreShader {
       const { width, height } = renderOp.framebufferDimensions || {};
       // Force pixel ratio to 1.0 for render textures since they are always 1:1
       // the final render texture will be rendered to the screen with the correct pixel ratio
-      this.setUniform('u_pixelRatio', 1.0);
+      glw.uniform1f(this.getUniformLocation('u_pixelRatio'), 1.0);
 
       // Set resolution to the framebuffer dimensions
-      this.setUniform(
-        'u_resolution',
-        new Float32Array([width ?? 0, height ?? 0]),
+      glw.uniform2f(
+        this.getUniformLocation('u_resolution'),
+        width ?? 0,
+        height ?? 0,
       );
     } else {
-      this.setUniform('u_pixelRatio', renderOp.options.pixelRatio);
-      this.setUniform(
-        'u_resolution',
-        new Float32Array([glw.canvas.width, glw.canvas.height]),
+      glw.uniform1f(
+        this.getUniformLocation('u_pixelRatio'),
+        renderOp.options.pixelRatio,
+      );
+      glw.uniform2f(
+        this.getUniformLocation('u_resolution'),
+        glw.canvas.width,
+        glw.canvas.height,
       );
     }
 
@@ -297,26 +292,25 @@ export abstract class WebGlCoreShader extends CoreShader {
         if (!dimensions) {
           dimensions = renderOp.dimensions;
         }
-        this.setUniform('u_dimensions', [dimensions.width, dimensions.height]);
+        glw.uniform2f(
+          this.getUniformLocation('u_dimensions'),
+          dimensions.width,
+          dimensions.height,
+        );
       }
       if (hasOwn(props, '$alpha')) {
         let alpha = props.$alpha as number | null;
         if (!alpha) {
           alpha = renderOp.alpha;
         }
-        this.setUniform('u_alpha', alpha);
+        glw.uniform1f(this.getUniformLocation('u_alpha'), alpha);
       }
       this.bindProps(props);
     }
   }
 
-  setUniform(name: string, ...value: any[]): void {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unsafe-argument
-    this.glw.setUniform(
-      this.uniformTypes[name]!,
-      this.uniformLocations[name]!,
-      ...(value as any),
-    );
+  getUniformLocation(name: string): WebGLUniformLocation | null {
+    return this.uniformLocations[name] || null;
   }
 
   bindBufferCollection(buffer: BufferCollection) {
@@ -346,7 +340,6 @@ export abstract class WebGlCoreShader extends CoreShader {
   }
 
   override attach(): void {
-    this.glw.useProgram(this.program);
     this.glw.useProgram(this.program);
     if (this.glw.isWebGl2() && this.vao) {
       this.glw.bindVertexArray(this.vao);

package/src/core/renderers/webgl/shaders/DefaultShaderBatched.ts

@@ -57,7 +57,7 @@ export class DefaultShaderBatched extends WebGlCoreShader {
       glw.bindTexture(t.ctxTexture);
     });
     const samplers = Array.from(Array(texture.length).keys());
-    this.setUniform('u_textures[0]', samplers);
+    this.glw.uniform1iv(this.getUniformLocation('u_textures[0]'), samplers);
   }
 
   static override shaderSources: ShaderProgramSources = {

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -22,7 +22,7 @@ import {
   type DimensionsShaderProp,
   type AlphaShaderProp,
 } from '../WebGlCoreShader.js';
-import type { UniformInfo } from '../internal/ShaderUtils.js';
+import { type UniformInfo } from '../internal/ShaderUtils.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
 import {
   ShaderEffect,
@@ -33,6 +33,7 @@ import {
 } from './effects/ShaderEffect.js';
 import type { EffectMap } from '../../../CoreShaderManager.js';
 import { assertTruthy } from '../../../../utils.js';
+import type { UniformMethodMap } from '../../../lib/WebGlContextWrapper.js';
 
 export interface DynamicShaderProps
   extends DimensionsShaderProp,
@@ -74,6 +75,7 @@ const getResolvedEffect = (
       const result: ShaderEffectValueMap = {
         value: defaultPropValues[key] as ShaderEffectUniform['value'],
         programValue: undefined,
+        method: uniform.method,
         updateOnBind: uniform.updateOnBind || false,
         hasValidator: uniform.validator !== undefined,
         hasProgramValueUpdater: uniform.updateProgramValue !== undefined,
@@ -142,13 +144,82 @@ export class DynamicShader extends WebGlCoreShader {
     glw.bindTexture(textures[0]!.ctxTexture);
   }
 
+  bindUniformMethods(props: DynamicShaderProps): void {
+    const glw = this.glw;
+    const effects = props.effects;
+    const effectsL = effects!.length;
+    for (let i = 0; i < effectsL; i++) {
+      const uniformInfo = this.effects[i]!.uniformInfo;
+      const effect = effects![i]! as Record<string, any>;
+      const propKeys = Object.keys(effect.props);
+      const propsLength = propKeys.length;
+      for (let j = 0; j < propsLength; j++) {
+        const key = propKeys[j]!;
+        const method = effect.props[key].method as keyof UniformMethodMap;
+        const location = this.getUniformLocation(uniformInfo[key]!.name);
+
+        if (
+          method === 'uniform2fv' ||
+          method === 'uniform2iv' ||
+          //uniform === 'uniform3fv	' || <--- check why this isnt recognized
+          method === 'uniform3iv' ||
+          method === 'uniform4fv' ||
+          method === 'uniform4iv' ||
+          method === 'uniformMatrix2fv' ||
+          method === 'uniformMatrix3fv' ||
+          method === 'uniformMatrix4fv' ||
+          method === 'uniform1f' ||
+          method === 'uniform1fv' ||
+          method === 'uniform1i' ||
+          method === 'uniform1iv'
+        ) {
+          effect.props[key].setUniformValue = function () {
+            glw[method](location, this.programValue);
+          };
+          continue;
+        }
+
+        if (method === 'uniform2f' || method === 'uniform2i') {
+          effect.props[key].setUniformValue = function () {
+            glw[method](location, this.programValue[0]!, this.programValue[1]!);
+          };
+          continue;
+        }
+
+        if (method === 'uniform3f' || method === 'uniform3i') {
+          effect.props[key].setUniformValue = function () {
+            glw[method](
+              location,
+              this.programValue[0]!,
+              this.programValue[1]!,
+              this.programValue[2]!,
+            );
+          };
+          continue;
+        }
+
+        if (method === 'uniform4f' || method === 'uniform4i') {
+          effect.props[key].setUniformValue = function () {
+            glw[method](
+              location,
+              this.programValue[0]!,
+              this.programValue[1]!,
+              this.programValue[2]!,
+              this.programValue[3]!,
+            );
+          };
+          continue;
+        }
+      }
+    }
+  }
+
   protected override bindProps(props: Required<DynamicShaderProps>): void {
     const effects = props.effects;
     const effectsL = effects.length;
     let i = 0;
     for (; i < effectsL; i++) {
       const effect = effects[i]! as Record<string, any>;
-      const uniformInfo = this.effects[i]!.uniformInfo;
       const propKeys = Object.keys(effect.props);
       const propsLength = propKeys.length;
       let j = 0;
@@ -162,7 +233,8 @@ export class DynamicShader extends WebGlCoreShader {
             ]?.uniforms[key];
           uniform?.updateProgramValue!(effect.props[key], props);
         }
-        this.setUniform(uniformInfo[key]!.name, effect.props[key].programValue);
+
+        prop.setUniformValue();
       }
     }
   }

package/src/core/renderers/webgl/shaders/RoundedRectangle.ts

@@ -80,7 +80,10 @@ export class RoundedRectangle extends WebGlCoreShader {
     const radiusFactor =
       Math.min(props.$dimensions.width, props.$dimensions.height) /
       (2.0 * props.radius);
-    this.setUniform('u_radius', props.radius * Math.min(radiusFactor, 1));
+    this.glw.uniform1f(
+      this.getUniformLocation('u_radius'),
+      props.radius * Math.min(radiusFactor, 1),
+    );
   }
 
   override canBatchShaderProps(

package/src/core/renderers/webgl/shaders/SdfShader.ts

@@ -89,18 +89,33 @@ export class SdfShader extends WebGlCoreShader {
     const resolvedProps = SdfShader.resolveDefaults(props);
     for (const key in resolvedProps) {
       if (key === 'transform') {
-        this.setUniform('u_transform', false, resolvedProps[key]);
+        this.glw.uniformMatrix3fv(
+          this.getUniformLocation('u_transform'),
+          resolvedProps[key],
+        );
       } else if (key === 'scrollY') {
-        this.setUniform('u_scrollY', resolvedProps[key]);
+        this.glw.uniform1f(
+          this.getUniformLocation('u_scrollY'),
+          resolvedProps[key],
+        );
       } else if (key === 'color') {
         const components = getNormalizedRgbaComponents(resolvedProps.color);
-        this.setUniform('u_color', components);
+        this.glw.uniform4fv(this.getUniformLocation('u_color'), components);
       } else if (key === 'size') {
-        this.setUniform('u_size', resolvedProps[key]);
+        this.glw.uniform1f(
+          this.getUniformLocation('u_size'),
+          resolvedProps[key],
+        );
       } else if (key === 'distanceRange') {
-        this.setUniform('u_distanceRange', resolvedProps[key]);
+        this.glw.uniform1f(
+          this.getUniformLocation('u_distanceRange'),
+          resolvedProps[key],
+        );
       } else if (key === 'debug') {
-        this.setUniform('u_debug', resolvedProps[key] ? 1.0 : 0.0);
+        this.glw.uniform1i(
+          this.getUniformLocation('u_debug'),
+          resolvedProps[key] ? 1 : 0,
+        );
       }
     }
   }

package/src/core/renderers/webgl/shaders/effects/ShaderEffect.ts

@@ -1,5 +1,6 @@
 import type { EffectMap } from '../../../../CoreShaderManager.js';
 import type { ExtractProps } from '../../../../CoreTextureManager.js';
+import type { WebGlContextWrapper } from '../../../../lib/WebGlContextWrapper.js';
 import type {
   AlphaShaderProp,
   DimensionsShaderProp,
@@ -89,6 +90,8 @@ export interface ShaderEffectValueMap
     AlphaShaderProp {
   value: ShaderEffectUniform['value'];
   programValue: number | Float32Array | undefined;
+  method: keyof UniformMethodMap;
+  setUniformValue?: () => void | null;
   hasValidator: boolean;
   hasProgramValueUpdater: boolean;
   updateOnBind: boolean;